.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(58% 0.16 150);--win-bg:oklch(95.5% 0.045 150);min-height:100vh;padding-bottom:96px}.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 .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:22px;font-family:var(--font-mono);letter-spacing:.02em}.compare .breadcrumb a{color:var(--muted)}.compare .breadcrumb a:hover{color:var(--fg)}.compare .breadcrumb .sep{color:var(--border-strong)}.compare .breadcrumb .here{color:var(--fg)}.compare .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}.compare .head-title h1{font-family:var(--font-display);font-size:38px;font-weight:700;letter-spacing:-.035em;line-height:1.05;margin-bottom:8px;display:flex;align-items:center;gap:12px}.compare .head-title h1 .count-chip{font:600 13px var(--font-mono);background:var(--accent-subtle);color:var(--accent);padding:4px 10px;border-radius:6px;letter-spacing:.02em}.compare .head-title p{font-size:15px;color:var(--muted);max-width:640px}.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:var(--radius-sm);transition:all .15s}.compare .btn-ghost{color:var(--fg);background:var(--surface);border:1px solid var(--border-strong)}.compare .btn-ghost:hover{background:var(--surface-hover);border-color:var(--muted)}.compare .btn-primary{color:#fff;background:var(--fg);border:1px solid var(--fg)}.compare .btn-primary:hover{background:oklch(28% .018 260);border-color:oklch(28% .018 260)}.compare .btn-ghost svg,.compare .btn-primary svg{width:14px;height:14px}.compare .picker-wrap{position:sticky;top:60px;z-index:50;background:oklch(100% 0 0/.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}.compare .picker{max-width:1280px;margin:0 auto;padding:16px 32px;display:grid;grid-template-columns:220px repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.compare .picker>*{background:var(--surface)}.compare .picker-label{display:flex;align-items:center;padding:14px 16px;font:600 11.5px var(--font-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}.compare .device-slot{position:relative;padding:14px 16px 12px;display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;min-height:88px;transition:background .15s}.compare .device-slot:hover{background:var(--surface-hover)}.compare .device-slot.is-winner:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}.compare .slot-thumb{width:56px;height:56px;background:var(--tint);border:1px solid var(--border);border-radius:var(--radius-sm);display:grid;place-items:center;flex-shrink:0}.compare .slot-thumb svg{width:36px;height:36px}.compare .slot-meta{min-width:0}.compare .slot-brand{font:500 11px var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}.compare .slot-name{font-size:14px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.compare .slot-price{font:12px var(--font-mono);color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.compare .slot-remove{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--muted-2);transition:all .15s;align-self:start}.compare .slot-remove:hover{background:var(--neg-bg);color:var(--neg)}.compare .slot-remove svg{width:12px;height:12px}.compare .device-slot.empty{display:flex;align-items:center;justify-content:center;color:var(--muted);border-left:1px dashed var(--border-strong)!important;background:oklch(99% .002 260);cursor:pointer}.compare .device-slot.empty:hover{background:var(--accent-subtle);color:var(--accent)}.compare .add-inner{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500}.compare .add-inner svg{width:16px;height:16px}.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:var(--radius-md);background:var(--surface);display:flex;flex-direction:column;gap:4px}.compare .hl-card .hl-label{display:flex;align-items:center;gap:6px;font:600 11px var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.compare .hl-card .hl-label svg{width:12px;height:12px;color:var(--accent)}.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{display:none}.compare .toggle-track{width:30px;height:18px;background:var(--border-strong);border-radius:99px;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:var(--radius-md);overflow:hidden;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 thead th{display:none}.compare .section-row{background:var(--tint);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.compare .section-row:first-child{border-top:0}.compare .section-row td{padding:12px 16px;font:600 11.5px var(--font-mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}.compare .section-row td .sec-count{font:11px var(--font-mono);color:var(--muted-2);margin-left:8px;text-transform:none;letter-spacing:0}.compare .compare-table td{padding:12px 16px;border-top:1px solid var(--border);font-size:13.5px;vertical-align:top;width:calc((100% - 220px) / 3)}.compare .compare-table td:first-child{width:220px;color:var(--muted);font-weight:500;background:oklch(99% .002 260);border-right:1px solid var(--border)}.compare .compare-table td:not(:first-child){color:var(--fg);font-weight:500}.compare .compare-table tr:hover td:not(:first-child){background:oklch(99% .005 260)}.compare .compare-table .label-inline{display:flex;align-items:center;gap:8px}.compare .compare-table .label-inline svg{width:13px;height:13px;color:var(--muted-2);flex-shrink:0}.compare .compare-table .winner{background:var(--win-bg)!important;position:relative}.compare .compare-table .winner:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--win);border-radius:0 2px 2px 0}.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-flex;align-items:center;gap:4px;margin-left:8px;font:600 10px var(--font-mono);color:var(--win);background:oklch(92% .06 150);padding:1px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle}.compare .winner-badge svg{width:9px;height:9px}.compare .bar{margin-top:6px;height:4px;background:var(--border);border-radius:99px;overflow:hidden;position:relative}.compare .bar-fill{height:100%;background:var(--muted);border-radius:99px}.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:99px;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{margin:0 auto 24px;max-width:var(--page-max,1200px);padding:14px 18px;border-radius:12px;background:oklch(96% .01 260);color:var(--muted);font:500 14px var(--font-body)}.compare .action-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:70;background:oklch(14% .014 260);color:#fff;border-radius:99px;padding:6px 6px 6px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 36px rgba(15,18,30,.18),0 2px 8px rgba(15,18,30,.08);border:1px solid oklch(28% .014 260)}.compare .action-bar .ab-status{font:500 13px var(--font-body);display:flex;align-items:center;gap:8px}.compare .action-bar .ab-status .dot{width:6px;height:6px;border-radius:50%;background:var(--win);box-shadow:0 0 0 3px oklch(58% .16 150/.22)}.compare .action-bar .ab-status strong{color:#fff;font-weight:600}.compare .action-bar .divider{width:1px;height:18px;background:oklch(28% .014 260)}.compare .ab-btn{height:32px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;font:600 13px var(--font-body);color:oklch(86% .01 260);border-radius:99px;transition:all .15s}.compare .ab-btn:hover{background:oklch(22% .014 260);color:#fff}.compare .ab-btn svg{width:13px;height:13px}.compare .ab-btn.primary{background:var(--accent);color:#fff}.compare .ab-btn.primary:hover{background:var(--accent-hover)}.compare .compare-foot{max-width:1280px;margin:64px auto 0;padding:28px 32px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font:13px var(--font-body);color:var(--muted)}.compare .compare-foot-links{display:flex;gap:18px;list-style:none}.compare .compare-foot-links a:hover{color:var(--fg)}@media (max-width:1100px){.compare .picker{grid-template-columns:180px repeat(4,1fr)}.compare .picker-label{padding:14px 12px}.compare .device-slot{grid-template-columns:48px 1fr auto;padding:12px 12px 10px}.compare .slot-thumb{width:48px;height:48px}.compare .slot-thumb svg{width:30px;height:30px}.compare .highlights-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:820px){.compare .picker{grid-template-columns:1fr 1fr}.compare .picker-label{display:none}.compare .head-row{flex-direction:column;align-items:flex-start}.compare .compare-table td:first-child{width:160px}}@media (max-width:540px){.compare .highlights-grid,.compare .picker{grid-template-columns:1fr}.compare .head-title h1{font-size:28px}.compare .action-bar{width:calc(100vw - 24px);justify-content:center}.compare .action-bar .ab-status{display:none}}