:root{--bg: #14151b;--fg: #d8d6cf;--dim: rgba(216, 214, 207, .55);--line: rgba(216, 214, 207, .14);--bar: #d8d6cf;--bar-ink: #14151b;--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:.05;mix-blend-mode:overlay;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:var(--bg);display:flex;flex-direction:column;animation:fadeIn .5s ease both}.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__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}.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}.hud--top{top:0}.hud--bottom{bottom:0;flex-direction:column;align-items:stretch;gap:.55rem}.hud__brand{font-family:var(--font-display);letter-spacing:-.01em;font-size:1rem;color:var(--fg)}.hud__band{color:var(--fg)}.hud__sep{color:var(--dim);margin:0 .45rem}.hud__song{color:var(--dim)}.hud__right{display:flex;align-items:center;gap:.9rem;pointer-events:auto}.hud__beat{width:11px;height:11px;border-radius:50%;background:var(--fg)}.hud__controls{display:flex;align-items:center;gap:.7rem;pointer-events:auto;flex-wrap:wrap}.hud__btn{pointer-events:auto;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--fg);background:#d8d6cf0f;border:1px solid var(--line);padding:.4rem .7rem;cursor:pointer;transition:background .2s ease}.hud__btn:hover{background:#d8d6cf29}.hud__btn--icon{padding:.3rem .5rem}.hud__time{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--dim)}.hud__vol{display:flex;align-items:center;gap:.45rem;margin-left:auto}.hud__slider{width:110px;accent-color:var(--fg);cursor:pointer}.hud__track{width:100%;padding:9px 0;cursor:pointer;pointer-events:auto;touch-action:none}.hud__rail{position:relative;height:5px;width:100%;background:#d8d6cf29;transition:height .12s ease}.hud__track:hover .hud__rail{height:7px}.hud__bar{position:relative;height:100%;width:0%;background:var(--fg)}.hud__knob{position:absolute;right:-6px;top:50%;width:13px;height:13px;border-radius:50%;background:var(--fg);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__line{font-family:var(--font-display);font-size:clamp(1.3rem,2.8vw,2.2rem);letter-spacing:-.01em;background:#0b0c10a8;padding:.4rem 1.2rem .5rem;box-shadow:0 8px 26px #0006;animation:subIn .3s ease both;max-width:92%;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}.endcard{position:fixed;inset:0;z-index:25;display:grid;place-content:center;justify-items:center;gap:1rem;text-align:center;background:#14151bdb;animation:fadeIn .6s ease both}.endcard h2{font-family:var(--font-display);font-size:clamp(2.4rem,9vw,6rem);margin:0;color:var(--fg)}.endcard p{font-family:var(--font-mono);color:var(--dim);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 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}}