/* Modern studio: the very same live controls and audio engine, styled as a contemporary workspace. */
:root[data-interface="modern"]{
  --desk:#101518;--face:#1a2227;--face-hi:#35444c;--face-lo:#0d1215;
  --face-ink:#edf4f4;--face-dim:#a7b9bf;--btn:#263239;--btn-hi:#3e5159;--btn-lo:#131c20;--btn-press:#163d38;
  --screen:#0b1317;--screen-grid:#243840;--screen-ink:#cadfe3;--trace:#83efc8;--ghost:#537c8d;
  --accent:#ff9e9e;--loop:#71cbe9;--ok:#83efc8;--err:#ff9e9e;
  --font-display:"Chivo",system-ui,sans-serif;--font-ui:"Chivo",system-ui,sans-serif;
  --font-text:"Chivo",system-ui,sans-serif;
}
html[data-interface="modern"] body{font-size:14px;line-height:1.5;background:radial-gradient(ellipse at 50% 0,#1c3034 0,transparent 60%),var(--desk)}
html[data-interface="modern"] .wrap{max-width:1480px;padding:24px 28px 64px;gap:20px}
html[data-interface="modern"] :where(.top,.deck,.controls>section,.mini,.export,.notes){border:1px solid #34434a;border-radius:16px;padding:20px;background:var(--face);box-shadow:0 8px 28px #0002}
html[data-interface="modern"] .top{align-items:center;border:0;border-radius:0;padding:4px 0 18px;background:transparent;box-shadow:none;gap:12px 28px}
html[data-interface="modern"] .brand{gap:16px}
html[data-interface="modern"] .brand-icon{width:78px;filter:drop-shadow(0 6px 10px #0005)}
html[data-interface="modern"] .mark{font-size:38px;font-weight:700;line-height:1;letter-spacing:-.065em;text-shadow:none}
html[data-interface="modern"] .mark span{color:var(--trace)}
html[data-interface="modern"] .byline{margin-top:7px;color:#91a5ad;font-size:11px;letter-spacing:.06em}
html[data-interface="modern"] .titletools{max-width:700px;padding-right:108px;justify-content:flex-end;gap:8px}
html[data-interface="modern"] .local{flex-basis:100%;justify-content:flex-end;font-size:10px;letter-spacing:.035em;text-transform:none;margin-bottom:6px}
html[data-interface="modern"] .led{border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px #83efc866}
html[data-interface="modern"] .interface-toggle{top:28px;right:0;border-color:#567568!important;background:#203c34!important;color:var(--trace);min-width:96px}
html[data-interface="modern"] :is(.btn,.seg button,.chip,.addst,.st .x,.lbtn){font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;border:1px solid #3a4d55;border-radius:8px;min-height:34px;padding:8px 12px;transition:background .15s,border-color .15s}
html[data-interface="modern"] :is(.btn,.seg button,.chip,.lbtn):hover{background:#34474f;border-color:#607983}
html[data-interface="modern"] :is(.seg button,.chip,.btn,.lbtn)[aria-pressed="true"]{background:#183e35;border-color:#518e78;color:var(--trace)}
html[data-interface="modern"] .btn.primary{background:var(--trace);border-color:var(--trace);color:#102c23}
html[data-interface="modern"] .btn.primary:hover{background:#a1f7d9}
html[data-interface="modern"] :is(.btn,.seg button,.chip,.lbtn):active{background:#203e39;border-color:#83efc8}
html[data-interface="modern"] .js-clear-effects{color:#efbdb7;border-color:#72524f}
html[data-interface="modern"] .seg{gap:4px}
html[data-interface="modern"] .seg button{padding:7px 10px}
html[data-interface="modern"] .deck{gap:16px;padding:22px}
html[data-interface="modern"] .filebar{gap:12px 20px;padding-bottom:16px;border-bottom:1px solid #34434a}
html[data-interface="modern"] .meta{flex-basis:200px}
html[data-interface="modern"] .fname{font-size:14px;font-weight:600;gap:8px}
html[data-interface="modern"] .tag{font-size:9px;border-radius:4px;background:#24473a;padding:2px 6px;letter-spacing:.08em}
html[data-interface="modern"] .fdetail{font-size:11px;margin-top:5px;line-height:1.5}
html[data-interface="modern"] .tracks{gap:10px}
html[data-interface="modern"] .tracks-head{font-size:10px;font-weight:600;letter-spacing:.12em}
html[data-interface="modern"] #memMeter{font:11px "Chivo Mono",monospace}
html[data-interface="modern"] .th-tools{gap:6px}
html[data-interface="modern"] #lanes{gap:8px}
html[data-interface="modern"] .lane{grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;gap:10px;border-radius:6px;padding-left:8px}
html[data-interface="modern"] .lane-name{font:600 12px/1.4 var(--font-text);border:1px solid #3a4d55;background:#263239;border-radius:7px;min-height:36px;align-items:center}
html[data-interface="modern"] .lane-name[aria-pressed="true"]{background:#193c34;border-color:#4a7f6c}
html[data-interface="modern"] .lane-name .no{font:10px "Chivo Mono",monospace}
html[data-interface="modern"] .lane-name .fq{font-size:10px}
html[data-interface="modern"] .lane canvas{height:36px;border:1px solid #3a4d55;border-radius:6px}
html[data-interface="modern"] .lane-cue{font-size:10px;min-width:6.4em}
html[data-interface="modern"] .lbtn{font-size:10px;padding:5px 7px;min-height:28px}
html[data-interface="modern"] .lane-rep{font:12px "Chivo Mono",monospace}
html[data-interface="modern"] .screen{border:1px solid #34434a;border-radius:12px;padding:12px;overflow:hidden}
html[data-interface="modern"] #scope{height:250px}
html[data-interface="modern"] .hud{font-size:10px;letter-spacing:.06em}
html[data-interface="modern"] .hud-l{top:8px;left:8px}
html[data-interface="modern"] .hud-r{bottom:8px;right:8px}
html[data-interface="modern"] .seg.viewseg{gap:3px}
html[data-interface="modern"] .seg.viewseg button{font-size:10px;min-height:28px;padding:5px 9px;border-radius:6px}
html[data-interface="modern"] #overview{height:58px}
html[data-interface="modern"] .transport{gap:10px}
html[data-interface="modern"] .time{font:500 23px/1.3 "Chivo Mono",monospace;letter-spacing:-.06em;padding:6px 12px;border:0;border-radius:8px;background:#0b1317}
html[data-interface="modern"] .status{font-size:11px;line-height:1.5;border:0;border-radius:7px;padding:7px 10px;background:#10251e}
html[data-interface="modern"] .status::before{width:5px;height:5px;border-radius:50%}
html[data-interface="modern"] .status[data-state="busy"]{background:#263329}
html[data-interface="modern"] .lower{grid-template-columns:minmax(0,1fr) 292px;gap:20px}
html[data-interface="modern"] .controls{columns:2 360px;column-gap:16px}
html[data-interface="modern"] .controls>section{margin-bottom:16px;padding:20px}
html[data-interface="modern"] :is(.sec-head,.sub-head){align-items:center;border-bottom:1px solid #34434a;box-shadow:none;padding-bottom:14px;margin-bottom:18px;gap:12px}
html[data-interface="modern"] :is(h2,h3){font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}
html[data-interface="modern"] .fold{gap:10px;min-height:24px}
html[data-interface="modern"] .fold::before{font-size:12px;width:10px}
html[data-interface="modern"] .aside{font-size:9px;text-transform:none;letter-spacing:.02em;max-width:50%;line-height:1.4}
html[data-interface="modern"] .presets{gap:6px}
html[data-interface="modern"] .chip{font-size:11px;min-height:32px;padding:7px 10px}
html[data-interface="modern"] .speaker-desc{font-size:12px;line-height:1.5;min-height:0}
html[data-interface="modern"] .knobs{gap:18px 22px}
html[data-interface="modern"] .knobs.three{gap:16px 12px}
html[data-interface="modern"] .ctl label{font-size:11px;text-transform:none;letter-spacing:0}
html[data-interface="modern"] .ctl output{font:11px/1.5 "Chivo Mono",monospace;color:var(--trace)}
html[data-interface="modern"] .hint{font-size:12px;line-height:1.5;margin-top:7px}
html[data-interface="modern"] input[type="range"]{height:26px;margin-top:5px}
html[data-interface="modern"] input[type="range"]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:4px;background:linear-gradient(90deg,var(--trace) 0 var(--fill),#3a4d55 var(--fill) 100%)}
html[data-interface="modern"] input[type="range"]::-moz-range-track{height:4px;border:0;border-radius:4px;background:linear-gradient(90deg,var(--trace) 0 var(--fill),#3a4d55 var(--fill) 100%)}
html[data-interface="modern"] input[type="range"]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;border:2px solid #d3fff0;background:var(--trace);border-radius:50%;box-shadow:0 2px 5px #0006}
html[data-interface="modern"] input[type="range"]::-moz-range-thumb{width:10px;height:10px;border:2px solid #d3fff0;background:var(--trace);border-radius:50%;box-shadow:0 2px 5px #0006}
html[data-interface="modern"] .switch{gap:10px}
html[data-interface="modern"] .switch input{width:18px;height:18px;border:1px solid #516771;border-radius:5px;background:#0b1317}
html[data-interface="modern"] .switch input:checked{background:#83efc8;border-color:#83efc8}
html[data-interface="modern"] .switch input:checked::after{inset:3px;background:#183e35;clip-path:polygon(0 45%,35% 75%,100% 0,100% 30%,35% 100%,0 70%)}
html[data-interface="modern"] .switch .t{font-size:11px;text-transform:none;line-height:18px}
html[data-interface="modern"] .switch .d{font-size:12px;line-height:1.5;margin-top:5px}
html[data-interface="modern"] .switch.wide{margin-bottom:18px}
html[data-interface="modern"] .toggles{gap:14px 24px;margin-top:18px}
html[data-interface="modern"] .toggles.top{margin:0 0 18px}
html[data-interface="modern"] .side{gap:16px}
html[data-interface="modern"] .mini{gap:8px}
html[data-interface="modern"] .mini .time{margin-top:4px}
html[data-interface="modern"] .opt-label{font-size:11px;text-transform:none}
html[data-interface="modern"] .opts{gap:12px}
html[data-interface="modern"] .summary{box-shadow:none;border-color:#34434a;font-size:12px;line-height:1.5;margin-top:16px;padding-top:14px}
html[data-interface="modern"] .btn.wide{min-height:42px;font-size:13px;margin-top:16px}
html[data-interface="modern"] .userpresets{box-shadow:none;border-color:#34434a;margin-top:14px;padding-top:14px}
html[data-interface="modern"] .saveform{max-width:100%;gap:6px}
html[data-interface="modern"] .saveform input{font:12px var(--font-text);border:1px solid #3a4d55;border-radius:7px;width:140px;min-width:0;padding:8px}
html[data-interface="modern"] .saveform .btn{padding:8px 10px}
html[data-interface="modern"] .notes dl{font-size:13px;line-height:1.6}
html[data-interface="modern"] .lede{font-size:13px;line-height:1.6}
html[data-interface="modern"] code{border:0;border-radius:4px;padding:2px 4px}
@media (min-width:861px){html[data-interface="modern"] .side{top:20px}}
@media (max-width:1180px){html[data-interface="modern"] .lane{grid-template-columns:minmax(0,1fr) auto}html[data-interface="modern"] .lane canvas{grid-column:1 / -1;grid-row:2}}
@media (max-width:1000px){html[data-interface="modern"] .lower{grid-template-columns:minmax(0,1fr)}html[data-interface="modern"] .side{position:static;display:grid;grid-template-columns:1fr 1fr;align-items:start}html[data-interface="modern"] .titletools{justify-content:flex-start;max-width:none}html[data-interface="modern"] .local{justify-content:flex-start}}
@media (max-width:640px){
  html[data-interface="modern"] .wrap{padding:16px 12px 40px;gap:14px}
  html[data-interface="modern"] .top{padding:44px 0 8px;gap:20px}
  html[data-interface="modern"] .interface-toggle{top:0;right:0}
  html[data-interface="modern"] .titletools{padding-right:0;gap:6px}
  html[data-interface="modern"] .local{font-size:9px;margin-bottom:3px}
  html[data-interface="modern"] .brand-icon{width:64px}
  html[data-interface="modern"] .mark{font-size:34px}
  html[data-interface="modern"] :is(.deck,.controls>section,.mini,.export,.notes){padding:16px;border-radius:12px}
  html[data-interface="modern"] .filebar{gap:12px}
  html[data-interface="modern"] .meta{flex-basis:100%}
  html[data-interface="modern"] #scope{height:200px}
  html[data-interface="modern"] .hud-l{right:160px;font-size:8px}
  html[data-interface="modern"] .hud-r{font-size:8px}
  html[data-interface="modern"] .seg.viewseg button{font-size:9px;padding:4px 6px}
  html[data-interface="modern"] .transport .status{margin-left:0}
  html[data-interface="modern"] .lane{grid-template-columns:minmax(0,1fr)}
  html[data-interface="modern"] .lane-ctl{grid-row:3;justify-content:flex-start}
  html[data-interface="modern"] .controls{columns:1;column-gap:0}
  html[data-interface="modern"] .side{display:flex}
}
/* View-transition snapshots keep the old GUI visible while a sine-edged wave reveals the new one. */
::view-transition-group(root){animation-duration:1100ms}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
@media (prefers-reduced-motion:reduce){::view-transition-group(root){animation-duration:0s}}
html[data-interface="modern"] .fmrow .chip{font-size:10px;min-height:26px;padding:4px 8px}
html[data-interface="modern"] .apnow{font-size:13px;line-height:1.5}
html[data-interface="modern"] .lane-bpm{font:11px "Chivo Mono",monospace}