:root{color-scheme:dark;--navy:#0a1628;--panel:#132240;--line:#293c5c;--lime:#d4ff00;--text:#f1f5f9;--muted:#a6b4c9}*{box-sizing:border-box}[hidden]{display:none!important}html{min-width:280px}body{margin:0;background:var(--navy);color:var(--text);font-family:Poppins,system-ui,sans-serif}a{color:inherit}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:disabled,[aria-disabled=true]{opacity:.5;cursor:not-allowed}:focus-visible{outline:3px solid var(--lime);outline-offset:4px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:54px;padding:15px 24px;border-radius:14px;background:var(--lime);color:var(--navy);font-weight:700;text-decoration:none;font-size:16px}.primary:hover{background:#e2ff57}.secondary{min-height:48px;border-radius:14px;padding:12px 16px;background:#263959;color:var(--text);font-size:14px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--lime)}.site-header,.landing-footer{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 32px}.site-header img{display:block;width:120px;height:auto}.site-header>span{font-size:10px;letter-spacing:2px;color:var(--muted)}.landing{max-width:1200px;margin:auto;padding:50px 32px 30px;display:grid;grid-template-columns:1.15fr 1fr;gap:54px 44px}.hero h1{font-size:clamp(44px,5.8vw,76px);letter-spacing:-3.5px;line-height:1.1;margin:22px 0}.hero h1 em{color:var(--lime);font-style:normal}.lead{max-width:510px;font-size:16px;line-height:1.85;color:var(--muted)}.cta{margin-top:16px;min-width:220px;justify-content:space-between}.demo-note{font-size:11px;color:var(--muted);margin-top:14px}#accessStatus{font-size:13px}.hero-art{display:grid;place-items:center;position:relative;min-width:0}.vinyl{width:min(100%,350px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#0c1729 0px,#0c1729 3px,#273c56 4px,#0c1729 6px);display:grid;place-items:center;transform:rotate(-12deg);box-shadow:0 0 100px #d4ff000c,0 24px 70px #0005;border:1px solid #334662}.vinyl-label{width:42%;aspect-ratio:1;background:var(--lime);color:var(--navy);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.vinyl-label span{font-size:12px;font-weight:700}.vinyl-label strong{font-size:36px;letter-spacing:-2px}.vinyl-label small{font-size:9px;letter-spacing:2px}.sound-tag{position:absolute;bottom:12%;left:0;font-size:12px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:#172841;transform:rotate(-6deg)}.sound-bars{position:absolute;right:0;top:12%;display:flex;gap:5px;align-items:center;height:60px;padding:12px 16px;background:var(--lime);border-radius:16px;transform:rotate(9deg)}.sound-bars i{height:20px;width:5px;background:var(--navy);border-radius:5px}.sound-bars i:nth-child(2n){height:34px}.sound-bars i:nth-child(3n){height:12px}.benefits{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--line);padding-top:28px}.benefits article>span{color:var(--lime);font-size:12px}.benefits h2{font-size:17px;margin:10px 0}.benefits p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}.contact{grid-column:1/-1;color:var(--lime);font-size:14px;text-underline-offset:5px}.landing-footer{font-size:10px;color:var(--muted);border-top:1px solid var(--line);align-items:flex-start}.landing-footer details{max-width:440px}summary{cursor:pointer;min-height:30px}details p{line-height:1.8}.game-page{min-height:100svh;background:radial-gradient(ellipse at 50% 0,#18304e,transparent 70%),var(--navy);padding-bottom:env(safe-area-inset-bottom)}.game-header{max-width:920px;padding:16px 24px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.game-header>a{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}.game-header img{display:block;width:85px;height:auto}.game-header>span{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.game-header .best{letter-spacing:0;text-align:right;font-size:11px}.best strong{display:block;color:var(--text);font-size:14px}.game-main{width:min(100%,540px);margin:10px auto 24px;padding:0 20px}.player,.results{padding:26px;background:linear-gradient(145deg,#162b49,#10203a);border:1px solid var(--line);border-radius:24px}.topline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:1px}.topline strong{color:var(--lime);font-size:16px}.rounds{display:flex;gap:6px;margin:14px 0}.rounds i{height:4px;flex:1;background:var(--line);border-radius:6px}.rounds i.current{background:#90a2bd}.rounds i.correct{background:var(--lime)}.rounds i.missed{background:#fb923c}.record{width:114px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;border:7px solid #2d425c;background:var(--navy);margin:20px auto 18px;box-shadow:0 0 0 1px #ffffff0b}.record.playing{border-color:var(--lime)}.record strong{font-size:40px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-2px}.record span{font-size:10px;color:var(--muted)}.track{text-align:center}.track>span{color:var(--lime);font-size:10px;letter-spacing:1px}.track h1{font-size:23px;line-height:1.3;letter-spacing:-.5px;margin:12px 0 8px;overflow-wrap:anywhere}.track p{font-size:12px;color:var(--muted);margin:0 0 20px;min-height:18px}.timeline{height:4px;background:var(--line);border-radius:8px;overflow:hidden}#progress{height:100%;width:0;background:var(--lime)}.listening-head{display:flex;align-items:center;gap:8px;justify-content:center;min-height:48px}.listening-head p{font-size:12px;text-align:center;line-height:1.5;margin:12px 0}.dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--muted)}.dot.active{background:var(--lime);box-shadow:0 0 0 4px #d4ff001c}#transcript{font-size:14px;text-align:center;overflow-wrap:anywhere;margin:0 0 12px}#transcript:empty{display:none}.actions{display:flex;gap:8px}.actions .primary{flex:1;min-width:0;font-size:15px}.small-actions{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.text-button{min-height:44px;padding:8px 0;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:4px}.tip{font-size:11px;color:var(--muted);line-height:1.6;text-align:center;margin:12px 0 0}.answer-row{display:flex;gap:8px;margin-top:10px}.answer-row input{background:var(--navy);color:var(--text);border:1px solid #405778;border-radius:12px;padding:12px;width:100%;min-width:0;font-size:16px;min-height:48px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.game-footer{max-width:540px;padding:0 24px 18px;margin:auto;font-size:10px;color:var(--muted)}.results{text-align:center}.results h1{font-size:30px;line-height:1.2}.results>p{font-size:24px;color:var(--lime);font-weight:700}.results ol{text-align:left;padding-left:20px;margin:24px 0}.results li{font-size:12px;line-height:1.7;padding:8px 0}.results>.primary{width:100%}.results>a{display:block;font-size:12px;margin-top:20px;color:var(--muted)}.won .player{border-color:var(--lime)}@media(max-width:680px){.site-header{padding:20px}.site-header img{width:100px}.site-header>span{font-size:8px;letter-spacing:1px}.landing{grid-template-columns:1fr;gap:30px;padding:20px 24px 28px}.hero h1{font-size:clamp(39px,10vw,62px);letter-spacing:-2px;margin:16px 0 20px}.eyebrow{font-size:9px;letter-spacing:1.4px}.lead{font-size:14px;line-height:1.8}.cta{width:100%;margin-top:12px}.demo-note{text-align:center}.hero-art{display:none}.benefits{grid-template-columns:1fr;gap:24px;padding-top:24px}.benefits article{padding-left:32px;position:relative}.benefits article>span{position:absolute;left:0;top:2px}.benefits h2{margin:0 0 6px}.benefits p{font-size:12px}.contact{font-size:12px;line-height:1.7}.landing-footer{padding:20px 24px;flex-direction:column;gap:12px}.game-header{padding:10px 18px}.game-header>span:not(.best){font-size:9px;letter-spacing:1px}.game-header img{width:70px}.game-main{padding:0 12px;margin-top:4px}.player,.results{padding:20px 18px;border-radius:20px}.record{width:100px;margin:16px auto 14px}.record strong{font-size:36px}.track h1{font-size:21px}.track p{margin-bottom:14px}.actions .primary{padding:14px 12px}.game-footer{padding:0 24px 12px}}@media(max-height:740px) and (max-width:680px){.player{padding:16px}.record{width:82px;border-width:5px;margin:12px auto}.record strong{font-size:29px}.record span{font-size:9px}.track h1{font-size:19px;margin:8px 0}.track p{font-size:11px;margin-bottom:10px}.rounds{margin:10px 0}.listening-head{min-height:42px}.tip{margin-top:8px}}@media(max-width:350px){.game-header>span:not(.best){display:none}.game-header{gap:8px}.actions .primary{font-size:13px}.small-actions{gap:12px}.hero h1{font-size:38px}.player{padding:14px}}
