.compare{--pos:oklch(60% 0.14 150);--pos-bg:oklch(96% 0.04 150);--neg:oklch(58% 0.18 27);--neg-bg:oklch(96% 0.04 27);--win:oklch(48% 0.13 150);--win-bg:oklch(97% 0.03 150);min-height:100vh;padding-bottom:64px}.compare button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.compare .page-head{max-width:1280px;margin:0 auto;padding:36px 32px 24px}.compare .head-row{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}.compare .page-head h1{font-family:var(--font-display);font-size:38px;font-weight:700;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}.compare .head-actions{display:flex;gap:8px;align-items:center}.compare .btn-ghost,.compare .btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;font-size:13.5px;font-weight:600;border-radius:0;transition:background-color .15s,border-color .15s,transform .12s}.compare .btn-ghost{color:var(--fg);background:var(--surface);border:1px solid var(--border-strong)}.compare .btn-primary{color:#fff;background:var(--fg);border:1px solid var(--fg)}.compare .btn-ghost svg,.compare .btn-primary svg{width:14px;height:14px}.compare .picker-wrap{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border)}.compare{--label-col:220px}.compare .picker{max-width:1280px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:var(--label-col) repeat(var(--device-cols,1),minmax(0,1fr))}.compare .picker>*+*{border-left:1px solid var(--border)}.compare .picker-label{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px 16px 14px 0;min-width:0}.compare .picker-total{font-size:13px;color:var(--muted)}.compare .picker-total strong{font-weight:600;color:var(--fg);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.compare .add-device-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:36px;padding:0;font-size:13px;font-weight:600;color:var(--fg);background:none;border:0}.compare .add-device-btn svg{width:24px;height:24px;padding:5px;color:#fff;background:var(--accent);transition:background .15s}.compare .add-device-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.compare .add-picker{position:relative}.compare .add-picker .search-dropdown{right:auto;width:max(100%,380px)}.compare .add-picker .search-item-kind{display:none}.compare .device-slot{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:88px;padding:14px 16px;transition:background .15s}.compare .device-slot.is-winner:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}.compare .slot-thumb{width:52px;height:60px;display:grid;place-items:center}.compare .slot-thumb img{width:100%;height:100%;object-fit:contain}.compare .slot-thumb svg{width:34px;height:34px}.compare .slot-meta{min-width:0}.compare .slot-brand{margin-bottom:2px;font-size:12px;color:var(--muted)}.compare .slot-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--fg)}.compare .slot-remove{align-self:start;width:32px;height:32px;margin:-6px -6px 0 0;display:grid;place-items:center;color:var(--muted-2);border-radius:0;transition:background-color .15s,color .15s}.compare .slot-remove svg{width:12px;height:12px}.compare .highlights{max-width:1280px;margin:0 auto;padding:24px 32px 0}.compare .highlights-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.compare .hl-card{padding:14px 16px;border:1px solid var(--border);border-radius:0;background:var(--surface);display:flex;flex-direction:column;gap:4px}.compare .hl-card .hl-label{font-size:12px;color:var(--muted)}.compare .hl-card .hl-value{font:700 16px var(--font-display);color:var(--fg);letter-spacing:-.015em}.compare .hl-card .hl-detail{font:12px var(--font-mono);color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.compare .compare-wrap{max-width:1280px;margin:0 auto;padding:32px 32px 0}.compare .compare-controls{display:flex;align-items:center;gap:16px;padding-bottom:12px}.compare .toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none}.compare .toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.compare .toggle-track{width:30px;height:18px;background:var(--border-strong);border-radius:var(--radius-pill);position:relative;transition:background .18s}.compare .toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:transform .18s}.compare .toggle input:checked+.toggle-track{background:var(--accent)}.compare .toggle input:checked+.toggle-track:after{transform:translateX(12px)}.compare .compare-table{width:100%;border:1px solid var(--border);border-radius:0;overflow-x:auto;overscroll-behavior-x:contain;background:var(--surface);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.compare .compare-table table{width:100%;border-collapse:collapse;table-layout:fixed}.compare .compare-table col.label-col{width:var(--label-col)}.compare .section-row{border-top:1px solid var(--border)}.compare .section-row:first-child{border-top:0}.compare .section-row th{padding:20px 16px 8px;font:600 14px var(--font-display);color:var(--fg);text-align:left}.compare .compare-table :is(td,th[scope=row]){padding:12px 16px;border-top:1px solid var(--border);font-size:13.5px;vertical-align:top;overflow-wrap:anywhere}.compare .compare-table th[scope=row]{color:var(--muted);font-weight:500;text-align:left;background:oklch(99% .002 260);border-right:1px solid var(--border)}.compare .compare-table td{color:var(--fg);font-weight:500}.compare .compare-table .winner{background:var(--win-bg)}.compare .compare-table .cell-primary{font-weight:600;color:var(--fg)}.compare .compare-table .cell-sub{display:block;font:12px var(--font-mono);color:var(--muted);margin-top:2px}.compare .winner-badge{display:inline-block;margin-left:8px;font:500 12px var(--font-body);color:var(--win);vertical-align:baseline}.compare .bar{margin-top:6px;height:4px;background:var(--border);border-radius:var(--radius-pill);overflow:hidden;position:relative}.compare .bar-fill{height:100%;background:var(--muted);border-radius:var(--radius-pill)}.compare .winner .bar-fill{background:var(--win)}.compare .pill{display:inline-flex;align-items:center;gap:4px;font:600 11px var(--font-mono);padding:2px 8px;border-radius:var(--radius-pill);letter-spacing:.02em}.compare .pill.yes{background:var(--pos-bg);color:var(--pos)}.compare .pill.no{background:oklch(95% 0 0);color:var(--muted-2)}.compare .pill svg{width:10px;height:10px}.compare .compare-status{width:calc(100% - 64px);max-width:1216px;margin:0 auto 24px;padding:14px 18px;border-radius:0;background:oklch(96% .01 260);color:var(--muted);font:500 14px var(--font-body)}@media (hover:hover) and (pointer:fine){.compare .btn-ghost:hover{background:var(--surface-hover);border-color:var(--muted)}.compare .btn-primary:hover{background:oklch(28% .018 260);border-color:oklch(28% .018 260)}.compare .add-device-btn:hover{color:var(--accent)}.compare .add-device-btn:hover svg{background:var(--accent-hover)}.compare .device-slot:hover{background:var(--surface-hover)}.compare .slot-name:hover{color:var(--accent)}.compare .slot-remove:hover{background:var(--neg-bg);color:var(--neg)}.compare .compare-table tr:hover td{background:oklch(99% .005 260)}}.compare :is(.btn-ghost,.btn-primary,.add-device-btn):active{transform:scale(.97)}.compare :is(a,button,.compare-table):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.compare .toggle input:focus-visible+.toggle-track{outline:2px solid var(--accent);outline-offset:2px}@media (max-width:1100px){.compare{--label-col:180px}.compare .device-slot{grid-template-columns:44px minmax(0,1fr) auto;padding:12px}.compare .slot-thumb{width:44px;height:52px}.compare .highlights-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:820px){.compare{--label-col:140px}.compare .picker{grid-template-columns:repeat(var(--device-cols,1),minmax(0,1fr))}.compare .picker-label{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}.compare .picker>:nth-child(2){border-left:0}.compare .add-picker{flex:1 1;max-width:320px}.compare .add-picker .search-dropdown{left:auto;right:0;width:min(380px,calc(100vw - 32px))}.compare .compare-table table{min-width:calc(var(--label-col) + var(--device-cols, 2) * 150px)}}@media (max-width:540px){.compare .picker{padding:0 16px}.compare .device-slot{grid-template-columns:minmax(0,1fr) auto;min-height:0;padding:10px 8px}.compare .slot-thumb{display:none}.compare .slot-name{font-size:13px}.compare .highlights-grid{grid-template-columns:1fr}.compare .page-head h1{font-size:28px}}.compare-wrap .spec-sign-in{margin:0 0 16px;padding:16px;border:1px solid;line-height:1.6}.compare-wrap .spec-sign-in a{text-decoration:underline;text-underline-offset:3px}