:root { color-scheme:dark; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-synthesis:none; -webkit-tap-highlight-color:transparent; }
* {box-sizing:border-box}
html,body { margin:0; width:100%; height:100%; overflow:hidden; color:#ecf1f6; background:#070a0e; }
button,input {font:inherit} button{border:0;color:inherit;cursor:pointer;touch-action:manipulation} button:focus-visible,input:focus-visible{outline:2px solid #72b4f7;outline-offset:2px}
[hidden] {display:none!important}
body.theme-classic{--bg:#111518;--panel:#23272a;--panel2:#2f3438;--raised:#43494e;--edge:#101417;--line:#3b4044;--text:#e6e7e9;--muted:#a3aab0;--accent:#4f91ce;--accent-deep:#244869;--track-bg:#171d20;--btn:#3a4044;--slot:#4b5156;--glass:rgba(43,48,52,.96)}
body.theme-spatial{--bg:#101820;--panel:#1b2530;--panel2:#253340;--raised:#394855;--edge:#07101a;--line:#344654;--text:#edf2f5;--muted:#9aafbf;--accent:#35a1e8;--accent-deep:#134063;--track-bg:#14222d;--btn:#34434e;--slot:#40515e;--glass:rgba(24,38,51,.96)}
.studio-shell{margin:auto;width:100%;max-width:520px;height:100dvh;min-height:400px;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);box-shadow:0 0 0 1px #34404d,0 24px 80px #0008;position:relative}
.main-header{height:58px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:env(safe-area-inset-top,0px) 14px 0;border-bottom:1px solid var(--edge);background:linear-gradient(180deg,#0b141e,#111921)}
.brand{background:none;display:flex;align-items:baseline;gap:5px;letter-spacing:2.1px;color:#dce5ed;padding:0;font-weight:750;font-size:22px}.brand em{font-style:normal;font-weight:400;font-size:11px;letter-spacing:3.3px;color:#b6c8d6}.header-right{display:flex;align-items:center;gap:8px}.session-pill{font-size:9px;max-width:110px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;letter-spacing:1px;color:var(--muted)}.icon-btn{background:transparent;color:#c9d8e2;font-size:23px;width:34px;height:34px}
.top-tabs{height:54px;flex:none;display:flex;gap:5px;padding:5px 12px 7px;background:var(--bg);border-bottom:1px solid var(--edge)}.top-tabs .tab{flex:1;border:1px solid var(--line);border-radius:5px;background:linear-gradient(180deg,var(--panel2),var(--panel));color:#cbd5dd;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}.tab-icon{font-size:16px;line-height:1}.top-tabs .tab.active{background:linear-gradient(180deg,var(--accent-deep),#182a3a);color:#fff;box-shadow:inset 0 -2px var(--accent)}
.screen-area{flex:1;min-height:0;overflow:hidden;display:flex}.view{width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;display:none;scrollbar-width:thin;scrollbar-color:#4b6678 transparent}.view.active{display:block}
.section-head{display:flex;align-items:baseline;justify-content:space-between;padding:16px 13px 10px}.section-head h2{font-size:15px;letter-spacing:.1px;margin:0;font-weight:600}.section-head span{font-size:10px;color:var(--accent);letter-spacing:.6px}
.session-list{margin:0 12px;display:grid;gap:3px}.session-row{width:100%;min-height:59px;border:1px solid #ffffff10;background:linear-gradient(135deg,var(--panel),var(--bg));border-radius:7px;display:flex;align-items:center;text-align:left;gap:10px;padding:7px}.session-row>span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0}.session-row strong,.browser-player strong{font-size:13px;font-weight:600}.session-row small,.browser-player small{font-size:11px;color:var(--muted)}.chevron{font-size:24px;color:var(--muted)}.album-mini{width:44px;height:44px;flex:none;border-radius:4px;display:grid;place-items:center;color:#e5f3ff;font-size:20px;background:#10466e}.art-a{background:radial-gradient(circle at 75% 40%,#509dd1,#1c3952 50%,#0e1925)}.art-b{background:linear-gradient(170deg,#697384,#26323c 43%,#b28b62)}.art-c{background:linear-gradient(130deg,#40524e,#1b2231 54%,#89677a)}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:17px 12px}.dashboard-action{height:92px;background:linear-gradient(140deg,var(--panel2),#151c22);border:1px solid var(--line);border-radius:7px;font-size:11px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:11px}.dashboard-action>span{font-size:26px;line-height:1;color:#cfdae3}.dashboard-action:active{background:var(--raised)}.quick-record{display:flex;align-items:center;width:calc(100% - 24px);margin:0 12px;border-radius:9px;background:linear-gradient(100deg,var(--panel2),#17212b);border:1px solid var(--line);padding:14px 12px;text-align:left;gap:10px}.quick-record>span:nth-child(2){flex:1;display:grid;gap:4px}.quick-record strong{font-size:12px}.quick-record small{font-size:10px;color:var(--muted)}.quick-mic{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;font-size:23px}.hint-card{font-size:9px;color:#93aabd;letter-spacing:1px;line-height:1.5;margin:18px 12px;padding:12px;border:1px solid var(--line);border-radius:5px}.hint-card span{display:block;margin-top:4px;font-size:11px;letter-spacing:0;color:var(--muted)}
.counter-bar{height:76px;margin:6px 8px 4px;display:flex;border:1px solid var(--line);background:#030a0f;border-radius:5px;overflow:hidden}.counter-big{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;background:transparent;min-width:0}.counter-big strong{font-size:clamp(22px,6vw,34px);letter-spacing:2px;color:#57d3a5;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.counter-big small{font-size:9px;letter-spacing:2px;color:#72808e}.counter-side{width:88px;padding:13px 6px;border-left:1px solid #2c3942;display:flex;flex-direction:column;align-items:center;gap:4px;color:#5ccda3;font-size:11px}.counter-side .dim{color:#9da8b1}.meters-compact{width:25px;display:flex;gap:3px;padding:13px 6px;align-items:flex-end;border-left:1px solid #2c3942}.meter-micro{height:50px;width:5px;background:#102a27;display:flex;align-items:flex-end}.meter-micro i{width:100%;height:6%;background:linear-gradient(to top,#30b76e,#d4c94c,#e76436)}
.edit-mode-bar{height:36px;padding:3px 6px;display:flex;gap:7px}.mode-cells{display:flex;flex:1;gap:2px}.mode-button{background:var(--btn);flex:1;font-size:9px;letter-spacing:.1px;border-radius:3px;border:1px solid var(--line)}.mode-button.active{background:#2c7c54;box-shadow:inset 0 -1px #56e1a2}.grid-state{font-size:10px;white-space:nowrap;color:var(--muted);display:flex;gap:5px;align-items:center}.grid-state strong{color:#62bde3}
.timeline-panel{margin:3px 5px 0;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--track-bg)}.timeline-ruler,.markers{display:flex;height:26px;border-bottom:1px solid #ffffff17}.ruler-stub{width:95px;flex:none;border-right:1px solid var(--line);padding:7px 5px;background:var(--panel);font-size:9px;color:#c6d1dd}.ruler-measures,.section-markers{display:flex;flex:1;justify-content:space-around;align-items:center;min-width:0;font-size:10px;color:#bbc6cf}.ruler-measures i{font-style:normal;align-self:stretch;display:grid;place-items:center;border-right:1px solid #ffffff11;flex:1}.section-markers{align-items:stretch;font-size:8px;color:#fff}.section-markers b{flex:1;display:grid;place-items:center;background:#265a85;border-right:1px solid var(--track-bg);font-weight:500}.section-markers b:nth-child(2){background:#327a60}.section-markers b:nth-child(3){background:#9a602d}.section-markers b:nth-child(4){background:#4f6d9b}.section-markers b:nth-child(5){background:#6c4789}
.track-rows{position:relative}.track-row{display:flex;height:66px;border-bottom:1px solid #ffffff15}.track-header{width:95px;flex:none;position:relative;background:linear-gradient(125deg,var(--panel2),var(--panel));border-right:1px solid var(--line);padding:6px 5px 4px 9px;display:flex;flex-direction:column;gap:5px;text-align:left}.track-header:before{position:absolute;content:"";width:4px;left:0;top:0;bottom:0;background:var(--track-color)}.track-header.selected{background:linear-gradient(125deg,#35495d,var(--panel));box-shadow:inset 0 0 0 1px #5c9fd4}.track-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.track-actions{display:flex;gap:4px}.track-actions button{width:21px;height:19px;font-size:10px;background:#3b454d;border:1px solid #ffffff16;border-radius:3px}.track-actions button.on-solo{background:#bb9433;color:#111}.track-actions button.on-mute{background:#8b672d;color:#111}.track-actions button.on-arm{background:#b43437;color:#fff}.track-sub{font-size:9px;color:#a0acb5}.track-wave{display:block;min-width:0;flex:1;position:relative;padding:0;overflow:hidden;background:var(--track-bg);color:var(--track-color)}.track-wave canvas{width:100%;height:100%;display:block}.track-wave:after{content:"";position:absolute;top:1px;bottom:1px;left:0;right:0;border-top:1px solid #ffffff18;border-bottom:1px solid #0008;pointer-events:none}.timeline-line{position:absolute;z-index:1;pointer-events:none;width:1.5px;top:0;bottom:0;left:calc(95px + (100% - 95px) * .25);background:#61c6ff;box-shadow:0 0 5px #5cd0ff65}
.edit-bottom-tools{display:flex;height:54px;justify-content:space-evenly;gap:1px;margin:6px 4px}.tool-choice{background:transparent;color:#c1ccd6;flex:1;font-size:19px;display:flex;flex-direction:column;align-items:center;gap:2px}.tool-choice span{font-size:10px}.tool-choice.active{color:#63c6ff}
.mixer-caption{height:31px;padding:10px 10px 0;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#aab7c3}.mixer-caption i{color:#48be83;font-style:normal}.mixer-scroll{height:calc(100% - 79px);overflow-x:auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.mixer-channels{display:flex;align-items:stretch;min-width:max-content;padding:2px 5px 8px;gap:3px;min-height:100%}.channel{width:94px;min-height:570px;border:1px solid var(--line);border-top:3px solid var(--track-color);border-radius:4px;background:linear-gradient(180deg,var(--panel2),#161e24);display:flex;flex-direction:column;padding:4px;position:relative}.channel.selected{box-shadow:0 0 0 1px #73bfe4,0 0 12px #347aad25}.channel-name{height:27px;background:color-mix(in srgb,var(--track-color),#161c23 40%);display:grid;place-items:center;font-size:10px;border-radius:2px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.channel-label{text-align:center;font-size:8px;color:#bdcbd6;margin:5px 0 3px;letter-spacing:.4px}.insert-slot{display:flex;text-align:left;align-items:center;gap:3px;width:100%;height:20px;padding:1px 3px;background:linear-gradient(#5a6269,#373e45);border:1px solid #11191f;border-radius:3px;margin-bottom:1px;color:#f0f1f2}.theme-spatial .insert-slot{background:linear-gradient(#566879,#324452)}.insert-slot .slot-letter{font-size:8px;color:#b8c0c8;width:8px}.insert-slot .slot-name{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.insert-slot.empty{opacity:.55}.insert-slot.bypass{background:linear-gradient(#40658b,#294561)}.send-slot{display:flex;justify-content:space-between;align-items:center;height:18px;background:var(--btn);border:1px solid #151e24;border-radius:2px;padding:2px 4px;font-size:9px;margin-bottom:2px}.channel-io{font-size:9px;background:var(--btn);border-radius:3px;border:1px solid var(--line);text-align:center;padding:5px 0;color:#ced4d9}.channel-auto{font-size:9px;text-align:center;color:#5ed3a4;margin:5px 0}.pan-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}.pan-knob{width:30px;height:30px;background:radial-gradient(circle at 25% 20%,#606d77,#0d131a 65%);border:2px solid #516170;border-radius:50%;position:relative;touch-action:none}.pan-knob:before{content:"";position:absolute;top:1px;left:12px;width:2px;height:12px;background:#d3e3ed;transform-origin:center 13px;transform:rotate(var(--pan-deg,0deg))}.pan-value{font-size:10px;color:#5fcf9d}.channel-lower{display:flex;gap:5px;align-items:stretch;justify-content:center;margin-top:8px;height:115px}.fader-wrap{width:30px;height:100%;position:relative;touch-action:none}.fader-rail{position:absolute;top:0;bottom:0;left:12px;width:5px;background:#05090d;border:1px solid #64717a40;border-radius:3px}.fader-cap{position:absolute;bottom:var(--fader-pos,60%);left:3px;width:24px;height:17px;background:linear-gradient(#dae2e7,#8d9da8 46%,#26323a 48%,#cbd5db 64%,#7f8d97);border:1px solid #172028;border-radius:3px;box-shadow:0 2px 3px #000a;transform:translateY(50%)}.fader-meter{width:17px;background:#040b0d;display:flex;align-items:flex-end;padding:2px;gap:2px;border:1px solid #23333a;border-radius:2px}.fader-meter i{height:var(--meter,4%);flex:1;background:linear-gradient(to top,#12ac62 0%,#63d23c 60%,#d2c42f 85%,#c64034 100%)}.db-label{font-size:10px;text-align:center;color:#59d998;margin-top:4px}.channel-smr{display:flex;justify-content:space-between;margin-top:5px}.channel-smr button{width:25px;height:22px;background:#3e4750;border:1px solid #697681;border-radius:3px;font-size:10px}.channel-smr button.on-solo{background:#c29e42;color:#141414}.channel-smr button.on-mute{background:#bd8736;color:#141414}.channel-smr button.on-arm{background:#be3f3f}.mix-bottom{height:48px;display:flex;border-top:1px solid var(--line)}.mix-bottom button{flex:1;background:var(--bg);display:flex;flex-direction:column;align-items:center;font-size:17px;justify-content:center;gap:2px}.mix-bottom span{font-size:9px}
.browse-search{height:41px;border:1px solid var(--line);background:var(--panel);border-radius:7px;margin:10px 10px 8px;display:flex;align-items:center;padding:0 12px;gap:10px;color:#a9b6bf}.browse-search span{font-size:23px}.browse-search input{flex:1;background:transparent;border:0;color:var(--text);outline:none;min-width:0;font-size:12px}.browse-filters{display:flex;margin:5px 9px 8px;gap:6px}.browse-filters button{flex:1;height:34px;background:var(--panel);border:1px solid var(--line);border-radius:5px;font-size:11px}.browse-filters button.active{background:#205788;border-color:#428ac8}.folder-list{margin:0 10px}.folder-row{height:45px;width:100%;background:transparent;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;text-align:left}.folder-icon{font-size:26px;color:#6cb0ef}.folder-info{flex:1;display:grid;gap:4px}.folder-info strong{font-size:12px;font-weight:500}.folder-info small{font-size:10px;color:var(--muted)}.folder-row .chevron{font-size:18px}.browse-actions{display:flex;gap:7px;margin:12px 10px}.browse-actions button{flex:1;height:38px;background:linear-gradient(var(--panel2),var(--panel));border:1px solid var(--line);border-radius:5px;font-size:11px}.browser-player{min-height:64px;display:flex;gap:10px;align-items:center;margin:12px 10px;padding:7px;border:1px solid var(--line);background:var(--panel);border-radius:7px}.player-art{background:linear-gradient(135deg,#306f9d,#0d2940);display:grid;place-items:center;width:45px;height:45px;border-radius:4px;color:#85cdf5;font-size:28px}.player-title{display:grid;gap:4px;flex:1;min-width:0}.player-title strong,.player-title small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browser-player button{font-size:22px;width:35px;height:35px;background:transparent}.cymatics-block{margin:12px 10px 25px;border-radius:8px;border:1px solid var(--line);background:#081016;overflow:hidden}.cymatics-block .section-head{padding:10px}.cymatics-block h2{font-size:11px;letter-spacing:.9px}.cymatics-block .section-head span{font-size:9px}.cymatics-switch{display:flex;margin:0 10px 7px;gap:5px}.cymatics-switch button{flex:1;height:30px;background:#1b303c;color:#b1c7d6;border:1px solid #2d4858;border-radius:4px;font-size:11px}.cymatics-switch button.active{background:#286389;color:#fff;box-shadow:inset 0 -2px #66caff}#cymaticsCanvas{width:100%;height:165px;display:block;background:radial-gradient(ellipse at 50% 55%,#122330,#030609)}.cymatics-desc{font-size:9px;color:#8395a3;padding:7px 10px 10px}
.transport-dock{flex:none;background:linear-gradient(180deg,var(--panel),#111923);border-top:1px solid var(--line);padding:4px 10px max(4px,env(safe-area-inset-bottom));min-height:140px}.transport-top{display:flex;justify-content:space-between;font-size:9px;color:#94a5b2;letter-spacing:.7px}.transport-top span:nth-child(2){color:#bdd3e0}#seekBar{width:100%;height:11px;accent-color:#5dbae8;cursor:pointer;margin:6px 0}.transport-buttons{height:39px;display:flex;gap:8px}.transport-buttons button{flex:1;background:linear-gradient(150deg,var(--raised),var(--panel));border:1px solid var(--line);border-radius:5px;font-size:18px}.transport-buttons .play-btn{color:#65d99b}.transport-buttons .record-btn{color:#ff6569}.transport-buttons .record-btn.active{background:#98252b;color:#fff}.transport-buttons .loop-btn.active{color:#56c1ec;box-shadow:inset 0 -2px #56c1ec}.bottom-tabs{display:flex;height:39px;border-top:1px solid #ffffff14;margin-top:6px}.bottom-tab{background:transparent;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:17px;color:#8398a9}.bottom-tab span{font-size:9px}.bottom-tab.active{color:#6cc9ff}
.modal-backdrop{position:fixed;z-index:9;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;padding:15px}.modal{width:min(100%,520px);max-height:90dvh;overflow-y:auto;border:1px solid #536b78;background:linear-gradient(155deg,#293743,#111a21);box-shadow:0 18px 70px #000c;border-radius:10px;padding:14px}.modal-top{height:35px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #536070;margin-bottom:12px}.modal-top strong{font-size:14px;letter-spacing:.5px}.modal-top button{background:none;font-size:17px}.modal-field{display:grid;gap:5px;margin:12px 0}.modal-field label{font-size:11px;color:#c4d3de}.modal-field input,.modal-field select{min-width:0;width:100%;padding:10px;border:1px solid #647480;border-radius:5px;color:#edf3f5;background:#19232c}.modal-copy{color:#b1c2cf;font-size:12px;line-height:1.6}.modal-buttons{display:flex;gap:8px;margin-top:14px}.modal-buttons button{height:38px;flex:1;background:#364c61;border:1px solid #5b7b90;border-radius:4px;font-size:12px}.modal-buttons .primary{background:#2771a0;border-color:#529fd5}.theme-selections{display:flex;gap:8px}.theme-choice{flex:1;background:#343f48;border:1px solid #546672;padding:12px;border-radius:6px;font-size:12px}.theme-choice.active{border-color:#7dc7ff;box-shadow:inset 0 -2px #65baf6}.eq-canvas{width:100%;height:260px;display:block;border:1px solid #3c596a;background:#08141e;border-radius:5px;touch-action:none}.eq-band-list{display:flex;justify-content:space-between;font-size:10px;color:#c4d5de;margin-top:12px}.eq-band-list span{flex:1;text-align:center}.eq-band-list strong{color:#67c7f2}.eq-dsp-badge{font-size:10px;color:#85e4b4}.toast{position:fixed;z-index:10;left:50%;bottom:calc(153px + env(safe-area-inset-bottom));transform:translate(-50%,10px);background:#253b47;color:#eef8ff;border:1px solid #6d9caf;border-radius:6px;padding:9px 14px;max-width:90vw;font-size:11px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 6px 20px #0009}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:600px){body{background:radial-gradient(ellipse at 50% 20%,#14232d,#03060a 80%)}.studio-shell{height:min(920px,calc(100dvh - 32px));margin:16px auto;border:1px solid #415160;border-radius:24px}.main-header{height:66px}.transport-dock{min-height:150px}}
@media(orientation:landscape) and (max-height:650px){.studio-shell{max-width:none;width:100%;height:100dvh;margin:0;border:0;border-radius:0}.main-header{height:40px;padding-top:0}.brand{font-size:17px}.brand em{font-size:9px}.top-tabs{height:38px;padding:3px 10px}.top-tabs .tab{flex-direction:row}.tab-icon{font-size:12px}.transport-dock{min-height:85px;height:85px;display:grid;grid-template-columns:1fr 2fr;grid-template-rows:20px 1fr;gap:0 12px}.transport-top{grid-column:1/2}.transport-buttons{grid-column:1/2;grid-row:2;max-width:420px;height:34px}.bottom-tabs{grid-column:2;grid-row:1 / 3;max-width:450px;justify-self:end;width:100%;height:auto;border-top:0;margin:0}#seekBar{grid-column:2;grid-row:1;width:calc(100% - 450px);justify-self:start;min-width:50px}.screen-area{min-height:0}.track-row{height:54px}.mixer-scroll{height:calc(100% - 79px)}.channel{min-height:570px}.counter-bar{height:55px}.counter-big strong{font-size:26px}.counter-side{padding:6px}.edit-mode-bar{height:30px}.edit-bottom-tools{height:36px}.timeline-panel{overflow-y:auto;max-height:calc(100% - 128px)}.cymatics-block{max-width:620px;margin-left:auto;margin-right:auto}#cymaticsCanvas{height:160px}}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}

/* Compact mobile mixer: plugin slots A–D and sends A–C are visible by default.
   All A–J / A–E remain available via the expand control. */
.mixer-channels:not(.expanded) .extra-slot,
.mixer-channels:not(.expanded) .extra-send{display:none}
.mixer-density-toggle{background:transparent;color:#9bc7e3;font-size:9px;letter-spacing:.6px;white-space:nowrap;padding:0 4px}
.mixer-density-toggle[aria-pressed="true"]{color:#6fdbac}
.channel{min-height:505px}

/* Portable session actions: maintain the approved mobile visual system */
.browse-actions{flex-wrap:wrap}.browse-actions button{min-width:29%;flex:1}.hint-card{line-height:1.6}

/* BZDR MOBILE / REFERENCE-ALIGNED UI · 2026-10-16
   Tight, Pro Tools/SoundCraft-inspired grey controls, dark workspace, blue tabs.
   Preserve native session exchange and demo interactions from Phase 2. */
:root { -webkit-font-smoothing:antialiased; }
.desktop-menu-bar{display:none}
.studio-shell #editView .track-wave{background:var(--track-bg)}
.studio-shell #editView .is-recording-target .track-wave{background:#25151a}
#editView .timeline-grid{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.grid-detail-button{position:absolute;right:8px;bottom:8px;z-index:6;min-height:44px;padding:8px 12px;border:1px solid #587c91;border-radius:6px;background:#173246e8;color:#b7e3fa;font-size:11px;box-shadow:0 3px 12px #0005}

.session-template-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.session-template-list button{display:grid;gap:7px;align-content:start;min-height:100px;padding:12px;text-align:left;border:1px solid #456172;border-radius:8px;background:#172a37;color:#c7dce9}
.session-template-list strong{font-size:13px}.session-template-list small{font-size:11px;line-height:1.5;color:#99b3c5}.session-template-list [aria-pressed="true"]{background:#214a63;border-color:#9bd9fa;box-shadow:inset 0 -2px #6fc7f4;color:#fff}
.template-track-list{font-size:10px;line-height:1.7;color:#91b4ca;margin:12px 0}.session-create-actions{position:sticky;bottom:-14px;margin-bottom:-14px;padding:10px 0 14px;background:#15232d}.session-create-actions button{min-height:44px}
.clip-gain-control{display:grid;gap:12px}.clip-gain-control>output{text-align:center;color:#8ed9ff;font-size:32px;font-variant-numeric:tabular-nums}.clip-gain-control>label{font-size:12px;color:#b2c9d9;text-align:center}
#clipGainPreview{display:block;width:100%;height:84px;background:#0b1822;border:1px solid #375567;border-radius:7px}
#clipGainSlider{width:100%;height:44px;margin:0;accent-color:#83c9ef;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent}
#clipGainSlider::-webkit-slider-runnable-track{height:6px;background:#3d6178;border-radius:4px}#clipGainSlider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border:2px solid #c8eeff;border-radius:50%;background:#72bde8;box-shadow:0 2px 8px #0005}
#clipGainSlider::-moz-range-track{height:6px;background:#3d6178;border-radius:4px}#clipGainSlider::-moz-range-thumb{width:25px;height:25px;border:2px solid #c8eeff;border-radius:50%;background:#72bde8}
.gain-step-controls{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:8px}.gain-step-controls button{min-height:48px;border:1px solid #50788f;border-radius:6px;background:#223f52;color:#e3f3ff;font-size:20px}.gain-step-controls #clipGainReset{font-size:12px}.gain-step-controls button:disabled{opacity:.4}
.gain-exact{font-size:11px;color:#9ab7ca}.gain-exact summary{min-height:44px;padding:14px 0;cursor:pointer}.modal:has(.clip-gain-control) .modal-buttons button{min-height:44px}
.track-header,.track-wave,.channel{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.track-header:focus-visible{outline:2px solid #8cd3f5;outline-offset:-2px}
.track-name{display:flex;align-items:center;gap:4px}.track-name::after{content:'⋯';margin-left:auto;color:#97aebb;font-size:12px;opacity:.65}
.is-track-holding{outline:1px solid #9dd7f4;outline-offset:-2px}
.modal-backdrop[data-presentation="track"]{align-items:flex-end;padding:12px 10px max(10px,env(safe-area-inset-bottom))}
.modal-backdrop[data-presentation="track"] .modal{width:min(100%,520px);max-height:90dvh;border-radius:18px 18px 10px 10px;padding:10px 14px 14px;border-color:#4d6c7e;background:linear-gradient(155deg,#263a47,#101c25)}
.modal-backdrop[data-presentation="track"] .modal::before{content:'';display:block;width:36px;height:4px;border-radius:3px;background:#7896a7;margin:0 auto 6px;opacity:.65}
.modal-backdrop[data-presentation="track"] .modal-top{position:sticky;top:-10px;z-index:1;min-height:44px;height:auto;align-items:center;margin-bottom:8px;background:#243744}
.modal-backdrop[data-presentation="track"] .modal-top button{width:44px;height:44px;flex:none}
.modal-backdrop[data-presentation="track"] .modal-top strong{font-size:14px;line-height:1.4;padding:5px 0}
.track-options-summary{font-size:11px;line-height:1.4;color:#a4bfce;margin:0 0 12px}
.track-options-notice{font-size:11px;line-height:1.5;background:#503c2e;border:1px solid #886744;border-radius:5px;padding:8px;color:#f3d9b0}
.track-toggle-options,.track-clip-options,.track-history-options{display:grid;gap:7px}.track-toggle-options{grid-template-columns:repeat(3,minmax(0,1fr))}.track-clip-options,.track-history-options{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-track-option]{min-height:48px;padding:12px 10px;border:1px solid #3c596b;border-radius:7px;background:#1b303e;color:#d6e8f2;font-size:12px;text-align:left;line-height:1.35}
.track-toggle-options button{display:grid;align-content:center;gap:5px;text-align:center;min-height:66px;font-size:11px}
.track-toggle-options small{font-size:10px;color:#99b0be}.track-toggle-options [aria-pressed="true"]{background:color-mix(in srgb,var(--context-track-color),#142a36 68%);border-color:var(--context-track-color);color:#fff}.track-toggle-options [aria-pressed="true"] small{color:#bde9fc}
[data-track-option]:disabled{opacity:.38;cursor:default}[data-track-option]:focus-visible{outline:2px solid #9edfff;outline-offset:1px}
.track-options-heading{font-size:11px;font-weight:600;letter-spacing:.4px;margin:16px 0 8px;color:#a7c8db}
.track-navigation-options{display:grid;gap:7px;margin-top:16px}.track-history-options{margin-top:10px}.track-history-options button{text-align:center}
@media(orientation:landscape) and (max-height:650px){.modal-backdrop[data-presentation="track"]{align-items:center}.modal-backdrop[data-presentation="track"] .modal{width:min(100%,640px)}.track-toggle-options button{min-height:48px}.track-toggle-options small{display:none}}
.desktop-menu-popup{position:fixed;z-index:8;width:264px;padding:5px;overflow-y:auto;border:1px solid #4a6171;border-radius:6px;background:#182630;box-shadow:0 12px 32px #0009;color:#dce9f1}
.desktop-menu-popup button{display:flex;align-items:center;width:100%;min-height:34px;gap:8px;padding:6px 9px;text-align:left;background:transparent;border-radius:3px;font-size:12px}
.desktop-menu-popup button:hover:not(:disabled),.desktop-menu-popup button:focus-visible{background:#285470;outline:none;color:#fff}
.desktop-menu-popup button:disabled{opacity:.38;cursor:default}.desktop-menu-popup [role="separator"]{height:1px;background:#344a59;margin:5px 8px}
.menu-check{width:12px;flex:none}.desktop-menu-popup [aria-checked="true"] .menu-check::before{content:'✓';color:#8fd7fa}
@media(min-width:900px){
 .studio-shell[data-dock] .main-header{height:auto!important;min-height:86px!important;display:grid!important;grid-template-columns:1fr auto;grid-template-rows:50px 32px;padding:0 11px 3px}
 .desktop-menu-bar{display:flex;grid-column:1 / -1;align-items:center;gap:1px;margin-left:-5px;min-width:0}
 .desktop-menu-bar>button{min-height:30px;padding:4px 12px;background:transparent;border-radius:4px;color:#bdcbd5;font-size:12px;white-space:nowrap}
 .desktop-menu-bar>button:hover,.desktop-menu-bar>button[aria-expanded="true"]{background:#2a4050;color:#f1f7fa}
}
body.theme-classic {--bg:#0b1015;--panel:#171d23;--panel2:#20272e;--raised:#354048;--edge:#080b0e;--line:#2b333a;--text:#e3e7e9;--muted:#8a9aa5;--accent:#348bce;--accent-deep:#123653;--track-bg:#09151d;--btn:#252d34;--slot:#43484c;--glass:rgba(23,30,38,.98)}
body.theme-spatial {--bg:#0b121b;--panel:#141f2b;--panel2:#1f2c3a;--raised:#394b5b;--edge:#060b13;--line:#314455;--text:#e9eff4;--muted:#9bb0c0;--accent:#379edb;--accent-deep:#16415f;--track-bg:#0d1b2a;--btn:#283745;--slot:#425566;--glass:rgba(16,29,41,.97)}
.studio-shell {max-width:460px;box-shadow:inset 0 0 0 1px #323a40,0 18px 70px #0008;}
.main-header {height:52px;min-height:52px;padding:0 11px;background:linear-gradient(180deg,#080c11 0%,#10161c 100%);border-bottom:1px solid #232c33;}
.brand {font-size:17px;letter-spacing:.35px;gap:4px;font-weight:800;color:#e3e9ee;}
.brand em {font-size:10px;letter-spacing:2.2px;font-weight:400;color:#a8b5be;}
.header-right {gap:7px;}
.session-pill {font-size:8px;max-width:104px;color:#6d818f;letter-spacing:.35px;}
.icon-btn {height:29px;width:29px;font-size:19px;}
.top-tabs {height:49px;padding:5px 9px 6px;gap:3px;border-bottom:1px solid #313c45;background:#10171d;}
.top-tabs .tab {border-color:#2d363c;border-radius:4px;background:linear-gradient(180deg,#202931,#151d24);font-size:10px;gap:0;line-height:1.1;color:#d8e0e5;}
.tab-icon {font-size:12px;font-weight:500;line-height:1.2;}
.top-tabs .tab.active {background:linear-gradient(180deg,#1f4b6e 0%,#122b3d 65%,#102331 100%);box-shadow:inset 0 -2px #3194d7,0 0 10px #1e79b21d;color:#e7f3fa;}
.section-head {padding:13px 12px 7px;}.section-head h2 {font-size:14px;font-weight:560;}.section-head span {font-size:10px;}
.session-list {gap:2px;margin:0 10px;}.session-row{min-height:54px;padding:5px 7px;border-radius:5px;background:linear-gradient(105deg,#1b232a,#12191f);border:1px solid #222e36;}.session-row strong{font-size:11px;}.session-row small{font-size:9px;}.album-mini{height:40px;width:42px;font-size:21px;}.dashboard-grid{gap:6px;margin:12px 10px;}.dashboard-action{height:91px;gap:9px;border-radius:5px;font-size:10px;background:linear-gradient(140deg,#232d35,#12181d);border:1px solid #34404a;}.dashboard-action>span{font-size:23px;}.quick-record{width:calc(100% - 20px);margin:0 10px;padding:10px 8px;border-radius:5px;background:linear-gradient(110deg,#243039,#141d23);}.quick-record strong{font-size:11px;}.quick-record small{font-size:9px;}.hint-card{margin:13px 10px;padding:9px;color:#688198;background:#111a23;border-color:#263a49;}.hint-card span{font-size:10px;}
/* Keep Browse/Home open, just like the approved image. Recording transport belongs to Edit. */
.studio-shell[data-view="home"] .transport-dock,.studio-shell[data-view="browse"] .transport-dock,.studio-shell[data-view="mix"] .transport-dock {display:none;}
/* Edit / quick-read transport compact enough to leave six visible tracks on phones */
.studio-shell[data-view="edit"] .transport-dock{min-height:62px;padding:5px 10px max(6px,env(safe-area-inset-bottom));background:#0b1117;}
.studio-shell[data-view="edit"] .transport-top,.studio-shell[data-view="edit"] .bottom-tabs{display:none;}
.studio-shell[data-view="edit"] #seekBar{display:none;}
.studio-shell[data-view="edit"] .transport-buttons{height:45px;gap:5px;}
.transport-buttons button{background:linear-gradient(180deg,#252f38,#171f26);border:1px solid #2f3943;font-size:18px;border-radius:4px;}
.transport-buttons .play-btn{color:#50df9c}.transport-buttons .record-btn{color:#f34453}
/* Edit tracks and rulers */
#editView.active {display:flex;flex-direction:column;overflow:hidden;}
.counter-bar {height:63px;flex:none;margin:4px 5px 3px;border-color:#16252c;border-radius:1px;background:#02080c;}
.counter-big strong{font-size:clamp(21px,5.8vw,27px);letter-spacing:1px;color:#56e0ad;}.counter-big small{font-size:8px;letter-spacing:1.8px;color:#688f84;}
.counter-side{width:76px;font-size:10px;padding:9px 4px;gap:3px;}.counter-side .dim{color:#69bc99;}.meters-compact{width:18px;padding:9px 3px;gap:2px}.meter-micro{width:4px;height:42px;}
.edit-mode-bar{height:29px;flex:none;padding:2px 5px;gap:5px;}.mode-button{font-size:8px;border-color:#323c44;background:#30373e;}.mode-button.active{background:#2b7356;box-shadow:inset 0 -1px #5dba94;}.grid-state{font-size:8px;gap:3px;}.grid-state strong{color:#a3b2be;}
.timeline-panel{flex:1;min-height:0;overflow-y:auto;margin:2px 3px 0;border-color:#27333a;background:#101820;}
.timeline-ruler,.markers {height:20px;}.ruler-stub{width:90px;padding:5px 4px;font-size:8px;background:#1c252d}.ruler-measures{font-size:9px;}.section-markers{font-size:7px;}
.track-row{height:60px;}.track-header{width:90px;padding:7px 3px 3px 7px;background:#1c262e;gap:6px;}.track-header:before{width:4px;}.track-header.selected{background:#283442;box-shadow:inset 0 0 0 1px #3774a0;}.track-name{font-size:10px;}.track-actions{gap:3px;}.track-actions button{width:22px;height:20px;font-size:10px;background:#343d45;border-color:#18222a;}.track-sub{display:none;}.track-wave{background:repeating-linear-gradient(90deg,#101820 0px,#101820 37px,#192a33 38px,#101820 39px);}.track-wave canvas{height:100%;mix-blend-mode:screen;}.timeline-line{left:calc(90px + (100% - 90px) * .25);background:#cce8f4;box-shadow:0 0 3px #e6f7f5;}.edit-bottom-tools{height:44px;flex:none;margin:2px 3px;}.tool-choice{font-size:17px;color:#b6c6d0;gap:1px}.tool-choice span{font-size:9px;}.tool-choice.active{color:#81badb;}
/* Mixer: old-school narrow channel strips, complete with visible faders and grey buttons */
#mixView.active{display:flex;flex-direction:column;overflow:hidden;}
.mixer-caption{height:23px;flex:none;padding:6px 9px 2px;color:#718897;font-size:8px;letter-spacing:.9px;}
.mixer-caption i{color:#3db7a2;font-style:normal;font-size:7px;margin:0 4px;}.caption-secondary{color:#425f72;}
.mixer-density-toggle{font-size:8px;color:#83b5d5;background:#131f27;padding:2px 7px;border:1px solid #2a4253;border-radius:3px;}
.mixer-scroll{flex:1;min-height:0;height:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
.mixer-scroll::-webkit-scrollbar{height:0;width:0;}.mixer-channels{height:100%;min-height:0;gap:2px;padding:1px 4px 4px;}
.channel{width:calc((min(100vw, 460px) - 14px)/4);max-width:112px;min-height:0;height:100%;padding:3px 3px 4px;border:1px solid #344047;border-top:0;border-radius:0;background:linear-gradient(180deg,#222d35,#141d24 28%,#182129 78%,#151c23 100%);}
.channel.selected{box-shadow:inset 0 1px #5d889e;}.channel-name{height:23px;background:color-mix(in srgb,var(--track-color),#1a2731 18%);font-size:10px;font-weight:550;border-radius:3px;flex:none;}
.channel-label{font-size:8px;font-weight:600;color:#ccd6db;letter-spacing:0;margin:5px 0 3px;flex:none;}
.inserts-stack{height:94px;flex:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;}
.inserts-stack::-webkit-scrollbar{display:none;}
.insert-slot{height:18px;margin:0 0 1px;border-radius:2px;background:linear-gradient(#50565b,#353d43);border:1px solid #151e24;box-shadow:inset 0 1px #818b9438;padding:0 2px;gap:2px;}
.theme-spatial .insert-slot{background:linear-gradient(#52677a,#324454);}
.insert-slot .slot-letter{font-size:7px;color:#a6b1b8;width:8px;}.insert-slot .slot-name{font-size:8px;letter-spacing:-.2px;}.insert-slot.empty{opacity:.74;background:#2d3339;}
.channel-label + .send-slot{margin-top:0}.send-slot{height:17px;flex:none;padding:1px 2px;font-size:8px;margin-bottom:2px;background:#303941;border-color:#1a252b;}.channel-io{font-size:8px;background:#2e373f;border:1px solid #1a232b;border-radius:2px;padding:3px 0;line-height:1.25;flex:none;}
.channel-auto{font-size:8px;margin:3px 0;color:#51b98d;flex:none;}.pan-wrap{gap:1px;flex:none;}.pan-knob{height:24px;width:24px;border:1px solid #606d73;background:radial-gradient(circle at 31% 19%,#485965,#091116 67%)}.pan-knob:before{left:10px;top:1px;height:11px;transform-origin:center 11px;}.pan-value{font-size:8px;color:#6bd19d;}
.channel-lower{height:auto;min-height:86px;flex:1;margin-top:4px;gap:3px;max-height:145px;}.fader-wrap{width:26px;max-height:145px;height:100%;}.fader-rail{left:10px;width:5px;}.fader-cap{width:22px;height:16px;left:2px;}.fader-meter{width:18px;max-height:145px;}.db-label{flex:none;font-size:9px;margin-top:2px;}.channel-smr{flex:none;margin-top:4px;gap:2px;}.channel-smr button{width:auto;flex:1;height:20px;font-size:9px;border-radius:3px;padding:0;}.mix-bottom{height:42px;flex:none;border-top-color:#2d3841;background:#0c1218;}.mix-bottom button{background:#0e161c;color:#a8bdca;font-size:16px;gap:0;}.mix-bottom span{font-size:9px;}
/* Browser mirrors reference list; Aurora viewer and session tools remain available below. */
.browse-search{height:36px;margin:7px 9px 6px;padding:0 9px;border-radius:5px;background:#19242c;}.browse-search span{font-size:19px}.browse-search input{font-size:11px;}.browse-filters{margin:4px 9px 8px;}.browse-filters button{height:32px;font-size:10px;}.folder-list{margin:0 9px}.folder-row{height:45px;background:#0f171d;border-bottom-color:#222c34;}.folder-info strong{font-size:11px;}.folder-info small{font-size:9px;}.folder-icon{color:#82b9e5;}.browse-actions{gap:4px;margin:8px 9px;}.browse-actions button{min-width:19%;height:32px;font-size:9px;white-space:nowrap;}.browser-player{min-height:50px;margin:8px 9px;padding:5px;background:#151f27;border-radius:5px;}.player-art{height:40px;width:40px;}.browser-player strong{font-size:11px;}.browser-player small{font-size:9px;}
/* landscape takes advantage of available width rather than scaling a portrait DAW */
@media (orientation:landscape) and (max-height:650px){
 .studio-shell{max-width:none;min-height:0}.main-header{height:37px;min-height:37px;}.brand{font-size:16px;}.top-tabs{height:35px;padding:3px 6px;}.top-tabs .tab{font-size:10px;gap:5px;}.counter-bar{height:48px}.counter-big strong{font-size:23px}.edit-mode-bar{height:26px}.track-row{height:48px}.edit-bottom-tools{height:35px}.studio-shell[data-view="edit"] .transport-dock{height:42px;min-height:42px;}.studio-shell[data-view="edit"] .transport-buttons{height:31px;}.channel{width:88px;max-width:88px;}.mixer-scroll{height:auto}.channel-lower{min-height:45px;max-height:80px}.inserts-stack{height:76px}.mix-bottom{height:34px}.mixer-caption{height:19px}.channel-label{margin:3px 0 2px}.pan-knob{width:19px;height:19px}.pan-knob:before{left:8px;height:9px;transform-origin:center 9px}.channel-name{height:20px}.insert-slot{height:15px}.send-slot{height:14px}.channel-io{padding:2px 0}
 .modal{max-width:760px}.eq-canvas{height:165px}
}

/* Final ergonomic pass: keep faders/meters full-height and remove prototype note from Home visual. */
#homeView .hint-card{display:none}
#mixView .channel-lower{flex:1;max-height:none;min-height:96px}
#mixView .fader-wrap,#mixView .fader-meter{max-height:none}
#mixView .channel-smr{margin-bottom:4px}
@media(orientation:landscape) and (max-height:650px){#mixView .channel-lower{min-height:35px;max-height:none}}
@media(orientation:landscape) and (max-height:650px){
 .studio-shell[data-view="edit"] .transport-dock{display:flex;align-items:center;justify-content:center;padding:3px 8px;min-height:41px;height:41px;grid-template-columns:none;grid-template-rows:none;gap:0}
 .studio-shell[data-view="edit"] .transport-buttons{display:flex;grid-column:auto;grid-row:auto;width:100%;height:33px;max-width:none;gap:5px}
 .studio-shell[data-view="edit"] .transport-buttons button{font-size:16px;}
 #mixView .mixer-scroll{overflow-y:auto;}
 #mixView .mixer-channels{height:auto;min-height:440px;}
 #mixView .channel{height:440px;min-height:440px;}
}

/* Actual folder silhouette instead of an abstract glyph */
.folder-icon{position:relative;width:20px;height:13px;flex:none;display:block;background:#77b5e7;border-radius:1px 2px 2px 2px;color:transparent;font-size:0;margin:4px 4px 0 2px;}
.folder-icon:before{content:"";position:absolute;left:0;top:-4px;width:10px;height:5px;background:#83c1f0;border-radius:2px 2px 0 0;}

/* v5: local recovery status; deliberately low-profile in the approved mobile UI. */
.recovery-strip {margin:5px 8px 11px;padding:8px 10px;border:1px solid #375361;background:#1b2931;border-radius:7px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#c4d9df;font-size:11px;line-height:1.35}
.recovery-strip[hidden] {display:none!important}
.recovery-strip button {background:#3b515c;color:#e5f2f7;border:1px solid #647b85;border-radius:5px;padding:7px 10px;font:inherit;white-space:nowrap}
.recovery-strip.is-error {border-color:#97585c;color:#ffd7d6}
.recovery-strip button:focus-visible {outline:2px solid #77c7ee;outline-offset:2px}

/* Phase 7 — live capture targets are visibly recording only while MediaRecorder is active. */
.track-row.is-recording-target .track-header,.channel.is-recording-target{box-shadow:inset 0 0 0 1px #cf4650;border-color:#ab3b45}
.track-header{isolation:isolate}
.track-live-rec,.channel-live-rec{font-size:9px;font-weight:750;letter-spacing:.6px;line-height:1.1;color:#ffb2b8;background:#662029;border-radius:3px;padding:2px 4px;z-index:2}
.track-live-rec{position:absolute;top:3px;right:3px}
.channel-live-rec{display:block;text-align:center;margin:2px 0}
.is-recording-target .track-wave{background:repeating-linear-gradient(90deg,#25151a 0px,#25151a 36px,#4c222b 39px)}
.is-recording-target .track-wave:after{border-top:2px solid #f16c78}
.is-recording-target .on-arm{background:#d12c3b!important;color:#fff!important}
.capture-active{color:#ff868e!important}
.is-recording .transport-buttons .record-btn{background:#a12733!important;border-color:#fa737d!important;color:#fff!important}
@media(prefers-reduced-motion:no-preference){
  .track-live-rec,.channel-live-rec{animation:bzdrRecPulse 1s ease-in-out infinite alternate}
  @keyframes bzdrRecPulse{from{opacity:1}to{opacity:.55}}
}
/* Full-width landscape editing. The prominent vertical tool rail replaces
   the horizontal toolbar; mixer actions move to the right side. */
@media(orientation:landscape) and (max-height:650px){
 .studio-shell{width:100%;max-width:none;height:100dvh;height:100svh;min-height:0;margin:0;border:0;border-radius:0;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 .main-header{display:none}
 .top-tabs{height:30px;min-height:30px;padding:2px 4px}
 .top-tabs .tab{height:26px;flex-direction:row;font-size:11px}
 .screen-area{min-height:0}
 #editView.active,#mixView.active{position:relative;display:flex;flex-direction:column;min-height:0}
 #editView .counter-bar{height:38px;min-height:38px;margin:2px 3px}
 #editView .counter-big strong{font-size:clamp(17px,3vw,25px)}
 #editView .counter-big small{font-size:7px}
 #editView .counter-side{width:100px;padding:3px 5px;gap:1px;flex-direction:row;flex-wrap:wrap;justify-content:center;font-size:10px}
 #editView .meters-compact{padding:2px 4px}
 #editView .edit-mode-bar{height:24px;min-height:24px;padding:1px 4px}
 #editView .markers{display:none}
 #editView .timeline-panel{flex:1;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;margin:1px 47px 1px 2px}
 #editView .track-row{height:62px}
 #editView .edit-bottom-tools{position:absolute;z-index:3;right:1px;top:65px;bottom:0;width:44px;height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:2px;gap:2px;margin:0;background:#0b151b;border-left:1px solid #2b3a44}
 #editView .tool-choice{min-height:34px;flex:1;max-height:48px;gap:0;font-size:16px}
 #editView .tool-choice span{font-size:8px}
 .studio-shell[data-view="edit"] .transport-dock{height:37px!important;min-height:37px!important;display:flex;align-items:center;padding:2px 5px max(2px,env(safe-area-inset-bottom))}
 .studio-shell[data-view="edit"] .transport-buttons{height:32px!important;width:100%;max-width:none}
 #mixView .mixer-caption{height:22px}
 #mixView .mixer-scroll{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;margin-right:43px}
 #mixView .mixer-channels{height:100%;min-height:0}
 #mixView .channel{height:100%;min-height:0;max-height:none;overflow-y:auto}
 #mixView .channel-lower{min-height:44px;max-height:none;flex:1}
 #mixView .inserts-stack{height:64px}
 #mixView .mix-bottom{position:absolute;right:0;top:22px;bottom:0;width:41px;height:auto;display:flex;flex-direction:column;border-left:1px solid #35434c;border-top:0;z-index:2}
 #mixView .mix-bottom button{min-height:35px;font-size:12px}
 #mixView .mix-bottom span{font-size:8px}
 .modal{width:min(96vw,760px);max-height:88dvh}
 .modal .eq-canvas{height:min(37dvh,185px)}
}


/* Mobile workspace controls: scrolling timeline/playhead stay in the same viewport. */
#editView.active{min-height:0}
#editView .timeline-viewport{position:relative;isolation:isolate;flex:1;min-height:0;overflow:hidden;margin:2px 3px 0;border:1px solid var(--line);background:var(--track-bg)}
#editView .timeline-viewport .timeline-panel{position:relative;display:block;height:100%;width:100%;min-height:0;margin:0;border:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
#editView .timeline-viewport>.timeline-playhead{position:absolute;z-index:5;top:0;bottom:0;left:90px;width:1px;background:#cce8f4;pointer-events:none}
#editView .timeline-playhead[hidden]{display:none}
#editView .section-markers{position:relative;overflow:hidden}
#editView .section-markers b{position:absolute;top:0;bottom:0;overflow:hidden;white-space:nowrap}
#editView .section-markers .section-0{background:#265a85}
#editView .section-markers .section-1{background:#327a60}
#editView .section-markers .section-2{background:#9a602d}
#editView .section-markers .section-3{background:#4f6d9b}
#editView .section-markers .section-4{background:#6c4789}
.tool-choice:disabled,.modal-buttons button:disabled{opacity:.38;cursor:default}
.insert-slot.is-unavailable .slot-name{opacity:.6}
.slot-status{flex:none;font-size:6px;letter-spacing:.2px;color:#d2b67d}
.wave-surface{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;padding:0;touch-action:pan-y}
.clip-selection{position:absolute;top:0;bottom:0;border:1px solid #d7f0ff;background:#b8e6ff0b;pointer-events:none;z-index:2;min-width:1px}
.clip-selection.invalid{border-color:#ff6c75;background:#ff334422}
.clip-selection button{position:absolute;pointer-events:auto;touch-action:none;color:#e7f6ff;background:#24485de8;border:1px solid #8cbbd2;border-radius:3px;font:600 10px/1 sans-serif;padding:0}
.clip-move-handle{bottom:2px;left:50%;transform:translateX(-50%);width:min(48px,100%);height:27px;cursor:grab}
.clip-selection.with-gain .clip-move-handle{left:auto;right:2px;transform:none;width:calc(50% - 3px);max-width:48px}
.clip-gain-handle{bottom:2px;left:2px;width:calc(50% - 3px);max-width:58px;height:27px;cursor:ns-resize}
.clip-trim-handle{top:1px;width:24px;height:28px;cursor:ew-resize}
.clip-trim-start{left:1px}.clip-trim-end{right:1px}
.clip-position{position:absolute;top:3px;left:26px;right:26px;font-size:8px;color:#fff;text-align:center;white-space:nowrap;background:#0c202bd9}
#timelineScroll{accent-color:#81badb;padding:0;min-height:34px}
#editView .ruler-measures{position:relative;display:block}
#editView .ruler-measures i{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:4px;border-right:0;border-left:1px solid #ffffff28}
#gridSnapSelect{font:600 10px/1.2 inherit;color:#a0d6f5;border:1px solid #4a6374;border-radius:3px;background:#172530;padding:4px 3px;min-width:62px;max-width:85px;cursor:pointer}
#gridSnapSelect:focus-visible{outline:2px solid #87c9ed}
.studio-shell[data-view="mix"] .transport-dock{display:flex;flex-direction:column;justify-content:center;gap:0;min-height:56px;height:56px;padding:3px 8px max(3px,env(safe-area-inset-bottom));background:#0b1117}
.studio-shell[data-view="mix"] .transport-buttons{height:43px;min-height:38px;flex:1;max-width:none;width:100%}
.studio-shell[data-view="mix"] .transport-top,.studio-shell[data-view="mix"] #seekBar,.studio-shell[data-view="mix"] .bottom-tabs{display:none}
/* Stronger perceptual theme difference without rearranging approved controls. */
.theme-spatial .studio-shell{background:#0b1622;box-shadow:inset 0 0 0 1px #426276,0 25px 80px #041729}
.theme-spatial .main-header{background:linear-gradient(150deg,#0b2036,#182f43)}
.theme-spatial .top-tabs{background:#122332}
.theme-spatial .top-tabs .tab{background:linear-gradient(#2a4056,#172a3d);border-color:#4c6678}
.theme-spatial .counter-bar{background:linear-gradient(130deg,#0b1d31,#081421);border-color:#37566a}
.theme-spatial .edit-mode-bar,.theme-spatial .mixer-caption{background:#122434}
.theme-spatial .mode-button{background:#324858;border-color:#4b697c}
.theme-spatial .track-header{background:#21374a}
.theme-spatial .track-header.selected{background:#2c4f65}
.theme-spatial .channel{background:linear-gradient(180deg,#2c455e,#16283c 40%,#102033);border-color:#456071}
.theme-spatial .timeline-viewport,.theme-spatial .timeline-panel{background:#102638}
.theme-spatial .transport-dock,.theme-spatial .mix-bottom{background:linear-gradient(#203849,#101f30)}
.theme-spatial .edit-bottom-tools{background:#152638}
/* Workspace geometry: panels occupy grid cells, never overlap the session. */
.studio-shell[data-dock]{display:grid;grid-template-areas:"header" "tabs" "arrange" "screen" "transport";grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;min-height:0}
.main-header{grid-area:header}.top-tabs{grid-area:tabs}.screen-area{grid-area:screen;min-width:0;margin:0!important}.transport-dock{grid-area:transport}.workspace-bar{grid-area:arrange}
.studio-shell[data-effective-dock="top"]{grid-template-areas:"header" "tabs" "arrange" "transport" "screen";grid-template-rows:auto auto auto auto minmax(0,1fr)}
.studio-shell[data-effective-dock="left"]{grid-template-areas:"header header" "tabs tabs" "arrange arrange" "transport screen";grid-template-rows:auto auto auto minmax(0,1fr);grid-template-columns:60px minmax(0,1fr)}
.studio-shell[data-effective-dock="right"]{grid-template-areas:"header header" "tabs tabs" "arrange arrange" "screen transport";grid-template-rows:auto auto auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 60px}
.top-tabs{height:54px;min-height:54px;padding:4px 6px;gap:4px}
.top-tabs .tab{min-height:44px;height:auto;font-size:11px}
.workspace-button{flex:none;min-width:54px;min-height:44px;background:transparent;color:#b7cad7;border:1px solid #3c505e;border-radius:5px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:10px}
.workspace-button>span:first-child{font-size:18px}.workspace-button[aria-pressed="true"]{background:#18405b;border-color:#79c7ed;color:#e0f6ff}
.workspace-button:disabled{opacity:.45;cursor:default}.workspace-button:focus-visible,select:focus-visible{outline:2px solid #8cd3f5;outline-offset:1px}
.studio-shell[data-view] .transport-dock{position:static;display:flex;flex-direction:row;align-items:center;gap:6px;width:auto;min-height:56px!important;height:auto!important;padding:5px 7px max(5px,env(safe-area-inset-bottom))!important;border:1px solid #2c3e4b;background:var(--bg);overflow:hidden}
.studio-shell[data-view="home"] .transport-dock,.studio-shell[data-view="browse"] .transport-dock{display:none}
.studio-shell[data-view] .transport-buttons{flex:1;min-width:0;max-width:none;display:flex;flex-direction:row;align-items:stretch;gap:5px;height:44px!important;min-height:44px;width:auto}
.studio-shell[data-view] .transport-buttons button{min-width:0;min-height:44px;padding:0;font-size:20px}.transport-buttons button:disabled{opacity:.38;cursor:default}
.studio-shell[data-effective-dock="left"] .transport-dock,.studio-shell[data-effective-dock="right"] .transport-dock{flex-direction:column;justify-content:flex-start;padding:5px 5px max(5px,env(safe-area-inset-bottom))!important;overflow-y:auto;overscroll-behavior:contain}
.studio-shell[data-effective-dock="left"] .transport-buttons,.studio-shell[data-effective-dock="right"] .transport-buttons{flex:0 0 auto;flex-direction:column;width:100%;height:auto!important;gap:5px}
.studio-shell[data-effective-dock="left"] .transport-buttons button,.studio-shell[data-effective-dock="right"] .transport-buttons button{flex:none;height:44px}
.transport-grip,.tool-rail-grip{position:static;display:grid;place-items:center;flex:none;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;background:#183749;color:#b5e7ff;border:1px solid #699db7;border-radius:5px;font:22px/1 sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.transport-grip:active,.tool-rail-grip:active{cursor:grabbing;background:#24506a}
.studio-shell[data-view] #editView.active{display:grid;grid-template-areas:"counter" "modes" "timeline" "tools";grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:0}
#editView .counter-bar{grid-area:counter;height:58px;min-height:58px;margin:3px 4px}
#editView .edit-mode-bar{grid-area:modes;height:40px;min-height:40px;padding:2px 4px}
#editView .mode-button{min-height:36px;font-size:9px}.grid-state{font-size:9px}#gridSnapSelect{min-height:36px;font-size:12px}
.studio-shell[data-view] #editView .timeline-viewport{grid-area:timeline;min-width:0;min-height:0;margin:2px 4px 0}
.studio-shell[data-view] #editView .edit-bottom-tools{grid-area:tools;position:static;display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;gap:0;width:auto;height:48px;min-height:0;margin:3px 4px;padding:0;border:0;background:var(--bg);overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain}
.studio-shell[data-view] #editView .tool-choice{flex:1 0 44px;min-width:44px;min-height:44px;max-height:none;padding:3px 1px;justify-content:center;font-size:18px;line-height:1.1;gap:3px}
.studio-shell[data-view] #editView .tool-choice span{font-size:9px}
.studio-shell[data-layout="balanced"] #editView .track-row{height:68px;min-height:68px}
.studio-shell[data-layout="focus"] #editView .track-row{height:92px;min-height:92px}
.studio-shell[data-layout="compact"] #editView .track-row{height:56px;min-height:56px}
.studio-shell[data-layout="focus"] #editView .counter-bar,.studio-shell[data-layout="compact"] #editView .counter-bar{height:44px;min-height:44px}
.studio-shell[data-layout="focus"] #editView .markers{display:none}
#editView .track-header{justify-content:center;gap:6px;padding-top:3px;padding-bottom:3px;overflow:hidden}
#editView .track-name{flex:none;line-height:1.25}#editView .track-actions{flex:none}
#editView .timeline-ruler{position:sticky;top:0;z-index:4;background:#17232c}
.studio-shell[data-effective-tools="right"] #editView.active{grid-template-areas:"counter counter" "modes modes" "timeline tools";grid-template-columns:minmax(0,1fr) 54px;grid-template-rows:auto auto minmax(0,1fr)}
.studio-shell[data-effective-tools="left"] #editView.active{grid-template-areas:"counter counter" "modes modes" "tools timeline";grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
.studio-shell[data-effective-tools="left"] #editView .edit-bottom-tools,.studio-shell[data-effective-tools="right"] #editView .edit-bottom-tools{flex-direction:column;align-items:stretch;height:auto;width:auto;overflow-x:hidden;overflow-y:auto;margin:2px;padding:2px;border:1px solid #2c3e4b;scrollbar-width:thin}
.studio-shell[data-effective-tools="left"] #editView .tool-choice,.studio-shell[data-effective-tools="right"] #editView .tool-choice{flex:0 0 44px;height:44px}
.workspace-bar{display:flex;align-items:center;gap:6px;min-height:56px;padding:5px 7px;background:#122c3b;border-block:1px solid #5185a0}
.workspace-bar>span{flex:1;min-width:0;display:grid;gap:3px}.workspace-bar strong{font-size:12px;color:#d3efff}.workspace-bar small{font-size:10px;line-height:1.3;color:#96bfce}
.workspace-bar button{min-height:44px;min-width:52px;padding:0 10px;background:#233f50;border:1px solid #4a6e82;border-radius:5px;font-size:12px}.workspace-bar .primary{background:#26729c;border-color:#6fb9df}
.workspace-dragging,.workspace-dragging *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.workspace-overlay{position:fixed;inset:0;z-index:8;pointer-events:none}
.dock-zone{position:fixed;border:1px dashed #81badb;border-radius:6px;background:#183e58b8;color:#d5efff;display:grid;place-items:center;font:600 12px/1.3 sans-serif;box-shadow:inset 0 0 0 3px #091b2a66}
.dock-zone.active{background:#297aa5e8;border:2px solid #bdeaff;box-shadow:inset 0 0 0 3px #4eb4df55,0 0 18px #3188b433;color:#fff}
.workspace-ghost{position:fixed;top:0;left:0;width:156px;min-height:40px;display:grid;place-items:center;background:#163345f5;border:1px solid #a2d8ed;box-shadow:0 8px 26px #0007;border-radius:7px;color:#e8f8ff;font-size:12px;will-change:transform}
.layout-field{border:0;padding:0;margin:16px 0}.layout-field legend{font-size:12px;color:#d3e3ed;margin-bottom:8px}
.layout-presets,.layout-positions{display:flex;gap:6px}.layout-presets button,.layout-positions button{flex:1;min-width:0;min-height:44px;border:1px solid #496170;border-radius:6px;background:#1b2b36;color:#bfced9;padding:10px 5px;font-size:12px}
.layout-presets button{display:grid;align-content:start;gap:6px;text-align:left;padding:12px 8px;min-height:76px}.layout-presets strong{font-size:11px;font-weight:600}.layout-presets small{font-size:10px;line-height:1.35;color:#9cafbd}
.layout-presets [aria-pressed="true"],.layout-positions [aria-pressed="true"]{border-color:#8ed0f2;background:#204760;color:#f2fbff;box-shadow:inset 0 -2px #64bde9}
.layout-positions button:disabled{opacity:.35;cursor:default}.layout-field .modal-copy{font-size:11px;margin-bottom:0}
.layout-reset{background:transparent;border:1px solid #4b6372;border-radius:5px;color:#b5d7ed;min-height:44px;padding:9px 12px;font-size:12px}
.layout-footnote{font-size:10px}.workspace-actions{position:sticky;bottom:-14px;margin-bottom:-14px;padding:10px 0 14px;background:#15232d;z-index:1}.workspace-actions button{min-height:44px;height:auto;padding:8px}
.workspace-mini{position:relative;height:104px;border:1px solid #3e596a;border-radius:6px;background:#0b1821;overflow:hidden}
.workspace-mini i{position:absolute;display:block;border-radius:2px}.mini-counter{inset:7px 7px auto;height:12px;background:#1c3342}
.mini-tracks{inset:25px 27px 25px 7px;background:repeating-linear-gradient(to bottom,#347b9466 0px,#347b9466 12px,transparent 12px,transparent 16px)}
.workspace-mini[data-density="focus"] .mini-tracks{background:repeating-linear-gradient(to bottom,#347b9466 0px,#347b9466 22px,transparent 22px,transparent 26px)}
.workspace-mini[data-density="compact"] .mini-tracks{background:repeating-linear-gradient(to bottom,#347b9466 0px,#347b9466 7px,transparent 7px,transparent 10px)}
.mini-tools{top:25px;right:7px;bottom:25px;width:13px;background:#566f83}.mini-transport{left:7px;right:7px;bottom:7px;height:12px;background:#64bedf}
.workspace-mini[data-dock="top"] .mini-transport{top:25px;bottom:auto}.workspace-mini[data-dock="top"] .mini-tracks,.workspace-mini[data-dock="top"] .mini-tools{top:44px;bottom:7px}
.workspace-mini[data-dock="left"] .mini-transport{top:25px;left:7px;bottom:7px;right:auto;width:12px;height:auto}.workspace-mini[data-dock="left"] .mini-tracks{left:26px}
.workspace-mini[data-dock="right"] .mini-transport{top:25px;right:7px;bottom:7px;left:auto;width:12px;height:auto}.workspace-mini[data-dock="right"] .mini-tracks{right:46px}.workspace-mini[data-dock="right"] .mini-tools{right:26px}
.workspace-mini[data-tools="left"] .mini-tools{left:7px;right:auto}.workspace-mini[data-tools="left"] .mini-tracks{left:27px;right:7px}
.workspace-mini[data-tools="left"][data-dock="left"] .mini-tools{left:26px}.workspace-mini[data-tools="left"][data-dock="left"] .mini-tracks{left:46px}
.workspace-mini[data-tools="left"][data-dock="right"] .mini-tracks{right:26px}
.workspace-mini[data-tools="bottom"] .mini-tools{left:7px;right:7px;top:auto;bottom:25px;height:8px;width:auto}.workspace-mini[data-tools="bottom"] .mini-tracks{right:7px;bottom:39px}
.workspace-mini[data-tools="bottom"][data-dock="top"] .mini-tools{bottom:7px;top:auto}.workspace-mini[data-tools="bottom"][data-dock="top"] .mini-tracks{bottom:21px}
@media(orientation:landscape) and (max-height:650px){
 .top-tabs{height:46px;min-height:46px;padding:1px 4px}.top-tabs .tab{min-height:44px;height:44px}.workspace-button{flex-direction:row;gap:5px;min-width:74px}
 #editView .counter-bar{height:38px!important;min-height:38px!important}.workspace-bar{min-height:50px;padding:3px 6px}
 .workspace-bar>span{display:flex;align-items:center;gap:12px}.workspace-bar small{max-width:320px}
 .studio-shell[data-view="mix"] .mixer-scroll{margin-right:0}
 .studio-shell[data-view="mix"] .mix-bottom{position:static;flex:none;width:auto;height:44px;display:flex;flex-direction:row;border-left:0}.studio-shell[data-view="mix"] .mix-bottom button{min-height:44px}
 .modal{max-height:92dvh}.layout-field{margin:10px 0}.workspace-mini{height:74px}
}
@media(min-width:900px){
 .studio-shell[data-dock]{max-width:1180px;width:calc(100% - 32px);height:calc(100dvh - 32px);margin:16px auto;border-radius:14px}
 .studio-shell[data-dock] .main-header{display:flex;height:56px;min-height:56px}.main-header .session-pill{max-width:280px;font-size:11px}
 .top-tabs{justify-content:flex-start}.top-tabs .tab{flex:0 1 180px;flex-direction:row;gap:8px;font-size:12px}.workspace-button{margin-left:auto;min-width:100px;flex-direction:row;gap:8px;font-size:12px}
 .channel{width:106px}.studio-shell[data-view] #editView .track-header,.studio-shell[data-view] #editView .ruler-stub{width:150px}.track-name{font-size:12px}
}
/* Short landscape windows keep Undo/Redo visible without tiny touch targets. */
@media(orientation:landscape) and (max-height:500px){
 .studio-shell{--tool-columns:2;--tool-width:102px}
 .studio-shell[data-effective-tools="right"] #editView.active{grid-template-columns:minmax(0,1fr) var(--tool-width)}
 .studio-shell[data-effective-tools="left"] #editView.active{grid-template-columns:var(--tool-width) minmax(0,1fr)}
 .studio-shell[data-effective-tools="left"] #editView .edit-bottom-tools,.studio-shell[data-effective-tools="right"] #editView .edit-bottom-tools{display:grid;grid-template-columns:repeat(var(--tool-columns),minmax(44px,1fr));grid-auto-rows:44px;align-content:start;gap:2px}
 .tool-rail-grip{grid-column:1 / -1;justify-self:center}
}
@media(orientation:landscape) and (max-height:360px){.studio-shell{--tool-columns:3;--tool-width:148px}}
@media(prefers-reduced-motion:no-preference){.dock-zone{transition:background-color 100ms,border-color 100ms}.workspace-button,.layout-presets button,.layout-positions button{transition:background-color 120ms,border-color 120ms}}


/* Accessible, low-profile haptics toggle in Settings (v5.11). */
.haptic-setting{padding:9px 11px;background:rgba(37,59,75,.25);border:1px solid #324b5c;border-radius:8px}
.haptic-option{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;min-height:44px}
.haptic-detail{display:flex;flex-direction:column;gap:2px}
.haptic-detail strong{font-size:13px;font-weight:650;letter-spacing:.1px;color:#dce9f1}
.haptic-detail small{font-size:10px;color:#92a8ba;line-height:1.3}
#hapticToggle{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:40px;height:24px;border-radius:14px;background:#273744;border:1px solid #546679;cursor:pointer;transition:background .17s ease}
#hapticToggle::before{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#becbd5;box-shadow:0 1px 2px #0008;transition:transform .17s ease}
#hapticToggle:checked{background:#1879a6;border-color:#389ccc}
#hapticToggle:checked::before{transform:translateX(16px);background:#ecf9ff}
#hapticToggle:focus-visible{outline:2px solid #79cdf3;outline-offset:3px}
.haptic-caption{font-size:10px;line-height:1.45;color:#91a8b8;margin:3px 0 0}
@media(prefers-reduced-motion:reduce){#hapticToggle,#hapticToggle::before{transition:none}}

/* Tablets use the available workspace instead of the phone preview frame.
   Short phone landscape windows keep their compact controls. */
@media (min-width:600px) and (min-height:600px) and (max-width:899px),
       (min-width:600px) and (min-height:600px) and (any-pointer:coarse){
 .studio-shell[data-dock]{width:100%;max-width:none;height:100dvh;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 .studio-shell[data-dock] .main-header{min-height:64px;height:64px;padding-inline:18px}
 .brand{font-size:22px}.brand em{font-size:12px}.main-header .session-pill{font-size:11px;max-width:260px}.icon-btn{width:44px;height:44px;font-size:24px}
 .top-tabs{height:64px;min-height:64px;padding:6px 12px;gap:6px}.top-tabs .tab{min-height:50px;font-size:14px;gap:5px}.tab-icon{font-size:17px}.workspace-button{min-height:50px;font-size:12px;min-width:88px}
 #homeView{padding:clamp(20px,4vw,44px);}
 #homeView>*{max-width:1040px;margin-left:auto;margin-right:auto}
 #homeView .section-head{padding:0 0 18px}#homeView .section-head h2{font-size:22px}#homeView .section-head span{font-size:11px}
 #homeView .session-list{margin-block:16px}#homeView .modal-copy{font-size:14px;line-height:1.7}
 #homeView .dashboard-grid{margin-block:22px;gap:12px}#homeView .dashboard-action{height:124px;font-size:14px;gap:16px;border-radius:8px}#homeView .dashboard-action>span{font-size:30px}
 #homeView .quick-record{width:100%;padding:16px;min-height:80px;border-radius:8px}#homeView .quick-record strong{font-size:14px}#homeView .quick-record small{font-size:12px}
 .studio-shell[data-view] #editView .counter-bar{height:76px;min-height:76px;margin:6px 8px}.counter-big strong{font-size:36px}.counter-big small{font-size:10px}.counter-side{width:104px;font-size:13px}
 #editView .edit-mode-bar{height:52px;min-height:52px;padding:4px 8px;gap:12px}#editView .mode-button{min-height:44px;font-size:12px}.grid-state{font-size:12px;gap:8px}#gridSnapSelect{min-height:44px;min-width:88px;font-size:14px}
 .studio-shell[data-view] #editView .track-header,.studio-shell[data-view] #editView .ruler-stub{width:168px}
 .studio-shell[data-layout="balanced"] #editView .track-row{height:88px;min-height:88px}.studio-shell[data-layout="focus"] #editView .track-row{height:112px;min-height:112px}.studio-shell[data-layout="compact"] #editView .track-row{height:80px;min-height:80px}
 .track-header{padding:7px 8px 6px 10px;gap:6px}.track-name{font-size:13px}.track-actions{gap:4px}.track-actions button{width:44px;height:44px;font-size:14px}
 .timeline-ruler,.markers{height:26px}.ruler-stub{font-size:10px;padding:7px 8px}.ruler-measures{font-size:12px}.section-markers{font-size:10px}
 .studio-shell[data-view] #editView .tool-choice span{font-size:11px}.studio-shell[data-view] #editView .edit-bottom-tools{height:54px}
 .studio-shell[data-effective-tools="left"] #editView .edit-bottom-tools,.studio-shell[data-effective-tools="right"] #editView .edit-bottom-tools{height:auto}
 .channel{width:144px;min-width:144px;max-width:144px}.channel-name{font-size:13px;height:30px}.channel-smr button{height:44px;font-size:13px}.db-label,.pan-value{font-size:11px}.insert-slot .slot-name{font-size:10px}.send-slot,.channel-io{font-size:10px}
 .browse-search{height:48px}.browse-search input{font-size:14px}.browse-filters button,.browse-actions button{min-height:44px;font-size:12px}.folder-row{min-height:56px}.folder-info strong{font-size:14px}.folder-info small{font-size:11px}
 .modal{width:min(90%,680px)}.modal-top strong{font-size:17px}.modal-field label,.modal-copy{font-size:13px}.modal-buttons button{min-height:44px;font-size:14px}
}
@media (min-width:900px) and (min-height:600px) and (any-pointer:coarse){
 .studio-shell[data-dock] .main-header{min-height:104px!important;grid-template-rows:56px 44px}
 .desktop-menu-bar>button{min-height:44px;padding:8px 14px;font-size:13px}
}

/* BZDR's approved stock-plugin language: dark, condensed, cyan/magenta spectrum.
   Shared responsive treatment in existing desktop/mobile BZDR windows, NOT the
   upstream SoundCraft editor. All native parameter controls are touch-capable. */
.bzdr-stock-editor{border:1px solid #2b566a;border-radius:9px;overflow:hidden;color:#e6f2fa;background:linear-gradient(154deg,#0b1928,#070d16 75%);box-shadow:0 14px 42px #01070bbb,inset 0 1px #23638666}
.bzdr-stock-head{display:flex;gap:8px;align-items:center;min-height:43px;padding:10px 12px;background:linear-gradient(90deg,#10283b,#0a1726);border-bottom:1px solid #315c70;font-size:12px;letter-spacing:.09em}
.bzdr-stock-head strong{color:#fafbff;font-size:16px;font-weight:800}
.bzdr-stock-symbol{color:#15bded;font-size:22px}
.bzdr-stock-effect{color:#64c7ff;flex:1;font-size:11px}
.bzdr-stock-active{font-size:9px;color:#5ce4aa;letter-spacing:.04em}
.bzdr-stock-display{height:124px;position:relative;overflow:hidden;display:flex;align-items:end;padding:12px 13px;background:linear-gradient(180deg,#030911,#0f1831);border-bottom:1px solid #315267}
.bzdr-stock-display:before{content:"";position:absolute;inset:9px 12px;background:linear-gradient(90deg,#16476b33 1px,transparent 1px) 0 0/28px 100%,linear-gradient(#24587733 1px,transparent 1px) 0 0/100% 25%;pointer-events:none}
.stock-spectrum-bars{display:flex;position:absolute;inset:20px 17px 9px;align-items:end;gap:3px;opacity:.75;pointer-events:none}
.stock-spectrum-bars i{display:block;flex:1;background:linear-gradient(180deg,#a973fd,#23baff 55%,#0d385e);border-radius:3px 3px 0 0;max-height:90%}
.bzdr-stock-display span{position:relative;z-index:1;font-size:10px;color:#d2e9fa;text-shadow:0 1px 6px #050a0d}
.bzdr-stock-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:13px}
.bzdr-stock-control{min-width:0;display:flex;flex-direction:column;gap:7px;padding:10px;background:#142539;border:1px solid #2d4659;border-radius:8px}
.bzdr-stock-control label{font-size:11px;color:#b9cee0;overflow-wrap:anywhere}
.bzdr-stock-control input[type=range]{accent-color:#35baff;width:100%;min-width:0;touch-action:pan-y}
.bzdr-stock-control select{background:#182d41;color:#edffff;border:1px solid #37687c;padding:8px 5px;border-radius:6px;width:100%;min-width:0}
.bzdr-stock-control output{font-variant-numeric:tabular-nums;text-align:center;font-size:13px;color:#73d7ff;font-weight:650}
.bzdr-stock-actions{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-top:1px solid #304e5f;background:#0c1b29}
.bzdr-stock-actions button{background:#1e3347;border:1px solid #3a556b;border-radius:5px;padding:9px 11px;min-height:38px;font-size:11px}
.bzdr-stock-actions button.primary{background:#177ab9;color:white;border-color:#30a5e5}
.bzdr-stock-midi{padding:12px;border-top:1px solid #304e5f}
.bzdr-stock-keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;padding:6px 0}
.bzdr-stock-keys button{font-size:10px;background:#cfdce9;color:#172331;border-radius:3px;min-height:38px;touch-action:none}
.bzdr-stock-keys button.playing{background:#2fdcff}
.bzdr-stock-midi small{font-size:10px;color:#b6c2ca}
@media(min-width:760px){.bzdr-stock-controls{grid-template-columns:repeat(4,minmax(0,1fr))}.bzdr-stock-display{height:165px}}
@media(max-width:380px){.bzdr-stock-head{gap:5px;padding:8px}.bzdr-stock-effect{font-size:9px}.bzdr-stock-control{padding:8px}}
/* Shared session commands: visible and touch accessible on phones as well as desktop. */
@media(max-width:899px){.studio-shell[data-dock] .main-header{height:auto!important;min-height:78px!important;display:flex!important;flex-wrap:wrap;padding-bottom:3px}.desktop-menu-bar{display:flex!important;order:9;flex:0 0 100%;min-width:0;margin:0;justify-content:space-between;gap:0}.desktop-menu-bar>button{padding:7px 5px;min-height:36px;font-size:11px;background:transparent;color:#c4d1db}}
@media(pointer:coarse){.desktop-menu-popup button{min-height:44px}}
.session-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.modal-field select{width:100%;min-height:42px;padding:8px;background:#0b1822;color:#e1edf4;border:1px solid #496477;border-radius:5px}.modal-field output{display:block;padding:12px 0;color:#c6d7e2}.track-color-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}.track-color-palette button{height:38px;min-width:30px;border:1px solid #b3c5d155;border-radius:5px}.modal input[type=color]{width:100%;height:42px;padding:3px}.ruler-options{display:grid;gap:6px}.ruler-options label{display:flex;align-items:center;gap:10px;min-height:46px;color:#d3e3ee}.ruler-options input{width:20px;height:20px}.marker-list>div{display:flex;gap:8px;margin:6px 0}.marker-list button{min-height:42px;text-align:left;padding:10px}.marker-list button:first-child{flex:1}.marker-list small{float:right;color:#a8c8da}.session-ruler{display:grid;grid-template-columns:var(--session-track-width,130px) minmax(0,1fr);height:23px;border-bottom:1px solid #354757;font-size:10px;background:#121b23}.session-ruler>button:first-child{font-size:9px;text-align:left;padding:0 6px;background:#1e2a35;color:#bfd0df}.session-ruler>div{display:flex;justify-content:space-between;padding:3px 4px;color:#a3b2bf}.session-ruler>.tempo-lane{background:#204731;text-align:left;padding:0 8px;color:#a7dbb6}.session-ruler>.meter-lane{background:#173549;text-align:left;padding:0 8px;color:#b3d1e8}.section-markers{position:relative!important}.section-markers>button{height:100%;border:0;border-right:1px solid #0006;border-radius:0;font-size:10px;text-align:left;padding:2px 5px;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.section-markers>.empty-marker{width:100%;background:#25354a;color:#b9cddd}.ruler-stub[role=button]{cursor:pointer}#sessionRulerLanes:empty{display:none}.timeline-ruler[hidden],.markers[hidden]{display:none!important}
body.bzdr-desktop{--session-track-width:368px}body.bzdr-desktop .session-ruler{height:23px}body.bzdr-desktop .session-ruler>button:first-child{padding-left:8px}body.bzdr-desktop .session-ruler>div{padding-right:8px}.session-form-grid [hidden]{display:none!important}
@media(min-width:1100px) and (max-width:1280px){body.bzdr-desktop{--session-track-width:338px}}
@media(max-width:500px){.session-form-grid{grid-template-columns:1fr}.session-ruler{height:25px}.session-form-grid .modal-field{margin-bottom:8px}}
/* Keep creation short enough for a phone, with actions reachable while scrolling. */
@media(max-width:500px){.modal:has(#newTracksForm) .session-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}.modal:has(#newTracksForm) .modal-field label{font-size:11px}}
#newTracksForm>.modal-buttons,#trackSettingsForm>.modal-buttons,#markerForm>.modal-buttons{position:sticky;bottom:-14px;margin-bottom:-14px;padding:10px 0 14px;background:#15232d;z-index:1}
#newTracksForm>.modal-buttons button,#trackSettingsForm>.modal-buttons button,#markerForm>.modal-buttons button{min-height:44px}


/* BZDR v5.29: keep the application menu available in every workspace, including phones. */
.desktop-menu-bar{display:flex!important;order:9;flex:0 0 100%;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:2px;margin:0;padding:2px 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
.desktop-menu-bar::-webkit-scrollbar{display:none}
.desktop-menu-bar>button{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:0;min-height:34px;padding:6px clamp(5px,1.5vw,12px);font-size:clamp(10px,2.6vw,12px);white-space:nowrap;touch-action:manipulation;}
@media(min-width:900px){.studio-shell[data-dock] .main-header{grid-template-rows:50px 32px 32px!important}.studio-shell[data-dock] .desktop-menu-bar{grid-row:2}.studio-shell[data-dock] .main-header{grid-template-rows:50px 32px!important}.desktop-menu-bar{flex-wrap:nowrap}}
@media(max-width:899px){.main-header{height:auto!important;min-height:82px!important;display:flex!important;flex-wrap:wrap;align-content:center;row-gap:2px;padding:4px 8px!important}.main-header>.brand,.main-header>.header-right{flex:0 0 auto}.main-header>.header-right{margin-left:auto}.desktop-menu-bar{order:3;flex:0 0 100%!important;max-width:100%;}}
@media(orientation:landscape) and (max-height:650px){.main-header{height:auto!important;min-height:72px!important;padding:2px 8px!important}.desktop-menu-bar>button{min-height:28px;padding-block:3px}}

/* v5.29 mobile workspace: reclaim viewport height and let mixer content scroll. */
#mixView{min-height:0;overflow:hidden;display:flex;flex-direction:column;}
#mixView.active{min-height:0;}
#mixView .mixer-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;}
#mixView .mix-bottom{display:flex;flex:0 0 auto;align-items:center;gap:4px;min-height:48px;padding:3px 5px calc(3px + env(safe-area-inset-bottom,0px));}
#mixView .mix-bottom button{flex:1;min-width:0;min-height:38px;padding:4px 2px;font-size:12px;}
#mixView #mixBottomCollapse{flex:0 0 30px;max-width:30px;font-size:18px;}
body.bzdr-mix-bottom-hidden #mixView .mix-bottom{display:none!important;}
@media(max-width:899px){
 .studio-shell{height:100dvh!important;min-height:0!important;max-height:100dvh;overflow:hidden;}
 .main-header{flex:0 0 auto;min-height:0!important;}
 .desktop-menu-bar{flex-wrap:nowrap!important;justify-content:flex-start!important;order:10!important;scrollbar-width:none;}
 .desktop-menu-bar>button{min-height:32px!important;padding:4px 8px!important;}
 #mixView{height:calc(100dvh - 180px);max-height:none;}
 #mixView .mixer-scroll{min-height:0!important;overflow:auto!important;overscroll-behavior-y:contain;}
 #mixView .channel{min-height:0!important;height:max-content;}
 #mixView .mix-bottom{min-height:42px;}
 #mixView .mix-bottom button{min-height:34px;font-size:11px;}
 body.bzdr-mix-bottom-hidden #mixView{height:calc(100dvh - 135px);}
}
@media(max-width:899px) and (max-height:700px){#mixView{height:calc(100dvh - 145px)}body.bzdr-mix-bottom-hidden #mixView{height:calc(100dvh - 105px)}}

/* v5.29.2: fix menu hit-testing and enforce exclusive editor/mixer views on phones. */
.desktop-menu-bar{position:relative;z-index:10020;isolation:isolate;pointer-events:auto;}
.desktop-menu-bar>button{position:relative;z-index:1;pointer-events:auto;cursor:pointer;}
.desktop-menu-popup{z-index:10050!important;pointer-events:auto!important;}
#mixView.active{display:flex!important;flex-direction:column!important;min-width:0;min-height:0;overflow:hidden;}
#mixView .mixer-caption{flex:0 0 auto;}
#mixView .mixer-scroll{display:flex;flex:1 1 0;min-width:0;min-height:0;overflow:auto!important;overflow-x:auto!important;overflow-y:auto!important;}
#mixView .mixer-channels{min-height:0;height:max-content;flex:0 0 auto;}
#editView.active{display:flex!important;flex-direction:column!important;min-width:0;min-height:0;overflow:hidden;}
#editView .timeline-viewport{flex:1 1 auto;min-height:0;overflow:auto!important;overscroll-behavior:contain;}
#editView .edit-bottom-tools{flex:0 0 auto;}
@media(min-width:900px){
 .studio-shell[data-dock] .main-header{grid-template-columns:minmax(170px,1fr) auto!important;grid-template-rows:48px 34px!important;min-height:85px!important;}
 .studio-shell[data-dock] .desktop-menu-bar{grid-column:1 / -1!important;grid-row:2!important;justify-content:flex-start!important;gap:3px!important;}
 .desktop-menu-bar>button{padding:5px 9px!important;min-height:30px!important;}
 .screen-area{min-width:0;min-height:0;}
 .view.active{width:100%;min-width:0;}
}
@media(max-width:899px){
 .main-header{position:relative;z-index:10010!important;display:flex!important;flex-wrap:wrap!important;min-height:0!important;height:auto!important;overflow:visible!important;}
 .main-header .brand{order:0}.main-header .header-right{order:1;margin-left:auto}.main-header .desktop-menu-bar{order:2!important;flex:0 0 100%!important;width:100%!important;max-width:100%!important;}
 .screen-area{min-height:0!important;overflow:hidden!important;}
 #homeView.active{display:block!important;overflow-y:auto!important;}
 #mixView.active,#editView.active{height:100%!important;max-height:100%!important;}
 #mixView .mixer-scroll{overflow-y:auto!important;overflow-x:auto!important;touch-action:pan-x pan-y!important;}
}

/* v5.29.2 regression fix: keep inactive workspaces hidden; only active view occupies screen. */
#homeView.view:not(.active),#editView.view:not(.active),#mixView.view:not(.active),#pluginView.view:not(.active),#settingsView.view:not(.active){display:none!important}
#homeView.view.active,#editView.view.active,#pluginView.view.active,#settingsView.view.active{display:block!important}
#mixView.view.active{display:flex!important;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
#desktopMenuBar{position:relative;z-index:1200;pointer-events:auto}
#desktopMenuBar [data-menu]{position:relative;z-index:1201;pointer-events:auto;touch-action:manipulation}
#desktopMenuPopup{position:fixed!important;z-index:99999!important;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
.main-header{position:relative;z-index:1100}
@media(min-width:900px){
 .studio-shell{min-height:100dvh}
 .studio-shell .screen-area{min-width:0;min-height:0;overflow:hidden}
 #editView.view.active{display:flex!important;flex-direction:column;min-width:0;min-height:0}
 #editView .timeline-viewport{flex:1 1 auto;min-height:0;overflow:auto}
 #mixView.view.active{display:flex!important}
}
@media(max-width:899px){
 .studio-shell{height:100dvh!important;min-height:0!important;grid-template-rows:auto auto minmax(0,1fr) auto!important}
 .studio-shell .screen-area{min-height:0;overflow:hidden}
 .main-header{display:flex!important;flex-wrap:wrap!important;align-content:center;gap:2px;min-height:0!important;height:auto!important}
 #desktopMenuBar{order:3!important;display:flex!important;flex:0 0 100%!important;width:100%;max-width:100%;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none}
 #desktopMenuBar button{flex:0 0 auto;min-height:32px!important;white-space:nowrap;pointer-events:auto}
 #homeView.view.active,#editView.view.active,#pluginView.view.active,#settingsView.view.active{display:block!important;overflow-y:auto!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
 #mixView.view.active{display:flex!important;height:auto!important;max-height:none;overflow:hidden}
 #mixView .mixer-scroll{flex:1 1 auto;min-height:0!important;overflow:auto!important;overflow-x:auto!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 #mixView .mixer-channels{height:max-content!important;min-height:0!important}
 #mixView .channel{height:auto!important;min-height:440px!important;max-height:none!important}
 body.bzdr-mix-bottom-hidden #mixView .mix-bottom{display:none!important}
}

/* v5.29.2: workspace separation and interactive toolbar regression fix */
.view:not(.active){display:none!important}
.view.active{min-width:0;min-height:0}
#desktopMenuBar{position:relative;z-index:1200;pointer-events:auto}
#desktopMenuBar [data-menu]{position:relative;z-index:1201;pointer-events:auto;touch-action:manipulation}
#desktopMenuPopup{position:fixed!important;z-index:99999!important;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain}
.main-header{position:relative;z-index:1100}
@media(min-width:900px){
 .studio-shell{min-height:100dvh}
 .studio-shell .screen-area{min-width:0;min-height:0;overflow:hidden}
 #editView.view.active{display:flex!important;flex-direction:column;min-width:0;min-height:0}
 #editView .timeline-viewport{flex:1 1 auto;min-height:0;overflow:auto}
 #mixView.view.active{display:flex!important;flex-direction:column}
}
@media(max-width:899px){
 .studio-shell{height:100dvh!important;min-height:0!important}
 .studio-shell .screen-area{min-height:0;overflow:hidden}
 .main-header{display:flex!important;flex-wrap:wrap!important;align-content:center;gap:2px;min-height:0!important;height:auto!important}
 #desktopMenuBar{order:3!important;display:flex!important;flex:0 0 100%!important;width:100%;max-width:100%;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none}
 #desktopMenuBar button{flex:0 0 auto;min-height:32px!important;white-space:nowrap;pointer-events:auto}
 #homeView.view.active,#editView.view.active,#pluginView.view.active,#settingsView.view.active{display:block!important;overflow-y:auto!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
 #mixView.view.active{display:flex!important;flex-direction:column;height:auto!important;max-height:none;overflow:hidden}
 #mixView .mixer-scroll{flex:1 1 auto;min-height:0!important;overflow:auto!important;overflow-x:auto!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 #mixView .mixer-channels{height:max-content!important;min-height:0!important}
 #mixView .channel{height:auto!important;min-height:440px!important;max-height:none!important}
 body.bzdr-mix-bottom-hidden #mixView .mix-bottom{display:none!important}
}


/* Native app menus must never invoke iOS text selection or the Copy/Look Up callout. */
#desktopMenuBar,
#desktopMenuBar *,
#desktopMenuPopup,
#desktopMenuPopup * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Session-gated menu: overrides forced display:flex rules on all breakpoints. */
#desktopMenuBar[hidden]{display:none!important;}

/* Timeline navigation: fixed track controls with horizontal time panning.
   Never horizontally scroll the complete edit panel: that moves track headers. */
#editView .timeline-viewport{
  overflow:hidden!important;
  touch-action:pan-y!important;
}
#editView .timeline-viewport .timeline-panel{
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
}
#editView .wave-surface{
  touch-action:pan-y!important;
}
#editView .track-rows::after{
  content:"";
  display:block;
  height:clamp(140px,22vh,260px);
  background:var(--track-bg);
}
#editView #gridDetailButton{display:none!important;}
#mixView .mixer-channels{
  padding-right:clamp(160px,24vw,360px)!important;
  padding-bottom:clamp(120px,18vh,220px)!important;
  box-sizing:content-box;
}

/* Clip drag mode is independent of track headers and timeline navigation. */
#editView .wave-surface.clip-edit-enabled{touch-action:none!important;cursor:grab;}
#editView .wave-surface.clip-edit-enabled:active{cursor:grabbing;}
#editView .track-row.clip-drop-target .track-wave{
  background:rgba(77,169,225,.18)!important;
  outline:2px dashed #75c7fa;
  outline-offset:-2px;
}

/* Fade hit areas share the clip corners; transport geometry is unchanged. */
.clip-selection .clip-trim-handle{top:23px;height:18px}
.clip-selection .clip-fade-corner{top:1px;width:23px;height:21px;background:#344034e8;border-color:#c7ba86;color:#f4df9b;cursor:ew-resize}
.clip-fade-in{left:1px}.clip-fade-out{right:1px}
.smart-fade-preview{position:absolute;z-index:8;top:22px;left:28px;right:28px;text-align:center;background:#13221ff2;color:#f4df9b;font:600 10px/20px sans-serif;pointer-events:none}
.is-fade-dragging{touch-action:none;cursor:ew-resize}

.clip-crossfade-corner{position:absolute;bottom:1px;transform:translateX(-50%);width:22px;height:20px;z-index:4;touch-action:none;cursor:ew-resize;border:1px solid #c7ba86;border-radius:3px;background:#344034e8;color:#f4df9b;font:600 13px/1 sans-serif;padding:0}
.clip-fade-corner:focus-visible,.clip-crossfade-corner:focus-visible{outline:2px solid #f4df9b;outline-offset:2px}