@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Unbounded:wght@600;700;800&display=swap";:root{font-family:IBM Plex Mono,monospace;color:#e8ffec;background:#07100d;--acid:#b6ff28;--violet:#b45cff;--ink:#07100d;--panel:#101b17}*{box-sizing:border-box}body{margin:0;overflow:hidden}.app{height:100dvh;min-height:580px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 0,#1f4439 0,transparent 38%),linear-gradient(180deg,#0c1915,#050806 80%);isolation:isolate}.app:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(182,255,40,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(182,255,40,.035) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(#000,transparent 80%);mask-image:linear-gradient(#000,transparent 80%)}.app:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:40;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen}.stars{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(180,92,255,.045) 120px)}.sound{position:fixed;right:25px;top:22px;z-index:50;border:1px solid rgba(182,255,40,.55);background:#07100dc7;color:var(--acid);padding:10px 14px;font:600 10px IBM Plex Mono;letter-spacing:.1em;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.sound:before{content:"●";margin-right:8px;animation:blink 1s infinite}@keyframes blink{50%{opacity:.25}}.menu{height:100%;max-width:1400px;margin:auto;position:relative}.venue{position:absolute;inset:0;overflow:hidden;perspective:900px}.venue:before{content:"";position:absolute;left:50%;top:-35%;transform:translate(-50%);width:1100px;height:700px;border-radius:50%;border:70px solid rgba(27,58,48,.65);box-shadow:inset 0 0 90px #000,0 0 0 5px #b6ff2814,0 0 0 110px #0b1914bf}.beam{position:absolute;top:5%;width:140px;height:75%;filter:blur(18px);opacity:.15;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}.b1{left:17%;background:var(--acid);transform:rotate(11deg)}.b2{right:15%;background:var(--violet);transform:rotate(-12deg)}.crowd{position:absolute;left:0;right:0;bottom:12%;height:35%;display:flex;align-items:end;justify-content:space-around;filter:drop-shadow(0 -12px 22px rgba(182,255,40,.08))}.crowd i{display:block;width:clamp(22px,3.6vw,52px);height:calc(48% + (var(--i) * 7px) % 43%);max-height:95%;background:#020403;border-radius:50% 50% 8% 8%;transform:rotate(calc((var(--i) - 14) * .45deg));position:relative}.crowd i:after{content:"";position:absolute;width:30%;height:55%;background:#020403;top:-38%;left:35%;border-radius:30px;transform:rotate(calc((var(--i) - 12) * 3deg));transform-origin:bottom}.hero{position:absolute;z-index:5;left:clamp(28px,7vw,110px);top:50%;transform:translateY(-55%);width:min(690px,56vw)}.kicker{font:600 11px IBM Plex Mono;letter-spacing:.24em;color:#afc4b9;margin:0 0 26px}.kicker span{color:var(--ink);background:var(--acid);padding:5px 9px;margin-right:12px}.hero h1{font:800 clamp(64px,8.5vw,126px)/.76 Unbounded,sans-serif;letter-spacing:-.075em;margin:0;color:#f0f4e9;text-shadow:8px 8px 0 #142d25}.hero h1 em{font-style:normal;color:var(--acid);-webkit-text-stroke:1px var(--acid);text-shadow:6px 6px 0 #56227e,12px 12px 30px rgba(180,92,255,.34)}.tagline{border-left:3px solid var(--violet);padding-left:16px;margin:32px 0;color:#a9bbb1;font:500 13px/1.7 IBM Plex Mono;text-transform:uppercase;letter-spacing:.1em}.start{border:0;background:var(--acid);color:var(--ink);min-width:310px;padding:0;display:flex;align-items:stretch;justify-content:space-between;font:800 14px Unbounded;cursor:pointer;box-shadow:7px 7px 0 var(--violet);transition:.15s}.start span{padding:19px 24px}.start i{font:600 9px IBM Plex Mono;font-style:normal;border-left:1px solid rgba(7,16,13,.3);padding:22px 17px}.start:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 var(--violet)}.record{display:flex;align-items:baseline;gap:10px;margin-top:27px;color:#789087;font-size:9px;letter-spacing:.13em}.record strong{font:700 32px Unbounded;color:#fff;margin-left:10px}.record small{color:var(--acid)}.console{position:absolute;right:4%;bottom:8%;width:min(400px,35vw);height:180px;background:linear-gradient(145deg,#1b2a24,#080d0b);border:1px solid #394b43;transform:perspective(500px) rotateX(18deg) rotateY(-8deg);box-shadow:0 25px 50px #000;padding:24px;z-index:4}.wave{height:55px;display:flex;gap:7px;align-items:center;border:1px solid #33463e;background:#060a08;padding:10px}.wave i{flex:1;height:30%;background:var(--acid);box-shadow:0 0 8px var(--acid);animation:eq .7s ease-in-out infinite alternate}.wave i:nth-child(3n){height:85%;animation-delay:-.3s}.wave i:nth-child(2n){height:55%;animation-delay:-.5s}@keyframes eq{to{height:90%}}.deck{display:flex;justify-content:space-between;margin-top:22px}.deck b{width:23px;height:23px;border:2px solid #78887f;border-radius:50%;box-shadow:inset 0 0 0 5px #111}.deck b:nth-child(3n){border-color:var(--violet)}.console p{font-size:8px;color:#64786e;letter-spacing:.1em}.game{height:100%;cursor:text}header{height:78px;position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,74px);background:#070e0be6;border-bottom:1px solid rgba(182,255,40,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}header>div{min-width:130px}header>div:last-child{text-align:right}header small{display:block;color:#6f897d;font-size:8px;letter-spacing:.18em}header b{font:700 26px Unbounded;color:#f1f4ed}header em{font:600 8px IBM Plex Mono;font-style:normal;color:var(--acid)}.mini{font:700 21px Unbounded!important;color:#fff;letter-spacing:-.06em;text-align:center}.mini span{color:var(--acid)}.lives{position:absolute;z-index:6;top:97px;left:50%;transform:translate(-50%);color:var(--acid);letter-spacing:10px;font-size:15px}.lives .lost{color:#293b33}.phrase{position:absolute;z-index:4;background:#0a1410eb;border:1px solid rgba(182,255,40,.72);border-left:5px solid var(--acid);padding:11px 17px;color:#f0f5ee;font:600 clamp(15px,1.45vw,20px) "IBM Plex Mono";white-space:nowrap;box-shadow:0 0 0 1px #000000b3,7px 7px #b45cff40,0 0 22px #b6ff2812;max-width:calc(100vw - 28px)}.phrase:before{content:"//";color:var(--violet);margin-right:10px}.dock{position:absolute;z-index:12;bottom:27px;left:50%;transform:translate(-50%);width:min(720px,calc(100% - 34px));background:#0c1612;border:1px solid #63746c;padding:10px;box-shadow:0 12px 45px #000}.dock label{position:absolute;bottom:100%;left:-1px;background:var(--acid);color:#07100d;padding:6px 12px;font-size:8px;font-weight:600;letter-spacing:.12em}.dock input{width:100%;border:0;border-bottom:2px solid var(--violet);outline:0;background:#050a08;color:#eaffee;padding:15px 18px;font:600 18px IBM Plex Mono;caret-color:var(--acid)}.dock input::placeholder{color:#4e6258}.end{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 34px));background:#0c1712;border:1px solid var(--acid);padding:42px;text-align:center;box-shadow:12px 12px #b45cff6b,0 25px 70px #000}.end>p{color:var(--acid);letter-spacing:.18em;font-size:10px}.end h2{font:800 96px/.8 Unbounded;margin:25px;color:#fff;text-shadow:6px 6px 0 #56227e}.end h2 small{display:block;font:600 9px IBM Plex Mono;letter-spacing:.16em;color:#789087;margin-top:19px}.end .start{margin:26px auto 0}.new{display:block;color:var(--acid);margin:20px}.back{display:block;margin:22px auto 0;border:0;background:none;color:#71877c;font:600 9px IBM Plex Mono;text-decoration:underline;cursor:pointer}@media(max-width:760px){.sound{right:12px;top:12px}.hero{left:22px;right:22px;top:42%;width:auto}.hero h1{font-size:54px}.kicker{font-size:9px}.tagline{margin:24px 0}.start{min-width:0;width:100%}.console{right:8%;bottom:3%;width:55vw;height:125px;opacity:.55}.console .wave{height:42px}.console .deck{display:none}.crowd{bottom:4%;height:28%}header{height:70px;padding:0 13px}header>div{min-width:65px}header b{font-size:18px}.mini{font-size:14px!important}.phrase{font-size:14px;white-space:normal;max-width:calc(100vw - 45px);padding:8px 11px}.dock input{font-size:15px}.end{padding:32px 21px}.end h2{font-size:76px}}@media(prefers-reduced-motion:reduce){.app *{animation:none!important}}button{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}button:active{transform:translate(2px,2px)!important}.screen-good:before{box-shadow:inset 0 0 45px #b6ff2812}.screen-bad:before{animation:screenError .1s ease-out}.screen-perfect:before{animation:perfectFlash .22s ease-out}.flow-state:before{background-size:43px 43px;filter:drop-shadow(0 0 8px rgba(182,255,40,.12))}@keyframes screenError{50%{box-shadow:inset 0 0 38px #ff3b5c33}}@keyframes perfectFlash{45%{box-shadow:inset 0 0 90px #b6ff2833,inset 0 0 160px #b45cff1f}}.hud{display:grid;grid-template-columns:1fr 1fr 1fr}.hud-score b{transition:transform .12s ease-out}.hud-center{display:flex;justify-content:center!important;text-align:center}.hud-metrics{display:flex;justify-content:flex-end;gap:clamp(20px,4vw,52px)}.hud-metrics>div{text-align:right}.combo{position:relative;min-width:120px!important;text-align:center}.combo b{display:block;color:var(--acid);line-height:.85;text-shadow:0 0 18px rgba(182,255,40,.24);transform-origin:center}.combo span{position:absolute;left:100%;top:12px;color:var(--violet);font-size:8px;letter-spacing:.18em}.combo.normal b{animation:comboPunch .13s ease-out}.combo.milestone b{animation:comboMilestone .35s cubic-bezier(.2,.8,.2,1)}.combo.milestone:after{content:"✦";position:absolute;right:3px;top:4px;color:var(--acid);animation:spark .35s ease-out}.combo.break b{animation:comboBreak .26s ease-out;color:#ff526f}@keyframes comboPunch{50%{transform:scale(1.2)}}@keyframes comboMilestone{35%{transform:scale(1.55);text-shadow:0 0 30px var(--acid)}70%{transform:scale(.92)}}@keyframes comboBreak{35%{transform:scale(.7) rotate(7deg);filter:blur(1px)}to{opacity:.65}}@keyframes spark{to{transform:translate(18px,-20px) scale(0);opacity:0}}.phrase{overflow:visible;animation:phraseEnter .2s ease-out both;transition:border-color .12s,box-shadow .12s,background .12s;transform-origin:center left}.phrase-text{position:relative;z-index:2}.phrase .confirmed{color:var(--acid);text-shadow:0 0 10px rgba(182,255,40,.45)}.phrase .remaining{color:#e5ece7;transition:color .1s}.phrase .next-char{display:inline-block;color:#08110d;background:var(--acid);padding:0 1px;box-shadow:0 0 12px #b6ff288c;animation:nextPulse .7s ease-in-out infinite}.phrase.active{border-color:var(--acid);box-shadow:0 0 0 1px #b6ff282e,8px 8px #b45cff59,0 0 28px #b6ff2824}.phrase.active:after{content:"LOCK";position:absolute;right:8px;top:-15px;color:var(--acid);font-size:7px;letter-spacing:.15em}.phrase-progress{position:absolute;left:0;right:0;bottom:-5px;height:2px;background:#ffffff1f;overflow:hidden}.phrase-progress i{display:block;width:calc(var(--progress) * 100%);height:100%;background:var(--acid);box-shadow:0 0 8px var(--acid);transition:width .08s ease-out}.phrase.danger{border-color:color-mix(in srgb,var(--acid),#ff8a2b calc(var(--danger) * 85%));box-shadow:7px 7px rgba(255,98,54,calc(var(--danger) * .35)),0 0 calc(var(--danger) * 25px) #ff53342e}.phrase.urgent{animation:urgentPulse .52s ease-in-out infinite alternate}.phrase.mistake{animation:phraseShake .16s ease-out;border-color:#ff526f!important}.phrase.mistake .next-char{background:#ff526f;box-shadow:0 0 15px #ff526f}@keyframes phraseEnter{0%{opacity:0;filter:blur(6px);transform:translateY(-10px) scale(.97)}}@keyframes nextPulse{50%{box-shadow:0 0 18px #b6ff28cc}}@keyframes phraseShake{25%{transform:translate(-5px)}55%{transform:translate(4px)}80%{transform:translate(-2px)}}@keyframes urgentPulse{to{filter:brightness(1.22)}}.danger-zone{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:1;pointer-events:none;background:linear-gradient(transparent,#ff33480b);border-bottom:2px solid rgba(255,73,75,.3)}.danger-zone:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,84,77,.5),transparent);animation:dangerLine 2s ease-in-out infinite}.danger-zone span{position:absolute;right:18px;top:8px;color:#ff62536b;font-size:7px;letter-spacing:.2em}@keyframes dangerLine{50%{opacity:.28}}.dock{transition:border-color .1s,box-shadow .1s,transform .1s}.dock.good{border-color:var(--acid);box-shadow:0 12px 45px #000,0 0 24px #b6ff2826}.dock.bad{animation:dockError .15s ease-out;border-color:#ff526f}.dock label{display:flex;gap:18px}.dock label em{font-style:normal;opacity:.65}.dock input{caret-color:transparent}.dock input:focus{box-shadow:inset 0 -10px 25px #b6ff2806}.input-scan{position:absolute;left:15px;bottom:17px;width:2px;height:22px;background:var(--acid);box-shadow:0 0 10px var(--acid);animation:cursorLive .75s step-end infinite;pointer-events:none}.dock:has(input:not(:placeholder-shown)) .input-scan{left:auto;right:16px;opacity:.35}@keyframes cursorLive{50%{opacity:.18}}@keyframes dockError{35%{transform:translate(calc(-50% - 4px))}70%{transform:translate(calc(-50% + 3px))}}.float-fx{position:absolute;z-index:20;pointer-events:none;font:700 17px Unbounded;color:var(--acid);text-shadow:0 0 14px rgba(182,255,40,.55);animation:floatScore .82s ease-out forwards}.float-fx.perfect span{font-size:25px;color:#fff;text-shadow:3px 3px 0 var(--violet),0 0 25px var(--acid)}.float-fx.miss span{color:#ff526f}.float-fx i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:var(--acid);animation:particle .55s ease-out forwards;transform:rotate(calc(var(--i) * 60deg)) translate(12px)}.float-fx.miss i{display:none}@keyframes floatScore{0%{opacity:0;transform:translateY(5px) scale(.75)}18%{opacity:1;transform:translateY(-5px) scale(1.08)}to{opacity:0;transform:translateY(-52px) scale(.94)}}@keyframes particle{to{transform:rotate(calc(var(--i) * 60deg)) translate(42px) scale(0);opacity:0}}.pause-trigger{position:absolute;right:21px;bottom:28px;z-index:15;border:1px solid #40544a;background:#060c09d9;color:#93a99e;padding:10px 13px;cursor:pointer;font:600 11px IBM Plex Mono}.pause-trigger span{font-size:7px;margin-left:7px;color:#61756b}.pause-layer{position:absolute;inset:0;z-index:35;display:grid;place-items:center;background:#030705b8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:pauseIn .18s ease-out}.pause-panel{width:min(390px,calc(100% - 34px));padding:35px;background:#0b1511;border:1px solid #597066;box-shadow:10px 10px #b45cff59,0 30px 80px #000}.pause-panel>p{font-size:8px;color:var(--acid);letter-spacing:.2em}.pause-panel h2{font:700 43px Unbounded;margin:12px 0 27px}.pause-panel button{width:100%;display:flex;justify-content:space-between;border:0;border-top:1px solid #293a32;background:transparent;color:#9db0a6;padding:14px 5px;font:600 11px IBM Plex Mono;cursor:pointer;text-align:left;transition:.12s}.pause-panel button:hover{color:#fff;padding-left:12px;border-color:var(--acid)}.pause-panel button.primary{background:var(--acid);color:#07100d;padding:16px 14px;margin-bottom:9px}.pause-panel kbd,.pause-panel small{font:500 8px IBM Plex Mono;opacity:.65}.end{width:min(620px,calc(100% - 34px));padding:36px 42px}.end h2{font-size:64px;margin:20px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #293b32;margin:28px 0 23px}.result-grid div{padding:14px 8px;border-right:1px solid #293b32;border-bottom:1px solid #293b32}.result-grid div:nth-child(3n){border-right:0}.result-grid div:nth-child(n+4){border-bottom:0}.result-grid small{display:block;color:#657a6f;font-size:7px;letter-spacing:.12em}.result-grid b{font:700 19px Unbounded;color:#e9f2ec}.retry{width:100%;border:0;background:var(--acid);color:#07100d;display:flex;justify-content:space-between;align-items:center;padding:0;box-shadow:7px 7px 0 var(--violet);cursor:pointer}.retry span{padding:19px 22px;font:800 16px Unbounded}.retry i{font:600 9px IBM Plex Mono;font-style:normal;border-left:1px solid rgba(7,16,13,.28);padding:22px}.new{display:inline-block;margin:0 0 6px;background:var(--violet);color:#fff;padding:6px 10px;font-size:9px;letter-spacing:.15em;animation:newRecord .8s ease-out}@keyframes newRecord{30%{transform:scale(1.15);box-shadow:0 0 30px var(--violet)}}@media(max-width:760px){.hud{grid-template-columns:1fr auto 1fr}.hud-score b{font-size:16px}.hud-center,.combo{min-width:68px!important}.combo b{font-size:19px}.combo span{display:none}.hud-metrics{gap:10px}.hud-metrics b{font-size:14px}.hud-metrics div:first-child{display:none}.danger-zone{height:135px}.pause-trigger{display:none}.result-grid{grid-template-columns:repeat(2,1fr)}.result-grid div{border-right:1px solid #293b32!important;border-bottom:1px solid #293b32!important}.result-grid div:nth-child(2n){border-right:0!important}.result-grid div:nth-child(n+5){border-bottom:0!important}.float-fx.perfect span{font-size:19px}}@keyframes pauseIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
