:root { --bg:#0b0b0f; --fg:#e8e8ef; --muted:#9aa0a6; --accent:#6ee7ff; --accent2:#7dd3fc; --accent3:#a7f3d0; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; width: 100%; background: var(--bg); color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; overflow: hidden; }

/* Gate overlay for iOS unlock */
.gate { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(110,231,255,0.08), rgba(0,0,0,0.9)); z-index: 100; }
.gate-card { background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.12); padding: 22px; border-radius: 16px; text-align: center; box-shadow: 0 6px 30px rgba(0,0,0,0.4); }
.gate-card h1 { margin: 0 0 8px; }
.gate-card button { margin-top: 10px; padding: 10px 14px; font-weight: 700; border-radius: 10px; border: 1px solid rgba(110,231,255,0.6); background: rgba(110,231,255,0.15); color: var(--fg); }
.gate-card .hint { color: var(--muted); font-size: 12px; margin-top: 8px; }

#topbar { position: fixed; top: 0; left: 0; right: 0; padding: 8px; z-index: 10; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); }
#tabs { display: inline-flex; gap: 8px; }
#tabs .tab { padding: 8px 12px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: var(--fg);
  border-radius: 10px; font-weight: 600; cursor: pointer; }
#tabs .tab.active { background: rgba(110,231,255,0.18); border-color: rgba(110,231,255,0.5); box-shadow: 0 0 12px rgba(110,231,255,0.2) inset; }

main { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; }
.panel { position: absolute; inset: 0; display: none; }
.panel.active { display: block; }

/* ===== Synth layout ===== */
#hud { position: absolute; top: 0; left: 0; padding: 8px 10px; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
  border-bottom-right-radius: 10px; color: var(--fg); z-index: 4; font-size: 14px; }
#hud .row { display:flex; gap:16px; align-items:center; margin:4px 0; flex-wrap: wrap; }
#hud .row.small { font-size: 12px; color: var(--muted); }
label { color: var(--muted); display:flex; gap:6px; align-items:center; }
select, input[type="range"], input[type="checkbox"] { accent-color: var(--accent); }
#pad, #marks { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#pad { z-index: 1; background: radial-gradient(ellipse at center, rgba(255,255,255,0.03), rgba(0,0,0,0) 70%); }
#marks { z-index: 2; pointer-events: none; }
#help { position:absolute; inset:auto 0 12px 0; text-align:center; color: var(--muted); font-size:14px; z-index:4; pointer-events:none; }
.touch { position: absolute; width: 34px; height: 34px; margin:-17px 0 0 -17px; border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,255,0.7), rgba(110,231,255,0.1) 60%, transparent 70%);
  border: 1px solid rgba(110,231,255,0.8); box-shadow: 0 0 12px rgba(110,231,255,0.5);
  pointer-events: none; mix-blend-mode: screen; z-index: 3; }
.scaleLine { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.12); z-index: 0; }
.octaveLine { position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,0.28); box-shadow: 0 0 8px rgba(255,255,255,0.15); z-index: 0; }
.centerLine { position:absolute; top:0; bottom:0; width:2px; background:rgba(110,231,255,0.6); box-shadow: 0 0 10px rgba(110,231,255,0.6); z-index: 0; }

/* ===== Rhythm layout ===== */
.drum-hud { position: absolute; top: 0; left: 0; padding: 8px 10px; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
  border-bottom-right-radius: 10px; z-index: 2; font-size: 14px; color: var(--fg); display:flex; gap:16px; align-items:center; flex-wrap: wrap; }
.drum-hud .divider { width: 1px; height: 22px; background: rgba(255,255,255,0.18); display:inline-block; }
.pad-grid { position: absolute; inset: 0; display: grid; padding: 16px; gap: 12px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
.drum { border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: var(--fg); border-radius: 16px;
  font-weight: 700; font-size: clamp(16px, 3.8vw, 24px); box-shadow: 0 0 0 0 rgba(125,211,252,0.0);
  touch-action: none; }
.drum:active { transform: scale(0.98); }
.drum.playing { box-shadow: 0 0 22px 6px rgba(125,211,252,0.35) inset, 0 0 16px rgba(125,211,252,0.25); border-color: rgba(125,211,252,0.6); }

.drum-footnote { position:absolute; bottom:8px; left:0; right:0; text-align:center; color: var(--muted); z-index:2; font-size:12px; }

.leds { display:inline-grid; grid-template-columns: repeat(8, 12px); gap:6px; margin-left:10px; }
.leds .led { width:12px; height:12px; border-radius:3px; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 4px rgba(0,0,0,0.6); }
.leds .led.on { background: var(--accent3); box-shadow: 0 0 8px var(--accent3), inset 0 0 3px rgba(0,0,0,0.6); }
.leds .led.accent.on { background: #78ffd6; box-shadow: 0 0 10px #78ffd6, inset 0 0 3px rgba(0,0,0,0.6); }

/* ===== Waves layout ===== */
.waves-hud { position: absolute; top: 0; left: 0; padding: 8px 10px; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
  border-bottom-right-radius: 10px; z-index: 2; font-size: 14px; color: var(--fg); display:flex; gap:16px; align-items:center; flex-wrap: wrap; }
.waves-footnote { position:absolute; bottom:8px; left:0; right:0; text-align:center; color: var(--muted); z-index: 2; font-size:12px; }
.status { color: var(--muted); margin-left: 8px; }
#waveCanvas { position:absolute; inset:0; width:100%; height:100%; background:
  linear-gradient(transparent 49.5%, rgba(255,255,255,0.15) 50%, transparent 50.5%),
  radial-gradient(ellipse at center, rgba(255,255,255,0.03), rgba(0,0,0,0) 70%);
  touch-action: none; }