@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  --bg0:#0b0620; --bg1:#1b1047; --bg2:#3b1d6e;
  --pink:#ff5ea8; --cyan:#5ef2ff; --gold:#ffd166; --lime:#8dff7a;
  --ink:#f4f1ff; --muted:rgba(244,241,255,.62);
  --glass:rgba(255,255,255,.08); --stroke:rgba(255,255,255,.18);
  --radius:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); min-height:100vh; overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 15% -10%, #5b2bd9 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 20%, #ff2e88 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 120%, #0e7c86 0%, transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 55%,var(--bg2));
}
.orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;z-index:0;animation:drift 14s ease-in-out infinite alternate}
.orb-a{width:44vmax;height:44vmax;left:-12vmax;top:-12vmax;background:radial-gradient(circle,#7b4dff,transparent 70%)}
.orb-b{width:38vmax;height:38vmax;right:-10vmax;top:22vh;background:radial-gradient(circle,#ff5ea8,transparent 70%);animation-delay:-5s}
.orb-c{width:30vmax;height:30vmax;left:20vw;bottom:-14vmax;background:radial-gradient(circle,#22d3ee,transparent 70%);animation-delay:-9s}
@keyframes drift{to{transform:translate(4vmax,3vmax) scale(1.08)}}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:3px 3px}
.glass{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25)}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 18px 40px}
.topbar{position:sticky;top:12px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;
  max-width:1080px;margin:12px auto;padding:12px 18px}
.brand{display:flex;gap:14px;align-items:center}
.logo{font-family:Fraunces,serif;font-weight:900;font-size:30px;letter-spacing:.02em;
  background:linear-gradient(120deg,var(--cyan),var(--pink),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  border:1px solid var(--stroke);border-radius:14px;padding:4px 12px}
.logo .kern-demo{display:inline-block;animation:kernpulse 2.2s ease-in-out infinite}
@keyframes kernpulse{0%,100%{letter-spacing:0}50%{letter-spacing:.12em}}
h1{font-size:22px;margin:0;letter-spacing:.02em}
.tagline{margin:2px 0 0;font-size:12px;color:var(--muted)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:12px;border:1px solid var(--stroke);border-radius:999px;padding:6px 12px;background:rgba(0,0,0,.25)}
.pill.dim{color:var(--muted)} .pill.live{color:#0b0620;background:var(--lime);border-color:transparent;font-weight:700}
.setlist{display:flex;align-items:center;gap:14px;padding:12px 16px;margin:14px 0}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:var(--ink);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;transition:.2s}
.chip:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}
.chip.active{background:linear-gradient(120deg,var(--pink),#a855f7);border-color:transparent;font-weight:700;box-shadow:0 6px 22px rgba(255,94,168,.45)}
.grid{display:grid;grid-template-columns:1.6fr .9fr;gap:16px}
.stage{padding:22px;overflow:hidden;position:relative}
.stage::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(94,242,255,.12),transparent 30%);animation:spin 12s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin:0}
.stage-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;position:relative}
h2{margin:4px 0 0;font-family:Fraunces,serif;font-size:clamp(26px,4vw,40px);font-weight:800}
.target-note{text-align:right;border:1px solid var(--stroke);border-radius:14px;padding:8px 12px;background:rgba(0,0,0,.25)}
.target-note strong{display:block;font-size:15px;color:var(--gold)}
.lyric-box{min-height:250px;display:flex;flex-direction:column;justify-content:center;gap:6px;margin:14px 0 8px;position:relative}
.lyric{margin:0;text-align:center;font-family:Fraunces,serif;line-height:1.15}
.lyric.prev,.lyric.next{font-size:15px;color:var(--muted);filter:blur(.4px);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyric.current{font-size:clamp(30px,6.4vw,58px);font-weight:800;min-height:1.4em}
.lyric.current .ch{display:inline-block;transition:letter-spacing .08s linear, transform .12s ease;will-change:transform}
.lyric.current.fire .ch{text-shadow:0 0 18px rgba(255,209,102,.9),0 0 42px rgba(255,94,168,.6)}
.kern-row{display:flex;align-items:center;gap:12px;position:relative}
.kern-readout{font-size:13px;white-space:nowrap}.kern-readout strong{color:var(--cyan);font-size:17px;margin-left:6px}
.meter-line{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid var(--stroke)}
.line-progress{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gold));transition:width .1s linear}
.grade{font-size:12px;font-weight:700;letter-spacing:.14em;border-radius:10px;padding:8px 12px;border:1px solid var(--stroke)}
.grade.idle{background:rgba(255,255,255,.08)}
.grade.perfect{background:var(--lime);color:#0b2413;border-color:transparent;animation:pop .35s ease}
.grade.good{background:var(--cyan);color:#062a30;border-color:transparent}
.grade.miss{background:var(--pink);color:#3a0719;border-color:transparent}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.combo-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:14px 0;position:relative}
.combo-strip>div{border:1px solid var(--stroke);border-radius:14px;padding:10px;text-align:center;background:rgba(0,0,0,.22)}
.combo-strip strong{display:block;font-size:24px}
.combo-block strong{color:var(--gold)}
.fire.hidden{display:none}.fire{margin-left:6px;animation:flick .5s ease-in-out infinite alternate}
@keyframes flick{to{transform:scale(1.3) rotate(-8deg)}}
.transport{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.btn{font:inherit;font-weight:700;border-radius:14px;padding:12px 18px;cursor:pointer;border:1px solid var(--stroke);transition:.18s;color:var(--ink)}
.btn.primary{background:linear-gradient(120deg,var(--pink),#a855f7 60%,#6366f1);border-color:transparent;box-shadow:0 10px 30px rgba(255,94,168,.4)}
.btn.primary:hover{transform:translateY(-2px) scale(1.01)}
.btn.ghost{background:rgba(255,255,255,.07)}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.hint{font-size:12.5px;color:var(--muted);position:relative}.hint b{color:var(--cyan)}
.side{display:flex;flex-direction:column;gap:16px}
.panel{padding:16px}
.panel h3{margin:0;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace}
.pitch-meter{position:relative;height:56px;border-radius:14px;border:1px solid var(--stroke);overflow:hidden;
  background:linear-gradient(90deg,rgba(255,94,168,.35),rgba(94,242,255,.08) 30%,rgba(141,255,122,.5) 50%,rgba(94,242,255,.08) 70%,rgba(255,94,168,.35))}
.pitch-zone.perfect{position:absolute;left:42%;right:42%;top:0;bottom:0;background:rgba(141,255,122,.35);border-left:1px dashed rgba(0,0,0,.4);border-right:1px dashed rgba(0,0,0,.4)}
.target-tick{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 12px #fff}
.needle{position:absolute;top:4px;bottom:4px;width:10px;left:50%;border-radius:6px;background:#fff;box-shadow:0 0 16px var(--cyan);transition:left .07s linear}
.pitch-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}
.cents{text-align:center;color:var(--gold);margin:8px 0 0}
.hum-pad{position:relative;height:110px;border-radius:14px;border:1px solid var(--stroke);overflow:hidden;cursor:ns-resize;
  background:radial-gradient(200px 90px at 50% var(--py,50%),rgba(255,94,168,.55),transparent 70%),linear-gradient(180deg,rgba(94,242,255,.25),rgba(168,85,247,.25));touch-action:none}
.hum-glow{position:absolute;left:10%;right:10%;height:3px;top:var(--py,50%);background:#fff;box-shadow:0 0 18px var(--cyan);border-radius:2px}
.hum-text{position:absolute;inset:auto 0 8px 0;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.slider-row{display:flex;align-items:center;gap:10px;font-size:13px;margin-top:10px}
input[type=range]{flex:1;accent-color:var(--pink)}
.toggle-row{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:8px;color:var(--muted)}
.toggle-row input{accent-color:var(--lime);width:16px;height:16px}
.how ul{margin:8px 0;padding-left:18px;font-size:13px;line-height:1.9}
.good{color:var(--lime)} .ok{color:var(--cyan)} .bad{color:var(--pink)}
.tiny{font-size:12px;color:var(--muted)}
.legend{margin-top:16px}
.chart{margin:8px 0 0;padding-left:20px;font-size:13px;line-height:2}
.chart b{color:var(--gold)} .chart .done{color:var(--lime)}
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:rgba(5,2,18,.66);backdrop-filter:blur(8px)}
.modal.hidden{display:none}
.modal-card{max-width:560px;width:100%;padding:22px;text-align:center;max-height:92vh;overflow:auto}
.modal-card h2{margin:2px 0 12px}
#encoreCanvas{width:100%;height:auto;border-radius:16px;border:1px solid var(--stroke)}
.encore-stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.encore-stats span{border:1px solid var(--stroke);border-radius:999px;padding:6px 12px;font-size:13px;background:rgba(0,0,0,.3)}
.modal-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.foot{position:relative;z-index:1;text-align:center;color:var(--muted);font-size:12px;padding:18px}
@media (max-width:820px){.grid{grid-template-columns:1fr}.topbar{position:static}.stage-head{flex-direction:column}.target-note{text-align:left}}
@media (max-width:420px){.combo-strip{grid-template-columns:1fr 1fr}.combo-strip>div:last-child{grid-column:1/-1}.transport .btn{flex:1}}
@media (prefers-reduced-motion:reduce){.orb,.stage::before,.logo .kern-demo{animation:none}}