:root {
  color-scheme: dark;
  --bg: #03070c;
  --panel: rgba(7, 13, 21, .9);
  --panel-2: rgba(10, 18, 28, .86);
  --line: rgba(146, 179, 211, .18);
  --line-hot: rgba(99, 220, 255, .52);
  --text: #f1f6fb;
  --muted: #8695a5;
  --cyan: #00d9ff;
  --blue: #1684ff;
  --pink: #ff159f;
  --violet: #8d49ff;
  --green: #39ef67;
  --amber: #ffbd1f;
  --red: #ff3347;
  --light-level: .75;
  --radius: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .38);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--bg); color: var(--text); touch-action: manipulation; }
body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button, .xy-frame, .keyboard, .sample-grid { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.xy-frame, .keyboard, .sample-pad { touch-action: none; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% -20%, #172235 0, #03070c 52%); }
.ambient::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 30px 30px; }
.ambient__beam { position: absolute; width: 46vw; height: 46vw; filter: blur(110px); opacity: calc(var(--light-level) * .14); border-radius: 50%; }
.ambient__beam--cyan { background: var(--cyan); left: -25vw; top: 10vh; }
.ambient__beam--pink { background: var(--pink); right: -25vw; bottom: -10vh; }
.app-shell { position: relative; z-index: 1; min-height: 100dvh; padding: 8px; }
.glass-panel { background: linear-gradient(155deg, rgba(13, 22, 33, .94), rgba(4, 9, 15, .94)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 1px rgba(255,255,255,.035), var(--shadow); }

.topbar { min-height: 66px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 16px; border-radius: 13px 13px 6px 6px; }
.topbar__tempo, .topbar__status { display: flex; align-items: center; gap: 10px; }
.topbar__status { justify-content: flex-end; }
.brand { text-align: center; line-height: 1; }
.brand h1 { margin: 0; font-size: clamp(20px, 2.2vw, 38px); font-weight: 620; letter-spacing: .045em; text-shadow: 0 0 22px rgba(255,255,255,.15); }
.brand p { margin: 7px 0 0; color: #c7d1dc; font-size: 11px; letter-spacing: .12em; }
.brand i { display: inline-block; width: 3px; height: 3px; margin: 0 5px 2px; background: #aeb8c5; border-radius: 50%; }
.icon-button, .button, .record-button { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: #09111a; }
.icon-button { min-width: 40px; font-size: 18px; }
.button { padding: 0 13px; font-size: 12px; }
.button--quiet { color: #aeb8c4; }
.button--sync { color: var(--cyan); border-color: rgba(0,217,255,.36); box-shadow: inset 0 0 15px rgba(0,217,255,.06); }
.bpm-readout { min-height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 11px; color: #aeb8c5; border: 1px solid var(--line); border-radius: 8px; }
.bpm-readout strong { color: var(--cyan); font-size: 18px; }
.audio-label { color: #aeb7c0; font-size: 10px; letter-spacing: .06em; }
.meter { width: 105px; height: 12px; overflow: hidden; border-radius: 2px; background: repeating-linear-gradient(90deg, #1b2833 0 5px, transparent 5px 7px); }
.meter i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #2aff4f 0 5px, transparent 5px 7px); filter: drop-shadow(0 0 4px #21ff51); transition: width 80ms linear; }
.record-button { min-width: 80px; color: #ff6675; }
.record-button span { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(255,51,71,.7); }
.record-button.is-recording span { animation: recordPulse .8s infinite alternate; }
@keyframes recordPulse { to { opacity: .25; } }

.mode-nav { display: none; }
.studio-grid { display: grid; gap: 8px; margin-top: 8px; }
.deck { overflow: hidden; }
.deck__head { min-height: 55px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 8px 12px; }
.deck-badge { width: 44px; height: 38px; font-size: 25px; font-weight: 700; background: #0b1721; border-radius: 5px; }
.deck-badge--a { color: #44cfff; border: 1px solid #1177ad; }
.deck-badge--b { color: #ff42b5; border: 1px solid #9a236d; }
.deck__track { min-width: 0; text-align: left; border: 0; background: transparent; }
.deck__track strong, .deck__track small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck__track small { margin-top: 3px; color: #a4afba; font-size: 11px; }
.waveform-wrap { position: relative; height: 84px; margin: 0 12px; background: #030912; border-radius: 3px; overflow: hidden; }
.waveform { width: 100%; height: 100%; display: block; }
.waveform__cursor { position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 1px; background: white; box-shadow: 0 0 8px white; }
.deck__time { display: grid; grid-template-columns: 58px 1fr 63px; align-items: center; gap: 5px; padding: 6px 12px; color: #e7edf4; font-size: 11px; }
input[type="range"] { accent-color: var(--cyan); }
.seek { width: 100%; height: 3px; }
.deck__transport { display: flex; align-items: center; gap: 7px; min-height: 49px; padding: 6px 12px; border-top: 1px solid rgba(255,255,255,.05); }
.transport, .stepper, .loop-toggle { min-width: 39px; height: 35px; color: #cfd8e1; border: 1px solid var(--line); border-radius: 5px; background: #080e15; }
.transport--play { color: #bfffc6; background: #063816; border-color: #15953b; }
.micro-label { margin-left: auto; color: #748390; font-size: 10px; letter-spacing: .08em; }
.loop-toggle { min-width: 31px; color: #bec9d4; }.loop-toggle.is-on { color: #061018; border-color: var(--green); background: var(--green); box-shadow: 0 0 12px rgba(57,239,103,.42); }
.eq-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 12px 10px 13px; border-top: 1px solid rgba(255,255,255,.05); }
.rotary { min-width: 0; text-align: center; color: #c7d1da; font-size: 9px; }
.rotary span, .rotary .rotary-value { display: block; }
.rotary input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rotary i { --turn: 0deg; position: relative; display: block; width: 43px; height: 43px; margin: 7px auto 5px; border: 2px solid #3d4a56; border-top-color: var(--cyan); border-radius: 50%; background: radial-gradient(circle, #18232c 0 48%, #05090d 51%); box-shadow: inset 0 0 0 4px #0a1015, 0 5px 10px #000; transform: rotate(var(--turn)); }
.deck[data-deck="b"] .rotary i { border-top-color: var(--pink); }
.rotary i::after { content: ""; position: absolute; width: 2px; height: 13px; left: calc(50% - 1px); top: 4px; background: #eaf7ff; box-shadow: 0 0 5px var(--cyan); }
.rotary .rotary-value { color: #96a4b0; font-size: 9px; }
.crossfader-panel { min-height: 48px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 8px 16px; font-weight: 800; }
.crossfader-panel span:first-child { color: var(--cyan); }.crossfader-panel span:last-child { color: var(--pink); }
.crossfader-panel input { width: 100%; }

.performance-column { display: grid; gap: 8px; }
.xy-module { padding: 10px; }
.module-head { min-height: 35px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 5px 8px; }
.module-head label { color: #8e9ba8; font-size: 9px; letter-spacing: .08em; }
.module-head select { color: #eff9ff; border: 0; background: transparent; font-weight: 700; }
.module-head input { width: 100px; vertical-align: middle; }
.xy-frame { position: relative; aspect-ratio: 1.18 / 1; overflow: hidden; border: 2px solid rgba(125,183,218,.36); border-radius: 20px; background: #02070d; box-shadow: inset 0 0 35px rgba(0,217,255,.13), inset 0 0 40px rgba(255,21,159,.08), 0 0 18px rgba(0,217,255,.16); touch-action: none; }
.xy-frame::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:17px; box-shadow: inset 9px 0 15px rgba(0,217,255,.12), inset -9px 0 15px rgba(255,21,159,.12); }
.xy-canvas { width: 100%; height: 100%; display: block; }
.axis-label { position: absolute; z-index: 3; color: #d5dbe4; font-size: 9px; letter-spacing: .07em; pointer-events: none; }
.axis-label--top { top: 5px; left: 50%; transform: translateX(-50%); }.axis-label--bottom { bottom: 5px; left: 50%; transform: translateX(-50%); }
.axis-label--left { top: 50%; left: 6px; transform: translateY(-50%) rotate(-90deg); }.axis-label--right { top: 50%; right: 2px; transform: translateY(-50%) rotate(90deg); }
.xy-help { position: absolute; z-index: 2; inset: 50% auto auto 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; color: rgba(255,255,255,.65); transition: opacity .25s; }
.xy-help strong, .xy-help span { display: block; }.xy-help strong { letter-spacing: .16em; }.xy-help span { margin-top: 7px; color: #718293; font-size: 10px; }
.xy-help.is-hidden { opacity: 0; }

.samples { padding: 10px; }
.sample-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.sample-pad { --pad: var(--cyan); min-width: 0; min-height: 103px; display: grid; grid-template-rows: auto 1fr auto; padding: 8px 5px; border: 2px solid var(--pad); border-radius: 7px; background: linear-gradient(180deg, color-mix(in srgb, var(--pad) 14%, #081018), #050a10); box-shadow: inset 0 0 17px color-mix(in srgb, var(--pad) 18%, transparent), 0 0 10px color-mix(in srgb, var(--pad) 23%, transparent); overflow: hidden; }
.sample-pad b { text-align: left; color: var(--pad); }.sample-pad i { align-self: center; height: 28px; background: repeating-linear-gradient(90deg, transparent 0 5%, var(--pad) 5% 7%, transparent 7% 12%); clip-path: polygon(0 45%, 7% 32%, 12% 55%, 18% 20%, 24% 70%, 31% 42%, 38% 59%, 46% 15%, 53% 78%, 61% 38%, 68% 64%, 76% 25%, 83% 58%, 91% 34%, 100% 48%, 100% 55%, 0 55%); filter: drop-shadow(0 0 4px var(--pad)); }
.sample-pad span { overflow: hidden; color: #dce6ef; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sample-pad.is-playing { animation: padHit .25s ease-out; }
@keyframes padHit { 50% { transform: translateY(2px) scale(.97); filter: brightness(1.8); } }
.sample-pad--blue { --pad: #1684ff; }.sample-pad--violet { --pad: #7652ff; }.sample-pad--purple { --pad: #cf46ed; }.sample-pad--pink { --pad: #ff186f; }.sample-pad--orange { --pad: #ff6c19; }.sample-pad--amber { --pad: #ffc41d; }.sample-pad--green { --pad: #37df51; }

.master-controls { display: grid; grid-template-columns: 1.5fr repeat(4, 58px) 74px 58px 62px; align-items: center; gap: 10px; min-height: 82px; padding: 8px 12px; }
.loop-length { text-align: center; color: #a9b5c0; font-size: 9px; }.loop-length span { display: block; margin-bottom: 4px; }.loop-length div { display: grid; grid-template-columns: 36px 1fr 36px; }.loop-length button, .loop-length strong { min-height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: #070d13; }.loop-length button { color: #dfe7ef; }
.round-control { width: 55px; height: 55px; border: 2px solid #53616e; border-radius: 50%; background: radial-gradient(circle, #17212b, #070b10 69%); box-shadow: inset 0 0 0 4px #080d12; }
.round-control--play { color: #e8ffec; border-color: var(--green); font-size: 20px; box-shadow: inset 0 0 0 4px #092813, 0 0 13px rgba(57,239,103,.4); }
.sync-control, .toggle-control { height: 55px; border: 1px solid var(--line); border-radius: 7px; background: #080e14; }
.sync-control b, .sync-control small, .toggle-control span, .toggle-control b { display: block; }.sync-control b { color: var(--cyan); }.sync-control small, .toggle-control span { color: #a3afbb; font-size: 8px; }.toggle-control b { margin-top: 5px; color: #9ba7b3; font-size: 11px; }.toggle-control.is-on b { color: var(--pink); }

.keyboard-column { min-width: 0; padding: 10px; }
.keyboard-focus-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 0 10px; }
.keyboard-focus-bar small { display:block; color:var(--cyan); font-size:8px; letter-spacing:.12em; }
.keyboard-focus-bar strong { display:block; margin-top:2px; color:#dfeaf3; font-size:10px; letter-spacing:.05em; }
.keyboard-focus-actions { display:flex; gap:6px; flex:0 0 auto; }
.keyboard-fullscreen, .keyboard-panic { min-height:38px; padding:0 11px; border:1px solid var(--line-hot); border-radius:7px; background:#071019; color:#dffaff; font-size:9px; font-weight:850; letter-spacing:.04em; }
.keyboard-fullscreen[aria-pressed="true"] { color:white; border-color:rgba(255,21,159,.65); box-shadow:0 0 14px rgba(255,21,159,.2); }
.keyboard-panic { color:#ff8d98; border-color:rgba(255,51,71,.5); }
.keyboard-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 12px; }
.keyboard-setting { color: #a8b4bf; font-size: 9px; }
.choice { display: grid; grid-template-columns: 32px 1fr 32px; height: 38px; margin-top: 6px; }
.choice button, .choice strong, .octaves button, .arp-toggle { display: grid; place-items: center; color: #ecf3fa; border: 1px solid var(--line); background: #080e14; }
.choice strong { color: var(--pink); }.octaves { display: flex; height: 38px; margin-top: 6px; }.octaves button { flex: 1; }.octaves .is-active { color: var(--pink); border-color: rgba(255,21,159,.5); background: rgba(255,21,159,.08); }
.arp-toggle { width: 100%; height: 38px; grid-auto-flow: column; margin-top: 6px; color: var(--green); }.arp-toggle i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.keyboard { --white-key: 13; position: relative; min-height: 460px; display: flex; flex-direction: column; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: #020509; box-shadow: inset 0 0 23px #000, 0 0 18px rgba(255,21,159,.11); }
.piano-key { position: relative; flex: 1; min-height: 32px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; color: #313844; border: 0; border-radius: 0 5px 5px 0; background: linear-gradient(90deg, #7f8490, #f4f4f7 18%, #d9dbe0); box-shadow: inset 0 -2px 2px #878b94, inset 5px 0 8px rgba(255,21,159,.18); }
.piano-key.black { z-index: 2; width: 68%; min-height: 23px; margin: -13px 0 -13px 0; color: #b6c0ca; background: linear-gradient(90deg, #05070a, #141922 75%, #080a0d); box-shadow: inset -2px 0 2px #38404b, 4px 0 10px rgba(0,0,0,.85); }
.piano-key.is-active { filter: brightness(1.6); box-shadow: inset 0 0 20px var(--pink), 0 0 14px var(--pink); }
.keyboard-hint { margin: 8px 0 0; color: #677684; text-align: center; font-size: 9px; }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; max-width: calc(100vw - 28px); padding: 11px 16px; border: 1px solid var(--line-hot); border-radius: 8px; background: rgba(3,9,15,.94); color: #dff7ff; box-shadow: 0 0 25px rgba(0,217,255,.15); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: .25s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.drawer { position: fixed; z-index: 31; top: 8px; bottom: 8px; left: 8px; width: min(360px, calc(100vw - 24px)); padding: 16px; overflow-y:auto; transform: translateX(calc(-100% - 20px)); transition: transform .25s ease; }
.drawer.is-open { transform: none; }.drawer header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }.drawer > label { display: block; margin: 20px 0; color: #aab6c1; }.drawer input { display: block; width: 100%; margin-top: 10px; }.drawer > button { width: 100%; min-height: 46px; margin: 6px 0; border: 1px solid var(--line-hot); border-radius: 7px; background: #09131c; }.drawer p { color: #758493; font-size: 12px; line-height: 1.5; }
.recording-panel { padding: 12px; border: 1px solid rgba(255,51,71,.28); border-radius: 9px; background: rgba(255,51,71,.035); }.recording-panel label { color: #aab6c1; font-size: 10px; }.recording-panel input { padding: 10px; color: white; border: 1px solid var(--line); border-radius: 6px; background: #050a10; }.recording-panel div { display: flex; justify-content: space-between; margin: 12px 0; color: #ff7180; font-size: 11px; }.recording-panel button { width: 100%; min-height: 38px; color: #ff7180; border: 1px solid rgba(255,51,71,.35); border-radius: 6px; background: #16090d; }.recording-panel button:disabled { opacity: .4; cursor: not-allowed; }
.drawer-link { display:grid; place-items:center; width:100%; min-height:46px; margin:6px 0 8px; color:#dffbff; text-decoration:none; border:1px solid var(--line-hot); border-radius:7px; background:linear-gradient(180deg,rgba(0,217,255,.12),rgba(0,217,255,.03)); }
.drawer-legal{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0 0 16px}.drawer-legal a{display:grid;place-items:center;min-height:34px;color:#8295a5;font-size:9px;font-weight:800;letter-spacing:.04em;text-decoration:none;border:1px solid var(--line);border-radius:6px;background:#050a10}.drawer-legal a:focus-visible,.drawer-legal a:hover{color:var(--cyan);border-color:var(--line-hot)}
.drawer-seo{margin:0 0 16px;padding:13px;border:1px solid var(--line);border-radius:8px;background:rgba(0,217,255,.035)}.drawer-seo h2{margin:0 0 6px;color:#dffbff;font-size:14px;line-height:1.3}.drawer-seo p{margin:0 0 9px;font-size:12px}.drawer-seo a{color:var(--cyan);font-size:11px;font-weight:750;text-underline-offset:3px}
.backdrop { position: fixed; z-index: 30; inset: 0; visibility: hidden; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .25s; }.backdrop.is-open { visibility: visible; opacity: 1; }
.audio-gate { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 45%, rgba(18,39,60,.86), rgba(1,4,8,.97) 68%); transition: opacity .35s, visibility .35s; }.audio-gate.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }.audio-gate__card { width: min(430px, 100%); padding: 34px 24px; text-align: center; border-color: rgba(0,217,255,.38); box-shadow: 0 0 70px rgba(0,217,255,.12), 0 0 100px rgba(255,21,159,.08); }.audio-gate__orb { position: relative; width: 106px; height: 106px; margin: 0 auto 24px; border: 1px solid rgba(0,217,255,.4); border-radius: 50%; background: radial-gradient(circle, #fff 0 5%, #00d9ff 6% 12%, rgba(0,217,255,.08) 35%, transparent 65%); box-shadow: 0 0 32px rgba(0,217,255,.42); animation: gateOrb 2.2s ease-in-out infinite alternate; }.audio-gate__orb::before, .audio-gate__orb::after { content:""; position:absolute; inset:16px; border:1px solid rgba(255,255,255,.25); border-radius:50%; }.audio-gate__orb::after { inset:31px; border-color:rgba(255,21,159,.55); }.audio-gate__card p { margin:0 0 9px; color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.25em; }.audio-gate__card h2 { margin:0; font-size:25px; letter-spacing:.07em; }.audio-gate__card > span { display:block; margin:12px auto 25px; color:#93a4b4; font-size:13px; line-height:1.5; }.audio-gate__card button { min-width:220px; min-height:52px; color:#efffff; font-weight:800; letter-spacing:.05em; border:1px solid var(--cyan); border-radius:9px; background:linear-gradient(180deg,rgba(0,217,255,.2),rgba(0,217,255,.06)); box-shadow:0 0 20px rgba(0,217,255,.2); }
.audio-gate__help { display:block; margin-top:16px; color:#8fa4b5; font-size:12px; text-underline-offset:3px; }
@keyframes gateOrb { to { transform:scale(1.05); filter:hue-rotate(25deg); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* LIVE SAFE additions */
.clip-indicator { min-width: 38px; padding: 3px 5px; color: #78e58b; border: 1px solid rgba(57,239,103,.28); border-radius: 5px; font-size: 8px; font-weight: 900; text-align: center; letter-spacing: .06em; }
.clip-indicator.is-clipping { color: #fff; border-color: var(--red); background: var(--red); box-shadow: 0 0 14px rgba(255,51,71,.72); }
.live-button { color: #8eeaa0; border-color: rgba(57,239,103,.34); font-weight: 850; }
.live-button.is-on { color: #061008; background: var(--green); border-color: var(--green); box-shadow: 0 0 14px rgba(57,239,103,.45); }
.deck__bpm { display: inline; padding: 1px 5px; color: var(--cyan); border: 1px solid rgba(0,217,255,.28); border-radius: 4px; background: rgba(0,217,255,.06); font-size: 10px; font-weight: 800; }
.deck[data-deck="b"] .deck__bpm { color: var(--pink); border-color: rgba(255,21,159,.3); background: rgba(255,21,159,.06); }
.deck .button[data-action="master"].is-on { color: #07110b; border-color: var(--green); background: var(--green); box-shadow: 0 0 12px rgba(57,239,103,.35); }
.deck.is-drop-target { outline: 2px solid var(--cyan); outline-offset: -3px; }
.midi-status { margin: 3px 0 10px !important; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); }
#liveCheckButton, #midiButton { font-weight: 800; letter-spacing: .03em; }
#midiButton.is-on { color: #07110b; border-color: var(--green); background: var(--green); }
.panic-button { color: #ff98a3 !important; border-color: rgba(255,51,71,.55) !important; background: rgba(255,51,71,.08) !important; }
.mobile-live-strip { display: none; }
.live-check { width: min(560px, calc(100vw - 24px)); max-height: min(720px, calc(100dvh - 24px)); padding: 18px; color: var(--text); border: 1px solid var(--line-hot); background: #050b12; }
.live-check::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(5px); }
.live-check header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-check header small { color: var(--cyan); font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.live-check h2 { margin: 3px 0 0; font-size: 23px; }
.live-check header button { width: 40px; height: 40px; color: #dce8f1; border: 1px solid var(--line); border-radius: 8px; background: #09111a; font-size: 22px; }
.live-check ul { display: grid; gap: 7px; margin: 18px 0; padding: 0; list-style: none; }
.live-check li { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); }
.live-check li > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.live-check li.is-ok > b { color: #07110b; background: var(--green); }
.live-check li.is-warn > b { color: #170f00; background: var(--amber); }
.live-check li span strong, .live-check li span small { display: block; }
.live-check li span small { margin-top: 3px; color: #90a0af; }
.live-check > p { color: #8da0af; font-size: 12px; line-height: 1.5; }
body.is-live-mode .ambient { opacity: .72; }
.deck__load-title { display: block; width: 100%; padding: 0; color: inherit; text-align: left; border: 0; background: transparent; }
.deck__load-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.host-mode-status { margin: 3px 0 10px !important; padding: 8px 10px; color: #a8b8c6; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); font-size: 11px; line-height: 1.35; }
.host-mode-status.is-app { color: #bff7cc; border-color: rgba(57,239,103,.3); background: rgba(57,239,103,.055); }
.drawer-link--portal { color: #f3f7fb; border-color: rgba(255,255,255,.2); background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); }
.is-portal-app #installButton { display: none !important; }


/* Keyboard focus mode: works even when a WebView does not expose the native Fullscreen API. */
body.keyboard-focus { overflow:hidden; overscroll-behavior:none; }
body.keyboard-focus .ambient,
body.keyboard-focus .topbar,
body.keyboard-focus .mode-nav,
body.keyboard-focus .mobile-live-strip,
body.keyboard-focus .mixer-column,
body.keyboard-focus .performance-column { display:none !important; }
body.keyboard-focus .app-shell { width:100%; max-width:none; min-height:100dvh; padding:0 !important; margin:0; }
body.keyboard-focus .studio-grid { display:block; width:100%; min-height:100dvh; margin:0; }
body.keyboard-focus .keyboard-column { position:fixed; z-index:70; inset:0; display:flex !important; flex-direction:column; width:100vw; height:100dvh; min-height:0; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); border-radius:0; overflow:hidden; }
body.keyboard-focus .keyboard-focus-bar { flex:0 0 auto; }
body.keyboard-focus .keyboard-settings { flex:0 0 auto; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding-bottom:8px; }
body.keyboard-focus .keyboard { flex:1 1 auto; min-height:0; height:auto; }
body.keyboard-focus .piano-key { min-height:42px; }
body.keyboard-focus .piano-key.black { width:80%; min-height:32px; margin:-14px 0; }
body.keyboard-focus .keyboard-hint { display:none; }