@font-face{font-family:ImpactLocal;src:local('Impact')}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#111116;color:#f0efe7;font-family:Arial,Helvetica,sans-serif;--acid:#dcff00;--pink:#ff4da6;--beat:0;cursor:crosshair}#world{position:fixed;inset:0;width:100%;height:100%}.grain{pointer-events:none;position:fixed;inset:0;z-index:4;opacity:.065;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 type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E")}header{position:fixed;top:30px;left:38px;right:38px;display:flex;justify-content:space-between;align-items:flex-start;z-index:5}.brand{font-size:19px;font-weight:950;letter-spacing:-1px;display:flex;align-items:center;gap:2px}.brand-star{color:var(--acid);font-size:25px;margin:0 5px}.domain{font-size:10px;align-self:flex-end;letter-spacing:0;margin:0 0 6px 2px}.edition{font:10px/1.7 'Courier New',monospace;text-align:right;letter-spacing:1px;color:#a9a9a7}.edition b{font-weight:normal;color:#64646b}main{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:min(73vw,1060px);z-index:2;text-align:center;pointer-events:none}.eyebrow{font:10px/1.5 'Courier New',monospace;letter-spacing:2px;margin-bottom:24px;display:flex;justify-content:center;align-items:center;gap:10px;color:#c7c6c4}.eyebrow i,.footer-left i{width:6px;height:6px;background:var(--acid);border-radius:50%;box-shadow:0 0 12px #dcff0070}.divider{color:#555}.lyric{font-family:ImpactLocal,Impact,'Arial Black',sans-serif;font-weight:950;font-stretch:condensed;font-size:clamp(60px,12.6vw,190px);line-height:.85;letter-spacing:-.045em;text-transform:uppercase;transform:rotate(-4deg) scale(calc(1 + var(--beat)*.014));filter:drop-shadow(0 8px 0 #06060a);transition:filter .12s}.lyric .line{display:flex;justify-content:center;flex-wrap:wrap;gap:0 .17em;min-height:.88em}.lyric .line+.line{margin-top:.065em}.word{display:inline-block;position:relative;color:#57545f;transition:color .08s,transform .1s,text-shadow .1s;white-space:pre}.word.done{color:#eeede4}.word.active{color:var(--acid);text-shadow:5px 5px 0 #a4ba001f;transform:translateY(-3px) rotate(-1deg)}.line:nth-child(2) .word.active{color:var(--pink);text-shadow:5px 5px 0 #b5206e30}.punctuation{color:var(--acid)}.under-lyric{display:flex;align-items:center;justify-content:center;gap:16px;font:11px 'Courier New',monospace;letter-spacing:3px;margin-top:29px;color:#aaa5b3}.tiny-star{color:var(--pink);font-size:22px}.stamp{position:fixed;right:4.3%;bottom:17%;width:103px;height:103px;border:1px solid #dfff0066;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;transform:rotate(15deg);color:var(--acid);background:#16161077;pointer-events:none}.stamp span{font:7px monospace;letter-spacing:1px}.stamp strong{font:900 27px/.85 Impact,sans-serif;text-align:center;margin:8px 0}footer{position:fixed;bottom:29px;left:38px;right:38px;display:flex;justify-content:space-between;align-items:flex-end;z-index:5}.footer-left{display:flex;align-items:center;gap:9px;font:9px monospace;letter-spacing:1.1px;color:#94939a}.footer-right{text-align:right;font:9px/1.8 monospace;letter-spacing:1px;color:#c0bfc4}.footer-right span{display:block;font-size:8px;color:#65646d}.equalizer{display:flex;align-items:flex-end;gap:3px;height:26px;position:absolute;left:50%;transform:translateX(-50%)}.equalizer b{width:3px;background:#dcff00;opacity:.65;transform-origin:bottom;height:20px;transform:scaleY(.15)}#gesture{position:fixed;z-index:6;bottom:88px;left:50%;transform:translateX(-50%);font:10px/1.8 monospace;letter-spacing:2px;text-align:center;color:var(--acid);opacity:0;transition:opacity .4s;pointer-events:none}#gesture span{display:block;font-size:8px;letter-spacing:3px;color:#77747e}#gesture.show{opacity:1}body.playing .eyebrow i{animation:blink 1s infinite}body.flash .lyric{filter:drop-shadow(6px 5px 0 #792f92) drop-shadow(-4px -2px 0 #00c9c940)}@keyframes blink{50%{opacity:.3}}@media(max-width:600px){header{top:23px;left:20px;right:20px}.brand{font-size:15px}.brand-star{font-size:20px}.edition{font-size:7px;letter-spacing:.3px}.domain{font-size:8px}main{width:92vw;top:48%}.lyric{font-size:20vw;letter-spacing:-.055em}.eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:28px}.under-lyric{font-size:8px;letter-spacing:1.5px;margin-top:25px}.stamp{width:73px;height:73px;right:7%;bottom:18%}.stamp strong{font-size:21px;margin:5px 0}.stamp span{font-size:5px}footer{left:20px;right:20px;bottom:22px}.footer-left{font-size:7px;max-width:130px;line-height:1.8}.footer-right{font-size:7px;letter-spacing:.1px}.footer-right span{font-size:6px}.equalizer{bottom:46px}#gesture{bottom:110px;font-size:8px;width:90%}}@media(prefers-reduced-motion:reduce){.lyric{transform:rotate(-4deg)}body.playing .eyebrow i{animation:none}}
@keyframes lyric-arrive{from{opacity:.1;translate:0 13px;scale:1.035}to{opacity:1;translate:0 0;scale:1}}.lyric .line{animation:lyric-arrive .17s ease-out both}.lyric .line:nth-child(2){animation-delay:.025s}@media(prefers-reduced-motion:reduce){.lyric .line{animation:none}}
/* Every phrase gets an art-directed angle. The karaoke sweep stays on the text. */
.lyric{transform:translateX(var(--lyric-x,0%)) rotate(var(--lyric-angle,-4deg)) skewX(var(--lyric-skew,0deg)) scale(calc(1 + var(--beat)*.014));transition:transform .28s cubic-bezier(.18,.8,.25,1),filter .12s}
.lyric.chorus .line:nth-child(2){transform:translateX(4%) rotate(-3deg)}
.lyric.chorus .line:nth-child(3){transform:translateX(-3%) rotate(3deg)}
@media(prefers-reduced-motion:reduce){.lyric{transition:none;transform:rotate(var(--lyric-angle,-4deg))}.lyric .line{animation:none}}