@font-face { font-family: "Manrope"; src: url("fonts/Manrope.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }
  :root {
    color-scheme: dark;
    --content-width: 1600px;
    --bg: #110f0c;
    --bg-elev: #1b1814;
    --bg-elev-2: #262219;
    --line: rgba(246, 241, 231, 0.12);
    --text: #f6f1e7;
    --muted: #b3aa9c;
    --faint: #8d8476;
    --amber: #ffb020;
    --amber-2: #ffd48a;
    --coral: #ff6a45;
    --teal: #2fbfa3;
    --ivory: #f4efe4;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: "Segoe UI", "Helvetica Neue", sans-serif;
    --radius: 18px;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    min-height: 100vh;
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.45;
    background:
      radial-gradient(900px 420px at 0% -10%, rgba(255, 176, 32, 0.16), transparent 55%),
      radial-gradient(800px 520px at 100% 110%, rgba(47, 191, 163, 0.1), transparent 46%),
      var(--bg);
  }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  button:disabled { opacity: 0.45; cursor: default; }
  :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  h2 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
  p { margin: 0; }
  header {
    position: sticky; top: 0; z-index: 5;
    backdrop-filter: blur(16px);
    background: rgba(17, 15, 12, 0.82);
    border-bottom: 1px solid var(--line);
  }
  .bar, main { width: min(var(--content-width), calc(100% - 32px)); margin: 0 auto; }
  .bar { display: flex; align-items: center; gap: 8px; padding: 12px 0; flex-wrap: nowrap; }
  .brand { display: flex; align-items: center; gap: 10px; min-width: 180px; }
  .mark {
    width: 40px; height: 40px; display: block; flex: none;
  }
  .brand strong { display: block; font-family: var(--sans); font-size: 19px; font-weight: 700; letter-spacing: .08em; line-height: 1.1; }
  .brand em { display: block; margin-top: 3px; color: var(--muted); font-style: normal; font-size: 12px; }
  .controls, .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .actions { margin-left: auto; }
  header .brand { min-width: 160px; flex: none; }
  header .controls, header .actions { flex-wrap: nowrap; gap: 4px; }
  header button, header select { white-space: nowrap; }
  header .seg button, header .btn, header #play, header #share-open { padding: 9px 9px; font-size: 12px; }
  header #play { min-width: 64px; }
  header #bpm { width: 40px; }
  header input[type="range"] { width: 68px; }
  header #status { width: 54px; min-width: 0; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
  header .split button { font-size: 12px; padding: 9px 10px; }
  header .split select { width: 28px; }
  @media (max-width: 1279px) {
    .bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 16px; }
    header .brand { grid-column: 1; }
    #lang-switch { grid-column: 2; grid-row: 1; }
    header .controls { grid-column: 3; grid-row: 1; justify-content: flex-end; gap: 12px; }
    header .actions { grid-column: 1 / -1; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
  }
  @media (max-width: 800px) {
    .bar { grid-template-columns: 1fr auto; }
    #lang-switch { justify-self: end; }
    header .controls { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  }
  .field { display: flex; flex-direction: column; gap: 4px; color: var(--faint); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
  .stepper, .split, .seg { display: flex; align-items: center; }
  .stepper { background: var(--bg-elev-2); border-radius: 12px; overflow: hidden; }
  .stepper button, .split select {
    background: transparent; border: 0; width: 28px; height: 36px; color: var(--text);
  }
  #bpm { width: 58px; height: 36px; border: 0; background: transparent; text-align: center; font-weight: 650; }
  input[type="range"] {
    -webkit-appearance: none; appearance: none; height: 4px; border-radius: 99px;
    background: #3c352b; width: 108px; vertical-align: middle;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--amber);
  }
  .seg { padding: 3px; background: var(--bg-elev-2); border-radius: 12px; }
  .seg button, .btn, #play, #scenario-listen, #share-open {
    border: 0; border-radius: 999px; padding: 9px 14px; background: transparent; color: var(--muted);
  }
  .seg button[aria-pressed="true"] { background: var(--amber); color: #1a1206; font-weight: 700; }
  #status {
    color: var(--amber-2); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    min-width: 64px;
  }
  #play, #scenario-listen { background: var(--amber); color: #1a1206; font-weight: 700; min-width: 92px; }
  #scenario-listen[aria-pressed="true"] { background: var(--coral); color: white; }
  #play[data-on="true"] { background: var(--coral); color: white; }
  .split { background: var(--ivory); color: #1a1206; border-radius: 999px; overflow: hidden; }
  .split button { background: transparent; color: #1a1206; border: 0; font-weight: 700; padding: 9px 12px 9px 14px; }
  .split select { color: #1a1206; height: 36px; padding-right: 8px; border-radius: 0; }
  #share-open { border: 1px solid rgba(255, 176, 32, 0.85); color: var(--amber-2); }
  .btn { background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--text); }
  main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; padding: 18px 0 40px; }
  .col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .scenario-plan { display: flex; flex-direction: column; gap: 8px; }
  .scenario-sec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .scenario-sec .name { min-width: 9em; }
  .scenario-sec .stepper button { width: 28px; height: 28px; }
  .inst-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .inst-row button[aria-pressed="true"] { background: var(--amber); color: #1a1206; font-weight: 700; border-color: transparent; }
  #inst-example, #demo { min-width: 7.5em; }
  #inst-example[aria-pressed="true"],
  #demo[aria-pressed="true"] { background: var(--coral); color: white; border-color: transparent; font-weight: 700; }
  .start-path { color: var(--text); }
  .panel {
    background: rgba(27, 24, 20, 0.92);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  }
  .panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
  .panel-body { display: flex; flex-direction: column; gap: 8px; }
  #loaded:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
  .panel-title { display: flex; gap: 10px; align-items: flex-start; min-width: 0; cursor: pointer; }
  .fold-btn {
    width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
    border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 0;
    display: grid; place-items: center;
  }
  .fold-btn i {
    display: block; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
  }
  .panel.is-collapsed .fold-btn i { transform: rotate(-45deg) translate(0, -1px); }
  .panel.is-collapsed .panel-body { display: none; }
  .panel.is-away { display: none; }
  .scenario-hidden { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
  .scenario-hidden[hidden] { display: none; }
  .scenario-hidden .btn { font-size: 13px; }
  .panel.is-collapsed .panel-head { margin-bottom: 0; }
  .panel.is-collapsed .octave,
  .panel.is-collapsed .head-actions .btn,
  .panel.is-collapsed .panel-head > .btn { display: none; }
  .panel-head p, .hint, .meta { color: var(--muted); font-size: 13px; }
  .hint { margin-top: 8px; }
  .hint-pop { position: relative; flex: 0 0 auto; }
  .hint-btn {
    width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--bg-elev-2); color: var(--amber-2); font-weight: 700; padding: 0;
  }
  .hint-btn[aria-expanded="true"] { background: var(--amber); color: #1a1206; }
  .hint-card {
    position: absolute; z-index: 8; top: calc(100% + 8px); right: 0;
    width: min(340px, 74vw); padding: 12px 14px;
    background: #221e18; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); color: var(--muted); font-size: 13px; line-height: 1.45;
  }
  .hint-card p + p { margin-top: 8px; }
  .hint-pop.inline .hint-card { position: static; width: auto; margin-top: 8px; box-shadow: none; }
  .sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  #copy-link { background: var(--ivory); color: #1a1206; font-weight: 700; }
  .meta.warn { color: var(--coral); }
  .head-actions, .row, .mode, .octave { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .row { align-items: flex-end; }
  .drop {
    border: 1.5px dashed rgba(47, 191, 163, 0.7);
    border-radius: 14px; padding: 22px 16px; text-align: center;
    background: rgba(47, 191, 163, 0.06); }
  }
  .drop.over { background: rgba(47, 191, 163, 0.16); }
  .drop strong { display: block; font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 6px; }
  .drop span { display: block; color: var(--muted); font-size: 13px; }
  #wave { width: 100%; height: 96px; display: block; border-radius: 12px; background: #14120f; }
  .sample-name { font-weight: 650; }
  label.stack { display: flex; flex-direction: column; gap: 4px; color: var(--faint); font-size: 12px; }
  label.stack input[type="range"] { width: 100%; }
  .mode { margin-top: 0; }
  .mode label {
    flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 13px;
  }
  .mode input { accent-color: var(--teal); }
  #drums, #melody { display: flex; flex-direction: column; gap: 8px; overflow-x: auto; max-width: 100%; --step-width: 18px; }
  #melody { gap: 2px; }
  .lane, .ruler {
    display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px; align-items: center;
    min-width: calc(140px + var(--n) * (var(--step-width) + 3px) - 3px);
  }
  .lane-meta { display: flex; flex-direction: column; gap: 4px; }
  .lane-name {
    text-align: left; background: transparent; border: 0; padding: 0; font-weight: 650;
  }
  .lane-meta input[type="range"] { width: 100%; }
  .cells, .ruler-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(14px, 1fr)); gap: 3px; min-width: 0; }
  .ruler i { font-style: normal; color: var(--faint); font-size: 10px; text-align: center; height: 14px; }
  .cell {
    height: 26px; border: 0; padding: 0; border-radius: 5px; background: rgba(246, 241, 231, 0.07);
  }
  .cell:hover { background: rgba(246, 241, 231, 0.16); }
  .cell.bar-end { margin-right: 0; }
  .cell.downbeat { box-shadow: inset 2px 0 0 rgba(255, 176, 32, 0.35); }
  .cell.on[data-lane="kick"] { background: var(--amber); }
  .cell.on[data-lane="snare"] { background: var(--coral); }
  .cell.on[data-lane="hat"] { background: var(--ivory); }
  .cell.on[data-lane="perc"], .cell.on[data-lane="sample"] { background: var(--teal); }
  .cell.on[data-lane="note"] { background: var(--amber-2); }
  .cell.write { box-shadow: inset 0 0 0 2px var(--amber); }
  .piano-wrap { display: flex; flex-direction: column; gap: 8px; }
  .piano-tools { align-items: center; flex-wrap: wrap; }
  .piano { position: relative; height: 132px; touch-action: manipulation; user-select: none; }
  .piano-whites { display: grid; grid-template-columns: repeat(7, 1fr); height: 100%; gap: 3px; }
  .pkey { border: 0; padding: 0; cursor: pointer; }
  .pkey.white {
    background: #f6f1e7; color: #1c1814; border-radius: 0 0 8px 8px;
    font-weight: 650; font-size: 12px; padding-bottom: 8px;
    display: flex; align-items: flex-end; justify-content: center;
  }
  .pkey.white:hover { background: #fffaf2; }
  .pkey.white:active { background: var(--amber); }
  .piano-blacks { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; }
  .pkey.black {
    pointer-events: auto; position: absolute; top: 0; height: 58%;
    width: calc(100% / 7 * 0.58);
    left: calc((var(--slot) + 1) * 100% / 7 - 100% / 7 * 0.29);
    background: #14110e; border: 1px solid rgba(246, 241, 231, 0.4);
    border-radius: 0 0 6px 6px;
  }
  .pkey.black:hover { background: #2a241c; }
  .pkey.black:active { background: var(--amber-2); }
  .cell.now { box-shadow: inset 0 0 0 2px var(--amber); }
  .lane.dim .cells { opacity: 0.38; }
.stage {
  position: relative; height: 148px; border-radius: 14px; touch-action: none;
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 176, 32, 0.16), transparent 46%),
    repeating-linear-gradient(transparent, transparent 36px, rgba(246, 241, 231, 0.04) 37px),
    #14120f;
  border: 1px solid var(--line); }
}
.stage i {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 6px rgba(255, 176, 32, 0.18); pointer-events: none;
}
#seed, #catalog-search, #catalog-group, #style-pick {
  width: 100%; background: #14120f; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px;
}
.catalog-list {
  max-height: 220px; overflow: auto;
  border: 1px solid var(--line); border-radius: 12px; background: #14120f;
}
.catalog-list button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid var(--line); padding: 8px 10px; color: var(--text);
}
.catalog-list button[aria-selected="true"] { background: rgba(255, 176, 32, 0.16); color: var(--amber-2); }
#catalog-group, #catalog-search { margin-top: 0; }
  #spectrum, #tone-wave { width: 100%; height: 72px; display: block; border-radius: 12px; background: #14120f; }
  #tone-hz { width: 100%; background: #14120f; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
  #tone-play[aria-pressed="true"],
  #minus-play[aria-pressed="true"] { background: var(--coral); color: white; border-color: transparent; }
  #hold-pitch[aria-pressed="true"],
  #midi-arm[aria-pressed="true"] { background: var(--amber); color: #1a1206; border-color: transparent; font-weight: 700; }
  .wave-seg { margin: 0; flex-wrap: wrap; }
  .wave-seg button { padding: 7px 10px; font-size: 13px; }
  #melody .cell { height: 16px; border-radius: 4px; }
  .track-empty-bar { display: flex; margin: 0 0 8px; }
  .track-empty-bar .btn { font-size: 13px; }
  #track-empty-lanes[aria-pressed="true"] { background: var(--amber); color: #1a1206; border-color: transparent; font-weight: 700; }
  .tracker { border: 1px solid var(--line); border-radius: 16px; background: #10141c; padding: 8px 8px 10px; overflow-x: auto; }
  .track-head, .track-row { display: grid; grid-template-columns: 36px repeat(var(--cols, 7), minmax(52px, 1fr)); gap: 4px; align-items: center; min-width: calc(36px + var(--cols, 7) * 56px); }
  .track-head { color: var(--faint); font-size: 10px; letter-spacing: 0.02em; padding: 4px 4px 8px; line-height: 1.15; }
  .track-col { position: relative; min-width: 0; }
  .track-head button { font-weight: 650; border: 0; display: block; width: 100%; text-align: center; border-radius: 8px; padding: 4px 2px; }
  .track-head button[data-ch] { overflow: hidden; white-space: normal; max-height: 2.6em; }
  .track-head button.added, .track-chip.on.added { color: #1a1206; background: #ffb020; }
  .track-head button.track-drop {
    position: absolute; top: -6px; right: -2px; z-index: 2;
    width: 16px; height: 16px; padding: 0; border-radius: 50%;
    background: #1a1206; color: #f4efe4; font-size: 12px; line-height: 16px;
  }
  .track-head button[data-ch="0"], .track-chip.on[data-ch="0"] { color: #2a1018; background: #ff5d8f; }
  .track-head button[data-ch="1"], .track-chip.on[data-ch="1"] { color: #042226; background: #3ecfe0; }
  .track-head button[data-ch="2"], .track-chip.on[data-ch="2"] { color: #1a1206; background: #f4efe4; }
  .track-head button[data-ch="3"], .track-chip.on[data-ch="3"] { color: #042214; background: #3ddc84; }
  .track-head button[data-ch="4"], .track-chip.on[data-ch="4"] { color: #1a1206; background: #e7c15a; }
  .track-head button[data-ch="5"], .track-chip.on[data-ch="5"] { color: #101426; background: #9db4ff; }
  .track-head button[data-ch="6"], .track-chip.on[data-ch="6"] { color: #241018; background: #f0a0c8; }
  .track-head button.col { box-shadow: inset 0 0 0 2px var(--amber); }
  .track-head button.is-off[data-ch] { background: #2a261f; color: var(--faint); text-decoration: line-through; }
  .track-chip.is-off { opacity: 0.35; }
  .track-make, .track-presets { align-items: center; }
  .track-pen { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 8px 0; }
  .track-pen[hidden] { display: none; }
  #track-keys.piano { height: 128px; }
  .pkey.on { background: var(--amber); color: #1a1206; }
  .pkey.black.on { background: var(--amber-2); color: #1a1206; }
  .track-pen-notes { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
  .track-pen-notes button {
    min-width: 2.15em; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--line);
    background: #14120f; color: var(--ivory); font-weight: 700; font-size: 12px;
  }
  .track-pen-notes button.sharp { color: #9aa4b8; }
  .track-pen-notes button[aria-pressed="true"] { background: var(--amber); color: #1a1206; border-color: transparent; }
  #track-pen-read { flex-basis: 100%; margin: 2px 0 0; }
  .track-row { padding: 1px 4px; border-radius: 8px; }
  .track-row.track-now { background: rgba(255, 176, 32, 0.1); }
  .track-idx { color: #6f7c92; font-family: ui-monospace, Consolas, monospace; font-size: 12px; text-align: center; background: transparent; border: 0; padding: 0; }
  .track-chip {
    height: 28px; border: 0; border-radius: 7px; background: transparent; color: #667085;
    font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700; line-height: 1.05;
  }
  .track-chip.col:not(.on) { background: rgba(246, 241, 231, 0.05); }
  .track-chip.cut { color: #d7b089; }
  .track-chip.sel { box-shadow: inset 0 0 0 2px var(--amber); }
  .track-chip.has-fx, .track-chip.has-chord { height: 34px; }
  .track-chip i { display: block; font-style: normal; font-size: 9px; letter-spacing: 0.04em; opacity: 0.8; }
  .track-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .track-stats div { background: #14120f; border-radius: 12px; padding: 8px 10px; }
  .track-stats span { display: block; color: var(--faint); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
  .track-stats strong { font-family: var(--serif); font-size: 26px; font-weight: 400; }
  .track-edit { display: grid; grid-template-columns: 1.3fr 0.8fr 0.7fr; gap: 8px; }
  .track-edit select, #track-fx, #track-speed { width: 100%; }
  #track-chan, #track-note, #track-fx {
    background: #14120f; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  }
  .track-transport { display: flex; gap: 8px; flex-wrap: wrap; }
  #track-play.track-start { flex: 1; min-width: 160px; border-radius: 999px; background: var(--amber); color: #1a1206; font-weight: 700; padding: 12px 16px; }
  #track-play.track-start[aria-pressed="true"] { background: var(--coral); color: white; }
  .track-map {
    position: relative;
    background: rgba(27, 24, 20, 0.96); padding-bottom: 4px;
  }
  .track-song {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 360px; overflow: auto;
    border: 1px solid var(--line); border-radius: 12px; padding: 8px;
    background: #10141c;
  }
  .track-part { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 8px; align-items: center; }
  .track-part-edit { display: grid; gap: 4px; min-width: 0; }
  .track-part-edit select, .track-form-add select {
    width: 100%; padding: 3px 4px; border-radius: 6px; border: 1px solid var(--line);
    background: #14120f; color: var(--text); font: 12px/1.2 var(--sans);
  }
  .track-part.live .track-part-edit select { color: var(--teal); }
  .track-part.on .track-part-edit select { color: var(--amber-2); }
  .part-len { display: flex; align-items: center; gap: 3px; }
  .part-len span { min-width: 1.4em; text-align: center; color: var(--muted); font-size: 12px; }
  .part-len button {
    width: 22px; height: 22px; padding: 0; border-radius: 5px; border: 1px solid var(--line);
    background: #1c1915; color: var(--text); cursor: pointer; font: 13px/1 var(--sans);
  }
  .part-len button:disabled { opacity: 0.35; cursor: default; }
  .track-form-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
  .track-form-add select { width: 160px; }
  .track-part-bars { display: flex; flex-wrap: wrap; gap: 3px; }
  .song-cell {
    width: calc(var(--bar-digits, 2) * 0.65em + 10px); min-width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 5px; background: #1a1713;
    box-shadow: inset 0 0 0 1px rgba(246, 241, 231, 0.16);
    color: var(--muted); font: 11px/22px var(--sans); text-align: center;
  }
  .song-cell.filled { background: rgba(255, 176, 32, 0.78); box-shadow: none; color: #1a1206; }
  .song-cell.past.filled:not([aria-pressed="true"]) { background: rgba(255, 176, 32, 0.34); color: rgba(26, 18, 6, 0.62); }
  .song-cell.past:not(.filled):not([aria-pressed="true"]) { color: rgba(179, 170, 156, 0.38); box-shadow: inset 0 0 0 1px rgba(246, 241, 231, 0.07); }
  .song-cell.shared { box-shadow: inset 0 -3px 0 var(--teal); }
  .song-cell.live { box-shadow: 0 0 0 2px var(--teal); }
  .song-cell[aria-pressed="true"] { background: var(--amber); box-shadow: 0 0 0 2px var(--amber-2); color: #1a1206; }
  .song-cell[aria-pressed="true"].shared { box-shadow: inset 0 -3px 0 var(--teal), 0 0 0 2px var(--amber-2); }
  .song-cell[aria-pressed="true"].live { box-shadow: 0 0 0 2px var(--coral); }
  .track-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .track-nav .meta { flex: 1; min-width: 12em; }
  #track-follow[aria-pressed="true"] { background: var(--amber); color: #1a1206; font-weight: 700; border-color: transparent; }
  .track-presets { display: flex; flex-wrap: wrap; gap: 8px; }
  .track-presets button[aria-pressed="true"] { background: var(--amber); color: #1a1206; font-weight: 700; border-color: transparent; }
  .note-name {
    text-align: right; background: transparent; border: 0; color: var(--muted); font-size: 11px; padding: 0 4px 0 0;
  }
  .note-name.sharp { color: var(--faint); }
  .mel-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; align-items: center; min-width: calc(54px + var(--n) * (var(--step-width) + 3px) - 3px); }
  .pads { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .pad {
    height: 68px; border-radius: 14px; border: 1px solid var(--line);
    background: linear-gradient(#2c2822, #1a1814); text-align: left; padding: 10px;
    font-weight: 700; position: relative;
  }
  .pad::before {
    content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--pad, var(--amber)); margin-bottom: 18px;
  }
  .pad[data-pad="kick"] { --pad: var(--amber); }
  .pad[data-pad="snare"] { --pad: var(--coral); }
  .pad[data-pad="hat"] { --pad: var(--ivory); }
  .pad[data-pad="perc"], .pad[data-pad="sample"] { --pad: var(--teal); }
  .pad.flash { background: var(--pad); color: #1a1206; transform: translateY(1px); }
  #arm[aria-pressed="true"] { background: var(--coral); color: white; border-color: transparent; }
  body.is-armed .pad { box-shadow: inset 0 0 0 1px rgba(255, 106, 69, 0.7); }
  #toast {
    position: fixed; bottom: 18px; left: 50%; z-index: 20;
    transform: translateX(-50%) translateY(12px); opacity: 0; pointer-events: none;
    background: var(--ivory); color: #1a140c; padding: 12px 16px; border-radius: 999px;
    transition: 0.2s ease; max-width: min(560px, calc(100% - 32px)); text-align: center;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  dialog { border: 0; padding: 0; background: transparent; color: var(--text); }
  dialog::backdrop { background: rgba(8, 7, 6, 0.72); }
  .sheet { width: min(460px, calc(100vw - 32px)); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
  .sheet h2 { margin-bottom: 8px; }
  .sheet input[type="text"] {
    width: 100%; margin: 8px 0; background: #14120f; border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 12px;
  }
  .stack-btns { display: flex; flex-direction: column; gap: 8px; }
  .sheet .stack-btns button { width: 100%; text-align: center; }
  #tip {
    position: fixed; z-index: 40; max-width: 280px; padding: 8px 10px;
    background: #221e18; border: 1px solid var(--line); border-radius: 10px;
    color: var(--text); font-size: 12px; line-height: 1.4;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); pointer-events: none;
  }
  footer { width: min(var(--content-width), calc(100% - 32px)); margin: 0 auto 28px; color: var(--faint); font-size: 13px; }
  @media (max-width: 800px) {
    main { grid-template-columns: 1fr; }
    .actions { margin-left: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
  }

/* Focused local music workspace */
#workbench { width: min(var(--content-width), calc(100% - 32px)); margin: 24px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
#workbench > .workbench-intro, #workbench > nav, #workbench > .studio-toolbar { grid-column: 1 / -1; }
#workbench h1 { font: 750 clamp(32px, 3.5vw, 50px)/1.12 "Manrope", var(--sans); letter-spacing: -.045em; text-wrap: balance; margin: 0 0 8px; }
.workbench-intro { max-width: 760px; display: grid; gap: 8px; }
.studio-toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.studio-toolbar label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.studio-toolbar input, .studio-toolbar select, #automation-points, .note-table input { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev-2); color: var(--text); font: inherit; padding: 9px; min-height: 42px; }
.studio-toolbar .check { display: flex; align-items: center; gap: 8px; }
#project-name { width: min(260px, 100%); }
#save-state { color: var(--teal); padding: 10px 0; font-size: 13px; }
#save-state[data-state="failed"], #save-state[data-state="conflict"] { color: var(--coral); }
#project-feedback { grid-column: 1 / -1; color: var(--amber-2); }
#project-feedback:empty { display: none; }
#workbench > .studio-details[open] { grid-column: 1 / -1; }
main section.panel { scroll-margin-top: var(--head, 160px); }
.studio-toolbar label:has(#project-name) { flex: 1 1 220px; max-width: 360px; }
.journey-hint { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 10px 0; }
.journey-hint p { margin-bottom: 10px; }
.journey-hint[hidden] { display: none; }
body[data-workspace="song"] #swing-field, body[data-workspace="song"] #loop-length,
body[data-workspace="song"] #instrument-panel .piano-wrap, body[data-workspace="song"] #instrument-panel [data-i18n="pianoHint"] { display: none; }
.studio-details { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.studio-details summary { cursor: pointer; padding: 6px 0; min-height: 36px; color: var(--amber-2); }
.studio-details[open] summary { margin-bottom: 10px; }
.studio-hidden { display: none !important; }
#workbench [aria-pressed="true"] { background: var(--amber); color: #1a1206; }
#automation-points { width: 100%; margin: 10px 0; }
.clip-actions { display: inline-flex; gap: 3px; }
.note-table-wrap { overflow-x: auto; }
.note-table { border-collapse: collapse; width: 100%; min-width: 360px; }
.note-table th { color: var(--muted); text-align: left; font-size: 12px; padding: 6px; }
.note-table td { padding: 3px; }
.note-table input { width: 100%; min-width: 60px; }
.note-table td:first-of-type { width: 50%; }
#range-from, #range-to { width: 75px; }
button, input, select, textarea { touch-action: manipulation; }
body[data-workspace="song"] main { grid-template-columns: minmax(0, 1fr); }
body[data-workspace="song"] main > .col { display: contents; }
body[data-workspace="song"] #tracker-panel { order: -1; }
#note-editor { scroll-margin-top: 160px; }
@media (pointer: coarse) { .btn, .seg button, .pkey, .cell, .note-name { min-height: 44px; } #drums, #melody { --step-width: 28px; } }
@media (max-width: 600px) {
  header { position: relative; }
  .lane, .ruler, .mel-row { overflow: visible; }
  .pads { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
  main section.panel { scroll-margin-top: 16px; }
  #note-editor { scroll-margin-top: 16px; }
  .bar { gap: 10px; padding: 10px 0; }
  header .brand { min-width: 0; }
  .brand em, #status { display: none; }
  header .controls { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 12px 16px; align-items: center; }
  header .controls input[type="range"] { width: 100%; margin: 10px 0; }
  header .controls .field { min-width: 0; }
  header .controls .seg { justify-content: center; }
  header .actions { display: flex; gap: 6px; width: 100%; }
  .actions button { font-size: 13px; padding: 9px 12px; min-height: 44px; }
  .stepper button, #bpm, .split select { min-height: 44px; }
  #workbench { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  #workbench h1 { font-size: 30px; }
  .studio-toolbar { gap: 8px; margin: 4px 0; }
  #project-name { width: 100%; }
  .studio-details { padding: 8px 12px; }
}

#wav-preview { flex-basis: 100%; width: 100%; max-width: 100%; height: 40px; }

#starter-presets { width: min(var(--content-width), calc(100% - 32px)); margin: 18px auto; scroll-margin-top: 160px; }
#starter-presets summary { cursor: pointer; font-size: 19px; font-weight: 650; padding: 12px 0; }
#starter-presets select { max-width: 100%; min-height: 44px; color: var(--text); background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
#starter-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 12px; margin-top: 14px; }
.starter-card { min-width: 0; padding: 16px; border: 1px solid #554936; border-radius: 12px; background: #181511; }
.starter-card h3 { margin: 0 0 8px; font-size: 17px; }
.starter-card p { font-size: 14px; line-height: 1.5; color: #d0c5b4; }
.starter-card .inst-row { flex-wrap: wrap; }
.starter-card button { min-height: 44px; white-space: normal; }
.starter-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 13px; }
.starter-links a { color: #ffc267; text-underline-offset: 3px; }
#starter-status { display: block; font-size: 14px; line-height: 1.6; margin-top: 10px; }
#starter-status:empty { display: none; }
@media (max-width: 600px) { #starter-presets { scroll-margin-top: 16px; } }

/* Compact closed presets and a shared baseline for the landing controls. */
#starter-presets { margin: 12px auto 0; }
#starter-presets summary { padding: 8px 0; min-height: 44px; }
#starter-presets:not(:has(details[open])) + main { padding-top: 8px; }
#project-name { width: 100%; min-width: 0; }
header .help-button { flex: none; width: 32px; padding: 8px 0; font-weight: 700; color: var(--amber-2); }
.site-footer { display: grid; gap: 14px; padding: 22px 0 8px; border-top: 1px solid var(--line); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.site-footer a, .footer-help { color: var(--amber-2); text-underline-offset: 4px; }
.footer-help { font: inherit; border: 0; background: transparent; padding: 8px 0; text-decoration: underline; }
.help-sheet { width: min(720px, calc(100vw - 32px)); }
#help { max-height: calc(100dvh - 32px); max-width: calc(100vw - 16px); overflow-y: auto; border-radius: 20px; }
.help-sheet .sheet-head { align-items: center; position: sticky; top: -18px; z-index: 1; background: var(--bg-elev); padding: 8px 0; }
.help-sheet .sheet-head h2 { font: 700 24px/1.25 "Manrope", var(--sans); margin: 0; }
.help-sheet section { margin-top: 22px; }
.help-sheet h3 { margin: 0 0 6px; font-size: 16px; color: var(--amber-2); }
.help-sheet p { line-height: 1.65; }
.help-sheet > .meta:last-child { margin-top: 24px; }
.site-footer a, .footer-help { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 600px) {
  #workbench h1 { font-size: clamp(30px, 8vw, 40px); }
  .help-sheet { padding: 16px; }
  .help-sheet .sheet-head { top: -16px; }
  .help-sheet .sheet-head h2 { font-size: 20px; }
  header .help-button { min-width: 44px; min-height: 44px; }
}

header .tempo-caption { padding-left: 9px; font-size: 10px; letter-spacing: .04em; color: var(--muted); }
header .tempo-field .stepper { min-height: 40px; }

header .split { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; }
header .split button { color: var(--text); padding: 10px; }
header .split select { width: 62px; height: 40px; padding: 0 18px 0 8px; color: var(--amber-2); border-left: 1px solid var(--line); background-color: var(--bg-elev-2); appearance: none; cursor: pointer; font-size: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23b3aa9c' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; }
header .split select option { background: var(--bg-elev-2); color: var(--text); }
#drums .lane-meta, #melody .note-name { position: sticky; left: 0; z-index: 1; background: var(--bg-elev); }

/* Beginner journey: listen -> choose -> compose -> save. Advanced tools retain the same model. */
body[data-view="library"] #workbench > :not(.workbench-intro),
body[data-view="library"] main, body[data-view="library"] #composition-editor,
body[data-view="library"] header .controls,
body[data-view="library"] header .actions > :not(#help-open) { display: none; }
body[data-experience="simple"] #workbench > nav,
body[data-experience="simple"] #workbench > .studio-details,
body[data-experience="simple"] #starter-presets > details > label,
body[data-experience="simple"][data-workspace="song"] main { display: none; }
body[data-experience="simple"][data-view="edit"] .workbench-intro,
body[data-experience="simple"][data-view="edit"] #starter-presets { display:none; }
#composition-editor { display:none; width:min(var(--content-width),calc(100% - 32px)); margin:20px auto; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--bg-elev); scroll-margin-top:100px; }
body[data-experience="simple"][data-view="edit"][data-workspace="song"] #composition-editor { display:block; }
.composition-heading { display:flex; gap:20px; justify-content:space-between; align-items:start; }
.composition-heading h2 { font:700 26px/1.25 Manrope,var(--sans); margin-bottom:8px; }
.composition-heading p, .composition-save p { color:var(--muted); max-width:760px; }
.composition-tools, .composition-save { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px; }
.composition-tools label { display:flex; gap:8px; align-items:center; }
.composition-tools select { background:var(--bg-elev-2);border:1px solid var(--line);border-radius:8px;padding:10px; }
#compose-play, .preset-listen { background:var(--amber); color:#1a1206; font-weight:700; }
#compose-bars { display:flex; gap:8px; overflow-x:auto; padding:16px 0; }
#compose-bars button { flex:none; }
#compose-bars [aria-pressed="true"] { background:var(--amber);color:#1a1206; }
#compose-grid { overflow-x:auto; }
.compose-lane { display:grid;grid-template-columns:132px repeat(16,minmax(32px,1fr));gap:5px;min-width:724px;margin:6px 0; }
.compose-cell { min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--bg-elev-2);font-size:11px; }
.compose-cell:nth-child(4n+2) { border-left:2px solid #8a6d35; }
.compose-cell[aria-pressed="true"] { background:var(--amber);color:#1a1206; }
.compose-instrument { position:sticky;left:0;z-index:1;background:var(--bg-elev);text-align:left;border:0;padding:8px;color:var(--text); }
.compose-instrument[aria-pressed="false"] { opacity:.5; }
.composition-save { border-top:1px solid var(--line);padding-top:20px; }
.composition-save h3 { margin:0 0 6px; }
.composition-save>div { margin-right:auto; }
.editor-switch { width:min(var(--content-width),calc(100% - 32px));margin:20px auto;color:var(--muted);font-size:13px;display:flex;gap:12px;align-items:center; }
#starter-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.starter-card { display:flex;flex-direction:column;gap:14px;padding:24px; }
.starter-card h3 { font:700 22px/1.25 Manrope,var(--sans);margin:0; }
.starter-card .inst-row { margin-top:auto; }
.starter-card .starter-links { margin-top:8px; }
.starter-card>details { font-size:12px;color:var(--muted); }
body[data-view="library"] #starter-presets>details>summary { font:700 26px/1.25 Manrope,var(--sans); }
body[data-view="library"] #starter-presets>details>summary::marker { font-size:15px; }
@media(max-width:700px) { #starter-list { grid-template-columns:1fr; } #composition-editor { padding:16px; } .composition-heading { flex-wrap:wrap; } .editor-switch { align-items:start;flex-direction:column; } .composition-tools label { flex-wrap:wrap; } }

body[data-experience="simple"][data-view="library"] #starter-open { display:none; }

.starter-card .inst-row { margin-top:0; }
.starter-card>p { min-height:3em; }
body[data-experience="simple"] #share-open { display:none; }

body[data-experience="simple"][data-workspace="song"] header #swing-field, body[data-experience="simple"][data-workspace="song"] header #loop-length, body[data-experience="simple"][data-workspace="song"] header #play, body[data-experience="simple"][data-workspace="song"] header .split, body[data-experience="simple"][data-workspace="song"] header #status { display:none; }
body[data-experience="advanced"] #starter-presets:not(:has(details[open])) ~ main { padding-top:8px; }

#compose-bars .is-playing { box-shadow:inset 0 0 0 2px var(--teal); }
#compose-now { display:block;min-height:20px;font-size:13px;color:var(--teal); }
body[data-experience="simple"][data-workspace="song"] #workbench > .studio-toolbar > button,
body[data-experience="simple"][data-workspace="song"] #project-feedback { display:none; }

.compose-instrument::before { content:"●";color:var(--teal);margin-right:8px; }
.compose-instrument[aria-pressed="false"]::before { content:"○";color:var(--muted); }
#compose-feedback { display:block;margin-top:12px;font-size:13px;color:var(--amber-2); }
#compose-feedback:empty { display:none; }