:root{--bg:#07070a;--bg2:#101016;--ink:#f3f2ef;--mute:#a7a6ad;--line:#26262e;--g:#2fbf4a;--p:#7b3fd1;--y:#ffe600;--r:#ff3030}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:8px;z-index:9}
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding:14px clamp(16px,5vw,56px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;letter-spacing:.26em;font-size:12px;font-weight:600;text-transform:uppercase}
.brand svg{width:32px;height:32px}
nav.main{display:flex;flex-wrap:wrap;gap:0 22px}
nav.main a{text-decoration:none;color:var(--mute);font-size:15px;min-height:44px;display:inline-flex;align-items:center}
nav.main a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--y)}
.wrap{max-width:1040px;margin:0 auto;padding:0 clamp(18px,5vw,40px)}
.pg{padding-top:56px;padding-bottom:72px}
h1{font-size:clamp(34px,7vw,64px);line-height:1.05;margin:0 0 20px;letter-spacing:-.02em}
h2{font-size:clamp(24px,4vw,34px);margin:0 0 14px;letter-spacing:-.01em;line-height:1.2}
h3{margin:0 0 6px;font-size:19px}
p{margin:0 0 16px;max-width:680px;color:#d6d5da}
.lead{font-size:clamp(18px,2.6vw,22px);color:#e4e3e8;margin-bottom:28px}
.sub,.mute{color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--ink);color:#000;text-decoration:none;font-weight:600;border:0;font-size:16px;cursor:pointer;font-family:inherit}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid #55555f}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible+label{outline:3px solid var(--y);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.hero{background:#000;border-bottom:1px solid var(--line);padding-bottom:12px}
.stage{width:100%;height:clamp(260px,46vw,420px)}
#strings{width:100%;height:100%;display:block;touch-action:manipulation;cursor:default}
.notes{display:flex;justify-content:center;gap:10px;padding:6px 12px 0;flex-wrap:wrap}
.notes button{width:44px;height:44px;border-radius:50%;border:2px solid;background:#0b0b10;color:var(--ink);font:600 13px system-ui;cursor:pointer}
.hint{text-align:center;color:var(--mute);font-size:14px;margin:8px auto 0;max-width:none}
.intro{padding-top:48px;padding-bottom:56px}
section.blk{padding:64px 0;border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:800px){.two{grid-template-columns:1fr 1.2fr;gap:56px}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:24px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:24px}.card p{color:var(--mute);margin:6px 0 0}
.bar{height:3px;border-radius:2px;margin-bottom:16px;width:44px}.bar.g{background:var(--g)}.bar.p{background:var(--p)}.bar.y{background:var(--y)}
.quote{border-left:3px solid var(--p);padding-left:18px;font-size:19px;color:#e4e3e8}
footer{border-top:1px solid var(--line);padding:28px clamp(16px,5vw,56px);color:var(--mute);font-size:14px;display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between}
.quiz{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,4vw,36px);max-width:760px;margin-top:24px}
.qprog{height:4px;background:#23232b;border-radius:2px;margin-bottom:22px;overflow:hidden}.qprog i{display:block;height:100%;background:linear-gradient(90deg,var(--g),var(--p),var(--y),var(--r));transition:width .3s}
.qtext{font-size:clamp(19px,3vw,24px);line-height:1.35;margin:0 0 20px;color:var(--ink);max-width:none}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;min-height:52px;padding:0 18px;border:1px solid #3a3a45;border-radius:14px;background:#0c0c11;color:var(--ink);font:inherit;font-size:16px;cursor:pointer;text-align:left}
.opt:hover{border-color:#8a8a99}.opt:focus-visible{outline:3px solid var(--y)}
.qnav{margin-top:16px;color:var(--mute);font-size:14px;display:flex;justify-content:space-between;align-items:center}
.qnav button{background:none;border:0;color:var(--mute);text-decoration:underline;cursor:pointer;font:inherit;min-height:44px}
.meter{margin:18px 0 8px;border-radius:12px;overflow:hidden;display:flex;height:44px;border:1px solid #3a3a45;font-size:13px;font-weight:600}
.meter .cap{background:linear-gradient(90deg,#1e7f33,#2fbf4a);color:#04140a;display:flex;align-items:center;padding:0 12px;transition:width .9s cubic-bezier(.2,.8,.2,1);white-space:nowrap;overflow:hidden}
.meter .int{flex:1;background:repeating-linear-gradient(45deg,#3a1414,#3a1414 8px,#4b1c1c 8px,#4b1c1c 16px);color:#ffb3b3;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;white-space:nowrap;overflow:hidden}
.fine{font-size:13px;color:var(--mute)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.meter .cap,.qprog i{transition:none}}