:root{--bg:#0a0f17;--sf:#111925;--ln:#223047;--ac:#2f7bff;--tx:#e9eff9;--mu:#8b9ab0;--ok:#35d0a0;--er:#ff7a7a}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--tx);font:16px/1.6 Manrope,system-ui,sans-serif;min-height:100vh}
.grid-bg{position:fixed;inset:0;z-index:-1;opacity:.4;background:linear-gradient(var(--ln) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--ln) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask:radial-gradient(ellipse at 25% 15%,#000,transparent 70%);mask:radial-gradient(ellipse at 25% 15%,#000,transparent 70%)}
header{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(16px,5vw,64px);font:26px 'Instrument Serif',serif}
.mono,.facts{font-family:'JetBrains Mono',monospace}
main{max-width:1080px;margin:auto;padding:16px clamp(16px,5vw,64px) 64px;outline:0}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;min-height:68vh}
.eyebrow{color:var(--ac);letter-spacing:.14em;text-transform:uppercase;font-size:12px;font-weight:800}
h1{font:400 clamp(42px,7vw,78px)/1.02 'Instrument Serif',serif;margin:12px 0 20px}
h2{font:400 clamp(26px,4vw,38px)/1.2 'Instrument Serif',serif;margin:8px 0 16px}
em{color:var(--ac)}
.lead{color:var(--mu);max-width:56ch;margin-bottom:20px}
.note{color:var(--mu);font-size:13px;margin-top:20px;max-width:60ch}
.facts{display:flex;gap:28px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 28px;font-size:12px;color:var(--mu)}
.facts b{display:block;font-size:26px;color:var(--tx)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.between{justify-content:space-between}
.btn{background:var(--ac);color:#fff;border:1px solid var(--ac);padding:13px 24px;border-radius:10px;font:700 15px Manrope,sans-serif;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:#4a8dff}.btn.ghost{background:transparent;color:var(--tx);border-color:var(--ln)}.btn.ghost:hover{border-color:var(--ac)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.btn[aria-disabled=true]{opacity:.5}
.link{background:none;border:0;color:var(--mu);text-decoration:underline;cursor:pointer;margin-top:12px;font:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:360px;justify-self:center;width:100%}
.matrix i{aspect-ratio:1;display:grid;place-items:center;font:normal 38px sans-serif;background:var(--sf);border:1px solid var(--ln);border-radius:14px;color:var(--ac)}
.matrix i:last-child{border:2px dashed var(--ac);color:var(--tx)}
.panel{background:rgba(17,25,37,.7);border:1px solid var(--ln);border-radius:20px;padding:clamp(20px,4vw,44px);backdrop-filter:blur(6px)}
.center{text-align:center}.big{font-size:clamp(40px,8vw,72px)}
.meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.tag{font-size:12px;color:var(--ac);border:1px solid var(--ac);border-radius:99px;padding:2px 12px}
.bar{height:4px;background:var(--ln);border-radius:4px;overflow:hidden;margin-bottom:28px}.bar i{display:block;height:100%;background:var(--ac);transition:width .4s}
.q{font-size:clamp(22px,3.4vw,30px)}
.opts{display:grid;gap:10px;margin:20px 0}
.opt{display:flex;gap:14px;align-items:center;text-align:left;width:100%;padding:14px 18px;background:var(--sf);color:var(--tx);border:1px solid var(--ln);border-radius:12px;font:600 16px Manrope,sans-serif;cursor:pointer;transition:border-color .2s,background .2s}
.opt b{font-family:'JetBrains Mono',monospace;color:var(--mu);width:22px}
.opt:hover{border-color:var(--ac)}.opt[aria-checked=true]{border-color:var(--ac);background:rgba(47,123,255,.16)}.opt[aria-checked=true] b{color:var(--ac)}
.err{color:var(--er);min-height:24px;font-size:14px}.ok{color:var(--ok);min-height:24px;font-size:14px;margin-top:10px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.rgrid button{padding:12px 0;border-radius:10px;background:var(--sf);color:var(--tx);font:500 15px 'JetBrains Mono',monospace;cursor:pointer;border:1px solid var(--ok)}
.rgrid .todo{border:1px dashed var(--er);color:var(--er)}
.rules{padding-left:20px;display:grid;gap:8px;color:var(--mu)}
.score{display:flex;align-items:baseline;gap:12px;color:var(--mu)}.score .big{color:var(--tx)}
.chartbox{position:relative;height:300px;margin:12px 0}
.hist{margin-top:40px}.hist div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--ln);color:var(--mu);font-size:14px}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:28px}.row .btn{flex:1}}