:root {
  color-scheme: light;
  --bg: #f3f4ef;
  --panel: #fafbf7;
  --fg: #1b1f1c;
  --muted: #626b61;
  --line: #d2d6cb;
  --accent: #c6f34a;
  --accent-ink: #202918;
  --accent-hover: #d6ff72;
  --accent-text: #4f640e;
  --focus: #4f640e;
  --display: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101311;
  --panel: #171c18;
  --fg: #f0f3e8;
  --muted: #a4aea0;
  --line: #353e34;
  --accent-text: #c6f34a;
  --focus: #c6f34a;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); }
body { font: 14px/1.5 var(--display); -webkit-font-smoothing: antialiased; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
button, a { touch-action: manipulation; }
/* Instrument chrome is not selectable copy. Help, privacy and native text
   fields remain readable/selectable; no global page-zoom restriction. */
:is(.app-header, .scene-sidebar, .stage-panel, .immersive-toolbar, .immersive-tools, .toast) {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
:is(button, summary) { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
:is(textarea, input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]), [contenteditable]:not([contenteditable="false"])) {
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; touch-action: auto;
}
button:disabled { opacity: .35; cursor: default; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
em { font-style: normal; }
[hidden], [data-legacy] { display: none !important; }
html[data-edition="lite"] [data-app-only], html[data-edition="full"] [data-web-only] { display: none !important; }
.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; pointer-events: none; }
:is(button, a, input, select, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.stage-panel[data-input-modality="pointer"] canvas:focus-visible { outline: none; }
.symbol-library, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Safe areas are owned here, once. The native wrapper is edge-to-edge. */
.app-shell {
  width: 100%; max-width: 1600px; height: 100dvh; margin: auto;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 12px;
}
.app-header { display: flex; flex: 0 0 48px; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 8px; min-height: 48px; min-width: 0; font-size: 18px; font-weight: 750; letter-spacing: -.06em; white-space: nowrap; }
.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.brand em { font-weight: 450; }
.brand[role="button"] { cursor: pointer; border-radius: 5px; }
.brand[role="button"]:active { opacity: .75; }
@media (hover: hover) {
  .brand[role="button"]:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
}
.brand-mark { width: 25px; height: 25px; flex: 0 0 25px; overflow: hidden; background: transparent; color: var(--fg); }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-mark [data-glyph="flow"] { fill: var(--accent-text); stroke: var(--accent-text); }
.onboarding-brand { display: flex; align-items: center; gap: 8px; }
.header-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 48px; align-items: center; flex: 0 0 auto; }
.icon-button { width: 48px; min-width: 48px; min-height: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: var(--muted); }
.icon-button:hover, .quiet-button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.sound-toggle { display: flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; color: var(--muted); }
.sound-toggle span { display: none; }
.sound-toggle[aria-pressed="true"] { color: var(--fg); }
.intro, .sidebar-foot, .device-code { display: none; }

.workspace { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 54px; gap: 10px; }
.stage-panel { grid-row: 1; position: relative; display: flex; flex-direction: column; gap: 9px; height: 100%; min-height: 0; min-width: 0; }
.scene-sidebar { grid-row: 2; min-width: 0; border-top: 1px solid var(--line); padding: 5px 1px 0; }
.scene-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; height: 48px; }
.scene-tab { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; border-radius: 5px; color: var(--muted); }
.scene-tab strong { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.025em; }
.scene-tab small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.15; }
.scene-number, .scene-indicator { display: none; }
.scene-tab[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); }
.scene-tab:hover:not([aria-selected="true"]) { background: color-mix(in srgb, var(--fg) 5%, transparent); }

.stage-wrap { position: relative; flex: 1; min-height: 180px; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); container-type: size; touch-action: none; }
.stage-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.stage-heading, .instrument-readout { display: none; }
.signal-led { width: 5px; height: 5px; background: var(--accent-text); border-radius: 50%; }
.stage-hint { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); max-width: 63%; text-align: center; color: var(--muted); font: 11px/1.4 var(--display); pointer-events: none; transition: opacity .18s; }
.stage-hint.is-quiet { opacity: 0; }
.stage-panel[data-playing="true"] .stage-hint { opacity: 0; }
.stage-hint .hint-dot { display: none; }
.burst-button { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 5px; color: var(--fg); background: var(--panel); }
.burst-button:active { background: var(--accent); color: var(--accent-ink); }
.burst-button:disabled { opacity: .28; }
.burst-button:not(:disabled) { border-color: var(--accent-text); color: var(--accent-text); }
.hold-feedback { position: absolute; bottom: 5px; left: 14px; right: 14px; height: 2px; background: var(--line); opacity: 0; pointer-events: none; }
.hold-feedback.is-active { opacity: 1; }
.hold-feedback span { display: block; width: 0; height: 100%; background: var(--accent); }
.replay-badge { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px; max-width: calc(100% - 90px); background: var(--fg); color: var(--bg); border-radius: 4px; font: 11px/1.3 var(--display); pointer-events: none; }
.stage-panel[data-scene="pulse"] :is(.burst-button, .stage-hint, .hold-feedback) { display: none; }
.stage-panel[data-scene="piano"] .burst-button { display: none; }
.stage-panel[data-scene="pulse"] .replay-badge { top: 33px; right: 12px; bottom: auto; left: auto; transform: none; }
.orbit-pads[data-integrated="true"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.orbit-pads[data-integrated="true"]:focus-within { z-index: 5; left: 8px; right: 8px; bottom: 8px; width: auto; height: auto; padding: 5px; overflow: visible; clip-path: none; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.orbit-pad-row { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 6px; }
.orbit-pad-row button { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--fg); font-size: 12px; font-weight: 650; touch-action: none; user-select: none; -webkit-user-select: none; }
.orbit-pad-row button:hover { border-color: var(--focus); }
.orbit-pad-row button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--focus); }
.stage-panel[data-view="deck"] :is(#stage, .stage-heading, .instrument-readout, .stage-hint, .hold-feedback, .replay-badge, .burst-button) { display: none !important; }
.stage-panel[data-view="deck"] .orbit-pads { display: none !important; }
.stage-panel .fx-deck { grid-template-rows: 48px minmax(0, 1fr) auto; }
.stage-panel .deck-selector { min-height: 48px; }
.stage-panel .deck-selector :is(select, button), .stage-panel .deck-pads button { min-height: 48px; }
.stage-panel .sample-bar button { min-height: 48px; }

.stage-controls { flex: 0 0 auto; min-height: 0; max-height: min(48dvh, calc(100% - 189px)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: 1px 1px 3px; container-type: inline-size; touch-action: manipulation; }
.layer-strip { position: sticky; top: 0; z-index: 5; padding: 0 0 5px; background: var(--bg); }
.layer-strip .layer-buttons { gap: 4px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; }
.layer-strip .layer-buttons button { min-height: 44px; border: 0; border-radius: 4px; background: transparent; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.layer-strip .layer-buttons button[aria-pressed="true"] { background: color-mix(in srgb,var(--accent) 12%,transparent); }
.layer-strip .layer-buttons button[aria-pressed="false"] { color: var(--muted); }
.layer-strip .layer-buttons button[aria-pressed="false"] .layer-led { background: transparent; border: 1px solid currentColor; opacity: .7; }
.layer-strip .layer-led { width: 5px; height: 5px; }
.is-coached { outline: 1px solid var(--accent-text); outline-offset: -1px; }
.primary-controls { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 6px; min-height: 48px; padding-bottom: 8px; background: var(--bg); }
html[data-edition="full"] .primary-controls { top: 54px; }
.primary-controls > button { position: relative; width: 100%; min-width: 48px; min-height: 48px; height: 48px; padding: 0; }
.primary-controls > button .icon { width: 22px; height: 22px; }
.primary-controls :is(.live-loop-button, .remix-button, .immersive-button) { border-color: transparent; }
.composition-controls { display: grid; grid-template-columns: repeat(6, minmax(48px, 1fr)); align-items: center; gap: 2px; margin-bottom: 4px; }
.composition-controls { border-top: 1px solid var(--line); padding-block: 5px; }
.primary-controls { border-radius: 6px; }
.composition-controls:has(#demo-stop:not([hidden])) { grid-template-columns: repeat(6, minmax(48px, 1fr)); }
.composition-controls > button { width: 100%; min-width: 48px; min-height: 48px; height: 48px; padding: 0; border-color: transparent; color: var(--muted); }
.composition-controls button .icon { width: 21px; height: 21px; }
.demo-controls { display: contents; }
.demo-controls #demo-button { width: 100%; min-width: 48px; min-height: 48px; height: 48px; padding: 0; border-color: transparent; color: var(--muted); }
.demo-controls #demo-stop { width: 100%; min-width: 48px; height: 48px; }
#demo-stop[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
:is(.primary-controls, .composition-controls) button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.loop-progress { position: absolute; inset: 0; width: 40px; height: 40px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.5; pointer-events: none; }
.loop-progress circle:first-child { opacity: .14; }
.loop-progress-fill { stroke-width: 2; stroke-linecap: round; stroke-dasharray: 125.664; stroke-dashoffset: calc(125.664 * (1 - var(--loop-progress,0))); transform: rotate(-90deg); transform-origin: center; }
.live-loop-button[aria-pressed="false"] .loop-progress { opacity: 0; }
.live-loop-button[aria-pressed="true"] .icon { width: 18px; height: 18px; }
@keyframes loop-arm { to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .live-loop-button .icon { animation: none !important; } }
.web-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.web-preview p { min-width: 0; flex: 1; color: var(--muted); }
.web-preview strong, .web-preview small { display: block; font-size: 11px; line-height: 1.45; }
.web-preview strong { font-weight: 650; }
.web-preview a { min-width: 44px; min-height: 44px; height: 48px; padding: 6px 8px; gap: 5px; font-size: 11px; font-weight: 550; }
.web-preview .icon { width: 14px; height: 14px; }
html[data-edition="lite"] .scene-tabs { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
html[data-edition="lite"] .stage-controls { display: grid; grid-template-columns: repeat(5, minmax(48px, 1fr)); align-content: start; gap: 6px; }
html[data-edition="lite"] :is(.primary-controls, .composition-controls) { display: contents; }
html[data-edition="lite"] .composition-controls .demo-controls { display: contents; }
html[data-edition="lite"] .stage-controls:has(#demo-stop:not([hidden])) { grid-template-columns: repeat(5, minmax(48px, 1fr)); }
html[data-edition="lite"] .composition-controls > button { width: 100%; }
html[data-edition="lite"] #demo-stop { width: 100%; justify-self: stretch; }
html[data-edition="lite"] .stage-controls > :not(.primary-controls, .composition-controls) { grid-column: 1 / -1; }
.live-loop-button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.live-loop-feedback { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 3px; border-top: 1px solid var(--line); }
.loop-meter { display: flex; gap: 3px; flex: 0 0 37px; }
.loop-meter span { display: block; width: 7px; height: 7px; border: 1px solid var(--muted); border-radius: 2px; opacity: .4; }
.loop-meter span[data-filled="true"] { background: var(--accent-text); border-color: var(--accent-text); opacity: .65; }
.loop-meter span[data-active="true"] { background: var(--accent-text); border-color: var(--accent-text); opacity: 1; transform: scale(1.15); }
.live-loop-feedback[data-phase="record"] .loop-meter span[data-active="true"],.live-loop-feedback[data-phase="overdub"] .loop-meter span[data-active="true"] { border-radius: 50%; }
.live-loop-status:not(.sr-only) { flex: 1; margin: 0; color: var(--muted); font: 10px/1.3 var(--mono); }
.live-loop-time { min-width: 43px; color: var(--fg); font: 11px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.live-loop-feedback[data-recording="true"] .live-loop-time { color: var(--accent-text); }
.live-loop-tools { display: flex; gap: 6px; }
.live-loop-tools button { width: 44px; min-width: 44px; min-height: 44px; height: 44px; padding: 0; }
.live-loop-tools button .icon { width: 17px; height: 17px; }
@container (max-width: 440px) {
  .primary-controls > button { padding-inline: 0; }
}
@container (max-width: 297px) {
  .composition-controls,.composition-controls:has(#demo-stop:not([hidden])) { grid-template-columns: repeat(3, minmax(48px, 1fr)); }
}
@container (max-width: 270px) {
  .composition-controls { gap: 0; }
}
.mix-controls { display: flex; align-items: center; }
.layer-buttons { display: flex; align-items: center; flex: 1; min-width: 0; gap: 5px; }
.layer-buttons button { flex: 1; min-width: 44px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.layer-buttons button[aria-pressed="true"] { border-color: var(--focus); color: var(--accent-text); }
.layer-led { width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: .25; }
.layer-buttons button[aria-pressed="true"] .layer-led { opacity: 1; }
.jam-button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 77px; min-height: 44px; padding: 8px 12px; border-radius: 5px; background: transparent; color: var(--fg); font-size: 13px; font-weight: 750; }
.jam-button .icon { width: 16px; height: 16px; }
.jam-button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.jam-button:hover { background: var(--accent-hover); color: var(--accent-ink); }
.groove-status { min-height: 16px; margin: 5px 1px 10px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.stage-panel[data-playing="true"] .groove-status,
.stage-panel:has(.stage-hint.is-quiet):has(.layer-buttons [aria-pressed="true"]) .groove-status { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; overflow: hidden; clip-path: inset(50%); }
.coach-hint { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; padding-left: 8px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.coach-hint p { flex: 1; }
.coach-hint .icon { width: 15px; height: 15px; }
.quiet-button, .primary-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; font-weight: 650; color: var(--fg); }
.primary-button { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.primary-button:hover { background: var(--accent-hover); }
.primary-button .icon, .quiet-button .icon { width: 17px; height: 17px; }
.full-width { width: 100%; }

.sound-details { border-top: 1px solid var(--line); }
.sound-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding-inline: 8px; list-style: none; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.sound-details > summary::-webkit-details-marker { display: none; }
.sound-details > summary::after { content: '+'; font-size: 20px; font-weight: 400; }
.sound-details[open] > summary::after { content: '−'; }
.sound-details[open] > summary { color: var(--fg); }
.sound-details .current-voice { margin-left: auto; color: var(--fg); font-size: 12px; font-weight: 500; }
.scene-tab small { display: block; margin-top: 2px; color: var(--muted); font: 9px/1.2 var(--mono); letter-spacing: .04em; }
.scene-tab[aria-selected="true"] small { color: var(--accent-ink); opacity: .75; }
.sound-details > summary { position: sticky; top: 56px; z-index: 3; background: var(--bg); }
html[data-edition="full"] .sound-details > summary { top: 110px; }
.sound-details[open] > summary { border-bottom: 1px solid var(--line); }
.stage-controls { scroll-padding-block: 112px 12px; }
html[data-edition="full"] .stage-controls { scroll-padding-block: 162px 12px; }
.sound-details :is(button,input,select) { scroll-margin-block: 112px 12px; }
.sound-details-content { padding: 4px 1px 8px; }
.control-label { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.harmony-controls { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .75fr) minmax(0, 1fr); gap: 8px; margin: 12px 0 14px; }
select { width: 100%; height: 48px; min-width: 0; margin-top: 5px; padding: 0 9px; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 4px; font-size: 14px; }
.instrument-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.performance-sound { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sound-macros { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.sound-macros label { min-width: 0; }
.sound-macros .control-label { display: flex; justify-content: space-between; gap: 4px; }
.sound-macros output { color: var(--fg); font-variant-numeric: tabular-nums; }
.sound-macros input[type="range"], .immersive-macros input[type="range"] { touch-action: none; }
.voice-control, .character-control, .tempo-control, .mix-parameter { min-width: 0; }
.character-control .control-label { display: flex; justify-content: space-between; gap: 6px; }
.character-control output, .tempo-control output { color: var(--fg); font-variant-numeric: tabular-nums; }
.parameter-row { display: flex; align-items: center; min-height: 52px; }
.parameter-dial { display: none; }
input[type="range"] { min-width: 0; width: 100%; height: 48px; margin: 0; accent-color: var(--accent-text); cursor: ew-resize; touch-action: pan-y; }
.tempo-control { grid-column: 1 / -1; }
.tempo-row { display: grid; grid-template-columns: minmax(0, 1fr) 65px; gap: 8px; align-items: center; }
.metronome-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 48px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; }
.metronome-button[aria-pressed="true"] { color: var(--accent-text); border-color: var(--focus); }
.metronome-led { flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.metronome-led:is(.is-active, .is-tick, .is-lit), .metronome-led[data-active="true"] { background: var(--accent-text); }
.symmetry-button { align-self: end; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
.symmetry-button[aria-pressed="true"], .loop-button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.loop-button { min-height: 44px; padding: 8px 9px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 4px; color: var(--muted); font-size: 12px; }
.loop-button .icon { width: 16px; height: 16px; }
.gesture-guide { display: none; }

.toast { position: fixed; z-index: 20; bottom: max(80px, calc(env(safe-area-inset-bottom) + 66px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px); min-height: 48px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--bg); background: var(--fg); font-size: 12px; }
.toast button { flex-shrink: 0; min-width: 44px; min-height: 44px; color: var(--bg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sheet { width: min(560px, calc(100% - 28px)); max-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom))); margin: auto; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); overflow-y: auto; overscroll-behavior: contain; }
.sheet::backdrop { background: #10131199; }
.sheet-close { position: sticky; float: right; top: 0; z-index: 3; margin: -10px -10px 6px 8px; background: var(--panel); }
.eyebrow { color: var(--muted); font: 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sheet h2 { margin: 16px 0 12px; padding-right: 30px; font-size: 32px; font-weight: 750; line-height: 1.07; letter-spacing: -.045em; }
.sheet-intro { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
.sheet-note { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 16px 0; }
.sheet .full-width + .full-width { margin-top: 8px; }
.help-steps { display: grid; gap: 16px; margin: 22px 0; }
.help-steps > div { display: flex; align-items: baseline; gap: 16px; }
.help-steps > div > span { flex: 0 0 18px; color: var(--muted); font: 10px var(--mono); }
.help-steps p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.help-steps strong { display: block; margin-bottom: 4px; color: var(--fg); font-size: 14px; font-weight: 650; }
.help-detail { border-top: 1px solid var(--line); padding-bottom: 8px; }
.help-detail summary { min-height: 48px; padding: 11px 0; font-size: 13px; cursor: pointer; }
.help-detail p { font-size: 12px; line-height: 1.6; color: var(--muted); margin-bottom: 12px; }
.help-options { border-top: 1px solid var(--line); padding-top: 8px; margin: 16px 0; }
.help-options label { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; font-size: 13px; }
.help-options input[type="range"] { width: 150px; }
.motion-option input { width: 20px; height: 20px; accent-color: var(--accent-text); }
.link-label { display: block; color: var(--muted); font-size: 12px; margin-top: 18px; }
.share-link { width: 100%; min-height: 48px; padding: 10px 12px; margin: 7px 0 0; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; font-size: 16px; }
.takes-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 22px 0; }
.take-card, .preset-card { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 64px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.take-card:hover, .preset-card:hover { border-color: var(--focus); }
.take-card img, .preset-card img { display: none; }
.take-card strong, .preset-card strong { display: block; font-size: 13px; font-weight: 650; }
.take-card span, .preset-card span { color: var(--muted); font-size: 11px; }
.empty-takes { grid-column: 1 / -1; padding-block: 20px; color: var(--muted); font-size: 14px; }
.no-js { position: fixed; z-index: 30; inset: auto 16px 20px; padding: 20px; background: var(--panel); border: 1px solid var(--line); font-size: 16px; }

.sheet-header { display: flex; flex: 0 0 48px; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-header .icon-button { margin-right: -8px; }
.sheet-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 2px; }
.sheet-footer { display: flex; flex: 0 0 auto; gap: 8px; padding-top: 18px; }
.sheet-footer .primary-button { flex: 1; }
.sheet-footer .quiet-button { min-width: 110px; }
.onboarding-sheet { width: min(720px, calc(100% - 28px)); }
.onboarding-sheet #onboarding-title { margin: 8px 0; padding-right: 0; font-size: clamp(24px, 5vw, 30px); line-height: 1.15; }
.onboarding-sheet .sheet-intro { margin-bottom: 12px; font-size: 13px; }
.onboarding-sheet[open], .appearance-sheet[open] { display: flex; flex-direction: column; overflow: hidden; }
:is(.onboarding-sheet, .appearance-sheet) .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
:is(.onboarding-sheet, .appearance-sheet) :is(.sheet-header, .sheet-footer) { flex-shrink: 0; background: var(--panel); }
.onboarding-sheet .instrument-studies { display: flex; gap: 14px; overflow-x: auto; padding: 3px 3px 12px; scroll-snap-type: x mandatory; scroll-padding-inline: 3px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.onboarding-sheet .instrument-study { flex: 0 0 88%; min-width: 0; min-height: 44px; scroll-snap-align: center; scroll-snap-stop: always; border-radius: 6px; padding-bottom: 14px; }
.onboarding-sheet .instrument-study svg { height: clamp(132px, 28dvh, 220px); aspect-ratio: auto; }
.onboarding-sheet .instrument-study > span { font-size: 16px; font-weight: 650; letter-spacing: -.025em; }
.onboarding-sheet .instrument-study small { font: 10px/1.4 var(--mono); font-weight: 400; letter-spacing: .02em; }
.onboarding-sheet .instrument-study p { padding: 5px 15px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.permission-note { margin-bottom: 2px; font-size: 11px; }
.style-section-title { margin-top: 19px; font-size: 13px; font-weight: 650; }
.appearance-sheet .sheet-header { justify-content: flex-end; }
.appearance-sheet .sheet-footer { justify-content: flex-end; }
.appearance-sheet #share-button { margin-right: auto; }
.appearance-sheet #style-done { flex: 0 0 48px; min-width: 48px; min-height: 48px; padding: 0; }
.appearance-sheet #style-done .icon { width: 19px; height: 19px; }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 8px; margin: 18px 0 5px; }
.appearance-options button { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 56px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--fg); background: var(--panel); text-align: center; }
.appearance-options button[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: -2px; background: color-mix(in srgb, var(--fg) 5%, var(--panel)); }
.appearance-options strong { font-size: 11px; font-weight: 550; }
.appearance-options .icon { width: 24px; height: 24px; }
.colorway-options { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 8px; margin-top: 20px; }
.colorway-options button { position: relative; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 56px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--fg); }
.colorway-options button[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: -2px; }
.colorway-options button[aria-pressed="true"]::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 4px; height: 7px; border: solid var(--fg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.colorway-options button:hover,.appearance-options button:hover { border-color: var(--focus); }
.colorway-options button:focus-visible,.appearance-options button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.colorway-swatch { flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 5px; background: var(--swatch); }
.orbit-motion-controls { position: absolute; z-index: 5; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 5px; pointer-events: none; }
.orbit-motion-actions { display: flex; gap: 4px; pointer-events: auto; }
.orbit-motion-actions button { min-width: 48px; min-height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 5px; color: var(--fg); background: var(--panel); }
.orbit-motion-actions .icon { width: 21px; height: 21px; }
#orbit-motion-toggle[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.stage-panel[data-tilt="requesting"] #orbit-motion-toggle { border-color: var(--focus); border-style: dashed; }
.orbit-tilt-feedback { position: relative; display: none; width: 32px; height: 32px; color: var(--muted); }
.stage-panel[data-tilt="active"] .orbit-tilt-feedback { display: block; }
.tilt-axis::before, .tilt-axis::after { content: ''; position: absolute; background: currentColor; opacity: .4; }
.tilt-axis::before { height: 1px; top: 50%; left: 2px; right: 2px; }
.tilt-axis::after { width: 1px; left: 50%; top: 2px; bottom: 2px; }
.tilt-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-text); left: calc(50% + var(--tilt-x, 0) * 12px); top: calc(50% + var(--tilt-y, 0) * 12px); transform: translate(-50%, -50%); }
body[data-immersive="true"] .orbit-motion-controls { left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); }
.immersive-toolbar { position: fixed; z-index: 10; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); max-width: 420px; margin-inline: auto; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; color: var(--fg); background: var(--panel); }
.immersive-toolbar button { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 4px; font-size: 12px; font-weight: 650; }
.immersive-toolbar .loop-progress { width: 40px; height: 40px; }
#immersive-loop-toggle { position: relative; }
#immersive-loop-stop[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
.immersive-toolbar select { flex: 1; min-width: 50px; width: auto; height: 44px; margin: 0; padding-inline: 4px; font-size: 16px; border: 1px solid var(--line); background: var(--panel); }
@media (max-width: 360px) {
  .immersive-toolbar { gap: 0; padding-inline: 4px; }
  .immersive-toolbar select { min-width: 64px; }
}
#immersive-jam { color: var(--fg); background: transparent; }
#immersive-jam[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
#immersive-jam span { display: none; }
#immersive-loop-toggle[aria-pressed="true"], #immersive-more-toggle[aria-expanded="true"] { color: var(--accent-ink); background: var(--accent); }
.immersive-tools { position: fixed; z-index: 11; top: calc(max(8px, env(safe-area-inset-top)) + 62px); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); max-width: 400px; max-height: min(54dvh, calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)) - 78px)); margin-inline: auto; display: grid; gap: 10px; padding: 10px 12px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 6px; color: var(--fg); background: var(--panel); }
.immersive-tools-heading { display: flex; justify-content: flex-end; margin: -4px -6px -6px 0; }
.immersive-band { display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 6px; }
.immersive-voice-control { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.immersive-tools select { min-width: 0; width: 100%; height: 44px; margin: 0; font-size: 16px; }
.immersive-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.immersive-macros label { min-width: 0; }
.immersive-macros .control-label { display: flex; justify-content: space-between; gap: 4px; }
.immersive-macros output { font-variant-numeric: tabular-nums; color: var(--fg); }
.immersive-tools input[type="range"] { width: 100%; min-width: 0; height: 48px; margin: 0; }
.immersive-play-actions { display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 6px; }
#immersive-demo-stop[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
.immersive-timing { border-top: 1px solid var(--line); }
.immersive-timing summary { display: flex; align-items: center; min-height: 44px; font-size: 12px; cursor: pointer; }
.immersive-timing summary::after { content: '+'; margin-left: auto; }
.immersive-timing[open] summary::after { content: '−'; }
.immersive-timing-controls { display: grid; grid-template-columns: repeat(2, minmax(44px, 1fr)); gap: 6px; }
.immersive-tempo-control { grid-column: 1 / -1; min-width: 0; }
.immersive-tools button { min-width: 44px; min-height: 44px; padding: 8px; font-size: 12px; }
.immersive-tools button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
@media (max-height: 500px) and (min-width: 520px) {
  .immersive-tools { left: auto; width: min(320px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px)); max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)) - 78px); margin: 0; }
}
body:not([data-immersive="true"]) .immersive-tools { display: none !important; }
body[data-immersive="true"] .app-shell { height: 100dvh; max-width: none; padding: 0; gap: 0; }
body[data-immersive="true"] :is(.app-header, .scene-sidebar, .stage-controls) { display: none !important; }
body[data-immersive="true"] .workspace { display: block; width: 100%; height: 100%; }
body[data-immersive="true"] .stage-panel { display: block; width: 100%; height: 100%; }
body[data-immersive="true"] .stage-wrap { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
body[data-immersive="true"] #stage:focus-visible { outline: none; }
body[data-immersive="true"] .stage-wrap:has(#stage:focus-visible)::after { content: ''; position: absolute; right: max(12px,env(safe-area-inset-right)); bottom: max(12px,env(safe-area-inset-bottom)); width: 5px; height: 5px; border-radius: 50%; background: var(--focus); pointer-events: none; }
body[data-immersive="true"] :is(.stage-heading, .instrument-readout, .replay-badge) { display: none; }
body[data-immersive="true"] .orbit-pads[data-integrated="true"]:focus-within { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }

/* Compact portrait remains one stage, one control stack, one thumb-reachable nav. */
@media (max-width: 640px) {
  .sheet { padding: 20px; }
  .sheet h2 { font-size: 29px; }
}
/* iOS may zoom when focusing small form text, including native selects. Keep
   the controls readable without disabling pinch zoom on the rest of the app. */
@media (any-pointer: coarse), (max-width: 900px) {
  select, textarea, input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) { font-size: 16px; }
}
@media (max-width: 360px) {
  .app-shell { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); gap: 8px; }
  .app-header { gap: 4px; }
  .brand { font-size: 15px; gap: 6px; }
  .brand-mark { width: 24px; height: 24px; flex-basis: 24px; }
  .layer-buttons button { font-size: 11px; gap: 4px; }
  .primary-controls { gap: 4px; }
  .primary-controls > button { font-size: 11px; }
  .sheet-footer .quiet-button { min-width: 95px; padding-inline: 10px; }
}
@media (max-width: 420px) {
  .colorway-options { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
}

/* Tablet/desktop and phone landscape share a real stage + scrolling console. */
@media (min-width: 900px), (max-height: 500px) and (min-width: 520px) {
  .workspace { --controls-width: clamp(246px, 33vw, 360px); display: block; position: relative; }
  .stage-panel { display: grid; grid-template-columns: minmax(0, 1fr) var(--controls-width); grid-template-rows: minmax(0, 1fr); gap: 18px; }
  .stage-wrap { grid-column: 1; grid-row: 1; min-height: 0; height: 100%; }
  .stage-controls { grid-column: 2; grid-row: 1; align-self: end; height: calc(100% - 61px); max-height: none; padding: 4px 1px 10px; overflow-y: auto; }
  .scene-sidebar { position: absolute; z-index: 3; top: 0; right: 0; width: var(--controls-width); padding: 0 1px 8px; border-top: 0; border-bottom: 1px solid var(--line); background: var(--bg); }
  .scene-tabs { height: 48px; gap: 6px; }
  .scene-tab strong { font-size: 13px; }
  .toast { bottom: max(20px, env(safe-area-inset-bottom)); }
  html[data-edition="lite"] .stage-controls { gap: 0; }
}
@media (max-height: 500px) and (min-width: 520px) {
  .app-shell { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); gap: 7px; }
  .app-header { flex-basis: 48px; }
  .brand { font-size: 17px; }
  .stage-panel { gap: 12px; }
  .stage-controls { padding-bottom: 4px; }
  .onboarding-sheet { width: min(720px, calc(100% - 32px)); padding: 12px 20px; }
  .onboarding-sheet #onboarding-title { margin: 6px 0; font-size: 26px; }
  .onboarding-sheet .sheet-intro { margin-bottom: 8px; font-size: 13px; }
  .onboarding-sheet .instrument-study { flex-basis: 66%; }
  .onboarding-sheet .instrument-study { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: 1fr 1fr; min-height: 116px; padding: 0; }
  .onboarding-sheet .instrument-study svg { grid-column: 1; grid-row: 1 / span 2; height: 116px; }
  .onboarding-sheet .instrument-study > span { grid-column: 2; grid-row: 1; align-self: end; gap: 8px; padding: 0 12px; }
  .onboarding-sheet .instrument-study p { grid-column: 2; grid-row: 2; align-self: start; padding: 5px 12px 0; }
  .sheet-footer { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Short landscape still scrolls the art track; Close and Start never move. */
@media (max-height: 340px) and (min-width: 520px) {
  .onboarding-sheet .permission-note { display: none; }
  .onboarding-sheet h2 { margin: 5px 0 7px; font-size: 24px; }
  .onboarding-sheet .sheet-intro { font-size: 12px; line-height: 1.4; margin-bottom: 5px; }
  .onboarding-sheet .instrument-study svg { height: 80px; }
}
/* Secondary composition tools never cover the playing surface. */
.ai-locks,.ai-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-locks{margin:24px 0 18px}.ai-locks>span{font-size:12px;margin-right:4px;opacity:.65}
.ai-locks button{min-width:64px;min-height:44px}.ai-locks button[aria-pressed="true"]{outline:1px solid currentColor;outline-offset:-1px}
.ai-actions>*{flex:1;min-height:48px}.ai-actions[hidden]{display:none}
.ai-steps{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.5}
.ai-steps .icon{width:14px;height:14px;transform:rotate(45deg)}
#ai-button[aria-busy="true"]{opacity:.55}