:root{--bg: #fdf3da;--sky: #8fd6ee;--grass: #7ac74f;--fg: #2a2552;--dim: rgba(42, 37, 82, .6);--line: rgba(42, 37, 82, .18);--candy: #ef6aa6;--teal: #3fb6c9;--sun: #ffcf5c;--panel: rgba(253, 247, 230, .82);--bar: #ef6aa6;--bar-ink: #fff6e9;--font-display: "Archivo Black", system-ui, sans-serif;--font-mono: "Space Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%;background:var(--bg);overflow:hidden;color:var(--fg);font-family:var(--font-mono)}canvas{display:block;touch-action:none}.app{position:fixed;inset:0}.disp{font-family:var(--font-display);text-transform:none;font-weight:400}.mono{font-family:var(--font-mono)}.grain{position:fixed;inset:-50%;z-index:92;pointer-events:none;opacity:.03;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(4) infinite}.brandmark{position:fixed;bottom:22px;left:22px;z-index:14;display:flex;flex-direction:column;gap:4px;width:34px;opacity:.4;pointer-events:none}.brandmark span{height:4px;background:var(--fg)}.brandmark span:nth-child(1){width:100%}.brandmark span:nth-child(2){width:58%}.brandmark span:nth-child(3){width:80%}.landing{position:fixed;inset:0;z-index:20;background:radial-gradient(120% 70% at 80% 12%,#ffe07a8c,#ffe07a00 42%),linear-gradient(180deg,var(--sky) 0%,#b9e8e0 48%,#cdeaa0 70%,var(--grass) 100%);display:flex;flex-direction:column;animation:fadeIn .5s ease both;overflow:hidden}.landing:before{content:"";position:absolute;left:-10%;right:-10%;bottom:-6%;height:38%;background:radial-gradient(60% 120% at 20% 100%,var(--grass) 0 60%,transparent 61%),radial-gradient(70% 130% at 62% 100%,#6fbf42 0 60%,transparent 61%),radial-gradient(55% 120% at 92% 100%,#8ed368 0 60%,transparent 61%);pointer-events:none;z-index:0}.landing__topbar,.landing__inner{position:relative;z-index:1}.landing__topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 40px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}.landing__topbar .dot{color:var(--fg)}.landing__inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 40px;max-width:1120px;width:100%;margin:0 auto}.lockup{display:inline-block}.lk-line{display:block;font-family:var(--font-display);font-size:clamp(58px,15vw,170px);line-height:.8;letter-spacing:-.035em;color:var(--fg)}.lk-bar{background:var(--bar);color:var(--bar-ink);padding:.02em .12em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}.landing__meta{display:flex;align-items:center;gap:1.1rem;margin-top:84px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}.landing__disclaimer{margin-top:26px;margin-bottom:0;font-size:11px;letter-spacing:.16em;color:var(--fg);opacity:.75}.landing__song{color:var(--fg);border:1px solid var(--line);padding:.25rem .7rem}.landing__bpm{color:var(--fg)}.landing__plays{color:var(--dim);border:1px solid var(--line);padding:.25rem .7rem;letter-spacing:.16em}.landing__foot{margin-top:10px;font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}.landing__error{margin-top:32px;max-width:460px;color:#e7c9c9;border:1px solid rgba(231,201,201,.4);padding:1rem 1.2rem;font-size:.8rem}.landing__hint code{color:var(--fg)}.enterBtn{margin-top:40px;align-self:flex-start;font-family:var(--font-display);font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:-.01em;text-transform:none;padding:.7rem 2rem .8rem;color:var(--bar-ink);background:var(--bar);border:none;cursor:pointer;transition:transform .12s ease,opacity .2s ease}.enterBtn.is-ready:hover{transform:translate(6px)}.enterBtn.is-ready:active{transform:translate(2px)}.enterBtn.is-loading{background:transparent;color:var(--dim);border:1px solid var(--line);cursor:progress;animation:pulseDim 1.1s ease-in-out infinite}.enterBtn--ghost{background:transparent;color:var(--fg);border:2px solid var(--fg)}.enterBtn--ghost:hover{transform:translate(6px)}.endcard__actions{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;align-items:center}.endcard__actions .enterBtn{margin-top:0;align-self:center}:root{--hud-fg: rgba(255, 252, 244, .92);--hud-dim: rgba(255, 252, 244, .55);--hud-line: rgba(255, 252, 244, .28)}.hud{position:fixed;left:0;right:0;z-index:15;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;pointer-events:none;animation:fadeIn .8s ease both;text-shadow:0 1px 6px rgba(8,10,28,.6)}.hud--top{top:0}.hud--bottom{bottom:0;flex-direction:column;align-items:flex-start;gap:.4rem}.hud__brand{font-family:var(--font-display);letter-spacing:-.01em;font-size:.95rem;color:var(--hud-fg);pointer-events:auto}.hud__band{color:var(--hud-fg)}.hud__sep{color:var(--candy);margin:0 .45rem}.hud__song{color:var(--hud-dim)}.hud__right{display:flex;align-items:center;gap:.9rem;pointer-events:auto}.hud__beat{width:11px;height:11px;border-radius:50%;background:var(--candy);box-shadow:0 0 10px #ef6aa6b3}.hud__controls{display:flex;align-items:center;gap:.85rem;pointer-events:auto;flex-wrap:wrap;justify-content:flex-start}.hud__btn{pointer-events:auto;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--hud-fg);background:transparent;border:1px solid var(--hud-line);border-radius:6px;padding:.32rem .55rem;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .12s ease}.hud__btn:hover{background:#fffcf41f;border-color:var(--hud-fg)}.hud__btn--icon{padding:.28rem .42rem;border:none}.hud__btn--icon:hover{background:#fffcf41f}.hud__btn--play{font-size:.82rem;line-height:1;min-width:2.3rem;display:inline-flex;align-items:center;justify-content:center}.hud__btn--play:active{transform:scale(.92)}.hud__plays{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--hud-dim)}.hud__plays-ico{color:var(--candy);font-size:.6rem}.hud__plays-n{color:var(--hud-fg);font-variant-numeric:tabular-nums}.hud__time{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--hud-dim)}.hud__vol{display:flex;align-items:center;gap:.4rem}.hud__slider{width:84px;accent-color:var(--candy);cursor:pointer}.hud__track{width:100%;max-width:340px;margin:0;padding:7px 0;cursor:pointer;pointer-events:auto;touch-action:none}.hud__rail{position:relative;height:3px;width:100%;background:#fffcf438;border-radius:999px;transition:height .12s ease}.hud__track:hover .hud__rail{height:5px}.hud__bar{position:relative;height:100%;width:0%;border-radius:999px;background:var(--candy)}.hud__knob{position:absolute;right:-5px;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;transform:translateY(-50%) scale(0);transition:transform .12s ease}.hud__track:hover .hud__knob{transform:translateY(-50%) scale(1)}.subs{position:fixed;left:0;right:0;bottom:4.4rem;z-index:16;display:flex;justify-content:center;padding:0 1.5rem;pointer-events:none;text-align:center}.subs__stack{display:flex;flex-direction:column;align-items:center;gap:.3rem;max-width:94%;animation:subIn .3s ease both}.subs__line{font-family:var(--font-display);font-size:clamp(1.3rem,2.8vw,2.2rem);letter-spacing:-.01em;background:#262247c7;border-radius:14px;padding:.4rem 1.2rem .5rem;box-shadow:0 8px 26px #26224759;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:0 .32em}.subs__word{display:inline-block;opacity:.4;color:#d8d6cf73;transition:opacity .18s linear,color .18s linear,transform .18s ease;will-change:opacity,transform}.subs__line--en{font-family:var(--font-mono);font-weight:700;font-size:clamp(.74rem,1.5vw,1.02rem);letter-spacing:.01em;color:#ffe07a;background:#2622479e;border-radius:12px;padding:.22rem .9rem .28rem;opacity:.95;text-shadow:0 1px 10px rgba(38,34,71,.7);animation:subInEn .45s ease both}.warpflash{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fff,#eaf2ff 55%,#cfe0ff)}.fx-layer{position:fixed;inset:0;z-index:17;pointer-events:none;overflow:hidden}.fx-note{position:absolute;font-family:var(--font-display);font-size:clamp(1.4rem,3.4vw,2.4rem);color:#d8d6cf;text-shadow:0 0 14px rgba(127,208,224,.7),0 2px 8px rgba(0,0,0,.5);will-change:transform,opacity}.fx-ring{position:absolute;width:90px;height:90px;margin:0;border-radius:50%;border:2px solid rgba(127,208,224,.85);box-shadow:0 0 22px #7fd0e08c;will-change:transform,opacity}.fx-hint{position:fixed;left:50%;top:18%;transform:translate(-50%);z-index:18;opacity:0;pointer-events:none;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);background:#0b0c1080;padding:.4rem .9rem;border-radius:999px}.fx-hint span{color:#7fd0e0}.endcard{position:fixed;inset:0;z-index:25;display:grid;place-content:center;justify-items:center;gap:1rem;text-align:center;background:radial-gradient(120% 70% at 80% 12%,#ffe07a80,#ffe07a00 42%),linear-gradient(180deg,#8fd6eef0,#b9e8e0f0 55%,#7ac74ff0);animation:fadeIn .6s ease both}.endcard h2{font-family:var(--font-display);font-size:clamp(2.4rem,9vw,6rem);margin:0;color:var(--fg);text-shadow:3px 3px 0 #fff6e9,6px 6px 0 rgba(239,106,166,.5)}.endcard p{font-family:var(--font-mono);color:var(--fg);letter-spacing:.16em;margin:0}.glitch{position:relative}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulseDim{50%{opacity:.5}}@keyframes subIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes subInEn{0%{opacity:0;transform:translateY(4px)}to{opacity:.95;transform:translateY(0)}}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-3%,2%)}50%{transform:translate(3%,-3%)}75%{transform:translate(-2%,3%)}to{transform:translate(2%,-2%)}}@media (max-width: 820px){.landing__topbar{font-size:9px;letter-spacing:.18em;padding:16px 20px}.landing__inner{padding:0 22px}.lk-line{font-size:clamp(46px,16vw,120px)}.hud__brand{font-size:.8rem}}