.compare-container{width:min(100% - 48px,960px)}.compare-board{gap:24px;display:grid}.compare-form{border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:end;gap:12px;padding:20px;display:grid}.compare-form label{gap:7px;display:grid}.compare-form label span{color:var(--fg-dim);font-size:13px;font-weight:500}.compare-form input{border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--bg-alt);width:100%;height:44px;color:var(--fg);font-family:var(--font-mono);outline:none;padding:0 14px;font-size:15px;transition:border-color .18s}.compare-form input:focus{border-color:var(--accent-hi)}.compare-form input::placeholder{color:var(--fg-dimmer);font-family:var(--font-body), sans-serif}.compare-form .mc-btn{height:44px}.compare-swap{border:1px solid var(--line-strong);border-radius:var(--radius-md);width:44px;height:44px;color:var(--fg-dim);place-items:center;transition:color .18s,border-color .18s;display:grid}.compare-swap:hover{color:var(--fg);border-color:var(--accent-hi)}.compare-form-error{color:#f6a5a3;grid-column:1/-1;margin:0;font-size:13px}.compare-result{gap:20px;display:grid}.compare-heads{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;display:grid}.compare-player{align-items:center;gap:14px;min-width:0;display:flex}.compare-player.is-b{text-align:right;flex-direction:row-reverse}.compare-player img{border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--bg-alt);width:64px;height:64px;image-rendering:pixelated;flex:none}.compare-player>div{gap:4px;min-width:0;display:grid}.compare-player a,.compare-player strong{color:var(--fg);font-family:var(--font-display), sans-serif;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap;font-size:26px;font-weight:700;overflow:hidden}.compare-player a:hover{color:var(--accent-hi)}.compare-player small{font-size:13px;font-weight:600}@layer components{.compare-player small{color:var(--fg-dimmer)}}.compare-player small.is-error{color:#f6a5a3}.compare-vs{color:var(--fg-dimmer);font-size:14px;font-weight:600}.compare-loading{min-height:160px;color:var(--fg-dimmer);justify-content:center;align-items:center;gap:10px;font-size:14px;display:flex}.compare-summary{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-alt);color:var(--fg-dim);margin:0;padding:14px 18px;font-size:15px}.compare-summary strong{color:var(--fg)}.compare-group{border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface)}.compare-group h2{border-bottom:1px solid var(--line);color:var(--fg);letter-spacing:-.015em;margin:0;padding:16px 22px;font-size:18px}.compare-row{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) minmax(160px,1.3fr) minmax(0,1fr);align-items:center;gap:16px;padding:12px 22px;display:grid}.compare-row:last-child{border-bottom:0}.compare-value{color:var(--fg-dim);font-variant-numeric:tabular-nums;font-size:18px;font-weight:600}.compare-value.is-right{text-align:right}.compare-value.is-lead{color:var(--fg)}.compare-value.is-lead:after{content:"";background:var(--accent-hi);border-radius:50%;width:6px;height:6px;margin:0 0 3px 8px;display:inline-block}.compare-value.is-right.is-lead:after{display:none}.compare-value.is-right.is-lead:before{content:"";background:var(--accent-hi);border-radius:50%;width:6px;height:6px;margin:0 8px 3px 0;display:inline-block}.compare-metric{text-align:center;gap:7px;display:grid}.compare-metric>span{color:var(--fg-dimmer);font-size:13px;font-weight:500}.compare-split{background:var(--surface-3);border-radius:999px;height:5px;overflow:hidden}.compare-split i{background:var(--accent);height:100%;transition:width .4s cubic-bezier(.16,1,.3,1);display:block}@media (max-width:720px){.compare-container{width:min(100% - 36px,960px)}.compare-form{grid-template-columns:minmax(0,1fr) auto}.compare-form label:nth-of-type(2){grid-column:1/2}.compare-swap{grid-area:1/2/3;align-self:center}.compare-form .mc-btn{grid-column:1/-1}.compare-player img{width:44px;height:44px}.compare-player a,.compare-player strong{font-size:18px}.compare-row{grid-template-columns:1fr minmax(110px,1.2fr) 1fr;gap:10px;padding:11px 14px}.compare-value{font-size:15px}}@media (prefers-reduced-motion:reduce){.compare-split i{transition:none}}