:root{--c:#3d5d8f;--d:#8a5a9e}
.products.multi{grid-template-columns:1fr 1fr;gap:14px}
.products.multi[data-count="3"]{grid-template-columns:repeat(3,1fr)}
.products.multi[data-count="4"]{grid-template-columns:1fr 1fr}
.product legend{display:flex;align-items:center;gap:6px;width:100%}
.product legend .tag{display:inline-grid;place-content:center;width:28px;height:28px;border-radius:8px;background:var(--a);color:#fff;font-size:15px;font-weight:800}
.product-b legend .tag{background:var(--b)}.product-c legend .tag{background:var(--c)}.product-d legend .tag{background:var(--d)}
.product-c{background:#f7f9fd;border-color:#dde3ee}.product-d{background:#fbf7fd;border-color:#e8dfee}
.product legend .name{font-weight:700}
.product .remove{margin-left:auto;border:0;background:#eef0ea;border-radius:50%;width:30px;height:30px;font-size:16px;line-height:1;color:var(--muted)}
.product{animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.item-tools{display:flex;gap:8px;margin:14px 0 0;flex-wrap:wrap}
.item-tools button{border:1px dashed #9fb0a0;background:#fbfcf8;border-radius:12px;min-height:46px;padding:8px 14px;font-weight:700;font-size:13px;flex:1}
.item-tools button small{font-weight:500;color:var(--muted)}
.item-tools .swap-inline{border-style:solid;flex:0 0 auto}
.result{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.result.in{opacity:1;transform:none}
.reversal{display:inline-block;background:var(--ink);color:var(--yellow);font-weight:800;font-size:13px;border-radius:99px;padding:6px 14px;margin:10px 0 0}
.ranking{list-style:none;margin:18px 0 10px;padding:0;display:grid;gap:9px;text-align:left}
.rank{position:relative;background:#ffffff85;border-radius:12px;padding:11px 13px 12px}
.rank.best{background:#fff;box-shadow:0 0 0 2px var(--ink)}
.rank-head{display:flex;align-items:baseline;gap:8px}
.rank-tag{display:inline-grid;place-content:center;width:26px;height:26px;border-radius:7px;background:var(--a);color:#fff;font-weight:800;font-size:14px;align-self:center}
.rank-b .rank-tag,.rank-b .bar:after{background:var(--b)}.rank-c .rank-tag,.rank-c .bar:after{background:var(--c)}.rank-d .rank-tag,.rank-d .bar:after{background:var(--d)}
.rank-price{font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rank-basis{font-size:10px;color:var(--muted)}
.rank-sub{font-size:11px;color:var(--muted);margin-top:2px}
.bar{height:8px;border-radius:4px;background:#e4e7da;margin-top:7px;overflow:hidden}
.bar:after{content:"";display:block;height:100%;width:0;background:var(--a);border-radius:4px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.result.in .bar:after{width:var(--w)}
.rank-badge{position:absolute;right:12px;top:12px;font-size:12px;font-weight:800;background:var(--ink);color:var(--yellow);border-radius:99px;padding:3px 10px}
.rank-badge.muted{background:transparent;color:var(--muted);font-weight:700}
.result-actions button.primary{background:var(--ink);color:#fff;border-color:var(--ink);font-size:13px;padding:10px 16px}
.result-actions button#save-image{background:transparent;color:inherit;border-color:#263b2c66}
@media(max-width:620px){.products.multi,.products.multi[data-count="3"],.products.multi[data-count="4"]{grid-template-columns:1fr 1fr;gap:10px}.products.multi[data-count="3"] .product-c{grid-column:1/-1}.product{padding:12px 10px}.number-field input{font-size:19px}.rank-price{font-size:23px}}
@media(prefers-reduced-motion:reduce){.product{animation:none}.result,.bar:after{transition:none}}
.h1{font-size:46px;letter-spacing:-.055em;margin:4px 0 7px;line-height:1.35;font-weight:800}
.h1 span{display:inline-block;position:relative;z-index:0}
.h1 span:after{content:"";position:absolute;background:var(--yellow);bottom:4px;height:14px;left:0;right:-5px;z-index:-1;transform:rotate(-2deg)}
.result .h2{font-size:27px;font-weight:800;letter-spacing:-.04em;margin:7px 0 5px}
.note .h2{font-size:12px;font-weight:700;margin:0 0 4px}
@media(max-width:620px){.h1{font-size:34px}
.result .h2{font-size:24px}
}
@media(max-width:350px){.h1{font-size:30px}
.result .h2{font-size:21px}
}