:root{--bg:#f2f0ea;--ink:#151718;--muted:#626665;--line:#c9cac4;--panel:#fffefa;--cyan:#18c6d7;--lime:#c7f36a;--coral:#ff675d;--shadow:0 22px 70px rgba(21,23,24,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Cabinet Grotesk","Arial Narrow",Arial,sans-serif;letter-spacing:0}button,input,select{font:inherit}button{min-height:44px;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:0 16px;cursor:pointer}button:hover{background:var(--ink);color:var(--panel)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}main{overflow-x:hidden;width:100%;max-width:100%}nav{height:72px;display:flex;align-items:center;gap:24px;padding:0 max(24px,5vw);border-bottom:1px solid var(--line);font-size:14px}nav .brand{color:var(--ink);text-decoration:none;font-weight:800}nav span{color:var(--muted);margin-left:auto}.icon{width:44px;padding:0;font-size:22px}header{padding:78px max(24px,5vw) 54px;text-align:center}.kicker{text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--muted)}h1{font-size:clamp(46px,7vw,98px);line-height:.92;max-width:1100px;margin:24px auto;letter-spacing:0}header .lede{max-width:650px;margin:0 auto;font-family:Arial,sans-serif;font-size:18px;line-height:1.6;color:var(--muted)}.workbench{display:grid;grid-template-columns:minmax(320px,5fr) minmax(440px,7fr);max-width:1280px;margin:0 auto 140px;background:var(--panel);border:1px solid var(--ink);box-shadow:var(--shadow)}.controls{padding:32px;border-right:1px solid var(--ink);display:grid;gap:22px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h2,.result h2{margin:0;font-size:32px}.text-button{border:0;text-decoration:underline;padding:0;min-height:auto}.controls label{display:grid;gap:9px;font-family:Arial,sans-serif;font-size:13px;font-weight:700}.controls input,.controls select{width:100%;height:48px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:0 12px;border-radius:0}.controls input[type=range]{padding:0;accent-color:var(--ink)}.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.segments{display:grid;grid-template-columns:repeat(3,1fr)}.segments button{border-right:0;padding:0 8px}.segments button:last-child{border-right:1px solid}.segments .active{background:var(--ink);color:var(--panel)}.actions,.result-actions{display:flex;gap:10px}.actions button,.result-actions button{flex:1}.primary{background:var(--ink);color:var(--panel)}.primary:hover{background:var(--cyan);color:var(--ink)}.result{padding:40px;min-width:0}.result-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.gauge{--score:58;width:190px;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at center,var(--panel) 0 54%,transparent 55%),conic-gradient(var(--cyan) calc(var(--score)*1%),#dde0da 0);transition:background .35s ease,transform .35s ease}.gauge.changed{transform:scale(1.04)}.gauge strong{font-size:40px}.gauge span{font:12px Arial,sans-serif;color:var(--muted)}.summary{font:18px/1.55 Arial,sans-serif;max-width:650px;margin:24px 0;color:#3e4241}.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.spec-grid div{padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:92px}.spec-grid span{display:block;font:12px Arial,sans-serif;color:var(--muted);margin-bottom:9px}.spec-grid strong{font-size:18px}.warnings{display:grid;gap:8px;margin:20px 0}.warning{padding:12px 14px;border-left:5px solid var(--coral);background:#fff1ef;font:14px/1.4 Arial,sans-serif}.warning.good{border-color:var(--lime);background:#f3fbdc}.result-actions{margin:22px 0}details{border-top:1px solid var(--line);padding-top:18px;font:14px/1.5 Arial,sans-serif;color:var(--muted)}details summary{cursor:pointer;color:var(--ink);font-weight:700}.saved-section{max-width:1280px;margin:0 auto 150px;padding:0 24px;display:grid;grid-template-columns:4fr 8fr;gap:70px}.saved-section h2{font-size:50px;margin:12px 0}.saved-section p{font:16px/1.5 Arial,sans-serif;color:var(--muted)}.saved-list{display:grid;gap:0}.saved-card{display:grid;grid-template-columns:1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);animation:enter .3s ease}.saved-card h3{margin:0 0 8px}.saved-card p{margin:0}.saved-card button{align-self:center}.empty{padding:30px 0;border-top:1px solid var(--line)}footer{display:flex;justify-content:space-between;gap:24px;padding:32px max(24px,5vw);background:var(--ink);color:var(--panel);font:13px Arial,sans-serif}.contrast{--bg:#101212;--ink:#f4f0e8;--muted:#b8bfbd;--line:#414745;--panel:#181b1b;--shadow:none}.contrast .warning{color:#151718}.contrast .gauge{background:radial-gradient(circle at center,var(--panel) 0 54%,transparent 55%),conic-gradient(var(--cyan) calc(var(--score)*1%),#414745 0)}@keyframes enter{from{opacity:.2;transform:translateY(12px)}}
@media(max-width:820px){nav span{display:none}header{padding-top:56px}h1{font-size:clamp(42px,13vw,68px)}.workbench{margin:0 16px 100px;grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--ink);padding:24px}.result{padding:24px}.result-top{align-items:center}.gauge{width:138px}.gauge strong{font-size:30px}.saved-section{grid-template-columns:1fr;gap:24px;margin-bottom:100px}.saved-section h2{font-size:38px}.spec-grid{grid-template-columns:1fr 1fr}footer{flex-direction:column}}
@media(max-width:470px){.pair{grid-template-columns:1fr}.result-top{align-items:flex-start}.gauge{width:116px}.spec-grid{grid-template-columns:1fr}.actions,.result-actions{flex-direction:column}.segments button{font-size:12px}header .lede{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}