/* house type (brand bible: IBM Plex yes / Inter no): IBM Plex Sans for labels (variable 100-700), Snails Mono, the snails.fm cut of
   Plex Mono with the dotless zero, for figures, data and units only (never prose). Snails Mono is a TRIAL, Regular only: no faked weights
   (font-synthesis: none), hierarchy in figures comes from size and colour. OFL 1.1 ships beside it (fonts/OFL.txt). */
@font-face{font-family:'IBM Plex Sans';src:url(fonts/ibm-plex-sans.056e4e24.woff2) format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'Snails Mono';src:url(fonts/SnailsMono-Regular.579a05f5.woff2) format('woff2');font-weight:400;font-display:swap}
/* UI-R1 alpha: the v0.7 layout (docs/mockups/ui-r1-alpha-blueprint.md, PROVISIONAL). White-majority; colour only carries information. */
:root{
  --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'Snails Mono','IBM Plex Mono',ui-monospace,monospace;
  --bg:#FFFFFF; --head:#F4F4F2; --hair:#DEDED9; --rule:#DEDED9;   /* Charlie 2026-10-08: "can you make _all_ lines that color, rather than the dark grey it already is?" -- the lighter hairline everywhere. Kept as two names so the darker rule can come back in one edit */ --ink:#141414; --dim:#66665F; --faint:#9C9C95;
  --fill:#EBEBE7; --sel:#141414; --selText:#FFFFFF; --page:#E9E9E5;
  /* source colours: information only (lanes, amounts, traces, sweeps). lfo1-4 from v0.7; the rest PROVISIONAL (alpha) */
  --lfo1:#1F55E0; --lfo2:#D0440B; --lfo3:#0A7F57; --lfo4:#8B3FD9;
  --env1:#9A6B00; --env2:#B0207A; --env3:#00809A; --foll:#5F6B00;
  --vel:#4A5BA8; --note:#7A5230; --macro:#A8325A; --audio:#5C5C56; --perf:#56701E;   /* --perf: bend / mod wheel / pressure (SYN-111), PROVISIONAL */
  --lfo1p:#7C9DFF; --lfo2p:#FF8452; --lfo3p:#3DCB95; --lfo4p:#C08BFF;
  --env1p:#E0B23C; --env2p:#F06BBE; --env3p:#3CC3DD; --follp:#B5C23A;
  --velp:#9AA8F0; --notep:#D2A17A; --macrop:#F07AA0; --audiop:#B8B8B0; --perfp:#C2D98A;
  /* dark plot wells (Charlie v0.4: "black on the graphs") */
  --pbg:#121316; --pink:#F2F2EE; --pgrid:#2B2E33; --pdim:#9A9DA4; --pframe:#3A3D43;
  /* type: integer scale + the nudge Charlie asked to dial in (v0.4) */
  --tn:0px;   /* type nudge: +0 (Charlie, 2026-10-05: "+0 font looks better"); dev › view tries ½ and 1 */
  --t9:calc(9px + var(--tn)); --t10:calc(10px + var(--tn)); --t11:calc(11px + var(--tn)); --t13:calc(13px + var(--tn)); --t20:calc(20px + var(--tn));
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-synthesis:none;background:var(--page);font-family:var(--sans);color:var(--ink);min-height:100vh}
[hidden]{display:none!important}
/* the start control v2 (Charlie 2026-10-07): no veil. The board shows sharp but POWERED OFF (screens dark and empty, input held) and
   the start control is embedded in its top bar, beside the logo, highlighted and waiting (modes/features/start.js) */
#start{position:absolute;left:0;width:912px;height:32px;z-index:200;pointer-events:none}
#start .cover{position:absolute;top:0;height:31px;background:var(--bg)}
#start #go{position:absolute;top:4px;height:24px;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;font:600 var(--t11)/16px var(--sans);letter-spacing:.02em;background:var(--sel);color:var(--selText);border:0;cursor:pointer}
#start #go:disabled{background:var(--head);color:var(--dim);cursor:default}
#start #go:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
#start p{position:absolute;top:8px;margin:0;font:400 var(--t9)/16px var(--mono);color:var(--dim);white-space:nowrap;text-align:right;overflow:hidden}
#wrap.off #f{pointer-events:none}
#wrap.off #f .plot>*,#wrap.off #f .drawbtn{opacity:0}
/* and each screen says why it is empty, very dim (Charlie 2026-10-07) */
#wrap.off #f .plot::after{content:'engine off';position:absolute;inset:0;display:grid;place-items:center;font:400 var(--t9)/16px var(--mono);letter-spacing:.06em;color:var(--pdim);opacity:.4;pointer-events:none}
#wrap.waking #f .plot>*,#wrap.waking #f .drawbtn{transition:opacity .2s ease-out}
@media (prefers-reduced-motion:reduce){#wrap.waking #f .plot>*,#wrap.waking #f .drawbtn{transition:none}}
/* one reveal (app.js): the page, then (on a slow load) the board under the veil, each fades in whole; no fade under reduced motion */
#wrap.booting{opacity:0;pointer-events:none}
#wrap.boardless #f{opacity:0}
#wrap{transition:opacity .16s ease-out}
#wrap #f{transition:opacity .2s ease-out}
@media (prefers-reduced-motion:reduce){#wrap,#wrap #f{transition:none}}
#wrap{position:relative;margin:16px auto;width:max-content}
#f{position:relative;width:912px;height:568px;overflow:hidden;user-select:none;-webkit-user-select:none;background:var(--bg);font:400 var(--t10)/16px var(--sans);color:var(--ink)}
#f *{position:absolute}
#f svg, #f svg *{position:static}
#f span.in, #f .in{position:static;display:inline}
#f input.typein{position:absolute;inset:0;width:100%;height:100%;border:0;outline:2px solid var(--ink);outline-offset:-2px;background:var(--bg);font:400 var(--t11)/16px var(--mono);text-align:right;padding:0 8px;color:var(--ink)}
#f input.name{position:absolute;border:0;background:transparent;font:500 var(--t10)/16px var(--sans);color:var(--ink);padding:0;outline:none}
#f input.name:focus{box-shadow:inset 0 -1px 0 var(--ink)}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1}

/* module: flush; 16 px header strip with a 1 px rule under it; 1 px seams (each cell owns its right + bottom hairline) */
.mh{height:16px;background:var(--head);box-shadow:inset 0 -1px 0 var(--rule), inset -1px 0 0 var(--hair)}
.mt{left:8px;top:0;font:600 var(--t10)/16px var(--sans);white-space:nowrap}
.ms{top:0;font:400 var(--t10)/16px var(--sans);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowrule{height:1px;background:var(--rule)}
.colrule{width:1px;background:var(--rule)}
.cap{font:500 var(--t10)/16px var(--sans);color:var(--dim);white-space:nowrap}

/* every control is a 16 px cell */
.cell{height:16px;box-shadow:inset -1px -1px 0 var(--hair);background:var(--bg)}
.ctl{cursor:default}
.ctl:focus{outline:none}
.ctl:focus-visible{outline:none}
/* outlines sit ABOVE the fill (TIGHTENING 6): drawn by a pseudo-element on top of the cell's children */
.ctl:focus-visible::after,.sl.drag::after,.mt.drop::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6}
.ctl:focus-visible::after{box-shadow:inset 0 0 0 2px var(--ink)}
.sl.drag::after{box-shadow:inset 0 0 0 1px var(--ink)}
.mt.drop::after{box-shadow:inset 0 0 0 2px var(--accent, var(--lfo1))}
.mro{display:flex;align-items:center;justify-content:flex-end;gap:2px;padding-right:4px;z-index:4;cursor:pointer;
  font:400 var(--t11)/14px var(--mono);color:var(--pdim);white-space:nowrap}   /* UI-OUT-1: the level readout at the base of the meter */
.mro:hover{color:var(--ink)}
.mro .u{position:static!important;font-size:var(--t9);opacity:.7;margin-left:3px}   /* the shared .u is absolutely positioned for the old readout band; here it is a flex item */
.sl{cursor:ew-resize}
.sl.fixed{cursor:default}   /* a read-only row: it hosts a modulation, it does not set a value (UI-AMP-1) */
.sl.fixed .vl{cursor:default}
.sl .fi{left:0;top:0;bottom:1px;background:var(--fill)}
.sl .ctr{bottom:1px;width:1px;height:4px;background:var(--rule);opacity:.7}
.sl .lb{left:8px;top:0;font:500 var(--t10)/16px var(--sans);color:var(--dim);white-space:nowrap}
.sl .vl{right:8px;top:0;font:400 var(--t11)/16px var(--mono);color:var(--ink);white-space:nowrap;cursor:text}
.mt .ma{pointer-events:auto;cursor:pointer;color:var(--mc);box-shadow:inset 0 0 0 1px var(--mc)}   /* the mod mark: a wave in a box, opens the panel */
.mt .ma.dot{background:var(--mc);box-shadow:none}   /* the fallback where label + value leave no room for the box (and every stepper: UI-MOD-2) */
.mt .ma svg{display:block}
.mt .ma:hover{--mc:var(--ink)}
.sl .lane{height:2px}
.sl .lt{display:none;left:0;background:var(--ink);pointer-events:none;z-index:1;will-change:transform}   /* SYN-108 live value tick, PROVISIONAL: ink, 2 x 6 px in the lane band, clear of the text */
.sl .lane.neg{background-image:repeating-linear-gradient(90deg,transparent 0 3px,var(--bg) 3px 5px)!important}
.sl.inert .lb,.sl.inert .vl{color:var(--faint)}
.seg.inert .s,.st.inert .tx{color:var(--faint)}   /* the same reading on the other controls that can carry a condition */
#f.dropping .ctl:not(.sl[data-target]):not([data-src]){opacity:.35}
.amt{height:12px;top:2px;font:400 var(--t9)/12px var(--mono);padding:0 4px;color:#fff;white-space:nowrap;z-index:41}
.lit{z-index:41}
.b{text-align:center;font:500 var(--t10)/16px var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;cursor:pointer}
.b:hover{background:var(--head)}
.b.on{background:var(--sel);color:var(--selText)}
.b.dis{color:var(--faint);cursor:default}
#f .b > svg{position:relative;display:inline-block;vertical-align:middle;top:-1px}
.seg .s{top:0;height:15px;text-align:center;font:500 var(--t10)/15px var(--sans);color:var(--dim);white-space:nowrap;box-shadow:inset -1px 0 0 var(--hair);cursor:pointer;overflow:hidden}
.seg .s:last-child{box-shadow:none}
.seg .s:hover{color:var(--ink)}
.seg .s.on{background:var(--sel);color:var(--selText)}
.dd .tx,.st .tx{top:0;white-space:nowrap;font:500 var(--t10)/16px var(--sans);overflow:hidden}
.dd .tx{left:8px;right:16px;text-overflow:ellipsis}
.chev{right:7px;top:6px;width:7px;height:4px}
/* an INLINE svg sits on the text baseline, so it dropped 7px below its own box and the chevron read as hanging under the row.
   Scoped to .dd only, the top bar's hand-rolled chevron never got it (UI-PATCH-1, 2026-10-08). */
#f .chev svg{display:block}
.dd:hover{background:var(--head)}
.st .tx{left:16px;right:17px;text-align:center}
.st .pm{top:0;width:16px;height:15px;text-align:center;font:400 var(--t11)/15px var(--sans);color:var(--dim);cursor:pointer}
.st .pm:hover{color:var(--ink);background:var(--head)}
.st .pm.l{left:0;box-shadow:inset -1px 0 0 var(--hair)}
.st .pm.r{right:1px;box-shadow:inset 1px 0 0 var(--hair)}
.tg{cursor:pointer}
.tg .led{left:8px;top:5px;width:6px;height:6px;box-shadow:inset 0 0 0 1px var(--dim)}
.tg.on .led{background:var(--ink);box-shadow:none}
.tg .tx{left:20px;top:0;font:500 var(--t10)/16px var(--sans);white-space:nowrap}
.tg.inert .tx{color:var(--faint)}   /* live but with nothing to act on, the same reading the sliders use */
.tg.inert .led{box-shadow:inset 0 0 0 1px var(--faint)}
.tg.inert.on .led{background:var(--faint)}
.lab{color:var(--dim)}

/* modulator tabs: the tab is the drag handle */
.tab{top:0;height:16px;font:500 var(--t10)/16px var(--sans);color:var(--dim);white-space:nowrap;padding-left:16px;box-shadow:inset -1px -1px 0 var(--hair);cursor:pointer;background:var(--bg)}
.tab.on{background:var(--sel);color:var(--selText)}
.grip{left:6px;top:4px;width:5px;height:8px;background-image:radial-gradient(circle,currentColor 0.8px,transparent 1px);background-size:2.5px 2.7px;opacity:.4;cursor:grab}
.tab.on .grip{opacity:.7}
.cnt{position:static!important;font:400 var(--t9) var(--mono);margin-left:4px}
.src{padding-left:16px;font:500 var(--t10)/16px var(--sans);white-space:nowrap;cursor:grab}

/* plots: dark wells, vector, annotated */
.plot{background:var(--pbg);box-shadow:inset -1px -1px 0 var(--hair);overflow:hidden}
.plot canvas{left:0;top:0}
.an{font:400 var(--t9)/10px var(--mono);color:var(--pdim);white-space:nowrap;pointer-events:none}
.an.k{color:var(--pink)}

/* readout band (output only): small spaced caps over numerals */
.ro .k{font:500 var(--t10)/8px var(--sans);color:var(--dim);white-space:nowrap}
.ro .v{font:400 var(--t20)/24px var(--mono);color:var(--ink);white-space:nowrap}
.ro .u{position:static!important;font:400 var(--t10) var(--mono);color:var(--dim);margin-left:4px}

.standby{box-shadow:inset -1px -1px 0 var(--hair)}
.standby .k{left:8px;top:2px;font:400 var(--t9)/14px var(--mono);color:var(--dim)}
.standby .d{left:8px;right:8px;top:16px;font:400 var(--t10)/14px var(--sans);color:var(--dim);white-space:normal}

/* fx rail + rack rows */
.rr{height:16px;box-shadow:inset 0 -1px 0 var(--hair);cursor:pointer;background:var(--bg)}
.rr .n{left:4px;top:0;font:400 var(--t9)/16px var(--mono);color:var(--faint)}
.rr .led{left:18px;top:5px;width:6px;height:6px;box-shadow:inset 0 0 0 1px var(--dim)}
.rr.on .led{background:var(--ink);box-shadow:none}
.rr .nm{left:30px;top:0;font:500 var(--t10)/16px var(--sans);white-space:nowrap}
.rr.mk .nm,.rr.empty .nm{color:var(--faint)}
.rr.sel{background:var(--sel)}
.rr.sel .nm,.rr.sel .n,.rr.sel .mono{color:var(--selText)}
.rr.sel .led{box-shadow:inset 0 0 0 1px var(--selText)}

/* fold-outs overlay the board, never push it */
@keyframes tray-in{from{opacity:0;transform:translate(var(--tray-dx,0),var(--tray-dy,0))}}
#f [data-fold]:not([hidden]){animation:tray-in .14s ease-out}
@media (prefers-reduced-motion:reduce){#f [data-fold]:not([hidden]){animation:none}}
/* UI-RACK-2: the fx rail is a PANEL -- one opaque container above the rack fold-out (z 50), so the fold and its shadow pass
   behind it. Its left edge carries the separation rule, which is now the rail's own property rather than something the fold has
   to draw past itself. Below the pickers (90) and the overlay slot (95). */
#f .fxrail{z-index:55;background:var(--bg)}
/* The separation rule is its own element, LAST and lifted, not an inset: inset paint sits below the panel's children and the rail's
   rows span its full width, so an inset rule hid behind them exactly as it did on the fold (Charlie: "only back _after_ the 16
   slots"). Twice is a pattern -- an inset edge is the wrong instrument wherever children cover the edge.
   It sits at left:-1px in var(--hair), NOT at the rail's own edge in var(--rule): the board's cells in the column to the left
   already draw their hairline at x 831, so a rule at 832 made a DOUBLE line whenever the fold was closed (Charlie: "there's now a
   double pixel border on that exposed edge, always visible"). On 831, in the same colour, it lands on the line that is already
   there when the fold is closed, and supplies it when the fold is open and those cells are hidden behind it. */
#f .fxrail .sep{left:-1px;top:0;width:1px;height:100%;background:var(--hair);z-index:3;pointer-events:none}
.ov{background:var(--bg);z-index:50;
  /* Charlie 2026-10-08: "right now we just use a block shadow; can we try a softer shadow (apple style inset super smooth)".
     A block shadow is a hard offset with NO blur. These are layered falloffs: a hairline edge, a tight contact shadow, then two
     wide low-opacity layers, plus an inset top highlight -- that highlight is what reads as lifted rather than pasted on. */
  box-shadow:0 0 0 1px var(--rule), inset 0 1px 0 rgba(255,255,255,.65),
    -1px 1px 2px rgba(18,18,16,0.06), -6px 6px 14px -4px rgba(18,18,16,0.12), -14px 18px 40px -12px rgba(18,18,16,0.156);
  /* No clip: the rail is a panel in front of the fold now, so the shadow is hidden by something solid rather than trimmed to
     miss it. It still falls LEFT, over the synth, which is the direction the board always used. */}
#toast{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);height:24px;background:var(--sel);color:var(--selText);font:500 11px/24px var(--sans);padding:0 8px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;z-index:100;max-width:880px;overflow:hidden;text-overflow:ellipsis}
#toast.show{opacity:1}
#toast.err{background:#8A1C0A}

/* the picker (TIGHTENING 4): the board's own list, not a native select */
.dd{cursor:pointer}
.picker{background:var(--bg);
  box-shadow:0 0 0 1px var(--ink), inset 0 1px 0 rgba(255,255,255,.5),
    0 1px 2px rgba(18,18,16,0.072), 0 6px 14px -4px rgba(18,18,16,0.144), 0 16px 32px -10px rgba(18,18,16,0.168)}
/* UI-PATCH-1 the patch explorer: one column per category. Light on purpose -- room for a preview or artwork later. */
.explorer{background:var(--bg);
  box-shadow:0 0 0 1px var(--ink), inset 0 1px 0 rgba(255,255,255,.5),
    0 1px 2px rgba(18,18,16,0.072), 0 8px 18px -5px rgba(18,18,16,0.144), 0 24px 56px -16px rgba(18,18,16,0.192)}
.explorer .xhead{font:400 var(--t9)/16px var(--mono);color:var(--dim);background:var(--head);box-shadow:inset 0 -1px 0 var(--rule);padding:0 8px;white-space:nowrap;overflow:hidden}
.explorer .xcat{font:500 var(--t9)/16px var(--sans);color:var(--dim);letter-spacing:.04em;box-shadow:inset 0 -1px 0 var(--hair);padding:0 6px;white-space:nowrap;overflow:hidden}
.explorer .xcat.empty{opacity:.35}
.explorer .xopt{font:500 var(--t10)/16px var(--sans);padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.explorer .xopt:hover,.explorer .xopt.act{background:var(--head)}
.explorer .xopt.cur{box-shadow:inset 2px 0 0 var(--ink)}
.explorer .xopt.cur::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--rule);pointer-events:none}
.picker .pfilter{position:sticky!important;top:0;z-index:2;background:var(--head);box-shadow:inset 0 -1px 0 var(--rule);font:400 var(--t9)/16px var(--mono);color:var(--dim);padding:0 8px;white-space:nowrap;overflow:hidden}
.picker .plist{position:relative!important}
.picker .popt{position:absolute;left:0;right:0;height:16px;font:500 var(--t10)/16px var(--sans);padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:inset 0 -1px 0 var(--hair)}
.psec{position:absolute;left:0;right:0;height:16px;font:500 var(--t9)/16px var(--sans);padding:0 8px;white-space:nowrap;overflow:hidden;
  color:var(--dim);background:var(--head);box-shadow:inset 0 -1px 0 var(--hair);letter-spacing:.04em;text-transform:lowercase;pointer-events:none}
.picker .popt.cur{font-weight:600}
.picker .popt.cur::before{content:'·';position:absolute;left:2px}
.picker .popt.act{background:var(--sel);color:var(--selText)}
.picker .popt.dis{color:var(--faint);cursor:default}
/* butted lanes run under the text: a 1 px halo keeps every glyph readable over them (tightening 5) */
.sl .lb,.sl .vl{text-shadow:1px 0 0 var(--bg),-1px 0 0 var(--bg),0 1px 0 var(--bg),0 -1px 0 var(--bg)}

/* the routing list: one tinted block per routing (its source's colour, ~9%); cells inside let the tint through */
.rblock .cell,.rblock .seg .s:not(.on){background:transparent}

/* focus mode veil: above the board, below traces (39+), fold-outs (50) and popovers */
.veil{background:#fff;opacity:0;pointer-events:none;z-index:56}   /* above .fxrail (55): focus must dim the rail too, and its outline must not hide behind it */
.veil{background:rgba(255,255,255,.28)!important}
.vframe{opacity:0;pointer-events:none;z-index:57;box-shadow:inset 0 0 0 1px var(--ink)}

/* the snails.fm lockup (bible §3.5a): one SVG, Manrope 800 logotype as outlines, mark ink = the cap band; clearspace >= one x-height */
.lockup{display:block;pointer-events:none}

/* LEAN (Charlie's experiment, ?rules=lean): rules ONLY between modules (.seam); inside, fills and space divide.
   Every control is a tile on a faint tonal step, separated by 1 px of ground (space, not a rule). */
.seam{display:none;background:var(--rule);z-index:5;pointer-events:none}
#f.lean .seam{display:block}
#f.lean .rowrule{display:none}
#f.lean .cell,#f.lean .mh,#f.lean .tab,#f.lean .rr,#f.lean .plot,#f.lean .standby,#f.lean .seg .s,#f.lean .st .pm.l,#f.lean .st .pm.r{box-shadow:none}
#f.lean .mh{background:var(--bg)}
#f.lean .cell.sl,#f.lean .cell.dd,#f.lean .cell.st,#f.lean .cell.seg,#f.lean .cell.tg,#f.lean .cell.src,#f.lean .tab{background:#F6F6F3;box-shadow:inset -1px -1px 0 var(--bg)}
#f.lean .seg .s.on,#f.lean .tab.on{background:var(--sel)}
#f.lean .cell.b{box-shadow:inset -1px -1px 0 var(--bg)}
#f.lean .plot{box-shadow:inset -1px -1px 0 var(--bg)}

/* the MSEG editor (SYN-86): handles on the drawn shape; the loop lives on the shape */
.mh-pt{width:12px;height:12px;cursor:grab;z-index:2}
.mh-pt::after{content:'';position:absolute;left:4px;top:4px;width:4px;height:4px;background:var(--hc,var(--pink))}
.mh-pt.on::after{background:var(--pink)}
.mh-pt.cv{cursor:ns-resize}
.mh-pt.cv::after{background:var(--pbg);box-shadow:inset 0 0 0 1px var(--hc,var(--pink))}
.mh-loop{background:repeating-linear-gradient(180deg,var(--pdim) 0 3px,transparent 3px 6px);pointer-events:none}
.mh-flag{pointer-events:auto;cursor:ew-resize;left:0;top:0;padding:0 4px;background:var(--pink);color:var(--pbg);font:400 var(--t9)/12px var(--mono);white-space:nowrap}
.mseg-side .standby .d{white-space:normal}

/* EXPERIMENTS 2026-10-06 (Charlie Q17 / Q18, "need to see"); dev › view or ?title=12|band, ?focus=led */
#f.t-12 .mh .mt{font-size:calc(12px + var(--tn))}
#f.lean.t-band .mh{background:var(--head)}
#f.focus-led .focusbtn{padding-left:10px}
#f.focus-led .focusbtn::before{content:'';position:absolute;left:8px;top:5px;width:6px;height:6px;box-shadow:inset 0 0 0 1px var(--dim)}
#f.focus-led .focusbtn.on{background:var(--bg);color:var(--ink)}
#f.focus-led .focusbtn.on::before{background:var(--ink);box-shadow:none}

/* ARCH-1 host API (ADR-008): chrome slots and decoration. Slots draw nothing of their own; a mode fills them.
   Decoration is PROVISIONAL (puzzle mode, step 5, designs it): a 1 px inset outline in the state colour; the tag rides in the title. */
#f .slot{background:transparent}
#f .slot[data-slot="overlay"]{background:var(--bg)}
:root{--deco-green:#2E7D32;--deco-yellow:#B8860B;--deco-red:#B3261E}
#f [data-deco="green"]{outline:1px solid var(--deco-green);outline-offset:-1px}
#f [data-deco="yellow"]{outline:1px solid var(--deco-yellow);outline-offset:-1px}
#f [data-deco="red"]{outline:1px solid var(--deco-red);outline-offset:-1px}
#f .deco-mod{pointer-events:none;z-index:40}
#f .deco-mod[data-deco]{outline-width:2px;outline-offset:-2px}

/* Charlie 2026-10-06: the MSEG panel sits over the full-width LFO plot only while drawn, so it needs its own ground; the pen 'draw'
   cell sits inside the plot's top-right (dark well), in the plot's ink */
#f .mseg-side{background:var(--bg)}
#f .b.drawbtn{background:transparent;color:var(--pink);z-index:3;box-shadow:none}
#f .b.drawbtn:hover{color:var(--bg);background:var(--pink)}

/* the 'status' slot (host API): a 16 px strip under the frame, outside the board; same cell grammar as the board */
#status{position:relative;width:912px;height:16px;background:var(--bg);box-shadow:inset 0 1px 0 var(--rule);font:400 var(--t10)/16px var(--sans);color:var(--ink);overflow:hidden;user-select:none;-webkit-user-select:none}
#status *{position:absolute}
#status svg, #status svg *{position:static}
#status span.in, #status .in{position:static;display:inline}

/* rack drag-and-drop + insert (2026-10-06): a row's slot number is its grip; a 2 px ink line shows where it lands; + bars at the gaps */
#f .rr:not(.empty) .n{cursor:grab}
#f .rr.dragging{opacity:.35}
#f .dropline{background:var(--ink);z-index:60;pointer-events:none}   /* above .fxrail (55) and the focus layers */
#f .dragghost{z-index:61;pointer-events:none;box-shadow:0 0 0 1px var(--ink);padding-left:8px;font:500 var(--t10)/16px var(--sans);opacity:.92}
#f .insbar{z-index:25;cursor:copy;background:linear-gradient(var(--ink),var(--ink)) 12px 2px / calc(100% - 12px) 2px no-repeat}
#f .insplus{left:0;top:-5px;width:12px;height:16px;font:600 11px/16px var(--sans);color:var(--ink);text-align:center}

/* WT-1: the board's download indicator, under the frame at the right while a wavetable fetches */
#tlegend{position:absolute;left:0;max-width:664px;height:16px;padding:0 8px;box-sizing:border-box;background:var(--sel);color:var(--selText);font:500 var(--t10)/16px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;z-index:120}
#netbar{position:absolute;left:672px;width:224px;height:16px;padding:0 8px;box-sizing:border-box;font:400 var(--t9)/16px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;z-index:120;
  background:linear-gradient(var(--fill),var(--fill)) 0 0 / var(--p, 0%) 100% no-repeat, var(--bg);box-shadow:inset 0 0 0 1px var(--rule)}

/* APP-1 (L4): the hub bar, the first child of the board's root (#wrap) so it zooms with the board; 32 px on the grid; no logo, no emojis */
#hub{display:flex;align-items:center;gap:16px;width:912px;height:32px;box-sizing:border-box;padding:0 8px;background:var(--bg);box-shadow:inset 0 -1px 0 var(--rule);font:500 var(--t11)/16px var(--sans);color:var(--ink);user-select:none;-webkit-user-select:none}
#hub a{color:var(--ink);text-decoration:none}
#hub a.on{font-weight:600;text-decoration:underline;text-underline-offset:4px}
#hub .chip{padding:0 8px;line-height:20px;box-shadow:inset 0 0 0 1px var(--rule)}
#hub .chip.off{box-shadow:none;outline:1px dashed var(--rule);outline-offset:-1px;color:var(--dim)}
#hub .items{display:flex;gap:16px}
#hub .sp{flex:1}
#hub button{font:500 var(--t11)/20px var(--sans);color:var(--ink);background:var(--bg);border:0;box-shadow:inset 0 0 0 1px var(--rule);padding:0 8px;cursor:pointer}
#hub button:hover{background:var(--sel);color:var(--selText)}
#hub .menu{display:none}
@media (max-width:600px){ #wrap{width:auto;margin:0} #hub{width:100%} #hub .items,#hub .copylink{display:none} #hub .menu{display:inline-block} #hub.open{height:auto;flex-wrap:wrap;padding-bottom:8px} #hub.open .items{display:flex;flex-direction:column;width:100%;gap:8px} }
/* the ordinary pages under the bar (non-synth routes), at the board's width */
#page{width:912px;box-sizing:border-box;padding:24px 8px;background:var(--bg);font:400 13px/20px var(--sans);color:var(--ink)}
#page h1{font:600 13px/20px var(--sans);margin:0 0 8px}
#page p{margin:0 0 8px;max-width:520px}
#page a{color:var(--ink)}
@media (max-width:600px){ #page{width:100%} }