body { overflow: hidden; overscroll-behavior: none; }
.app-shell { padding: 5px 5px calc(76px + env(safe-area-inset-bottom)); }
.app-shell { height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; }
.topbar { min-height: 60px; display: grid; grid-template-columns: 1fr auto; padding: 7px 9px; }
.brand { text-align: left; }.brand h1 { font-size: 18px; }.brand p { margin-top: 5px; font-size: 7px; }
.topbar__tempo { justify-content: flex-end; }#tapTempo { display: none; }.bpm-readout { min-height: 35px; }
.topbar__status { grid-column: 1 / -1; padding-top: 6px; }.audio-label, #masterMute, #fullscreenButton { display: none; }.meter { flex: 1; }.record-button { min-height: 34px; }
.mode-nav { position: fixed; z-index: 15; left: 5px; right: 5px; bottom: max(5px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); min-height: 62px; padding: 5px; border-color: rgba(0,217,255,.24); }
.mode-nav__button { min-width: 0; border: 0; border-radius: 7px; background: transparent; color: #7d8b99; font-size: 9px; font-weight: 800; letter-spacing: .04em; }.mode-nav__button.is-active { color: white; background: linear-gradient(180deg, rgba(0,217,255,.15), rgba(0,217,255,.04)); box-shadow: inset 0 0 0 1px rgba(0,217,255,.3), 0 0 12px rgba(0,217,255,.09); }
.studio-grid { display: block; margin-top: 5px; }
.view-panel { display: none !important; }.view-panel.is-active { display: block !important; }
.performance-column.is-active { display: block !important; }.performance-column.is-active > .xy-module { display: block !important; }
.performance-column > .samples, .performance-column > .master-controls { display: none; }
.performance-column[data-child-view="samples"] > .xy-module { display: none !important; }.performance-column[data-child-view="samples"] > .samples { display: block !important; }
.xy-module { padding: 6px; }.module-head { display: grid; grid-template-columns: 1fr; gap: 6px; }.module-head label { display: flex; align-items: center; justify-content: space-between; }.module-head input { width: 46%; }
.xy-frame { width: 100%; height: min(74dvh, calc(100dvw - 22px)); aspect-ratio: auto; border-radius: 14px; }
.deck { margin-bottom: 7px; }.deck__head { grid-template-columns: 40px minmax(0,1fr) auto; }.deck__head .button--quiet { display: none; }.deck-badge { width: 38px; }.waveform-wrap { height: 70px; }.eq-strip { overflow-x: auto; grid-template-columns: repeat(5, 74px); }.rotary i { width: 48px; height: 48px; }.crossfader-panel { margin-bottom: 5px; }
.samples { min-height: calc(100dvh - 145px); padding: 8px; }.sample-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }.sample-pad { min-height: 130px; }
.keyboard-column { min-height: calc(100dvh - 145px); padding: 8px; }.keyboard-settings { gap: 8px; }.keyboard { min-height: 72dvh; gap:3px; }.piano-key { min-height:46px; padding-right:18px; font-size:12px; }.piano-key.black { width:82%; min-height:34px; margin:-14px 0; }.keyboard-hint { display: none; }
.master-controls { display: none !important; }
@media (orientation: landscape) and (max-height: 520px) {
  .app-shell { padding-bottom: 5px; padding-left: 74px; }.topbar { display: none; }.mode-nav { top: 5px; bottom: 5px; left: 5px; right: auto; width: 64px; grid-template-columns: 1fr; grid-template-rows: repeat(4,1fr); }.mode-nav__button { writing-mode: vertical-rl; transform: rotate(180deg); }
  .studio-grid { margin: 0; }.xy-frame { height: calc(100dvh - 54px); width: 100%; }.module-head { height: 43px; grid-template-columns: 1fr 1fr; }
  .sample-grid { grid-template-columns: repeat(4,1fr); }.sample-pad { min-height: calc((100dvh - 34px)/2); }.keyboard-column { min-height: calc(100dvh - 10px); }.keyboard { min-height: calc(100dvh - 108px); }
}

/* Live performance controls stay reachable while individual views are open. */
.topbar__status { gap: 6px; }
.clip-indicator { display: inline-block; }
#liveModeButton { min-height: 34px; padding: 0 9px; font-size: 9px; }
.deck__head { grid-template-columns: 38px minmax(0,1fr) auto auto; gap: 5px; }
.deck__head .button--quiet { display: inline-grid; place-items: center; padding: 0 7px; min-height: 34px; font-size: 8px; }
.deck__head .button--sync { padding: 0 7px; min-height: 34px; font-size: 9px; }
.deck__track small { white-space: normal; line-height: 1.4; }
.mobile-live-strip { position: fixed; z-index: 16; left: 5px; right: 5px; bottom: calc(72px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1.25fr 1.4fr; gap: 5px; padding: 5px; }
.mobile-live-strip button { min-height: 38px; color: #cce8f3; border: 1px solid var(--line); border-radius: 6px; background: #071019; font-size: 10px; font-weight: 850; }
.mobile-live-strip button:first-child { color: #baffc4; border-color: rgba(57,239,103,.38); }
.mobile-live-strip .panic { color: #ff8b98; border-color: rgba(255,51,71,.45); }
.app-shell { padding-bottom: calc(122px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(122px + env(safe-area-inset-bottom)); }
@media (orientation: landscape) and (max-height: 520px) {
  .mobile-live-strip { left: 74px; right: 5px; bottom: 5px; width: auto; grid-template-columns: repeat(4, 1fr); }
}


/* Finger-friendly mobile keyboard + dedicated fullscreen performance view. */
@media (max-width:700px) {
  .keyboard-focus-bar { position:sticky; top:0; z-index:4; padding:2px 0 8px; background:linear-gradient(180deg,rgba(4,9,15,.98),rgba(4,9,15,.88)); }
  .keyboard-focus-bar > div:first-child strong { font-size:9px; }
  .keyboard-fullscreen, .keyboard-panic { min-height:44px; padding:0 10px; font-size:9px; }
  .keyboard-settings .choice, .keyboard-settings .octaves, .keyboard-settings .arp-toggle { min-height:44px; height:44px; }
  body.keyboard-focus .keyboard-settings { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.keyboard-focus .keyboard { gap:3px; padding:5px; }
  body.keyboard-focus .piano-key { min-height:48px; font-size:12px; }
  body.keyboard-focus .piano-key.black { width:84%; min-height:36px; margin:-15px 0; }
}
@media (max-width:700px) and (orientation:landscape) {
  body.keyboard-focus .keyboard-focus-bar { padding-bottom:4px; }
  body.keyboard-focus .keyboard-focus-bar > div:first-child { display:none; }
  body.keyboard-focus .keyboard-focus-actions { width:100%; justify-content:flex-end; }
  body.keyboard-focus .keyboard-settings { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding-bottom:5px; }
  body.keyboard-focus .keyboard-setting > span { display:none; }
  body.keyboard-focus .choice, body.keyboard-focus .octaves, body.keyboard-focus .arp-toggle { margin-top:0; height:34px; min-height:34px; }
  body.keyboard-focus .keyboard { min-height:0 !important; }
  body.keyboard-focus .piano-key { min-height:26px; }
  body.keyboard-focus .piano-key.black { min-height:20px; margin:-9px 0; }
}