.sound-page {
  --paper: #f5f1e9;
  --ink: #302e28;
  --muted: #696256;
  --line: #d2c9ba;
  padding: 0 max(0px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0px, env(safe-area-inset-left));
}
.sound-header, .sound-page main, .sound-page .drift-footer {
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
}
.sound-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 92px;
  border-bottom: 1px solid var(--line);
}
.sound-back, .sound-header-actions, .focus-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sound-back { justify-self: start; min-height: 44px; min-width: 44px; font-size: 12px; }
.sound-header svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.sound-header-actions { justify-self: end; gap: 22px; }
.sound-header .sound-bird { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.sound-header .sound-bird img { width: 60px; height: 60px; object-fit: contain; }
.instrument-nav { display: flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 28px; padding: 4px; }
.instrument-nav a { display: grid; place-items: center; min-height: 44px; min-width: 84px; border-radius: 22px; font-size: 12px; color: var(--muted); transition: color .2s, background .2s; }
.instrument-nav a[aria-current=page] { color: var(--ink); background: #e5ded1; }
.instrument-nav a:hover { color: var(--ink); background: #e9e2d7; }
.sound-page .focus-toggle { min-height: 44px; padding: 0; font-size: 11px; justify-content: center; }
.sound-page .focus-toggle[aria-pressed=true] { color: #705a3e; }
.sound-page :focus-visible { outline: 2px solid #786340; outline-offset: 4px; }
.sound-page .skip, .sound-page .rhythm-skip { transform: none; top: 10px; left: 10px; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; }
.sound-page .skip:focus, .sound-page .rhythm-skip:focus { clip-path: none; width: auto; height: auto; padding: 14px 18px; background: var(--paper); z-index: 20; }
.sound-page .rhythm-intro, .sound-page .drift-heading { display: flex; align-items: end; justify-content: space-between; padding: 32px 0 28px; gap: 24px; }
.sound-page .overline { display: block; color: var(--muted); font: 9px/1.5 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.sound-page .rhythm-intro h1, .sound-page .drift-heading h1 { margin: 9px 0 0; font: 400 80px/.96 Georgia, serif; letter-spacing: -.07em; }
.sound-page h1 em, .sound-page h1 span { color: #967d5f; font-style: normal; }
.sound-page .sound-modes, .sound-page .worlds { padding: 4px; gap: 3px; border-color: var(--line); }
.sound-page .sound-modes button, .sound-page .worlds button { min-height: 44px; font-size: 12px; padding: 9px 21px; }
.sound-page button { transition: background-color .2s, color .2s, border-color .2s; }
.sound-page button:disabled { opacity: .45; }
.sound-page .recording-meta { align-items: center; flex-wrap: wrap; gap: 8px 18px; font-size: 11px; }
.sound-page #recording-exports { margin-left: auto; }
.sound-page .export-formats { display: flex; gap: 4px; }
.sound-page .export-formats button { min-width: 52px; min-height: 44px; padding: 8px 14px; border: 1px solid transparent; border-radius: 24px; font-size: 11px; }
.sound-page .export-formats button[aria-pressed=true] { border-color: var(--line); background: #e9e1d5; }
.sound-page #download-set { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 0; color: var(--ink); }
.sound-page .recording-meta:has(#record-status:empty):has(#recording-exports[hidden]) { display: none; }
.sound-page .rhythm-footer, .sound-page .drift-footer { font-size: 10px; color: var(--muted); gap: 20px; }
.sound-page .rhythm-footer > span { font: 10px/1.5 Arial, sans-serif; }
.sound-page .rhythm-footer a, .sound-page .drift-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: 10px; }
.sound-page .rhythm-footer p { font-size: 10px; }
.sound-page input[type=range] { min-height: 44px; cursor: pointer; }
.sound-page input[type=range]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6.5px; }
.sound-page input[type=range]::-moz-range-thumb { width: 14px; height: 14px; }
.focus-mode .sound-header { min-height: 64px; }
.focus-mode .sound-bird { display: none; }
.focus-mode .rhythm-intro, .focus-mode .drift-heading { padding-block: 14px; }
.focus-mode .overline, .focus-mode .rhythm-footer, .focus-mode .drift-footer { display: none; }
.focus-mode .rhythm-intro h1, .focus-mode .drift-heading h1 { font-size: 40px; margin: 0; }
.focus-mode .rhythm-orbit, .focus-mode .orbit-caption { display: none; }
.focus-mode .rhythm-stage { grid-template-columns: .6fr 1.4fr; }
.focus-mode .scene-section { padding-bottom: 14px; }
.focus-mode .scene-heading, .focus-mode .scene-help { display: none; }
.focus-mode .sound-field { height: clamp(300px, calc(100svh - 306px), 840px); }
@media (max-width: 900px) {
  .sound-header, .sound-page main, .sound-page .drift-footer { width: calc(100% - 48px); }
  .sound-header { min-height: 80px; }
  .sound-header-actions { gap: 14px; }
  .sound-header .sound-bird img { width: 48px; height: 48px; }
  .sound-page .rhythm-intro h1, .sound-page .drift-heading h1 { font-size: 68px; }
  .focus-mode .rhythm-stage { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sound-header, .sound-page main, .sound-page .drift-footer { width: calc(100% - 32px); }
  .sound-header { min-height: 76px; }
  .sound-header .sound-bird { display: none; }
  .sound-back { font-size: 11px; gap: 6px; }
  .instrument-nav a { min-width: 68px; }
  .sound-page .focus-toggle { min-width: 44px; }
  .focus-toggle span { display: none; }
  .sound-page .rhythm-intro, .sound-page .drift-heading { padding: 25px 0 22px; gap: 18px; flex-direction: row; align-items: end; }
  .sound-page .rhythm-intro h1, .sound-page .drift-heading h1 { font-size: 60px; }
  .sound-page .overline { font-size: 8px; }
  .sound-page .sound-modes button { min-width: 60px; padding: 8px 12px; font-size: 11px; }
  .sound-page .drift-heading { flex-wrap: wrap; }
  .sound-page .worlds { width: 100%; }
  .sound-page .worlds button { flex: 1; padding: 8px 9px; font-size: 11px; }
  .sound-page .recording-meta #record-status { width: 100%; }
  .sound-page #recording-exports { margin-left: 0; }
  .sound-page #download-set { margin-left: auto; font-size: 10px; }
  .sound-page .rhythm-footer, .sound-page .drift-footer { flex-wrap: wrap; gap: 2px 16px; font-size: 9px; }
  .sound-page .rhythm-footer p, .sound-page .drift-footer #drift-save-status { width: 100%; max-width: none; text-align: left; font-size: 9px; }
  .focus-mode .rhythm-intro h1, .focus-mode .drift-heading h1 { font-size: 38px; }
  .focus-mode .rhythm-intro, .focus-mode .drift-heading { padding-block: 12px; }
  .focus-mode .drift-heading { flex-wrap: nowrap; align-items: center; gap: 14px; }
  .focus-mode .worlds { width: auto; }
  .focus-mode .worlds button { min-width: 0; padding-inline: 9px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-page *, .sound-page *::before, .sound-page *::after { transition: none !important; animation: none !important; }
}

/* Shared performance scale and touch targets. */
.sound-page .sound-modes button.is-queued { outline:1px dashed var(--muted); outline-offset:-5px; }
.sound-page #rhythm-seed.is-queued { text-decoration:underline dotted; text-underline-offset:5px; }
.sound-page .performance-bar { padding-block:13px; }
.sound-page .performance-bar .rhythm-play,
.sound-page .performance-bar .rhythm-record,
.sound-page .performance-bar .record-set { min-height:48px; font-size:11px; }
.sound-page .scene-launch { min-height:58px; }
.sound-page .scene-save,
.sound-page .rhythm-pad-mute,
.sound-page .rhythm-quick-actions button,
.sound-page .expression-heading button,
.sound-page .rhythm-layer-remove,
.sound-page .rhythm-layer-mute { min-height:44px !important; min-width:44px; font-size:10px !important; }
.sound-page .rhythm-pad-mute { color:#635c50; }
.sound-page .scene-save { color:#635c50 !important; }
.sound-page .rhythm-stage { gap:26px; }
.sound-page .orbit-space { padding:20px; border:1px solid var(--line); background:radial-gradient(ellipse at 50% 30%,#faf7ef,#e9e1d3); }
.sound-page .rhythm-pad-card { background:#eee8dc; border-color:#cec3b2; }
.sound-page .rhythm-pad-card.is-present { background:color-mix(in srgb,var(--voice) 6%,var(--paper)); }
.sound-page .rhythm-pad-card.is-playing { background:color-mix(in srgb,var(--voice) 18%,var(--paper)); }
.sound-page .rhythm-pad small { color:#706657; }
.sound-page .rhythm-pad { min-height:98px; }
.sound-page .expression-field { height:138px; border-color:#b6a58a; }
.sound-page .expression-label { font-size:10px; color:#625849; }
.sound-page .expression-puck { width:30px; height:30px; border-color:#79613f; }
.sound-page .expression-dials label { font-size:10px; }
.sound-page .rhythm-orbit-top { color:#685d4f; }
.sound-page .axis { color:#6e604d; font-size:14px; }
.sound-page .field-top,.sound-page .field-bottom { color:#675b4c; font-size:9px; }
.sound-page .sound-field.is-playing #field-instruction { opacity:1; }
.sound-page .status-line { color:var(--muted); font-size:10px; }
.sound-page .performance-controls button { font-size:12px; }
.sound-page .fine-controls label { font-size:11px; }
.sound-page .field-cursor { border-color:#79613f; }
.sound-page .fine-controls, .sound-page .performance-controls { gap:20px; }
.sound-page #download-set:focus-visible { outline-offset:4px; }
.sound-page .rhythm-note { min-width:44px; min-height:44px; }
.sound-page .rhythm-score { min-width:calc(110px + 8 * 51px); }
.sound-page .rhythm-score[data-length='16'] { min-width:calc(110px + 16 * 51px); }
.sound-page .rhythm-step-labels,.sound-page .rhythm-voice-row { grid-template-columns:110px repeat(var(--steps,8),minmax(44px,1fr)); gap:7px; }
.focus-mode .orbit-space { padding:14px 18px; }
@media(max-width:800px) {
  .sound-page .orbit-space { gap:0 18px; padding:16px; }
  .focus-mode .orbit-space { display:grid; grid-template-columns:1fr 1fr; }
  .focus-mode .expression-heading,.focus-mode .expression-field { grid-column:1; }
  .focus-mode .expression-heading { grid-row:1; }
  .focus-mode .expression-field { grid-row:2 / 4; height:100px; }
  .focus-mode .expression-dials { grid-column:2; grid-row:2; flex-direction:column; }
  .focus-mode .expression-dials label { width:100%; }
  .focus-mode .club-controls { grid-column:2; grid-row:3; }
}
@media(max-width:600px) {
  .sound-page .rhythm-stage { gap:16px; }
  .sound-page .performance-controls { gap:10px 8px; }
  .sound-page .performance-controls button { font-size:11px; padding-inline:8px; }
  .sound-page .performance-controls .lift { gap:4px; }
  .sound-page .scene-launch { min-height:52px !important; display:flex; }
  .sound-page .scene-launch span { font-size:18px; }
  .sound-page .scene-save { padding-inline:7px !important; font-size:9px !important; }
  .sound-page .orbit-space { padding:12px; gap:0 12px; }
  .sound-page .rhythm-orbit>svg { height:150px; }
  .sound-page .expression-field { height:108px; }
  .sound-page .expression-dials label { font-size:9px; }
  .sound-page .expression-dials { flex-direction:column; gap:0; }
  .sound-page .expression-dials label { width:100%; }
  .sound-page .rhythm-pad { min-height:88px; }
  .sound-page .rhythm-pad .pad-name { font-size:25px; }
  .sound-page .field-top,.sound-page .field-bottom { font-size:8px; }
  .sound-page .fine-controls { gap:0 16px; }
  .sound-page .fine-controls label { font-size:10px; }
  .sound-page .status-line { font-size:9px; }
}
.focus-mode .scene-save { display:none; }
.focus-mode .scene-launch { min-height:48px; }
.focus-mode .rhythm-pad { min-height:68px; }
.focus-mode .rhythm-pad .pad-name { font-size:23px; }
.focus-mode .rhythm-pad-help, .focus-mode .rhythm-quick-actions>span { display:none; }
.focus-mode .kaka-pad { min-height:62px; }
@media(max-width:420px) {
  .sound-page .scene-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sound-page .scene-launch { padding-inline:12px !important; }
}
.navigation-notice { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; margin-top:18px; background:#e8dfcf; border:1px solid #b9a88b; }
.navigation-notice p { margin:0; font-size:12px; }
.navigation-notice>div { display:flex; align-items:center; gap:10px; }
.sound-page .navigation-notice button { min-height:44px; min-width:64px; padding:8px 14px; font-size:11px; border:1px solid var(--line); border-radius:24px; white-space:nowrap; }
.sound-page #navigation-stay { background:var(--ink); color:var(--paper); border-color:var(--ink); }
@media(max-width:600px) { .navigation-notice { align-items:start; flex-direction:column; gap:8px; padding:14px; }.navigation-notice>div { align-self:flex-end; } }