:root {
  --gm-bg: #090a0c;
  --gm-machine: #1d1f23;
  --gm-panel: #141619;
  --gm-panel-2: #26292e;
  --gm-line: #43474e;
  --gm-text: #f4f2e9;
  --gm-muted: #9b9da2;
  --gm-cyan: #5ce4e4;
  --gm-green: #8cff6b;
  --gm-yellow: #ffe04b;
  --gm-pink: #ff3d79;
  --gm-purple: #c0a8ff;
  --gm-red: #ff5a4f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  min-width: 320px;
  background: var(--gm-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(#0c0d0f 1px, transparent 1px),
    linear-gradient(90deg, #0c0d0f 1px, transparent 1px),
    var(--gm-bg);
  background-size: 28px 28px;
  color: var(--gm-text);
  font-family: Arial, "Helvetica Neue", sans-serif;
}

button, input, select { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }

/* ── topbar / footer（LAB共通の型）───────────────────── */

.gm-topbar {
  display: grid;
  min-height: 58px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid #2e3034;
  background: #0c0d0f;
}

.gm-topbar a { color: var(--gm-text); text-decoration: none; }

.gm-topbar__back {
  display: grid;
  place-items: center;
  border-right: 1px solid #2e3034;
  font-size: 30px;
}

.gm-topbar__logo {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
}

.gm-topbar__logo img { width: 112px; height: auto; }

.gm-topbar__logo span {
  padding: 3px 7px;
  border: 1px solid var(--gm-line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.gm-topbar__nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.gm-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  margin: 26px auto 30px;
  padding: 14px 18px;
  max-width: 1240px;
  border-top: 1px solid #2e3034;
  color: var(--gm-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.gm-footer nav { display: flex; gap: 14px; }
.gm-footer a { color: var(--gm-text); text-decoration: none; font-weight: 700; }

/* ── 外枠 ───────────────────────────────────────── */

.gm-shell { padding: 18px 14px 0; }

.gm-machine {
  margin: 0 auto;
  max-width: 1240px;
  border: 1px solid #34373c;
  border-radius: 14px;
  background: var(--gm-machine);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.gm-machine__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #34373c;
  background: #17181c;
}

.gm-machine__head p {
  margin: 0 0 3px;
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.gm-machine__head h1 {
  margin: 0;
  font-size: 21px;
  letter-spacing: 0.1em;
}

.gm-readout {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border: 1px solid var(--gm-line);
  border-radius: 8px;
  background: #0d0e10;
  font-family: "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.gm-readout strong { color: var(--gm-cyan); font-weight: 700; }
.gm-readout span { color: var(--gm-muted); }

.gm-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 0;
}

.gm-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-right: 1px solid #34373c;
  background: #191b1f;
}

.gm-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

/* ── ミニトランスポート（スマホ専用・上部固定）──────────── */

.gm-transport-mini { display: none; }

@media (max-width: 980px) {
  .gm-transport-mini {
    display: flex;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 10px 14px;
    border-bottom: 1px solid #34373c;
    background: #17181c;
  }

  .gm-transport-mini button {
    padding: 10px 18px;
    border: 1px solid var(--gm-line);
    border-radius: 8px;
    background: var(--gm-panel-2);
    color: var(--gm-text);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    cursor: pointer;
  }

  .gm-transport-mini #playButtonMini { border-color: var(--gm-green); color: var(--gm-green); flex: 1; }
  .gm-transport-mini #playButtonMini.is-playing { background: #14310f; }
  .gm-transport-mini #loopButtonMini.is-on { border-color: var(--gm-cyan); color: var(--gm-cyan); }
}

.gm-badge {
  padding: 7px 10px;
  border: 1px solid var(--gm-yellow);
  border-radius: 6px;
  color: var(--gm-yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.gm-hint {
  margin: 0 0 8px;
  color: var(--gm-muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* ── パネル共通 ─────────────────────────────────── */

.gm-panel {
  border: 1px solid #34373c;
  border-radius: 10px;
  background: var(--gm-panel);
  padding: 12px;
}

.gm-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.gm-section-head h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.gm-section-head span {
  color: var(--gm-muted);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.gm-field {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.gm-field[hidden] {
  display: none;
}

.gm-field > span {
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.gm-field select,
.gm-field input[type="text"],
.gm-field input[type="number"] {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  color: var(--gm-text);
  font-size: 12px;
}

.gm-inline { display: flex; gap: 6px; align-items: center; }
.gm-inline input[type="text"] { flex: 1; min-width: 0; font-family: Menlo, monospace; letter-spacing: 0.12em; }

.gm-mini {
  padding: 7px 9px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: var(--gm-panel-2);
  color: var(--gm-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.gm-mini:hover { border-color: var(--gm-cyan); }

.gm-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  overflow: hidden;
}

.gm-seg button {
  padding: 7px 4px;
  border: 0;
  background: #0d0e10;
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.gm-seg button + button { border-left: 1px solid var(--gm-line); }
.gm-seg button.is-active { background: var(--gm-cyan); color: #06232a; }

.gm-generate {
  width: 100%;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid var(--gm-green);
  border-radius: 8px;
  background: linear-gradient(180deg, #204a1c, #14310f);
  color: var(--gm-green);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.gm-generate:active { transform: translateY(1px); }

/* ── シーングリッド（ステージセレクト）─────────────── */

.gm-scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.gm-scene-grid button {
  padding: 10px 4px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.gm-scene-grid button:hover { border-color: var(--gm-cyan); }

.gm-scene-grid button.is-active {
  background: var(--gm-cyan);
  border-color: var(--gm-cyan);
  color: #06232a;
}

/* ── 折りたたみパネル ───────────────────────────── */

.gm-fold > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.gm-fold > summary::-webkit-details-marker { display: none; }
.gm-fold > summary h2 { margin: 0; font-size: 12px; letter-spacing: 0.14em; }

.gm-fold > summary span {
  margin-left: auto;
  color: var(--gm-muted);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.gm-fold > summary::after {
  content: "▾";
  color: var(--gm-muted);
  font-size: 10px;
  transition: transform 0.15s;
}

.gm-fold:not([open]) > summary::after { transform: rotate(-90deg); }
.gm-fold[open] > summary { margin-bottom: 10px; }

.gm-sub {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #26292e;
}

.gm-sub > summary {
  cursor: pointer;
  list-style: none;
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.gm-sub > summary::-webkit-details-marker { display: none; }
.gm-sub > summary::before { content: "▸ "; }
.gm-sub[open] > summary::before { content: "▾ "; }
.gm-sub[open] > summary { margin-bottom: 10px; color: var(--gm-text); }

/* ── REGENERATE / LOCK ───────────────────────────── */

.gm-regen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.gm-regen-grid button {
  padding: 8px 4px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: var(--gm-panel-2);
  color: var(--gm-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.gm-regen-grid button:hover { border-color: var(--gm-yellow); color: var(--gm-yellow); }

.gm-locks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.gm-locks button {
  padding: 7px 4px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.gm-locks button.is-locked {
  border-color: var(--gm-yellow);
  background: #2c2712;
  color: var(--gm-yellow);
}

/* ── スライダー / ミキサー ────────────────────────── */

.gm-slider { display: block; margin-bottom: 8px; }

.gm-slider > span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.gm-slider output { color: var(--gm-text); font-family: Menlo, monospace; }

.gm-slider input[type="range"] {
  width: 100%;
  height: 26px;
  margin: 0;
  appearance: none;
  background: transparent;
}

.gm-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 4px;
  background: #0d0e10;
  border: 1px solid var(--gm-line);
}

.gm-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid #0d0e10;
  background: var(--gm-cyan);
}

.gm-slider input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 4px;
  background: #0d0e10;
  border: 1px solid var(--gm-line);
}

.gm-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #0d0e10;
  background: var(--gm-cyan);
}

.gm-strip {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #26292e;
}

.gm-strip:last-child { border-bottom: 0; }

.gm-strip > strong {
  font-size: 10px;
  letter-spacing: 0.06em;
}

.gm-strip .gm-slider { margin-bottom: 0; }
.gm-strip .gm-slider > span { margin-bottom: 0; }

.gm-strip__buttons { display: flex; gap: 4px; }

.gm-strip__buttons button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--gm-line);
  border-radius: 5px;
  background: #0d0e10;
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.gm-strip__buttons button.is-on--mute { border-color: var(--gm-red); background: #2d1210; color: var(--gm-red); }
.gm-strip__buttons button.is-on--solo { border-color: var(--gm-yellow); background: #2c2712; color: var(--gm-yellow); }

.gm-track--pulse1 { color: var(--gm-cyan); }
.gm-track--pulse2 { color: var(--gm-green); }
.gm-track--triangle { color: var(--gm-yellow); }
.gm-track--noise { color: var(--gm-purple); }
.gm-track--dpcm { color: var(--gm-pink); }

/* ── DUB MODE ───────────────────────────────────── */

.gm-dub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  color: var(--gm-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.gm-dub-toggle strong { color: var(--gm-muted); }
.gm-dub-toggle.is-on { border-color: var(--gm-pink); }
.gm-dub-toggle.is-on strong { color: var(--gm-pink); }

.gm-dub-body { display: none; margin-top: 10px; }
.gm-dub-body.is-open { display: block; }

.gm-dub-sends {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #26292e;
}

/* ── EXPORT ─────────────────────────────────────── */

.gm-export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.gm-export-grid button,
.gm-export-grid label {
  display: block;
  padding: 9px 6px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: var(--gm-panel-2);
  color: var(--gm-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
}

.gm-export-grid button:hover, .gm-export-grid label:hover { border-color: var(--gm-cyan); }
.gm-export-grid input[type="file"] { display: none; }

/* ── TRANSPORT / SONG ────────────────────────────── */

.gm-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.gm-transport button {
  padding: 11px 22px;
  border: 1px solid var(--gm-line);
  border-radius: 8px;
  background: var(--gm-panel-2);
  color: var(--gm-text);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.gm-transport button#playButton { border-color: var(--gm-green); color: var(--gm-green); }
.gm-transport button#playButton.is-playing { background: #14310f; }
.gm-transport button#loopButton.is-on { border-color: var(--gm-cyan); color: var(--gm-cyan); }

.gm-position {
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  font-family: Menlo, monospace;
  font-size: 11px;
  color: var(--gm-muted);
  letter-spacing: 0.08em;
}

.gm-song-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gm-song-strip button {
  min-width: 52px;
  padding: 9px 10px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  color: var(--gm-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.gm-song-strip button.is-viewing { border-color: var(--gm-cyan); color: var(--gm-cyan); }
.gm-song-strip button.is-playing-section { background: #113034; }

.gm-song-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #26292e;
}

.gm-song-edit select {
  padding: 7px 9px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  color: var(--gm-text);
  font-size: 11px;
}

.gm-song-edit__ops { display: flex; gap: 6px; }

.gm-song-strip button.is-loop-start::before {
  content: "⟲ ";
  color: var(--gm-cyan);
}

/* ── ピアノロール ───────────────────────────────── */

.gm-roll-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.gm-roll-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.gm-roll-tabs button {
  padding: 7px 10px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.gm-roll-tabs button.is-active { color: #06232a; }
.gm-roll-tabs button.is-active[data-track="pulse1"] { background: var(--gm-cyan); border-color: var(--gm-cyan); }
.gm-roll-tabs button.is-active[data-track="counter"] { background: #ffb784; border-color: #ffb784; }
.gm-roll-tabs button.is-active[data-track="arpeggio"] { background: #92baff; border-color: #92baff; }
.gm-roll-tabs button.is-active[data-track="pulse2"] { background: var(--gm-green); border-color: var(--gm-green); }
.gm-roll-tabs button.is-active[data-track="triangle"] { background: var(--gm-yellow); border-color: var(--gm-yellow); }
.gm-roll-tabs button.is-active[data-track="noise"] { background: var(--gm-purple); border-color: var(--gm-purple); }
.gm-roll-tabs button.is-active[data-track="dpcm"] { background: var(--gm-pink); border-color: var(--gm-pink); }

.gm-roll-grid-select { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.gm-roll-grid-select span { color: var(--gm-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; }

.gm-roll-grid-select select {
  padding: 6px 8px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  color: var(--gm-text);
  font-size: 11px;
}

.gm-roll-scroll {
  overflow-x: auto;
  border: 1px solid var(--gm-line);
  border-radius: 8px;
  background: #0b0c0e;
}

#rollCanvas { display: block; touch-action: none; }

.gm-roll-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.gm-roll-foot .gm-slider { flex: 1; min-width: 180px; margin-bottom: 0; }

.gm-roll-hint {
  color: var(--gm-muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* ── DEBUG / STATUS ─────────────────────────────── */

.gm-debug summary {
  cursor: pointer;
  color: var(--gm-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.gm-debug pre {
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0b0c0e;
  color: var(--gm-muted);
  font-size: 10px;
  line-height: 1.6;
  overflow-x: auto;
}

.gm-status {
  min-height: 18px;
  margin: 4px 0 0;
  color: var(--gm-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gm-status button {
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--gm-green);
  border-radius: 5px;
  background: var(--gm-green);
  color: #050806;
  font: 800 10px/1 var(--gm-mono);
  letter-spacing: 0.08em;
}

.gm-staterack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.gm-staterack button {
  padding: 7px 10px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: #0d0e10;
  color: var(--gm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.gm-staterack button:disabled { opacity: 0.4; cursor: default; }

/* ── レスポンシブ ───────────────────────────────── */

@media (max-width: 980px) {
  .gm-layout { grid-template-columns: 1fr; }
  .gm-controls { border-right: 0; border-bottom: 1px solid #34373c; }
  .gm-machine__head h1 { font-size: 17px; }
  .gm-readout { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 560px) {
  .gm-shell { padding: 10px 8px 0; }
  .gm-controls, .gm-main { padding: 10px; }
  .gm-regen-grid, .gm-locks { grid-template-columns: repeat(3, 1fr); }
  .gm-strip { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .gm-strip .gm-slider--pan { display: none; }
  .gm-transport button { padding: 10px 16px; font-size: 12px; }
  .gm-position { margin-left: 0; width: 100%; text-align: center; }
}
/* Advanced arrangement overview. Overflow stays inside the timeline. */
.gm-arrangement-scroll { overflow-x: auto; margin: 12px 0; }
.gm-arrangement { display: grid; gap: 4px; align-items: stretch; }
.gm-arrangement > span { font-size: 12px; display: flex; align-items: center; padding: 6px; }
.gm-arrangement button { min-height: 36px; padding: 4px; border: 1px solid #444; background: #202127; border-radius: 4px; font-size: 11px; color: #eee; cursor: pointer; }
.gm-arrangement button[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: -2px; background: #30323d; }
.gm-arrangement button:focus-visible { outline: 2px solid #fff; }
.gm-arrangement button.is-playing-section { background: #343943; border-bottom-color: var(--gm-cyan); }
.gm-arrangement svg { display: block; width: 100%; height: 36px; }
.gm-arrangement-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; }