/* Layout: a FastTracker II-style workspace. Bevelled blue-grey panels on a dark desk: the player is the main
   "pattern window" (file, decks, scope/roll/pattern screen, transport), the effect rack flows in two columns of
   panels, and a sticky side bay keeps play, loop and export in reach. One fixed palette, as on the real thing. */
:root{
  --desk:#222B45;
  --face:#4F6290; --face-hi:#93A6D0; --face-lo:#1C243D; --face-ink:#F3F5FB; --face-dim:#C3CDE5;
  --btn:#6276A6; --btn-hi:#AFC0E3; --btn-lo:#25304E; --btn-press:#3A4A76;
  --screen:#000000; --screen-grid:#1B2446; --screen-ink:#E9EDF7; --trace:#F6E05E; --ghost:#6B80B3;
  --accent:#FF6767; --loop:#4FD9E6; --ok:#7BE686; --err:#FF8080;
  --font-display:"Jersey 10","Silkscreen",ui-monospace,monospace;
  --font-ui:"Silkscreen",ui-monospace,"Courier New",monospace;
  --font-text:"VT323",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--desk);color:var(--face-ink);font-family:var(--font-text);font-size:18px;line-height:1.15}
h1,h2,h3{margin:0}
p{margin:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* the two bevels everything is built from */
.top,.deck,.controls>section,.mini,.export,.notes{background:var(--face);border:2px solid;border-color:var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);padding:8px 10px}
.screen,.time,.status,code{border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo)}

.wrap{max-width:1280px;margin:0 auto;padding:8px max(8px,env(safe-area-inset-right,0px)) 40px max(8px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:8px}

/* title panel */
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 24px}
.brand{display:flex;align-items:center;gap:14px}
.brand-icon{display:block;width:104px;height:auto;flex:none;image-rendering:pixelated}
.mark{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,8vw,64px);line-height:.8;letter-spacing:.02em;color:var(--face-ink);text-shadow:2px 2px 0 var(--face-lo)}
.mark span{color:var(--trace)}
.byline{margin-top:6px;font-family:"Chivo Mono",ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:lowercase;color:#182039}
.lede{margin-top:6px;max-width:78ch;color:var(--face-dim);font-size:17px}
.titletools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.top{position:relative}
.titletools{padding-right:102px}
.interface-toggle{position:absolute;right:10px;top:10px;min-width:92px}
@media (max-width:520px){.top{padding-top:48px}.titletools{padding-right:0;gap:6px}.interface-toggle{right:8px;top:8px}}
.local{font-family:var(--font-ui);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--face-dim);display:flex;align-items:center;gap:8px}
.led{width:8px;height:8px;background:var(--ok);box-shadow:0 0 6px var(--ok);flex:none}
@media (max-width:520px){.brand{gap:10px}.brand-icon{width:72px}}

/* player */
.deck{display:flex;flex-direction:column;gap:8px}
body.dragging .deck{outline:2px dashed var(--trace);outline-offset:3px}
.filebar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pick{display:flex;flex-direction:column;gap:3px}
.drophint{font-size:15px;color:var(--face-dim)}
.meta{flex:1 1 240px;min-width:0}
.fname{font-family:var(--font-ui);font-size:12px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;overflow-wrap:anywhere}
.tag{font-family:var(--font-ui);font-size:9px;text-transform:uppercase;background:var(--btn-lo);color:var(--trace);padding:2px 5px}
.fdetail{font-size:16px;color:var(--face-dim);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.formats{font-family:var(--font-ui);font-size:9px;color:var(--face-dim)}

.screen{background:var(--screen);padding:6px;display:flex;flex-direction:column;gap:6px}
.scope-wrap{position:relative}
#scope{display:block;width:100%;height:230px}
.hud{position:absolute;font-family:var(--font-ui);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--screen-ink);opacity:.8;pointer-events:none;font-variant-numeric:tabular-nums}
.hud-l{top:4px;left:6px;right:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-r{bottom:4px;right:6px;display:flex;gap:12px;align-items:center}
.key-swatch{display:inline-block;width:14px;vertical-align:middle;margin-right:6px}
.key-swatch.g{height:2px;background:var(--ghost)}
.key-swatch.t{height:3px;background:var(--trace)}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;color:var(--screen-ink);font-size:18px}
.viewseg{position:absolute;top:0;right:0}
.seg.viewseg button{min-height:20px;padding:2px 6px;font-size:9px;border-width:1px}
#overview{display:block;width:100%;height:52px;cursor:pointer;touch-action:none}
#overview:focus-visible{outline:2px solid var(--trace);outline-offset:2px}

.transport{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.time{background:var(--screen);color:var(--trace);font-size:24px;line-height:1;padding:3px 8px 1px;font-variant-numeric:tabular-nums;min-width:7.6em;text-align:center}
.status{background:var(--screen);color:var(--ok);font-size:16px;padding:2px 8px;display:flex;align-items:center;gap:7px;min-width:0;overflow-wrap:anywhere}
.transport .status{margin-left:auto}
.status::before{content:"";width:7px;height:7px;background:var(--face-dim);flex:none}
.status[data-state="busy"]{color:var(--trace)}
.status[data-state="busy"]::before{background:var(--trace);animation:blink .6s steps(2) infinite}
.status[data-state="ok"]::before{background:var(--ok);box-shadow:0 0 5px var(--ok)}
.status[data-state="error"]{color:var(--err)}
.status[data-state="error"]::before{background:var(--err)}
@keyframes blink{50%{opacity:.15}}

/* buttons: raised, and pressed in when active */
.btn,.seg button,.chip,.addst,.st .x,.lbtn{font:400 11px/1 var(--font-ui);letter-spacing:.03em;text-transform:uppercase;color:var(--face-ink);background:var(--btn);border:2px solid;border-color:var(--btn-hi) var(--btn-lo) var(--btn-lo) var(--btn-hi);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 11px;min-height:32px;border-radius:0}
.btn:hover,.seg button:hover,.chip:hover,.addst:hover,.lbtn:hover,.st .x:hover{background:color-mix(in srgb,var(--btn) 85%,white)}
.btn:active,.seg button:active,.chip:active,.lbtn:active,.addst:active,
.seg button[aria-pressed="true"],.chip[aria-pressed="true"],.btn[aria-pressed="true"],.lbtn[aria-pressed="true"]{border-color:var(--btn-lo) var(--btn-hi) var(--btn-hi) var(--btn-lo);background:var(--btn-press);color:var(--trace)}
.btn.primary{color:var(--trace)}
.btn[disabled]{opacity:.5;cursor:progress}
.btn svg{width:13px;height:13px;fill:currentColor;flex:none}
.js-play{min-width:92px}
.seg{display:inline-flex;gap:2px}
.btn:focus-visible,.seg button:focus-visible,.chip:focus-visible,.lbtn:focus-visible,input:focus-visible,.addst:focus-visible,.st .x:focus-visible,#dial:focus-visible{outline:2px solid var(--trace);outline-offset:1px}

/* stations and track decks */
.stationbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.st{display:inline-flex;max-width:100%}
.st .chip{min-width:0;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-transform:none;font-family:var(--font-text);font-size:16px;padding:5px 9px}
.st .chip .fq{font-family:var(--font-ui);font-size:9px;opacity:.8;margin-right:6px}
.st .x{padding:0 9px;font-size:13px}
.addst{border-style:dashed;border-color:var(--face-dim);background:transparent}
.tracks{display:flex;flex-direction:column;gap:4px}
.tracks-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;font-family:var(--font-ui);font-size:9px;text-transform:uppercase;color:var(--face-dim)}
.th-tools{display:flex;flex-wrap:wrap;align-items:center;gap:3px;text-transform:none}
#memMeter{font-family:var(--font-text);font-size:16px;color:var(--face-dim);margin-right:6px}
#lanes{display:flex;flex-direction:column;gap:3px}
.lane{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) auto;align-items:center;gap:6px;padding-left:5px;border-left:3px solid transparent}
.lane.on{border-left-color:var(--trace)}
.lane.muted canvas{opacity:.55}
.lane-name{display:flex;align-items:baseline;gap:6px;min-width:0;padding:4px 7px;text-align:left;font:16px/1 var(--font-text);color:var(--face-ink);background:var(--btn);border:2px solid;border-color:var(--btn-hi) var(--btn-lo) var(--btn-lo) var(--btn-hi);cursor:pointer}
.lane-name[aria-pressed="true"]{border-color:var(--btn-lo) var(--btn-hi) var(--btn-hi) var(--btn-lo);background:var(--btn-press)}
.lane-name .no{font-family:var(--font-ui);font-size:9px;color:var(--trace)}
.lane-name .fq{font-family:var(--font-ui);font-size:9px;color:var(--face-dim)}
.lane-name .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane canvas{display:block;width:100%;height:32px;cursor:ew-resize;touch-action:none;border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo)}
.lane canvas:focus-visible{outline:2px solid var(--trace);outline-offset:1px}
.lane-ctl{display:flex;align-items:center;gap:3px}
.lane-cue{font-size:16px;font-variant-numeric:tabular-nums;color:var(--face-dim);white-space:nowrap;min-width:6.4em;text-align:right;margin-right:3px}
.lbtn{min-height:26px;padding:3px 6px;font-size:9px}
.lbtn.sq{min-width:26px;padding:3px 0}
.lbtn[disabled]{opacity:.5;cursor:default}
.js-ldir{min-width:62px}
.lane-rep{font-size:17px;color:var(--loop);min-width:2.1em;text-align:center}
.lane-ctl input.lvol{width:64px;flex:none;margin:0 3px}
@media (max-width:1100px){.lane{grid-template-columns:minmax(0,1fr) auto}.lane canvas{grid-column:1 / -1;grid-row:2}}
@media (max-width:640px){.lane-ctl{flex-wrap:wrap;justify-content:flex-end}.lane{grid-template-columns:minmax(0,1fr)}.lane-ctl{grid-row:3}}
.samplezone{margin:2px 0 12px;display:flex;flex-direction:column;gap:5px}

/* effect rack */
.lower{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:8px;align-items:start}
@media (max-width:860px){.lower{grid-template-columns:minmax(0,1fr)}}
.controls{columns:2 330px;column-gap:8px;min-width:0}
.controls>section{break-inside:avoid;margin-bottom:8px;display:block}
h2,h3{font-family:var(--font-ui);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--face-ink);font-weight:400}
.sec-head,.sub-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:5px;margin:0 0 9px;border-bottom:1px solid var(--face-lo);box-shadow:0 1px 0 var(--face-hi)}
.aside{font-family:var(--font-ui);font-size:9px;color:var(--trace);text-align:right;text-transform:uppercase}

.presets{display:flex;flex-wrap:wrap;gap:3px}
.chip{padding:6px 8px;min-height:28px}
.speakers{margin-bottom:6px}
.speaker-desc{margin:0 0 10px;min-height:2.3em;color:var(--face-dim);font-size:16px}

.knobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.knobs.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 10px}
@media (max-width:520px){.knobs{grid-template-columns:minmax(0,1fr)}.knobs.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ctl{min-width:0}
.ctl-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:8px}
.ctl label{font-family:var(--font-ui);font-size:9px;text-transform:uppercase;letter-spacing:.03em}
.ctl output{font-size:16px;color:var(--trace);font-variant-numeric:tabular-nums;white-space:nowrap}
.hint{margin-top:3px;font-size:15px;color:var(--face-dim);line-height:1.05}

/* sliders: a sunken black slot with a raised thumb, like FT2's scroll bars */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:3px 0 0;background:transparent;cursor:pointer;--fill:50%}
input[type=range]::-webkit-slider-runnable-track{height:12px;background:linear-gradient(90deg,var(--ghost) 0 var(--fill),var(--screen) var(--fill) 100%);border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo)}
input[type=range]::-moz-range-track{height:8px;background:linear-gradient(90deg,var(--ghost) 0 var(--fill),var(--screen) var(--fill) 100%);border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:18px;margin-top:-5px;background:var(--btn);border:2px solid;border-color:var(--btn-hi) var(--btn-lo) var(--btn-lo) var(--btn-hi);border-radius:0}
input[type=range]::-moz-range-thumb{width:12px;height:14px;background:var(--btn);border:2px solid;border-color:var(--btn-hi) var(--btn-lo) var(--btn-lo) var(--btn-hi);border-radius:0}
input[type=range].center::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--screen) 0 calc(var(--mid,50%) - 1px),var(--ghost) calc(var(--mid,50%) - 1px) calc(var(--mid,50%) + 1px),var(--screen) calc(var(--mid,50%) + 1px) 100%)}
input[type=range].center::-moz-range-track{background:linear-gradient(90deg,var(--screen) 0 calc(var(--mid,50%) - 1px),var(--ghost) calc(var(--mid,50%) - 1px) calc(var(--mid,50%) + 1px),var(--screen) calc(var(--mid,50%) + 1px) 100%)}

/* checkboxes: a sunken square that fills in when on */
.toggles{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:12px}
.toggles.top{margin:0 0 10px}
.switch{display:flex;gap:9px;align-items:flex-start;cursor:pointer;max-width:300px}
.switch input{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0;background:var(--screen);position:relative;flex:none;cursor:pointer;border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo)}
.switch input:checked::after{content:"";position:absolute;inset:3px;background:var(--trace)}
.switch .t{display:block;font-family:var(--font-ui);font-size:10px;text-transform:uppercase;line-height:18px}
.switch .d{display:block;font-size:15px;color:var(--face-dim);line-height:1.05}
.switch.wide{max-width:none;margin-bottom:10px}
.knobs.off,.dimmed{opacity:.5}

/* radio dial */
.dialscreen{padding:0;overflow:hidden}
#dial{display:block;width:100%;height:96px;cursor:ew-resize;touch-action:none}
.dial-note{margin:6px 0 12px}

/* side bay */
.side{display:flex;flex-direction:column;gap:8px;min-width:0}
@media (min-width:861px){.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px)}}
.mini{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mini .status{flex-basis:100%}
.mini .time{flex:1}
.mini .js-fold-all{width:100%}
.export{display:flex;flex-direction:column}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
.opt-label{font-family:var(--font-ui);font-size:9px;text-transform:uppercase}
.summary{margin-top:10px;padding-top:8px;border-top:1px solid var(--face-lo);box-shadow:inset 0 1px 0 var(--face-hi);font-size:16px;font-variant-numeric:tabular-nums;display:flex;justify-content:space-between;gap:2px 10px;flex-wrap:wrap}
.summary .size{color:var(--face-dim)}
.btn.wide{width:100%;min-height:40px;font-size:12px;margin-top:10px}
.btn.ghost{width:100%;margin-top:6px}
.export .hint{margin-top:8px}

/* your presets */
.userpresets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--face-lo);box-shadow:inset 0 1px 0 var(--face-hi)}
.chip.user{text-transform:none;font-family:var(--font-text);font-size:16px;padding:4px 8px;color:var(--loop)}
.saveform{display:flex;gap:3px;margin-left:auto}
.saveform input{font:17px var(--font-text);color:var(--screen-ink);background:var(--screen);border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);padding:3px 6px;width:150px}
.saveform .btn{min-height:28px;padding:4px 10px}

/* folding panels: the title is the button */
.fold{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fold::before{content:"▾";color:var(--trace);font-size:10px;width:8px}
.fold[aria-expanded="false"]::before{content:"▸"}
.fold:focus-visible{outline:2px solid var(--trace);outline-offset:2px}
.controls>section.folded>:not(.sec-head):not(.sub-head),.export.folded>:not(.sec-head){display:none!important}
.controls>section.folded .sub-head,.controls>section.folded .sec-head,.export.folded .sec-head{margin-bottom:0;border-bottom:0;box-shadow:none;padding-bottom:0}

/* tidy by default: Help brings back every explanation */
body:not(.help) .hint,body:not(.help) .speaker-desc,body:not(.help) .switch .d,body:not(.help) .lede,body:not(.help) .notes,body:not(.help) .drophint,body:not(.help) .formats{display:none}
body:not(.help) #rangeNote:not([hidden]),body:not(.help) #zipNote:not([hidden]){display:block}
body:not(.help) .switch .t{line-height:18px}

/* help panel */
.notes dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;margin:10px 0 0}
@media (max-width:860px){.notes dl{grid-template-columns:minmax(0,1fr)}}
.notes dt{font-family:var(--font-ui);font-size:10px;text-transform:uppercase;color:var(--trace)}
.notes dd{margin:4px 0 0;color:var(--face-dim);font-size:16px;max-width:70ch}
code{font-family:var(--font-text);font-size:16px;background:var(--screen);color:var(--screen-ink);padding:0 4px;white-space:nowrap}

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

/* dial recording */
.dialmode{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 10px}
.recbtn{color:var(--accent)}
.recbtn[aria-pressed="true"]{color:var(--accent);background:color-mix(in srgb,var(--accent) 30%,var(--btn-press))}
.recbtn.live[aria-pressed="true"]{animation:blink .9s steps(2) infinite}
.recinfo{font-size:16px;color:var(--face-dim)}
#paVoiceBar{margin-bottom:12px}

/* FM patches, autopilot */
.fmpatches{display:flex;flex-direction:column;gap:5px;margin:0 0 10px}
.fmrow{display:grid;grid-template-columns:4.6em minmax(0,1fr);align-items:center;gap:6px}
.fmrow .chip{min-height:24px;padding:4px 6px;font-size:9px}
.fmpatches .switch.wide{margin:4px 0 0}
.apbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.apnow{font-size:17px;color:var(--trace);margin:0 0 8px;overflow-wrap:anywhere}
#apQueue{margin-bottom:10px}
#apQueue .chip[aria-pressed="true"]{color:var(--trace)}
.apopts{margin-bottom:12px}
.apsub{margin-top:4px}
.lane-bpm{font-size:15px;color:var(--loop);white-space:nowrap;margin-right:4px;font-variant-numeric:tabular-nums}