:root{
  --accent: hsl(30, 80%, 50%);
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:Arial, sans-serif;
  font-size:11px;
  background:rgba(255,255,255,0.85); /* matches the parent .window panel — no visible seam where the iframe starts */
}

#app{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* ---------- control panels ---------- */
#panels{
  flex:0 0 auto;
  max-height:44%; /* safety net, not the normal case — the compact single-row controls below are sized to fit well under this even with all 6 panels present; this just stops a pathologically narrow/short window from clipping content outright */
  overflow:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start; /* the sequencer panel is taller than the rest (it has the step grid) — without this, flex's default stretch would pull every other panel up to match its height */
  align-content:start;
  gap:6px;
  padding:6px;
}

.panel{
  border:1px solid;
  padding:2px 8px 6px;
  min-width:170px;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.panel legend{
  padding:0 4px;
  font-weight:bold;
  font-size:11px;
}

/* One row per control: name | slider | value — this is what actually
   buys back the vertical space; the old stacked layout (name+value on
   one line, slider on the next) took roughly double the height. */
.ctrl{
  display:grid;
  grid-template-columns:48px 1fr 34px;
  align-items:center;
  gap:5px;
  height:18px;
}
.ctrl-name{
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ctrl-wide{
  grid-column:2 / span 2; /* selects (waveform pickers) have no separate value readout, so they take the slider+value space combined */
}
.val{
  font-weight:bold;
  font-size:10px;
  text-align:right;
  white-space:nowrap;
}

.panel select{
  font:inherit;
  font-size:10px;
  padding:1px 2px;
  border:1px solid;
  background:#fff;
}

input[type="range"]{
  width:100%;
  height:14px;
  accent-color:var(--accent); /* colors the native slider thumb/track — supported broadly enough that a fallback isn't worth the complexity here */
}

/* ---------- sequencer ---------- */
/* #sequencerPanel is itself a .panel (see synth.html) — border, padding,
   and the column layout all come from that shared class. Only the parts
   specific to the sequencer (the bar + the step grid) are styled here. */
#sequencerPanel{
  min-width:0; /* let it size to its actual content (the step grid) instead of inheriting .panel's 170px floor meant for the narrower control panels */
}
#sequencerBar{
  display:flex;
  align-items:center;
  gap:6px;
}
#sequencerBar .ctrl{
  flex:1 1 auto; /* BPM takes whatever's left between the two buttons */
  min-width:80px;
}
#playBtn, #clearSeqBtn{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  width:22px;
  height:18px;
  padding:0;
  border:1px solid;
  background:#fff;
  font:11px/1 Arial, sans-serif;
  flex:0 0 auto;
}
#playBtn{
  width:auto;
  padding:0 6px;
}
#playBtn.playing{
  background:var(--accent);
  color:#fff;
}

#sequencerGrid{
  display:flex;
  flex-direction:column;
  gap:1px;
  width:fit-content;
  border:1px solid;
  overflow-x:auto;
}
.seq-row{
  display:flex;
  gap:1px;
}
.seq-cell{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:11px;
  padding:0;
  border:1px solid #ccc;
  background:#f5f5f5;
  cursor:pointer;
}
/* Every 4th step gets a heavier left border — the usual "beat" grouping
   convention in step sequencers, so 16 steps read as 4 groups of 4
   instead of one undifferentiated row. */
.seq-cell.beat-start{
  border-left:2px solid #999;
}
.seq-cell.active{
  background:var(--accent);
  border-color:var(--accent);
}
/* The currently-playing column, drawn as an outline so it's visible
   whether or not that column also happens to be active. */
.seq-cell.playhead{
  outline:2px solid #333;
  outline-offset:-1px;
}

/* ---------- keyboard bar ---------- */
#keyboardBar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-top:1px solid;
  background:rgba(255,255,255,0.85);
}
#keyboardBar button{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  width:22px;
  height:22px;
  border:1px solid;
  background:#fff;
  font:13px/1 Arial, sans-serif;
}
#keyboardBar button:active{
  background:var(--accent);
  color:#fff;
}
#octaveReadout{
  font-weight:bold;
  min-width:56px;
}
#keyboardBar .hint{
  margin-left:auto;
  color:#555;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- piano ---------- */
#keyboard{
  flex:1 1 auto;
  min-height:60px;
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  border-top:1px solid;
  background:#ddd;
}
#keyboardInner{
  position:relative;
  height:100%;
}
.key{
  position:absolute;
  top:0;
  border:1px solid #333;
  cursor:pointer;
  touch-action:none; /* required so pressing/dragging across keys on a touchscreen doesn't scroll the page instead */
  user-select:none;
}
.key.white{
  height:100%;
  background:#fff;
  z-index:1;
}
.key.white.pressed{
  background:var(--accent);
}
.key.black{
  height:62%;
  background:#111;
  z-index:2;
}
.key.black.pressed{
  background:var(--accent);
}