:root { --bg:#03040b; --fg:#e7e9ff; --dim:#8a90b8; --acc:#8fb6ff; }
* { box-sizing:border-box; }
html,body { margin:0; background:radial-gradient(ellipse at 50% 120%, #14183a 0%, var(--bg) 60%); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; min-height:100%; }
header { padding:14px 16px 4px; text-align:center; }
h1 { margin:0; font-weight:300; letter-spacing:.12em; font-size:clamp(20px,5vw,30px); }
.tag { font-size:.45em; vertical-align:middle; border:1px solid var(--dim); color:var(--dim); border-radius:8px; padding:1px 6px; letter-spacing:.05em; }
.sub { margin:6px 0 0; color:var(--dim); font-size:14px; }
.controls { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:10px; }
select,input,button { font:inherit; font-size:14px; color:var(--fg); background:#10142c; border:1px solid #2a3160; border-radius:10px; padding:8px 12px; }
button { cursor:pointer; }
button.primary { background:linear-gradient(135deg,#3b5bdb,#7048e8); border:none; min-width:96px; }
button.ghost:hover, select:hover { border-color:var(--acc); }
#info { text-align:center; color:var(--dim); font-size:13px; min-height:18px; padding:0 10px; }
main { padding:8px; }
canvas { display:block; width:100%; max-width:1200px; margin:0 auto; border-radius:14px; background:#000; touch-action:manipulation; }
footer { text-align:center; color:var(--dim); font-size:12px; padding:8px 10px 20px; }
#toast { display:block; color:var(--acc); min-height:16px; margin-top:4px; }
#sound-hint { text-align:center; color:var(--acc); font-size:13px; padding:0 10px 6px; }
#sound-hint[hidden] { display:none; }
#audio-status { text-align:center; color:var(--dim); font-size:12px; min-height:16px; padding:2px 10px 0; }
#audio-status[data-state=running] { color:#8fe3b0; }

/* v5: Pluck | Pad segmented switch (Sky + each Sky Mix chart) */
.seg { display:inline-flex; align-self:center; border:1px solid #2a3160; border-radius:999px; overflow:hidden; background:#0b0f24; }
.seg button, .form .seg button { flex:0 0 auto; min-width:0; border:none; border-radius:0; background:transparent; color:var(--dim); padding:6px 12px; font-size:12.5px; }
.seg button.on { background:#2b3a80; color:var(--fg); box-shadow:inset 0 0 8px rgba(143,182,255,.35); }
.mixdate { display:flex; flex-direction:column; gap:6px; flex:1 1 140px; min-width:0; }
.mixdate label { flex:none !important; }
.mixdate .seg { align-self:flex-start; }