@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  --bg:#0d0221;
  --pink:#ff2a9d;
  --hot:#ff71ce;
  --cyan:#01cdfe;
  --purp:#b967ff;
  --gold:#fffb96;
  --orange:#ff9e00;
  --ink:#f4ecff;
  --dim:#9d8fc4;
  --panel:rgba(20,8,48,.72);
  --line:rgba(255,113,206,.28);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--bg);
  overflow-x:hidden;
  min-height:100dvh;
}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.scanlines{
  position:fixed;inset:0;z-index:3;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 1px,transparent 1px 3px);
}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(5,0,20,.75) 100%);}
#app{position:relative;z-index:5;max-width:1020px;margin:0 auto;padding:28px 18px 60px}

.masthead{text-align:center;margin:10px 0 22px}
.kicker{letter-spacing:.42em;font-size:11px;color:var(--cyan);margin:0 0 10px;text-shadow:0 0 12px var(--cyan)}
.chrome{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(38px,8vw,76px);line-height:.95;margin:0;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff 8%,var(--gold) 28%,var(--hot) 46%,var(--purp) 62%,var(--cyan) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,42,157,.45)) drop-shadow(0 3px 0 rgba(0,0,0,.55));
}
.chrome span{letter-spacing:.18em}
.sub{color:var(--dim);max-width:60ch;margin:12px auto 0;font-size:15px}
.sub::selection{background:var(--pink)}

.deck{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:16px;align-items:stretch}
@media (max-width:760px){.deck{grid-template-columns:1fr}}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 18px;backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(1,205,254,.08),0 0 34px rgba(255,42,157,.12),inset 0 0 60px rgba(185,103,255,.06);
}
.panel-title{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:.3em;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);display:inline-block}
.dot.cyan{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.dot.gold{background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* ---- dial ---- */
#dial{
  position:relative;width:min(300px,72vw);aspect-ratio:1;margin:4px auto 6px;
  cursor:grab;touch-action:none;outline:none;border-radius:50%;
}
#dial:active{cursor:grabbing}
#dial:focus-visible{box-shadow:0 0 0 3px var(--cyan)}
#dialSvg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 14px rgba(255,42,157,.5))}
.dial-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;text-align:center;
}
#clockReadout{font-family:'Orbitron',sans-serif;font-size:34px;font-weight:700;color:#fff;
  text-shadow:0 0 18px var(--pink),0 0 4px #fff}
#tempoReadout{font-size:12px;letter-spacing:.2em;color:var(--cyan);margin-top:4px}
#keyReadout{font-size:11px;letter-spacing:.24em;color:var(--gold);margin-top:3px}
.dial-hints{text-align:center;color:var(--dim);font-size:12px;letter-spacing:.14em;margin-bottom:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
#hourSlider{width:100%;margin-top:12px;accent-color:var(--pink);cursor:pointer}

.btn{
  font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:.16em;
  color:var(--ink);background:rgba(255,42,157,.12);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;
}
.btn:hover{background:rgba(255,42,157,.26);box-shadow:0 0 16px rgba(255,42,157,.5);transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.ghost{background:rgba(1,205,254,.08);border-color:rgba(1,205,254,.35)}
.btn.ghost:hover{background:rgba(1,205,254,.2);box-shadow:0 0 16px rgba(1,205,254,.45)}
.btn.ghost[aria-pressed="true"]{background:rgba(1,205,254,.3);box-shadow:0 0 16px rgba(1,205,254,.6)}
.btn.primary{background:linear-gradient(90deg,var(--pink),var(--purp));border:none;color:#fff;font-weight:700;
  box-shadow:0 0 22px rgba(255,42,157,.55);flex:1;min-width:220px;padding:13px 16px}
.btn.primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:grayscale(.4)}
.tiny-row .btn{font-size:10px;padding:8px 10px}

/* ---- mixer ---- */
.start-btn{
  font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.1em;font-size:clamp(15px,3.5vw,19px);
  width:100%;padding:16px;border:none;border-radius:14px;color:#0d0221;cursor:pointer;
  background:linear-gradient(90deg,var(--gold),var(--hot),var(--cyan));
  box-shadow:0 0 30px rgba(255,113,206,.6);transition:transform .12s,box-shadow .2s,filter .2s;
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
.start-btn:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(255,113,206,.85)}
.start-btn.live{background:linear-gradient(90deg,#3dffc8,var(--cyan),var(--purp));color:#06131a;animation:none}
.micro{color:var(--dim);font-size:12px;text-align:center;margin:8px 2px 0;letter-spacing:.04em}
.layers{display:grid;gap:10px;margin-top:14px}
.layer{
  border:1px solid rgba(1,205,254,.25);border-radius:14px;padding:10px 12px;
  background:rgba(8,2,30,.55);transition:border-color .2s,box-shadow .2s;
}
.layer.on{border-color:var(--pink);box-shadow:0 0 18px rgba(255,42,157,.35),inset 0 0 24px rgba(255,42,157,.08)}
.layer-head{display:flex;align-items:center;gap:10px}
.layer-toggle{
  width:46px;height:26px;border-radius:99px;border:1px solid var(--line);cursor:pointer;position:relative;
  background:#241044;transition:background .2s;flex:none;
}
.layer-toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#6f5fa3;transition:left .18s,background .18s,box-shadow .18s}
.layer.on .layer-toggle{background:linear-gradient(90deg,var(--pink),var(--purp))}
.layer.on .layer-toggle::after{left:22px;background:#fff;box-shadow:0 0 10px #fff}
.layer-name{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:.14em}
.layer-key{margin-left:auto;font-size:10px;color:var(--dim);border:1px solid rgba(157,143,196,.4);
  border-radius:6px;padding:1px 7px}
.layer-desc{font-size:12px;color:var(--dim);margin:2px 0 8px 56px}
.layer input[type="range"]{width:100%;accent-color:var(--cyan);cursor:pointer}
.layer-flash{animation:flash .5s}
@keyframes flash{0%{box-shadow:0 0 34px rgba(255,251,150,.9)}100%{}}

.about{margin-top:16px}
.about ol{margin:6px 0 8px;padding-left:22px;color:#d9cdf7;font-size:14px;display:grid;gap:6px}
.about code,.about kbd{font-family:inherit;background:rgba(1,205,254,.12);border:1px solid rgba(1,205,254,.3);
  border-radius:6px;padding:0 6px;font-size:12px}
.foot{text-align:center;color:var(--dim);font-size:11px;letter-spacing:.22em;margin-top:22px}
@media (max-width:420px){
  #app{padding:18px 12px 48px}
  .layer-desc{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .start-btn{animation:none}
}