:root{color-scheme:dark;--bg: #05060a;--ink: #e8f4ff;--muted: rgba(170, 200, 230, .48);--accent: #ff2d8a;--cyan: #2ee6d6;--line: rgba(46, 230, 214, .16);font-family:Rajdhani,Avenir Next Condensed,Arial Narrow,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%;margin:0;background:var(--bg);color:var(--ink)}button{font:inherit;color:inherit}#app{position:relative;overflow:hidden}#camera{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:contrast(1.05) saturate(.75) brightness(.55);opacity:0}#app.live #camera{opacity:1;filter:contrast(1.15) saturate(.55) brightness(.38)}#scrim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 18% 20%,rgba(255,45,138,.16),transparent 42%),radial-gradient(ellipse at 86% 80%,rgba(46,230,214,.12),transparent 46%),linear-gradient(90deg,#05060ad1,#05060a33 26%,#05060a33 74%,#05060ad1),linear-gradient(to top,#05060af0,#05060a47 40%,#05060a8c)}#app.live #scrim{opacity:1}#hand{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;width:100%;height:100%;pointer-events:none}#start,#stage,#calibrate{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3}#start[hidden],#stage[hidden],#calibrate[hidden]{display:none!important}#start{display:grid;place-items:center;padding:max(28px,env(safe-area-inset-top)) 28px max(32px,env(safe-area-inset-bottom))}#splash{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(40px);will-change:transform}.orb-a{width:min(58vw,720px);height:min(58vw,720px);top:8%;left:4%;background:radial-gradient(circle,#ff2d8a8c,#ff2d8a00 70%);animation:drift-a 14s ease-in-out infinite}.orb-b{width:min(52vw,640px);height:min(52vw,640px);right:0;bottom:4%;background:radial-gradient(circle,#2ee6d66b,#2ee6d600 70%);animation:drift-b 16s ease-in-out infinite}.grid{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background-image:linear-gradient(rgba(46,230,214,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(46,230,214,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 72%);animation:grid-drift 18s linear infinite}.halo{position:absolute;top:50%;left:50%;width:min(78vmin,640px);height:min(78vmin,640px);border:1px solid rgba(255,45,138,.22);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 18px #ff2d8a0a,0 0 80px #ff2d8a1f;animation:halo-spin 22s linear infinite}.halo:before,.halo:after{content:"";position:absolute;top:9%;right:9%;bottom:9%;left:9%;border-radius:50%;border:1px dashed rgba(46,230,214,.28)}.halo:after{top:18%;right:18%;bottom:18%;left:18%;border-style:solid;border-color:#ff2d8a29;animation:halo-spin 12s linear infinite reverse}.eq{position:absolute;left:50%;bottom:7%;display:flex;align-items:flex-end;gap:5px;height:72px;transform:translate(-50%)}.eq i{display:block;width:4px;height:18%;border-radius:2px;background:linear-gradient(to top,var(--cyan),var(--accent));transform-origin:center bottom;animation:eq-bar 1.05s ease-in-out infinite}.eq i:nth-child(3n){animation-duration:.82s}.eq i:nth-child(4n){animation-duration:1.28s}.eq i:nth-child(5n){animation-duration:.94s}.eq i:nth-child(odd){animation-delay:-.2s}.eq i:nth-child(3n+1){animation-delay:-.45s}@keyframes drift-a{0%,to{transform:translate(0) scale(1)}50%{transform:translate(8%,10%) scale(1.12)}}@keyframes drift-b{0%,to{transform:translate(0) scale(1.05)}50%{transform:translate(-10%,-8%) scale(1)}}@keyframes grid-drift{to{transform:translate(-56px,-56px)}}@keyframes halo-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes eq-bar{0%,to{height:16%;opacity:.45}50%{height:100%;opacity:1}}.splash-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(440px,100%);text-align:center}#start h1{margin:0;font-size:clamp(4.2rem,14vw,8rem);font-weight:700;letter-spacing:.04em;line-height:.86;text-transform:uppercase;background:linear-gradient(180deg,#fff 20%,var(--cyan) 55%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(255,45,138,.35))}#calibrate{display:flex;flex-direction:column;justify-content:flex-end;padding:max(28px,env(safe-area-inset-top)) 28px max(32px,env(safe-area-inset-bottom));max-width:760px}.mark,#now-playing{letter-spacing:.28em;text-transform:uppercase}.mark{margin:0 0 14px;color:var(--accent);font-size:.78rem}#calibrate h1{margin:0;max-width:11ch;font-size:clamp(3.4rem,11vw,6.6rem);font-weight:700;letter-spacing:-.045em;line-height:.84}.lede{max-width:22rem;margin:14px 0 0;color:var(--muted);font-size:1.15rem;letter-spacing:.08em;line-height:1.25}.songs{display:flex;flex-direction:column;gap:8px;width:100%;margin:36px 0 22px;padding:0;list-style:none}.songs button{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;padding:14px 18px;text-align:left;background:#080a108c;border:1px solid var(--line);border-radius:4px;cursor:pointer}.songs button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 22px #ff2d8a38}.songs .title{font-size:1.35rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.songs .artist{color:var(--muted);letter-spacing:.16em;text-transform:uppercase}.cal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}#start-btn,#cal-record,#cal-back{min-height:52px;padding:14px 28px;font-size:1.05rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;border:0;cursor:pointer}#start-btn{width:100%;min-height:58px;margin-top:4px;color:#14030a;background:var(--accent);box-shadow:0 0 28px #ff2d8a66}#start-btn:hover{box-shadow:0 0 40px #ff2d8a9e}#cal-record{color:#14030a;background:var(--accent)}#cal-back{display:inline-flex;align-items:center;justify-content:center;color:var(--ink);background:transparent;border:1px solid var(--line);text-decoration:none}.lab-songs{margin:22px 0 0}#start-btn:disabled,#cal-record:disabled{cursor:wait;opacity:.65}#trace{display:block;width:min(440px,100%);height:72px;margin:22px 0 0}#cal-status{min-height:1.4em;margin:14px 0 0;color:var(--muted);font-size:1.15rem}#calibrate.counting #cal-status,#calibrate.recording #cal-status{color:var(--ink);font-size:2.4rem;letter-spacing:-.04em}#error{min-height:1.2em;margin:12px 0 0;color:#ffb4a8}#stage{--rail-inset: clamp(56px, 14vw, 180px);--pad-inset: clamp(56px, 12vw, 160px);--tempo-w: 236px;--pads-w: 308px;display:flex;flex-direction:column;justify-content:flex-end;padding:max(20px,env(safe-area-inset-top)) 28px max(28px,env(safe-area-inset-bottom));pointer-events:none}.stage-fx{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.stage-fx .orb-a,.stage-fx .orb-b{opacity:.38}.stage-fx .grid{opacity:.55}.stage-halo{width:min(70vmin,560px);height:min(70vmin,560px);opacity:.7}#now-playing{position:absolute;top:max(16px,env(safe-area-inset-top));left:50%;z-index:2;margin:0;font-size:.78rem;font-weight:700;letter-spacing:.36em;transform:translate(-50%);background:linear-gradient(90deg,#fff 10%,var(--cyan) 50%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}#pads{position:absolute;top:50%;right:var(--pad-inset);display:grid;grid-template-columns:repeat(2,148px);gap:12px;margin:0;transform:translateY(-50%)}.pad{--amount: 0}.pad-disc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:148px;height:120px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,rgba(255,45,138,calc(var(--amount) * .7)),rgba(46,230,214,calc(var(--amount) * .12))),#080a10b8;box-shadow:inset 0 0 0 1px #ffffff08;transition:border-color .12s linear,box-shadow .12s linear}.pad.near .pad-disc{border-color:var(--cyan);box-shadow:0 0 22px #2ee6d652}.pad.hot .pad-disc{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 32px #ff2d8a80}.pad-name,.pad-role{margin:0;text-transform:uppercase}.pad-name{font-size:1.05rem;font-weight:700;letter-spacing:.16em}.pad-role{color:var(--muted);font-size:.68rem;letter-spacing:.14em;font-variant-numeric:tabular-nums}.pad.hot .pad-name,.pad.hot .pad-role{color:#fff}#face{--jaw: 0;position:absolute;top:max(46px,calc(env(safe-area-inset-top) + 32px));left:50%;transform:translate(-50%);color:var(--muted)}.face-ring{position:relative;width:42px;height:42px;border:1px solid rgba(255,45,138,.28);border-radius:50%;box-shadow:0 0 18px #ff2d8a1f}.face-ring:before,.face-ring:after{content:"";position:absolute;top:11px;width:2px;height:5px;background:currentColor}.face-ring:before{left:10px}.face-ring:after{right:10px}.face-mouth{position:absolute;left:50%;bottom:7px;width:calc(6px + var(--jaw) * 12px);height:calc(3px + var(--jaw) * 14px);border-radius:50%;background:currentColor;transform:translate(-50%)}#face.hot{color:var(--cyan)}#face.hot .face-ring{border-color:var(--cyan);box-shadow:0 0 16px #2ee6d673}#mixer{position:absolute;top:16%;left:var(--rail-inset);bottom:16%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:var(--tempo-w);margin:0;padding:12px 8px 10px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,rgba(255,45,138,.08),transparent 28%),#080a1094;box-shadow:inset 0 0 40px #2ee6d60a;transition:border-color .16s linear,box-shadow .16s linear}#mixer.hot{border-color:var(--cyan);box-shadow:0 0 28px #2ee6d629,inset 0 0 40px #2ee6d60f}.fader{display:flex;flex-direction:column;align-items:center;min-width:0}.fader-name{color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.fader-end{color:var(--muted);font-size:.72rem;font-weight:700;line-height:1}.fader-end.hi{color:var(--cyan)}.fader-end.lo{color:var(--accent)}.fader-rail{position:relative;flex:1;width:3px;margin:8px 0;background:linear-gradient(to bottom,var(--cyan),rgba(255,45,138,.55));box-shadow:0 0 12px #2ee6d659}.fader-thumb{position:absolute;top:50%;left:50%;width:22px;height:12px;border-radius:2px;background:var(--accent);box-shadow:0 0 14px #ff2d8ab3;transform:translate(-50%,-50%)}.fader.hot .fader-thumb{background:var(--cyan);box-shadow:0 0 14px #2ee6d6bf}.fader-value{color:var(--ink);font-size:.7rem;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}#hint{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;min-height:0;margin:0;color:var(--muted);font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;transform:translate(-50%)}#lyric-scroll{position:absolute;top:18%;bottom:16%;left:calc(var(--rail-inset) + var(--tempo-w) + 28px);right:calc(var(--pad-inset) + var(--pads-w) + 20px);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%)}#lyric-list{margin:0;padding:0;list-style:none;transition:transform .22s ease-out}#lyric-list li{margin:0;padding:10px 0;color:#aac8e642;font-size:clamp(1.5rem,3.6vw,2.8rem);font-weight:700;letter-spacing:.06em;line-height:1.08;text-transform:uppercase}#lyric-list li.past{color:#aac8e624}#lyric-list li.now{background:linear-gradient(90deg,#fff 8%,var(--cyan) 48%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,45,138,.35))}#lyric-list li.now.pulse{filter:drop-shadow(0 0 22px rgba(46,230,214,.7))}#debug{position:absolute;top:168px;left:28px;margin:0;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.45;background:#00000073}@media(max-width:700px){#start,#stage,#calibrate{padding-right:20px;padding-left:20px}#stage{--rail-inset: 8px;--pad-inset: 8px;--tempo-w: 96px;--pads-w: 200px}#now-playing{left:50%}#pads{top:16%;right:var(--pad-inset);grid-template-columns:repeat(2,96px);gap:8px;transform:none}.pad-disc{width:96px;height:82px}.pad-name{font-size:.7rem}.pad-role{font-size:.55rem}#face{display:none}#mixer{top:18%;left:var(--rail-inset);bottom:18%;width:var(--tempo-w);gap:2px;padding:8px 4px 6px}.fader-name{font-size:.5rem;letter-spacing:0}.fader-thumb{width:16px;height:10px}.fader-value{font-size:.58rem}#lyric-scroll{top:58%;bottom:10%;left:calc(var(--rail-inset) + var(--tempo-w) + 10px);right:16px}#lyric-list li{font-size:clamp(1.05rem,5vw,1.6rem);padding:7px 0}.start-actions,.cal-actions{flex-direction:column}#start-btn,#cal-record,#cal-back,.songs button{width:100%}}
