* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
h1 {
  font-size: 1.7rem;
  margin: 0;
}
h2 {
  font-size: 1rem;
  margin: 0;
}
p {
  margin: 0.3rem 0;
  line-height: 1.55;
}
.welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.welcome p {
  max-width: 850px;
}
.grow {
  flex: 1;
  min-width: 150px;
}
.projectbar {
  align-items: end;
}
.projectbar .field {
  margin: 0;
}
.studio-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
  gap: 16px;
}
.controls {
  align-items: end;
}
.controls label {
  display: grid;
  gap: 6px;
}
.controls input,
.controls select {
  max-width: 150px;
}
.transport-counter {
  font-size: 2rem;
  min-width: 90px;
}
.btn,
input,
select,
summary {
  min-height: 42px;
}
button {
  cursor: pointer;
}
.file-label {
  position: relative;
  overflow: hidden;
}
.file-label input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}
.track {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.track.selected {
  border-color: var(--ink);
  border-left: 4px solid var(--ink);
}
.track .row {
  gap: 8px;
}
.track input[type="range"] {
  min-width: 100px;
  width: 100%;
  accent-color: var(--ink);
}
.track .track-title {
  flex: 1;
  min-width: 100px;
  text-align: left;
}
.track .btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.instrument-panel {
  min-width: 0;
}
.instrument-panel select {
  width: 100%;
}
.playable {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  min-width: 0;
  font-family: var(--font);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
}
.playable small {
  font-size: 0.7rem;
  color: inherit;
}
.playable.pressed {
  background: var(--tape);
  color: var(--ink);
  transform: translateY(2px);
}
.keys {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 3px;
  min-height: 150px;
}
.keys .playable {
  font-size: 0.75rem;
  padding: 2px;
}
.keys .accidental {
  background: var(--ink);
  color: var(--paper);
  height: 100px;
}
.keys .accidental.pressed {
  background: var(--tape);
  color: var(--ink);
}
.fretboard {
  display: grid;
  gap: 6px;
}
.string-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  position: relative;
}
.string-row .playable {
  background: var(--surface-2);
}
.string-row .pressed {
  background: var(--tape);
}
.pads {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pads .playable {
  min-height: 90px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.pads .pressed {
  background: var(--tape);
}
.mallets {
  display: flex;
  gap: 5px;
  align-items: start;
}
.mallets .playable {
  flex: 1;
  background: var(--surface-2);
}
.mallets .pressed {
  background: var(--tape);
}
.wind {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.wind .playable {
  min-height: 85px;
}
.holes {
  font-size: 0.7rem;
  letter-spacing: 2px;
}
.fingering-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.finger-cell {
  padding: 6px;
  border: 1px solid var(--line);
  text-align: center;
}
.notation svg {
  display: block;
  width: 100%;
  height: 150px;
}
.notation svg text {
  font-family: var(--font);
  fill: var(--ink);
}
.notation svg line {
  stroke: var(--line);
}
.notation svg .notehead {
  fill: var(--ink);
}
.notation svg .current {
  fill: var(--chart-1);
}
.rhythm-lane {
  height: 100px;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.rhythm-lane:before {
  content: "";
  position: absolute;
  left: 20%;
  top: 0;
  bottom: 0;
  border-left: 3px solid var(--ink);
}
.cue {
  position: absolute;
  top: 25px;
  transform: translateX(-50%);
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 8px;
  min-width: 48px;
  text-align: center;
}
.cue.hit {
  background: var(--ok-soft);
}
.cue.missed {
  background: var(--bad-soft);
}
.scorebar {
  font-variant-numeric: tabular-nums;
  gap: 24px;
}
.scorebar #score {
  font-size: 2rem;
}
.timeline {
  display: grid;
  gap: 6px;
}
.timeline-row {
  position: relative;
  height: 28px;
  background: repeating-linear-gradient(
    to right,
    var(--surface),
    var(--surface) calc(6.25% - 1px),
    var(--line) 6.25%
  );
  overflow: hidden;
  border-radius: 4px;
}
.timeline-note {
  position: absolute;
  height: 8px;
  background: var(--chart-1);
  min-width: 2px;
  pointer-events: none;
}
.note-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-height: 230px;
  overflow: auto;
}
.note-list .selected {
  background: var(--ink);
  color: var(--paper);
}
.badge.recording {
  background: var(--bad-soft);
  color: var(--bad);
}
.stack {
  min-width: 0;
}
.note:empty {
  display: none;
}
.muted {
  color: var(--ink-2);
}
#status {
  display: block;
  overflow-wrap: anywhere;
}
details > div {
  margin-top: 16px;
}
.mw-header {
  flex-wrap: wrap;
}
a {
  overflow-wrap: anywhere;
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 900px) {
  .studio-layout {
    grid-template-columns: 1fr;
  }
  .welcome {
    align-items: start;
  }
  .keys {
    min-height: 135px;
  }
  .mw-main {
    padding: 12px;
  }
  .projectbar {
    gap: 8px;
  }
}
@media (max-width: 520px) {
  .welcome {
    display: block;
  }
  .welcome button {
    margin-top: 12px;
  }
  .keys {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .keys .playable {
    height: 80px;
  }
  .keys .accidental {
    height: 65px;
  }
  .pads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .controls {
    gap: 10px;
  }
  .controls label {
    max-width: 45%;
  }
  .controls input,
  .controls select {
    width: 100%;
    max-width: 100%;
  }
  .mallets {
    gap: 3px;
  }
  .mallets .playable {
    font-size: 0.7rem;
    padding: 2px;
  }
  .mw-main {
    max-width: 100%;
    width: 100%;
  }
  .mw-header {
    padding: 12px;
  }
  .panel {
    padding: 12px;
  }
  .wind {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .wind .playable {
    font-size: 0.75rem;
  }
  .fingering-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.playable {
  min-width: 40px;
}
.mw-app {
  flex-wrap: wrap;
}
.mw-lang {
  min-width: 70px;
  min-height: 42px;
}
@media (max-width: 520px) {
  .mallets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.chord-diagram {
  max-width: 260px;
  margin: 12px auto;
}
.chord-diagram svg {
  width: 100%;
  color: var(--ink);
}
.chord-diagram line {
  stroke: currentColor;
}
.chord-diagram circle {
  fill: currentColor;
}
.chord-diagram text {
  fill: currentColor;
  text-anchor: middle;
  font-size: 12px;
}
.chord-diagram .finger-number {
  fill: var(--paper);
  font-weight: 700;
}

.learning-guide {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  overflow-wrap: anywhere;
}
.finger-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.key-state {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.key-state.closed {
  background: var(--ink);
  color: var(--paper);
}
.playable.expected {
  outline: 3px solid var(--chart-1);
  outline-offset: -3px;
}
.notation .playhead {
  stroke: var(--bad);
  stroke-width: 2;
}
.notation .barline {
  stroke-width: 2;
}
.notation .notehead.hollow {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
}
.notation .notehead.current {
  fill: var(--chart-1);
  stroke: var(--chart-1);
}
.notation .duration-bar {
  stroke: var(--chart-1);
  stroke-width: 3;
}
.notation .beat-count {
  font-size: 11px;
  fill: var(--ink-2);
}

.tone-panel { margin-block: 12px; } .tone-panel .field { flex: 1; min-width: min(100%, 240px); } .tone-panel output { overflow-wrap: anywhere; } .track > small { display: block; padding: 4px 0; color: var(--ink-2); }

/* Hidden root/pad fields must override shared .field display rules. */
#customPanel [hidden] { display: none !important; }
#customPanel input[type="file"] { max-width: 100%; min-width: 0; }
#customPanel .field { min-width: 0; max-width: 100%; }
[hidden]{display:none!important}
.music-tabs{position:sticky;top:0;z-index:5;background:var(--paper);padding:8px 0}.music-tabs [aria-selected=true]{background:var(--ink);color:var(--paper)}
.game-panel{max-width:1000px;width:100%;margin:auto}.game-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.game-choices label{min-width:0}.game-choices select{width:100%;min-width:0}.game-status{display:block;min-height:2em;font-weight:600;margin:8px 0}
.game-stage{border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px;background:var(--surface)}.game-lane{height:112px;position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:6px}.game-judgment{position:absolute;left:15%;height:100%;width:3px;background:var(--ink);z-index:2}.game-cues{position:absolute;inset:8px 0}.game-cue{position:absolute;transform:translateX(-50%);padding:3px 9px;border:1px solid var(--ink);border-radius:6px;background:var(--paper);font:600 14px var(--mono)}.game-cue.hit{background:var(--ok-soft)}.game-cue.miss{background:var(--bad-soft)}.game-guide{min-height:38px;padding:8px 0;font-size:.9rem}.game-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(65px,1fr));gap:7px}.game-key{min-height:60px;touch-action:none;background:var(--paper);border:1px solid var(--line);border-radius:6px;color:var(--ink)}.game-key strong,.game-key small{display:block}.game-key small{font-size:.72rem}.game-key.pressed{background:var(--ink);color:var(--paper)}.game-score{display:block;font-weight:700;margin-top:10px}.game-parts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.game-parts>div{background:var(--surface);padding:7px;border-radius:6px}.game-panel details{font-size:.85rem}.audio-edit-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}#audioWaveform{width:100%;height:150px;border:1px solid var(--line);touch-action:none}#audioEditor>.row{gap:6px}#audioEditor summary{font-weight:600;cursor:pointer}
@media(max-width:600px){.game-panel{padding:12px}.game-panel h1{font-size:1.2rem}.game-panel>.row .btn{padding:7px 9px;min-height:40px;font-size:.8rem}.game-choices .field{font-size:.8rem;margin:0}.game-choices .input{min-height:40px;padding:6px}.game-stage{padding:8px}.game-lane{height:102px}.game-key{min-height:54px}.game-parts{font-size:.8rem}.game-panel .row{gap:5px}.music-tabs{margin-top:-8px}}

#audioClips input[type=file]{max-width:100%;min-width:0}#audioClips .field{min-width:0;max-width:100%}#clipWaveform{width:100%;height:120px;border:1px solid var(--line);touch-action:none}#audioClips p{font-size:.85rem;color:var(--ink-2)}#clipList .row{border:1px solid var(--line);padding:8px}#clipList input[type=range]{max-width:100%}
.game-metadata{font-size:.9rem;color:var(--ink-2);margin:8px 0}.game-position{display:block;font:12px var(--mono);margin-top:8px}.game-lane-label{position:absolute;left:2px;font:10px var(--mono);padding:4px 2px;background:var(--paper);color:var(--ink-2);z-index:1;max-width:13%;overflow:hidden}.game-key.expected{outline:2px solid var(--chart-1);outline-offset:-3px}.game-secondary{margin-top:12px}#gameSettings>summary{cursor:pointer;min-height:40px;font-weight:600}#gameProgress{font-size:.8rem;color:var(--ink-2)}.game-score{font-size:.9rem;line-height:1.5}.game-key small{overflow-wrap:anywhere}
@media(max-width:600px){.game-keys{grid-template-columns:repeat(4,minmax(0,1fr))}.game-key{padding:5px 2px}.game-key small{font-size:.66rem}.game-metadata{font-size:.78rem}.game-score{font-size:.8rem}.game-status{font-size:.85rem;min-height:1.4em;margin:6px 0}.game-panel h1{margin:4px 0}.game-panel .game-secondary{display:flex;flex-wrap:wrap}}
.song-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;padding:8px 0}.song-card{text-align:left;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:12px;min-height:110px}.song-card strong,.song-card span,.song-card small{display:block;margin-bottom:5px}.song-card small{font-size:.72rem;color:var(--ink-2)}#songBrowser summary{cursor:pointer;min-height:40px;font-weight:600}