/* Layout: a practice console. Controls stacked on top, a full-width rhythm lane below, bars flowing in rows like a score. */
:root{
  /* line widths, shared by the UI and the doodle animation (js/app.js reads them): hairline, regular, strong */
  --lw-hair:1px;--lw-reg:1.5px;--lw-strong:2px;
  /* Graphite & brass: warm low-chroma neutrals, ONE accent (brass) for here/on, colour reserved for meaning */
  --bg:oklch(0.968 0.007 85);--panel:oklch(0.988 0.005 85);--ink:oklch(0.25 0.012 70);--muted:oklch(0.46 0.012 70);--faint:oklch(0.53 0.01 70);
  --line:oklch(0.905 0.008 80);--line-strong:oklch(0.72 0.01 75);--beat:oklch(0.79 0.01 75);--bar:oklch(0.36 0.01 70);
  --st:oklch(0.56 0.115 68);--st-bg:oklch(0.93 0.04 82);--st-line:oklch(0.76 0.08 78);
  --tu:oklch(0.50 0.09 300);--tu-bg:oklch(0.93 0.025 300);--tu-line:oklch(0.75 0.05 300);--tu-zone:oklch(0.55 0.09 300 / .05);--zebra:oklch(0.3 0.02 70 / .03);--grid:oklch(0.93 0.006 80);--grid-tu:oklch(0.88 0.03 300);--h2:oklch(0.50 0.11 250);--h3:oklch(0.50 0.11 355);--h5:oklch(0.50 0.08 170);
  --gr:oklch(0.50 0.09 300);--gr-bg:oklch(0.93 0.025 300);--gr-line:oklch(0.75 0.05 300);
  --head:oklch(0.60 0.13 62);--on:oklch(0.99 0.005 85);--btn:oklch(0.25 0.012 70);--btn-ink:oklch(0.98 0.005 85);
  --chip:oklch(0.905 0.008 80);--chip-line:oklch(0.80 0.01 78);--chip-tail:oklch(0.94 0.006 80);--fbmap:.8;--fbdim:.3;
  --f-display:"Instrument Sans",system-ui,-apple-system,sans-serif; /* titles and headings */
  --f-body:"Instrument Sans",system-ui,-apple-system,sans-serif; /* buttons, menus, labels */
  --f-mono:"Instrument Sans",system-ui,-apple-system,sans-serif; /* the tab and every number: same family, even-width digits */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:oklch(0.185 0.006 70);--panel:oklch(0.215 0.007 70);--ink:oklch(0.91 0.012 80);--muted:oklch(0.71 0.012 80);--faint:oklch(0.62 0.01 80);
  --line:oklch(0.285 0.007 70);--line-strong:oklch(0.41 0.008 70);--beat:oklch(0.37 0.008 70);--bar:oklch(0.78 0.01 80);
  --st:oklch(0.80 0.115 78);--st-bg:oklch(0.31 0.045 78);--st-line:oklch(0.56 0.09 78);
  --tu:oklch(0.76 0.06 300);--tu-bg:oklch(0.29 0.03 300);--tu-line:oklch(0.46 0.05 300);--tu-zone:oklch(0.76 0.06 300 / .06);--zebra:oklch(0.95 0.02 80 / .022);--grid:oklch(0.25 0.006 70);--grid-tu:oklch(0.33 0.03 300);--h2:oklch(0.79 0.075 250);--h3:oklch(0.79 0.075 355);--h5:oklch(0.79 0.06 170);
  --gr:oklch(0.76 0.06 300);--gr-bg:oklch(0.29 0.03 300);--gr-line:oklch(0.46 0.05 300);
  --head:oklch(0.80 0.115 78);--on:oklch(0.18 0.01 70);--btn:oklch(0.91 0.012 80);--btn-ink:oklch(0.19 0.006 70);
  --chip:oklch(0.33 0.008 70);--chip-line:oklch(0.45 0.01 70);--chip-tail:oklch(0.27 0.008 70);--fbmap:.3;--fbdim:.13;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:oklch(0.185 0.006 70);--panel:oklch(0.215 0.007 70);--ink:oklch(0.91 0.012 80);--muted:oklch(0.71 0.012 80);--faint:oklch(0.62 0.01 80);
  --line:oklch(0.285 0.007 70);--line-strong:oklch(0.41 0.008 70);--beat:oklch(0.37 0.008 70);--bar:oklch(0.78 0.01 80);
  --st:oklch(0.80 0.115 78);--st-bg:oklch(0.31 0.045 78);--st-line:oklch(0.56 0.09 78);
  --tu:oklch(0.76 0.06 300);--tu-bg:oklch(0.29 0.03 300);--tu-line:oklch(0.46 0.05 300);--tu-zone:oklch(0.76 0.06 300 / .06);--zebra:oklch(0.95 0.02 80 / .022);--grid:oklch(0.25 0.006 70);--grid-tu:oklch(0.33 0.03 300);--h2:oklch(0.79 0.075 250);--h3:oklch(0.79 0.075 355);--h5:oklch(0.79 0.06 170);
  --gr:oklch(0.76 0.06 300);--gr-bg:oklch(0.29 0.03 300);--gr-line:oklch(0.46 0.05 300);
  --head:oklch(0.80 0.115 78);--on:oklch(0.18 0.01 70);--btn:oklch(0.91 0.012 80);--btn-ink:oklch(0.19 0.006 70);
  --chip:oklch(0.33 0.008 70);--chip-line:oklch(0.45 0.01 70);--chip-tail:oklch(0.27 0.008 70);--fbmap:.3;--fbdim:.13;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.45;margin:0}

[hidden]{display:none!important}
.app.collapsed{grid-template-columns:minmax(0,1fr)}
.app.collapsed .side{display:none}
.side{min-height:0;overflow-y:auto;background:var(--panel);border:var(--lw-hair) solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.main{min-height:0;min-width:0;overflow:auto;position:relative}
.blk{display:flex;flex-direction:column;gap:9px;padding-top:12px;border-top:var(--lw-hair) solid var(--line)}
details.blk>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
details.blk>summary::before{content:"\203A";display:inline-block;transition:transform .15s;font-size:14px;color:var(--faint)}
details.blk[open]>summary::before{transform:rotate(90deg)}
details.blk:not([open]){gap:0}
.stack{display:flex;flex-direction:column;gap:6px}
.stack select,.side input[type=range]{width:100%}
.grp.wrap{flex-wrap:wrap}
.playbtn{width:100%;padding:9px 10px;font-size:15px}
.icon{width:30px;height:30px;padding:0;font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.expand{position:fixed;top:calc(22px + env(safe-area-inset-top,0px));left:calc(max(14px,env(safe-area-inset-left,0px)) + 8px);z-index:20;background:var(--panel)}
.keys{margin:0;padding-left:18px;color:var(--muted);font-size:12.5px;display:flex;flex-direction:column;gap:4px}
kbd{font-family:var(--f-mono);font-size:11px;border:var(--lw-hair) solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--ink);background:var(--bg)}
.chn{min-width:72px} .chn.wide{min-width:96px}

h1{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0;line-height:1}
.song{font-family:var(--f-display);font-weight:500;font-size:17px;color:var(--muted);margin-top:6px;text-wrap:balance}
.song b{color:var(--ink);font-weight:700}
.panel{background:var(--panel);border:var(--lw-hair) solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.lab{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.grp{display:flex;align-items:center;gap:6px}
select,input[type=number]{font:inherit;color:var(--ink);background:var(--bg);border:var(--lw-hair) solid var(--line);border-radius:6px;padding:5px 7px}
input[type=number]{width:58px;font-family:var(--f-mono);font-size:13px}
button{font:inherit;font-weight:500;color:var(--ink);background:var(--bg);border:var(--lw-hair) solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer}
button:disabled{cursor:default}
button:hover{border-color:var(--line-strong)}

.primary{background:var(--pv-acc,oklch(0.55 0.09 150));color:oklch(0.99 0 0);border-color:transparent;min-width:92px;font-weight:600}
.chip{font-size:13px;padding:3px 10px;border-radius:999px}
.chip.on{background:var(--st-bg);border-color:var(--st-line);color:var(--st)}
.tog{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.tog input{accent-color:var(--st)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.big{font-family:var(--f-mono);font-weight:600;font-size:15px;min-width:76px}
input[type=range]{accent-color:var(--st);width:160px}
.status{font-size:13px;color:var(--muted)}
.status b{color:var(--ink)}
.drop{border:var(--lw-reg) dashed var(--line-strong);border-radius:8px;padding:8px;color:var(--muted);font-size:12.5px;display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:center}
.drop.hot{border-color:var(--st);color:var(--st)}
.lanebox{background:transparent;border:0;border-radius:0;padding:12px 0 8px;overflow:visible;min-height:100%;box-sizing:border-box}

.lanebox svg{display:block;scroll-snap-align:start;margin-bottom:var(--rowGap,0px)}
.main{scroll-snap-type:y mandatory;scroll-padding-top:12px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted)}
.sw{display:inline-block;width:14px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:6px;border:var(--lw-hair) solid}
.err{color:var(--head);font-size:13px}
.n .tl{fill:var(--st-bg);stroke:var(--st-line)} .n .hd{fill:var(--st);stroke:var(--st)} .n text{fill:var(--on)}
.n.t .tl{fill:var(--tu-bg);stroke:var(--tu-line)} .n.t .hd{fill:var(--tu);stroke:var(--tu)}
.n.g .tl{fill:var(--gr-bg);stroke:var(--gr-line)} .n.g .hd{fill:var(--gr);stroke:var(--gr)}
.n.o .hd{fill:var(--panel);stroke-width:1.8} .n.o text.nt{fill:var(--st)} .n.o.t text.nt{fill:var(--tu)} .n.o.g text.nt{fill:var(--gr)}
.n.on .tl{fill:var(--st);stroke:var(--st)} .n.t.on .tl{fill:var(--tu);stroke:var(--tu)} .n.g.on .tl{fill:var(--gr);stroke:var(--gr)}
.n:not(.fc).on .hd{stroke:var(--ink);stroke-width:1.6}
.n .tp{fill:none;stroke:var(--chip-line);stroke-linecap:round;stroke-linejoin:round} .n.t .tp{stroke:var(--tu-line)} .n.fc .tp{stroke:var(--cb)}
.n .tpl{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;visibility:hidden} .n.fc .tpl{stroke:var(--cl)} .n.on .tpl{visibility:visible}
.n.fc.on .hd{fill:var(--cl);stroke:var(--cl)} .n.fc.o.on .hd{fill:var(--panel);stroke:var(--cl);stroke-width:2.6}
.n .hd,.n .nt{transform-box:fill-box;transform-origin:center;transition:transform 120ms cubic-bezier(0.2,0,0,1)} .n.hit .hd,.n.hit .nt{transform:scale(1.1)}
@media (prefers-reduced-motion:reduce){.n.hit .hd,.n.hit .nt{transform:none}}
.n.fc.gh .hd{fill:var(--cg);stroke:var(--cgs,var(--cg));stroke-width:1.3} .n.fc.gh text.nt{fill:var(--cgt)} .n.fc.gh .tp{stroke:var(--cg)} .n.gh:not(.fc) .hd{fill:var(--panel);stroke:var(--line-strong)} .n.gh:not(.fc) text.nt{fill:var(--muted)}
.n .hr{fill:none;stroke:var(--ink);stroke-width:1.5} .n .gl{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round} .n .dot{fill:var(--ink)}
.n .mc{fill:var(--c);stroke:var(--c)} .n .mct{fill:var(--ct);font-family:var(--f-mono);font-weight:600;pointer-events:none}
.fbx{border-top:var(--lw-hair) solid var(--line);background:var(--bg);padding:4px max(12px,env(safe-area-inset-left,0px)) 2px;min-width:0}
.fbs{display:flex;flex-wrap:nowrap;align-items:center;gap:6px 14px;min-height:26px;font-size:12.5px;line-height:1.35;color:var(--muted);overflow:hidden;white-space:nowrap;transition:opacity 150ms var(--ease-out)}
.fbs b{color:var(--ink);font-weight:600;font-size:13.5px} .fbs i{font-style:normal;color:var(--muted)} .fbm{color:var(--muted)}
.fbn{display:inline-flex;align-items:center;gap:6px;flex:none} .fbn.al{gap:5px} .fbn.al .fbc{margin-left:4px} .fbcn{color:var(--ink);font-weight:600;font-size:13.5px;flex:none} .fbt{color:var(--muted);overflow:hidden;text-overflow:ellipsis;min-width:0;padding-left:6px} .fbt b{font-size:12.5px;font-weight:600;color:var(--ink)} .fbsep{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--faint);margin:0 10px;vertical-align:middle}
.fbc{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 3px;box-sizing:border-box;border-radius:4px;font:600 11px var(--f-mono);background:var(--c);color:var(--ct)} .fbc.o{background:transparent;box-shadow:inset 0 0 0 1.6px var(--c);color:var(--ink);border-radius:9px} .fbc.x{background:var(--chip);color:var(--muted)}
.fbsvg{display:block;width:100%} .fbsl{font:500 11px var(--f-mono);color:var(--faint);min-width:8px;text-align:right;margin-right:-2px}
.fbn0{fill:color-mix(in oklab,var(--ink) 3%,transparent)} .fbin{fill:var(--line-strong);opacity:.5} .fbf{stroke:var(--line);stroke-width:1} .fbf.nut{stroke:var(--muted);stroke-width:3} .fbstr{stroke:var(--line-strong)} .fbk{fill:var(--faint);font:500 11px var(--f-mono)} .fbk.sn{fill:var(--muted)}
.fp rect{fill:var(--c)} .fp text{fill:var(--ct);font:600 10px var(--f-mono);pointer-events:none} .fp.o rect{fill:var(--bg);stroke:var(--c);stroke-width:1.6} .fp.o text{fill:var(--ink)}
#fbMap .fp{opacity:var(--fbmap,.3);transition:opacity 320ms var(--ease-out)} #fbMap .fp.on{opacity:1;transition:none} #fbMap .fp.on rect{fill:var(--cl)} #fbMap .fp.on.o rect{fill:var(--bg);stroke:var(--cl);stroke-width:2.2}
.fbx.hov #fbMap .fp{opacity:var(--fbdim,.13)} .fp.lit rect{fill:var(--cl)} .fp.lit.o rect{fill:var(--bg);stroke:var(--cl);stroke-width:2.2} .fbo{fill:var(--ink);opacity:.5}
#fbHov,#fbOct{animation:fbin 150ms var(--ease-out)} @keyframes fbin{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){#fbHov,#fbOct{animation:none}}
.n.fc.hv .hd{fill:var(--cl);stroke:var(--cl)} .n.fc.hv.o .hd{fill:var(--panel);stroke:var(--cl);stroke-width:2.6} .n.fc.gh.hv .hd{fill:var(--cl);stroke:var(--cl)} .n.fc.gh.hv text.nt{fill:var(--ct)}

.brs{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fx{fill:var(--ink);font-family:var(--f-mono);font-weight:600;pointer-events:none}
.chord{stroke:var(--muted);stroke-width:2;stroke-linecap:round;opacity:.5}
.bl{stroke:var(--grid);stroke-width:1}
.tq{fill:none;stroke:var(--tu);stroke-width:1;opacity:.75} .tq.odd{stroke:var(--muted)} .tqn{fill:var(--tu);font-family:var(--f-mono);font-size:10px;font-weight:600} .tqn.odd{fill:var(--muted)}
.pmk{fill:var(--muted);font-family:var(--f-mono);font-size:10px;font-weight:600} .pml{stroke:var(--faint);stroke-width:1.2;stroke-dasharray:3 3} .pml.e{stroke-dasharray:none}
.strip{fill:var(--bg);stroke:var(--line)}
.slot{fill:var(--head);opacity:.13;pointer-events:none}
.ecur line{stroke:var(--st);stroke-width:2} .ecur path{fill:var(--st);stroke:var(--st);stroke-width:1.5;stroke-linejoin:round} .lanebox .pha{fill:var(--head);stroke:var(--head);stroke-width:1.5;stroke-linejoin:round} .lanebox .hov path{fill:var(--ink);opacity:.28} .lanebox .hov.dim path{opacity:.14} .playing .ecur{opacity:.35}
.tk{fill:var(--ink)} .tk.h2{fill:var(--h2)} .tk.h3{fill:var(--h3)} .tk.ht{fill:var(--tu)} .tk.h5{fill:var(--h5)} .tk.g{fill:var(--gr)} .tk.on{fill:var(--head)}
.n.fc .hd{fill:var(--c);stroke:var(--c)} .n.fc text.nt{fill:var(--ct)}
.n:not(.fc):not(.t):not(.g) .hd{fill:var(--chip);stroke:var(--chip-line)} .n:not(.fc):not(.t):not(.g) text{fill:var(--ink)} .n:not(.fc):not(.t):not(.g) .tl{fill:var(--chip-tail);stroke:var(--chip-line)}
.n .bt{fill:none;stroke:none} .n.fc .tl{fill:var(--cb);stroke:var(--c)} .n.fc .bo{stroke:var(--c)} .n.fc .bi{stroke:var(--panel)} .n.fc .bt{stroke:var(--cb)} .n.fc .sl{stroke:var(--c)}
.n.fc.o .hd{fill:var(--panel);stroke:var(--c);stroke-width:2.2} .n.fc.o text.nt{fill:var(--ink)}
.n.fc.on .tl{fill:var(--c)} .n.fc.on .bt{stroke:var(--c)}
.fkey{display:flex;flex-wrap:wrap;align-items:center;gap:3px;font-family:var(--f-mono);font-size:11px;font-weight:600}
.fkey span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;border-radius:4px;padding:0 3px}
.n .bo{fill:none;stroke:var(--st-line)} .n .bi{fill:none;stroke:var(--st-bg)} .n.t .bo{stroke:var(--tu-line)} .n.t .bi{stroke:var(--tu-bg)}
.n.on .bi{stroke:var(--st)} .n.t.on .bi{stroke:var(--tu)}
.n .ink{fill:none;stroke:var(--muted);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.n .sl{fill:none;stroke:var(--st);stroke-width:2;stroke-linecap:round} .n.t .sl{stroke:var(--tu)}
.n .lb{fill:var(--muted);font-family:var(--f-mono);font-weight:600;pointer-events:none}
.tz{fill:var(--tu);font-family:var(--f-mono);font-size:10.5px;font-weight:600}
/* counting row: played = bold, full colour, slightly larger; silent = thin, small, in --faint (readable, never "count this"; #35) */
.cl{fill:var(--faint);font-family:var(--f-mono);font-size:9.5px;font-weight:300}
.cl.b{fill:var(--ink);font-size:12px;font-weight:600}
.cl.hit{fill:var(--ink);font-weight:700;font-size:11px} .cl.b.hit{font-size:13.5px}
.cl.b.miss{opacity:.3;font-weight:300}
.hitdot{fill:var(--ink)}
/* played syllables all in ink, one colour code on the tab (frets only): beat numbers heavier, e & a lighter (#41) */ .cl.hit:not(.b){font-weight:500} .cl.b.hit{font-weight:800} .cl.on,.hitdot.on{fill:var(--head);opacity:1}
.nt{font-family:var(--f-mono);font-weight:600;pointer-events:none;font-variant-numeric:tabular-nums slashed-zero}
.sn{fill:var(--faint);font-family:var(--f-mono);font-size:10.5px}
.bn{fill:var(--muted);font-family:var(--f-mono);font-size:10.5px}
.sec{fill:var(--ink);font-family:var(--f-display);font-size:12px;font-weight:700}
.hint{font-size:12px;color:var(--faint)}
.pmt{fill:var(--muted);font-family:var(--f-mono);font-weight:600;pointer-events:none}
.pml{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3}
 .lb.mk{font-weight:600}
.loopinfo{font-size:13px;color:var(--st);font-weight:600}
.lsel{fill:var(--st);opacity:.09;pointer-events:none} .lbar{fill:var(--st);pointer-events:none}
.lanebox{cursor:text}.lanebox svg{cursor:inherit;user-select:none;-webkit-user-select:none} /* a text cursor over the tab: click to place the playhead, drag to choose a loop (board #139); app.js sets ew-resize at a loop's edge */
.ch{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.ch{flex-wrap:nowrap}.ch input[type=range]{flex:1;min-width:60px;width:auto}
.vol{font-size:12px;min-width:34px;color:var(--ink)}
.mute{width:26px;height:24px;padding:0;font-family:var(--f-mono);font-size:12px;font-weight:600}
.mute[aria-pressed="true"]{background:var(--head);border-color:var(--head);color:var(--on)}

/* Layout: a clean practice space. Thin top strip (song, track, sections), the tab fills the screen, a slim transport bar at the bottom. */
.app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
.top{display:flex;align-items:center;gap:24px;min-width:0;background:var(--panel);border-bottom:var(--lw-hair) solid var(--line);padding:10px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px))}
.brand{font-family:var(--f-display);font-weight:700;font-size:16px;white-space:nowrap;letter-spacing:-.01em}
.top .song{margin:0;font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topr{display:flex;gap:8px;align-items:center;flex:none}
.ttabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:0 max(14px,env(safe-area-inset-left,0px));margin-bottom:-1px;position:relative;z-index:1}
.ttabs::-webkit-scrollbar{display:none}
.ttabs:empty{padding:0;height:0;overflow:hidden}
.ttab{border:var(--lw-hair) solid transparent;border-bottom:0;border-radius:8px 8px 0 0;background:transparent;color:var(--muted);padding:7px 14px 8px;font-weight:500;white-space:nowrap}
.tun{font-size:12.5px;color:var(--muted);white-space:nowrap}
.tun.odd{color:var(--ink);font-weight:600}
.tunw{position:relative;display:inline-flex;align-items:center} .tunb .tch{width:10px;height:10px;margin-left:5px;vertical-align:-1px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tunb{border:0;background:transparent;font:inherit;padding:6px 8px;margin:0 -8px;border-radius:8px;cursor:pointer}
@media (hover:hover){.tunb:hover{background:var(--zebra)}} .tunb[aria-expanded="true"]{background:var(--zebra)} .tsh{color:var(--muted);font-weight:500}
.trkmenu.tunmenu{top:38px;width:300px;box-sizing:border-box;padding:16px;border-radius:10px;display:flex;flex-direction:column;gap:12px} /* the tuning knob (#97, #99) */
.tunmenu .cph{font-size:14px;line-height:20px}
.tunmenu .tkrow{display:flex;align-items:center;gap:16px}
.tunmenu .knob{width:92px;height:92px;flex:none;cursor:ns-resize;touch-action:none;border-radius:50%}
.tunmenu .knob:focus{outline:none} .tunmenu .knob:focus-visible{outline:2px solid var(--st);outline-offset:2px}
.tunmenu .tk{stroke:var(--line-strong);stroke-width:var(--lw-reg);stroke-linecap:round} .tunmenu .tk.w{stroke:var(--muted)}
.tunmenu .tk.z{stroke:var(--ink);stroke-width:var(--lw-strong)} .tunmenu .tk.on{stroke:var(--st);stroke-width:var(--lw-strong)}
.tunmenu .hit{fill:transparent;cursor:pointer}
.tunmenu .cap{fill:var(--bg);stroke:var(--line-strong);stroke-width:var(--lw-hair)}
.tunmenu .ptr{stroke:var(--ink);stroke-width:var(--lw-strong);stroke-linecap:round}
.tunmenu .arc{fill:none;stroke:var(--st);stroke-width:var(--lw-strong);stroke-linecap:round}
.tunmenu .tkval{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tunmenu .tkval b{font-size:14px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums}
.tunmenu .tkval span{font-size:12.5px;line-height:17px;color:var(--muted)}
.tunmenu .tkbtns{display:flex;gap:8px;margin-top:4px}
.tunmenu .tkbtns button{height:32px;min-width:32px;padding:0 8px;white-space:nowrap} .tunmenu .tkbtns button:disabled{color:var(--faint);cursor:default}
.tunmenu .tkfoot{margin:0;font-size:12.5px;line-height:17px;color:var(--faint)}
.ttab .tun{font-size:11.5px;margin-left:4px}
.ttab:hover{color:var(--ink);border-color:transparent}
.ttab[aria-selected="true"]{background:var(--panel);border-color:var(--line);color:var(--ink);font-weight:600}
#pick:not(.primary){background:var(--bg)}
.secs{display:flex;gap:6px;overflow-x:auto;padding:2px max(16px,env(safe-area-inset-left,0px)) 8px;scrollbar-width:none}
.secs::-webkit-scrollbar{display:none}
.secs:empty{padding:0;height:0;overflow:hidden}
.secs .chip{white-space:nowrap}
/* header: song on the left, track picker + open on the right */
.top .song{color:var(--muted)} .top .song b{color:var(--ink)}
.top .song b{font-weight:700;font-size:16px}
.trkw{position:relative}
.trk{display:inline-flex;align-items:center;gap:7px;height:34px;max-width:min(320px,34vw);padding:0 9px 0 10px;border-color:transparent;border-radius:8px;background:transparent;font-weight:500;color:var(--ink)}
.trk:hover,.trk[aria-expanded="true"]{background:var(--zebra);border-color:var(--line)}
.trk #trkName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk small{color:var(--muted);font-weight:400;margin-left:6px}
.trk svg{width:12px;height:12px;flex:none;stroke:var(--muted);fill:none;stroke-width:2}
.trkmenu{position:absolute;left:0;top:40px;width:330px;max-width:calc(100vw - 24px);max-height:min(70dvh,560px);overflow:auto;background:var(--panel);border:var(--lw-hair) solid var(--line-strong);border-radius:12px;padding:6px;box-shadow:0 18px 50px rgba(0,0,0,.28);z-index:30}
.trkmenu .grp{font-size:12px;font-weight:600;color:var(--faint);padding:10px 10px 4px}
.trkmenu .it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:8px;font-weight:500}
.trkmenu .it:hover,.trkmenu .it:focus-visible{background:var(--zebra);outline:none}
.trkmenu .it[aria-checked="true"]{background:var(--st-bg);font-weight:600}
.trkmenu .it[aria-checked="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--st);flex:none}
.trkmenu .it .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trkmenu .it .tn{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.trkmenu .dim{color:var(--muted)}
.exw{position:relative;display:inline-flex} .exmenu{left:auto;right:0;top:44px;width:260px} .exmenu .it.ex .nm{display:flex;flex-direction:column;gap:2px;white-space:normal} .exmenu .it.ex{align-items:flex-start;gap:12px;padding:10px 12px} .exi{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s} .exi .ph{stroke:var(--head)} .exmenu .it.ex:hover .exi,.exmenu .it.ex:focus-visible .exi{stroke:var(--ink)} .exmenu small{font-size:12px;font-weight:400;color:var(--muted)}
.pdfdlg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:color-mix(in oklab,var(--bg) 55%,transparent);backdrop-filter:blur(3px)}
.pdfdlg[hidden]{display:none}
.pdfbox{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;width:min(1080px,100%);max-height:calc(100dvh - 48px);grid-template-rows:minmax(0,1fr);background:var(--panel);border:var(--lw-hair) solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.3);overflow:hidden}
.pfform{display:flex;flex-direction:column;gap:14px;padding:20px 4px 20px 22px;overflow:auto;min-width:0;box-sizing:border-box}
.pfhd{display:flex;justify-content:space-between;align-items:center} .pfhd h2{margin:0;font:600 18px var(--f-display)}
.pfform fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .pfform legend{font-size:12.5px;font-weight:600;color:var(--muted);padding:0;margin-bottom:6px}
.pfform label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)} .pfform label.tog{flex-direction:row;align-items:center;gap:9px;color:var(--ink);font-size:13.5px}
.pfform input[type=text],.pfform select{width:100%;box-sizing:border-box;font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:var(--lw-hair) solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
.pfform input[type=text]:focus-visible,.pfform select:focus-visible{outline:2px solid var(--st);outline-offset:1px}
.pf2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pf3{display:grid;grid-template-columns:1.3fr 1.3fr 1fr;gap:10px}
.pfnote:empty{display:none} .pfnote{margin:0;font-size:12px;color:var(--muted);line-height:1.45} .pfnote a{color:var(--ink)}
.pfft{display:flex;align-items:center;gap:10px;position:sticky;bottom:0;z-index:1;margin:0 0 -20px;padding:12px 0 20px;background:var(--panel)} /* the form scrolls, this row stays at the bottom (design system: dialogs fit, the button row doesn't scroll) */ .pfft span{flex:1;font-size:12.5px;color:var(--muted)}
.pfprev{background:var(--zebra);display:flex;justify-content:center;align-items:flex-start;padding:22px;overflow:auto}
.pfpw{position:relative;flex:none;box-shadow:0 8px 28px rgba(0,0,0,.18);border-radius:2px;overflow:hidden;background:#fff} .pfpw iframe{border:0;transform-origin:0 0;position:absolute;left:0;top:0;pointer-events:none;background:#fff}
@media (max-width:820px){.pdfbox{grid-template-columns:1fr;grid-template-rows:none;overflow:auto}.pfprev{order:-1;max-height:46dvh}.pfform{padding:16px;overflow:visible}.pfft{margin-bottom:-16px;padding-bottom:16px}}
.trkmenu .itr{display:flex;align-items:center;gap:2px} .trkmenu .itr .it{flex:1;min-width:0}
.trkmenu .hear{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--faint);cursor:pointer}
.trkmenu .hear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trkmenu .hear.me{color:var(--muted);cursor:default;opacity:.6} .trkmenu .hear[aria-pressed="true"]{color:var(--st);background:var(--st-bg)}
@media (hover:hover){.trkmenu button.hear:hover{color:var(--ink);background:var(--zebra)} .trkmenu button.hear[aria-pressed="true"]:hover{color:var(--st);background:var(--st-bg)}}
.trkp{font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.trkmenu .more{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--faint);padding:8px 10px;font-size:13px;border-radius:8px}
.trkmenu .more:hover{color:var(--ink)}
.trkmenu .foot{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 4px;color:var(--faint);font-size:12.5px;border-top:var(--lw-hair) solid var(--line);margin-top:4px}
#pick{display:inline-flex;align-items:center;gap:7px;height:36px;border-radius:9px}
#pick svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
#pick.primary svg{display:none}
#pick:not(.primary){width:36px;padding:0;justify-content:center;color:var(--muted);border-color:var(--line-strong)}
#pick:not(.primary) .tx{display:none}
/* song map: one segment per section, sized by length */
.smap{position:relative;height:34px;margin:0 max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.smap:empty{height:0;margin-bottom:0}
.smap .segs{position:absolute;left:0;right:0;top:17px;height:10px;display:flex;gap:3px}
/* parts panel */
.pop.parts{width:340px}
.parts .phd{display:flex;align-items:baseline;gap:8px;margin:0 0 4px}
.parts .phd h3{margin:0;font:600 15px var(--f-display);color:var(--ink)}
.parts .phd span{font-size:12.5px;color:var(--muted)}
.parts .psum{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.45}
.parts .psum b{color:var(--ink);font-weight:600}
.parts .prow{position:relative;display:grid;grid-template-columns:28px 1fr auto;gap:5px 12px;align-items:center;padding:11px 10px;margin:0 -10px;border-radius:10px;cursor:pointer;outline:none;transition:background var(--dur-hover,160ms) var(--ease-out)}
.parts .prow:hover{background:color-mix(in oklab,var(--ink) 4%,transparent)}
.parts .prow:focus-visible{box-shadow:0 0 0 2px var(--st-line)}
.parts .prow.cur::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2.5px;border-radius:2px;background:var(--st)}
.parts .prow.sel{background:color-mix(in oklab,var(--st) 12%,transparent)}
.parts .plt{grid-row:1/3;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:650 14px var(--f-display);background:var(--chip);color:var(--ink);transition:background var(--dur-hover,160ms),color var(--dur-hover,160ms)}
.parts .prow.sel .plt{background:var(--st);color:var(--on)}
.parts .pmeta{font-size:13px;color:var(--ink);font-weight:550;display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.parts .pmeta .m{color:var(--muted);font-weight:400;font-size:12.5px}
.parts .fp{grid-column:2/4;height:26px;display:block;width:100%}
.parts .fp .bl{stroke:var(--line-strong);stroke-width:1}.parts .fp .bt{stroke:var(--line);stroke-width:1}
.parts .fp .n{fill:var(--ink);opacity:.78}.parts .fp .nx{stroke:var(--muted);stroke-width:1.2;fill:none}
.parts .prow.sel .fp .n{fill:var(--st);opacity:1}
.parts .pwh{grid-column:2/4;display:flex;flex-wrap:wrap;gap:5px}
.parts .pwh button{font:500 11.5px var(--f-mono);color:var(--muted);background:var(--panel);border:var(--lw-hair) solid var(--line);border-radius:6px;padding:2px 7px;cursor:pointer;transition:color var(--dur-hover,160ms),border-color var(--dur-hover,160ms)}
.parts .pwh button:hover{color:var(--ink);border-color:var(--line-strong)}
.parts .pwh button em{font-style:normal;color:var(--st)}
.parts .pchk{width:22px;height:22px;padding:0;border-radius:50%;border:var(--lw-reg) solid var(--line-strong);background:transparent;display:grid;place-items:center;cursor:pointer}
.parts .pchk:hover{border-color:var(--ink)}
.parts .pchk.on{background:var(--ink);border-color:var(--ink)}
.parts .pchk.on::after{content:"";width:8px;height:4.5px;border:solid var(--panel);border-width:0 0 1.8px 1.8px;transform:translateY(-1px) rotate(-45deg)}
.parts .ploop{grid-column:2/4;font-size:12px;color:var(--st);display:flex;align-items:center;gap:6px}
.parts .ploop[hidden]{display:none}
.parts .pcyc{grid-column:2/4;font-size:12px;color:var(--muted);line-height:1.4}.parts .pcyc b{color:var(--ink);font-weight:550}
.parts .psep{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:16px 0 8px}
.parts .pfills{grid-column:auto}
.smap .seg.rf{height:14px;margin-top:-2px;display:grid;place-items:center}
.smap .seg.rf>span{position:relative;z-index:1;font:650 9.5px var(--f-display);color:var(--muted);letter-spacing:.02em;pointer-events:none}
.smap .seg.rf.cur>span{color:var(--ink)}
.smap .seg.rest{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.smap .seg.fl{background:color-mix(in oklab,var(--line) 55%,transparent)}
.smap .seg{position:relative;height:10px;min-width:4px;border-radius:3px;background:var(--line);overflow:hidden}
.smap .seg.done{background:color-mix(in oklab,var(--st) 26%,var(--line))}
.smap .seg.cur{background:color-mix(in oklab,var(--st) 26%,var(--line))}
.smap .seg:hover{background:var(--line-strong)}
.smap .fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--st)}
.smap .lab{position:absolute;top:0;text-transform:none;letter-spacing:0;margin:0;font-size:12px;font-weight:600;color:var(--st);white-space:nowrap;pointer-events:none}
.dg{display:inline-block;width:.6em;text-align:center;font-style:normal}
/* bar meter */
.top,.deck{-webkit-user-select:none;user-select:none} /* app chrome, not text: dragging a loop never highlights it */
.idn{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.top .song{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idn .tun{white-space:nowrap;color:var(--muted);font-size:13px}.idn .tun.odd{color:var(--ink);font-weight:600}
.meter{flex:1 1 0;min-width:0;padding-left:24px;display:flex;align-items:center;gap:16px;color:var(--muted);font-size:14px;white-space:nowrap}
.meter .mread{display:flex;align-items:center;gap:14px;justify-content:flex-end}
.meter .tsig{display:inline-grid;line-height:.92;text-align:center;color:var(--ink);font-size:17px}.meter .tsig b{font-weight:600}
.meter .mmark{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-size:16px;font-weight:500}
.meter .mmark svg{fill:var(--ink);stroke:var(--ink);stroke-width:1.1;margin-top:-1px}.meter .mmark .eq{color:var(--faint);font-weight:400}
.mstrip{display:block;overflow:visible;flex:1 1 0;min-width:200px;height:76px}
.mstrip .mbn{font-size:7.5px;font-weight:600;fill:var(--faint);font-family:var(--f-mono)}
.mstrip .mn{color:var(--ink);opacity:.9;transition:opacity 260ms var(--ease-out)}
.mstrip .mhd,.mstrip .mdot{fill:currentColor}.mstrip .mho{fill:none;stroke:currentColor;stroke-width:1.05}
.mstrip .mst,.mstrip .mx{stroke:currentColor;stroke-width:1.05;stroke-linecap:round}
.mstrip .mfl{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round}
.mstrip .mtie{fill:none;stroke:currentColor;stroke-width:.85;stroke-linecap:round}
.mstrip .mr{color:var(--muted)}.mstrip .mr rect,.mstrip .mr circle{fill:currentColor}.mstrip .mr .rq,.mstrip .mr .rs{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.mstrip .mn.on{color:var(--st);opacity:1;transition:none}
.mstrip .mn.past,.mstrip .mbm.past{opacity:.26}
.mstrip .mbm{stroke:var(--ink);stroke-width:1.9;opacity:.9;transition:opacity 260ms var(--ease-out)}
.mstrip .mbr{stroke-width:.7;fill:none;opacity:.7}.mstrip .mbr .mtu{fill:var(--muted)}
.mstrip .mtu{stroke:none;font-size:5.4px;font-weight:600;fill:var(--muted);font-family:var(--f-mono)}
.mstrip .mbl{stroke:var(--line-strong);stroke-width:.9}
.mstrip .mbnum{font-size:4.6px;fill:var(--faint);font-family:var(--f-mono)}
.mstrip .mbn.d{fill:var(--muted);font-weight:700}
.mstrip .mpu{fill:var(--faint);opacity:.6;transform-box:fill-box;transform-origin:center;transition:fill 300ms var(--ease-out),opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}.mstrip .mpu.d{fill:var(--ink);opacity:.75}.mstrip .mpu.on{fill:var(--st);opacity:1;transform:scale(1.35);transition:none}
.mstrip .msy{font-size:6.2px;font-weight:500;fill:var(--faint);opacity:.5;font-family:var(--f-mono);transition:fill 220ms var(--ease-out),opacity 220ms var(--ease-out)}
.mstrip .msy.b{font-size:7.4px;font-weight:600;opacity:.75}
.mstrip .msy.hit{fill:var(--ink);opacity:1;font-weight:700}
.mstrip .msy.hit.h2{fill:var(--h2)}.mstrip .msy.hit.h3{fill:var(--h3)}.mstrip .msy.hit.ht{fill:var(--tu)}.mstrip .msy.hit.h5{fill:var(--h5)}
.mstrip .msy.now{fill:var(--st);opacity:1;font-weight:700;transition:none}
.mstrip .mph{stroke:var(--head);stroke-width:1.5;stroke-linecap:round}
.mstrip .mlamp{fill:none;stroke:var(--line-strong);stroke-width:1.5}.mstrip .mlamp.on{fill:var(--st);stroke:var(--st)}
.mstrip .mlt{font-size:9px;fill:var(--faint);font-family:var(--f-mono)}
html[data-scene] #mStrip{display:none} /* a scene is chosen: never show the notation strip while the script loads (index.html sets data-scene before the first paint) */
@media (max-width:1380px){.mstrip{height:64px}}
@media (max-width:1200px){.mstrip{height:52px}.meter{gap:12px}}
@media (max-width:1000px){.mstrip{height:42px}}
@media (max-width:900px){.meter{display:none}.top{grid-template-columns:minmax(0,1fr) auto;}}
@media (min-width:901px){#bpmLbl{display:none}.tb.val{min-width:56px}}
@media (prefers-reduced-motion:reduce){.mstrip .mn,.mstrip .mbm{transition:none}}
.smap .mpos{position:absolute;right:0;top:0;font-size:12px;color:var(--faint);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.smap .lab.nx{color:var(--faint);font-weight:400}
.smap .mph{position:absolute;top:13px;width:2px;height:18px;margin-left:-1px;border-radius:1px;background:var(--head);pointer-events:none}
.smap.pm .seg .fill{display:none}.smap.pm .seg.done,.smap.pm .seg.cur{background:var(--line)}
.smap.pm .seg.lrn{background:color-mix(in oklab,var(--ink) 70%,transparent)}.smap.pm .seg.lrn>span{color:var(--panel)}
.smap.pm .seg.rest{background:transparent;box-shadow:none}.smap .seg.nolab>span{display:none}.smap.pm .seg.fl.lrn{background:color-mix(in oklab,var(--ink) 45%,transparent)}
.smap .mpos .mlp{font-weight:600;color:var(--ink)}
.parts .pprog{font-size:12.5px;color:var(--muted);margin:0 0 6px}.parts .pprog b{color:var(--ink);font-weight:600}
.parts .psep{display:flex;align-items:center;justify-content:space-between}.parts .pchk.sm{width:18px;height:18px}.parts .pchk.sm.on::after{width:7px;height:4px}
:root{--ok:oklch(0.60 0.105 150)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ok:oklch(0.74 0.095 150)}}:root[data-theme=dark]{--ok:oklch(0.74 0.095 150)}
.smap .seg .lf{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--ok);opacity:.85;transition:height var(--dur-pop-in,240ms) var(--ease-out)} /* fills upward like a level: speed, not how far into the part */
.smap.pm .seg.lpart .lf{opacity:.6}.smap.pm .seg.lpart>span{color:var(--ink)}.smap.pm .seg.lrn{background:var(--line)}.smap.pm .seg.lrn .lf{opacity:1}.smap.pm .seg.lrn>span{color:var(--on)}
.parts .pchk.on{background:var(--ok);border-color:var(--ok)}.parts .pchk.on::after{border-color:var(--on)}
.parts .pchk.half{border-color:var(--ok);background:color-mix(in oklab,var(--ok) 16%,transparent)}.parts .pchk.half::after{content:"";width:8px;height:4.5px;border:solid var(--ok);border-width:0 0 1.8px 1.8px;transform:translateY(-1px) rotate(-45deg)}
.parts .pchk.sm.half::after{width:7px;height:4px}
.parts .pok{font-size:12px;font-weight:550;color:color-mix(in oklab,var(--ok) 80%,var(--ink))}.parts .pok.full{color:var(--ok)}
.smap .mocc{position:absolute;left:0;right:0;top:30px;height:4px}
.smap .mocc i{position:absolute;top:0;height:3px;border-radius:2px;background:var(--st);opacity:.45;cursor:pointer;transition:opacity var(--dur-hover,160ms)}
.smap .mocc i:hover{opacity:.8}.smap .mocc i.on{opacity:1}
.smap .mocc i::before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-4px}
.ctxveil{fill:var(--bg);opacity:.62;pointer-events:none}
.smap .mloop{position:absolute;top:29px;height:5px;border:var(--lw-strong) solid var(--tu);border-top:0;border-radius:0 0 3px 3px;pointer-events:none}
.smap .mtip{position:absolute;bottom:22px;transform:translateX(-50%);background:var(--btn);color:var(--btn-ink);font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:5}

.main{min-height:0;overflow:auto;padding:0 max(12px,env(safe-area-inset-right,0px)) 12px max(12px,env(safe-area-inset-left,0px))}
.bar{display:flex;align-items:center;gap:6px;min-width:0;background:var(--panel);border-top:var(--lw-hair) solid var(--line);
  padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.tb{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:8px;white-space:nowrap;min-width:0}
.tb svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb .fill{fill:currentColor;stroke:none}
.tb.icon{width:38px;padding:0;justify-content:center;flex:none}
.tb.play{background:var(--btn);color:var(--btn-ink);border-color:var(--btn);min-width:100px;justify-content:center;font-weight:600;flex:none}
.tb[aria-pressed="true"],.tb[aria-expanded="true"]{background:var(--st-bg);border-color:var(--st-line);color:var(--st)}
#loopLbl{overflow:hidden;text-overflow:ellipsis;max-width:180px}
.tempo{display:flex;align-items:center;gap:2px;flex:none}
.tb.sm{width:32px}
.tb.val{flex-direction:column;justify-content:center;gap:0;padding:0 8px;min-width:62px;line-height:1.05}
.tb.val .mono{font-size:13.5px;font-weight:600}
.tb.val.mod .mono{color:var(--st)}
.tb.val .bpm{font-size:10.5px;font-weight:500;color:var(--muted)}
.tb[aria-expanded="true"] .bpm{color:inherit}
.ci{font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:-.04em}
.blend{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);flex:none}
.blend input{width:150px;margin:0;accent-color:var(--st);background:transparent}
.blend.off{opacity:.38}
.mgroup{display:flex;align-items:center;flex:none;border:var(--lw-hair) solid var(--line);border-radius:9px;background:var(--bg)}
.mgroup .tb.icon{border:0;border-radius:8px 0 0 8px}
#clickBtn{transition:background-color .22s ease-out,color .22s ease-out}
#clickBtn.pulse{transition:none}
#clickBtn.pulse1{transition:none}
#blendBar{padding:0 10px 0 6px;height:38px}
.bwrap{position:relative;display:flex;align-items:center}
.bmid{position:absolute;left:50%;top:50%;width:2px;height:12px;margin:-6px 0 0 -1px;background:var(--line-strong);border-radius:1px;pointer-events:none;z-index:0}
.bwrap input{position:relative;z-index:1}
.blendrow{display:flex}
.deck .mgroup{display:none} /* metronome on/off and the guitar/click balance live in Settings: fewer controls on the deck */
.blendrow .blend{flex:1}.blendrow .bwrap{flex:1}.blendrow .blend input{width:100%}
@media (max-width:1040px){#blendBar{display:none}.blendrow{display:flex}.mgroup{border:0;background:none}.mgroup .tb.icon{border:var(--lw-hair) solid var(--line);border-radius:8px}}
.hsect{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:var(--lw-hair) solid var(--line)}
.keys.kb{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;padding-left:0;list-style:none}
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.kgrid>div{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);min-width:0}
.kgrid svg{flex:none;width:76px;height:34px;overflow:visible}
.kgrid b{color:var(--ink);font-weight:600}
@media (max-width:560px){.kgrid,.keys.kb{grid-template-columns:1fr}}
.bar .status{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* deck: map on top, then three zones: sound (left) · transport (centre) · app (right) */
.bar.deck{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:2px;align-items:center;padding-top:6px}
.deck .smap{grid-column:1/-1;margin:0 0 4px} .smap[hidden],#partsBtn,#partsPop,#learnBtn,#rhythmBtn{display:none!important}
.deck .tline{grid-column:1/-1;position:relative;height:54px;margin:0 0 2px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.tlsec{position:absolute;left:0;right:0;top:0;height:52px;pointer-events:none}
.tlsec span{position:absolute;top:0;height:52px} .tlsec i{position:absolute;left:0;top:14px;bottom:0;width:1px;background:var(--line);opacity:.6} .tlsec em{position:absolute;left:4px;top:0;font:400 11px/13px var(--f-body);font-style:normal;color:var(--faint);white-space:nowrap}
#tlCv{position:absolute;left:0;top:17px;display:block}
.tlloop,.tlsel{position:absolute;top:15px;height:38px;border-radius:3px;background:color-mix(in oklab,var(--st) 16%,transparent);pointer-events:none} .tlsel{background:color-mix(in oklab,var(--st) 22%,transparent)}
/* loop = spotlight: the rest of the song fades back; the edges show (and can be dragged) when you point at them */
.tline .tlloop{background:none;top:13px;height:42px}
.tlout{position:absolute;top:15px;height:40px;background:color-mix(in oklab,var(--panel) 64%,transparent);pointer-events:none}
.tlout[hidden]{display:none}
.tline.spot .tlrest{display:none}
/* no section names in the file: drop the label row so the landscape sits tight */
.deck .tline.nosec{height:44px}
.tline.nosec #tlCv{top:5px}
.bar.deck:has(>.tline.nosec){padding-top:3px} /* board #55: without the label row the bar's top padding was an empty band between the fretboard and the timeline's sun */ .tline.nosec .tlloop,.tline.nosec .tlph,.tline.nosec .tlhov{top:1px} .tline.nosec .tlout,.tline.nosec .tlrest,.tline.nosec .tlsel{top:3px}
.tlloop::before,.tlloop::after{content:"";position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;border-radius:1px;background:var(--st);opacity:0;transition:opacity 120ms var(--ease-out,ease-out)}
.tlloop::before{left:0} .tlloop::after{left:100%}
.tlloop.in::before,.tlloop.in::after{opacity:.5}
.tlloop.ea::before,.tlloop.eb::after{opacity:1;width:3px;margin-left:-1.5px}
.tlph{position:absolute;top:13px;width:2px;height:36px;margin-left:-1px;border-radius:1px;background:var(--st);pointer-events:none;z-index:2}
.tlph::before{content:"";position:absolute;left:50%;top:-3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--st);box-shadow:0 0 0 2px var(--panel)}
/* the part still to come is faded, so the bar reads as progress through the song */
.tlrest{position:absolute;top:15px;right:0;height:40px;background:color-mix(in oklab,var(--panel) 58%,transparent);pointer-events:none}
/* the timeline reads as a control (board #42): a hairline track under the notes' shape, the amber handle (.tlph) riding on it, the coming part paled (.tlrest) */
.tline::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--line-strong);pointer-events:none}
.tline.nosec::after{bottom:6px}
.tlsec span.nb i{top:15px;opacity:.45} .tlsec span.nb em{font-variant-numeric:tabular-nums}
.tlhov{position:absolute;top:13px;width:1.5px;height:42px;margin-left:-.75px;background:color-mix(in oklab,var(--ink) 70%,transparent);pointer-events:none}
.tlcard{position:absolute;bottom:60px;z-index:30;box-sizing:border-box;padding:10px 10px 6px;border-radius:12px;background:var(--panel);box-shadow:0 10px 30px oklch(0.1 0.01 70 / .35),0 0 0 1px var(--line);pointer-events:none;animation:none}
@keyframes tlin{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.tlcard{animation:none}}
.tlch{display:flex;gap:10px;align-items:baseline;font-size:13px;padding:0 4px 4px;color:var(--muted)} .tlch b{color:var(--ink);font-weight:600}
.tlch .tlhint{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap}
.tmS{stroke:var(--line)} .tmB{stroke:var(--line-strong);stroke-width:1.2} .tmK{fill:var(--faint);font:500 9px var(--f-mono)} .tmT{stroke:var(--cb);stroke-width:2;stroke-linecap:round}
.tmC rect{fill:var(--c)} .tmC text{fill:var(--ct);font:600 9.5px var(--f-mono)} .tmC.o rect{fill:var(--panel);stroke:var(--c);stroke-width:1.5} .tmC.o text{fill:var(--ink)} .tmC.gh rect{fill:var(--cg)} .tmC.gh text{fill:var(--cgt)}
.tmX rect{fill:var(--chip)} .tmX text{fill:var(--muted);font:600 9px var(--f-mono)}
.deck .zone{display:flex;align-items:center;gap:6px;min-width:0}
.deck .zl{justify-self:start}.deck .zc{justify-self:center;gap:8px}.deck .zr{justify-self:end}
.deck .zr .status{margin-right:6px}
.pop{position:fixed;bottom:calc(var(--deckH,64px) + 8px);left:16px;width:300px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 150px);overflow:auto;
  background:var(--panel);border:var(--lw-hair) solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:14px;display:flex;flex-direction:column;gap:10px;z-index:30}
.pop.right{left:auto;right:12px;width:320px;top:calc(var(--topH,56px) + 4px);max-height:none;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.pop .blk:first-child{border-top:0;padding-top:0}
.pophead{display:flex;align-items:baseline;justify-content:space-between}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}
.sheet{background:var(--panel);border:var(--lw-hair) solid var(--line);border-radius:12px;max-width:580px;width:100%;max-height:86dvh;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.sheet h2{font-family:var(--f-display);font-size:18px;margin:0}
.toast{position:fixed;top:calc(var(--topH,56px) + 8px);left:50%;transform:translateX(-50%);z-index:35;max-width:min(560px,calc(100vw - 32px));background:var(--panel);border:var(--lw-hair) solid var(--line);
  border-radius:8px;padding:8px 12px;font-size:13px;color:var(--muted);box-shadow:0 6px 20px rgba(0,0,0,.12);cursor:pointer}
.followbtn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--deckH,66px) + 10px);z-index:25;border-radius:999px;padding:6px 14px;background:var(--panel);box-shadow:0 6px 18px rgba(0,0,0,.15);font-weight:600}
.toast.bad{color:var(--head);border-color:var(--head)}
body.dropping .lanebox{outline:2px dashed var(--st);outline-offset:-2px}
@media (max-width:900px){.bar.deck{grid-template-columns:auto 1fr auto;column-gap:8px}.deck .zc{justify-self:center}}
@media (max-width:640px){#countBtn,#rhythmBtn{width:34px;padding:0;justify-content:center}.tb.icon{width:34px}.tb.sm{width:28px}.tb.play{min-width:40px}#loopLbl{display:none}.bar{gap:4px}.tb.val{min-width:48px;padding:0 3px}.brand{display:none}.tb .tx{display:none}.tb.play{min-width:46px}.tb{padding:0 10px}#loopLbl{max-width:110px}.top{gap:8px}.bar .status{display:none}#fbBtn{width:44px;height:44px;padding:0;justify-content:center}}

/* ===== Motion: calm and seamless. Only opacity and a few px of movement; soft curves that start gently (a curve that did 43% of a fade
   in the first frame read as a pop); things leave a little faster than they arrive; nothing animates on keyboard actions ===== */
:root{--dur-press:100ms;--dur-tip:160ms;--dur-hover:180ms;--dur-pop-in:220ms;--dur-pop-out:160ms;--dur-modal-in:280ms;--dur-modal-out:200ms;--dur-view:200ms;
  --ease-out:cubic-bezier(.22,.8,.3,1);--ease-out-emph:cubic-bezier(.2,.8,.2,1);--ease-standard:cubic-bezier(.4,0,.2,1);--ease-in:cubic-bezier(.4,0,.6,1)}
/* press feedback: a small, quick give under the finger; colours and borders ease instead of snapping */
button{transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) var(--ease-standard),color var(--dur-hover) var(--ease-standard),
  border-color var(--dur-hover) var(--ease-standard),box-shadow var(--dur-hover) var(--ease-standard),opacity var(--dur-hover) var(--ease-standard)}
button:active:not(:disabled){transform:scale(.97)}
#clickBtn{transition:transform var(--dur-press) var(--ease-out),background-color .22s ease-out,color .22s ease-out}
.followbtn:active{transform:translateX(-50%) scale(.97)}
/* overlays drift a few px out of the side they open from and fade (scaling made their text shimmer) */
.pop,.trkmenu,.clkpop,.pdfdlg{transition:opacity var(--dur-pop-in) var(--ease-out),transform var(--dur-pop-in) var(--ease-out),display var(--dur-pop-in) allow-discrete,overlay var(--dur-pop-in) allow-discrete}
.pop,.clkpop{--from:translateY(4px)}.trkmenu{--from:translateY(-4px)}.pdfdlg{--from:none}
.pop[hidden],.trkmenu[hidden],.clkpop[hidden],.pdfdlg[hidden]{display:none;opacity:0;transform:var(--from);transition-duration:var(--dur-pop-out);transition-timing-function:var(--ease-in)}
.toast,.followbtn{transition:opacity var(--dur-pop-in) var(--ease-out),transform var(--dur-pop-in) var(--ease-out),display var(--dur-pop-in) allow-discrete}
.toast{transform-origin:top center}.followbtn{transform-origin:bottom center}
.toast[hidden],.followbtn[hidden]{opacity:0;transform:translateX(-50%) translateY(4px);transition-duration:var(--dur-pop-out);transition-timing-function:var(--ease-in)}
.modal,.demo{transition:opacity var(--dur-modal-in) var(--ease-out),display var(--dur-modal-in) allow-discrete}
.modal .sheet{transition:transform var(--dur-modal-in) var(--ease-out-emph),opacity var(--dur-modal-in) var(--ease-out)}
.modal[hidden],.demo[hidden]{display:none;opacity:0;transition-duration:var(--dur-modal-out);transition-timing-function:var(--ease-in)}
.modal[hidden] .sheet{transform:translateY(8px);opacity:0;transition-duration:var(--dur-modal-out);transition-timing-function:var(--ease-in)}
@starting-style{
  .pop:not([hidden]),.trkmenu:not([hidden]),.clkpop:not([hidden]),.pdfdlg:not([hidden]){opacity:0;transform:var(--from)}
  .toast:not([hidden]),.followbtn:not([hidden]){opacity:0;transform:translateX(-50%) translateY(4px)}
  .modal:not([hidden]),.demo:not([hidden]){opacity:0}
  .modal:not([hidden]) .sheet{opacity:0;transform:translateY(8px)}}
/* opened or closed from the keyboard: no animation at all */
[data-input="key"] :is(.pop,.trkmenu,.clkpop,.pdfdlg,.toast,.followbtn,.modal,.modal .sheet,.demo){transition:none!important}
/* small hover cards fade in and out */
.smap .mtip,.tlcard{transition:opacity var(--dur-tip) var(--ease-out),display var(--dur-tip) allow-discrete}
.smap .mtip[hidden],.tlcard[hidden]{display:none;opacity:0}
@starting-style{.smap .mtip:not([hidden]),.tlcard:not([hidden]){opacity:0}}
/* big layout changes cross-fade (calm() in js/app.js uses the browser's view transition) */
::view-transition-old(root),::view-transition-new(root){animation-duration:240ms;animation-timing-function:var(--ease-standard)}
/* folding sections (<details>) ease open and shut where the browser can animate to the content's height; elsewhere they open at once */
@supports selector(::details-content){:root{interpolate-size:allow-keywords}
  details::details-content{height:0;overflow:clip;transition:height 220ms var(--ease-standard),content-visibility 220ms allow-discrete}
  details[open]::details-content{height:auto}
  @media (prefers-reduced-motion:reduce){details::details-content{transition:none}}}
/* first load (#129): a cover in the page colour hides the page while it is built, then fades away so everything appears at once.
   The rail's logo shows on it only if the wait passes 0.4 s, and breathes slowly while it lasts. */
.boot{position:fixed;inset:0;z-index:20000;background:var(--bg);display:grid;place-items:center;transition:opacity var(--dur-modal-in) var(--ease-out)}
.boot.gone{opacity:0;pointer-events:none}
.boot .blogo{width:40px;height:40px;opacity:0;animation:bootin var(--dur-pop-in) var(--ease-out) 400ms forwards,bootbr 1.6s var(--ease-standard) 620ms infinite alternate}
.boot .blogo path{stroke:var(--ink);stroke-opacity:.32;stroke-width:1;stroke-linecap:round;fill:none}
@keyframes bootin{to{opacity:1}} @keyframes bootbr{from{opacity:1}to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.boot .blogo{animation:bootin var(--dur-pop-in) var(--ease-out) 400ms forwards}}
/* focus ring: clear, never removed */
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--st);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}
  :root{--dur-pop-in:120ms;--dur-modal-in:150ms}
  button:active:not(:disabled),.pop,.trkmenu,.clkpop,.modal .sheet,.pop[hidden],.trkmenu[hidden],.clkpop[hidden],.modal[hidden] .sheet{transform:none!important}
  .toast,.followbtn,.toast[hidden],.followbtn[hidden]{transform:translateX(-50%)!important}
  @starting-style{.pop:not([hidden]),.trkmenu:not([hidden]),.clkpop:not([hidden]),.modal:not([hidden]) .sheet{transform:none!important}}}
.deck .smap.pm{height:64px}
.deck .smap.pm .segs{top:20px;height:32px;gap:4px}
.deck .smap.pm .seg{height:32px;margin-top:0;border-radius:7px;min-width:6px;display:grid;place-items:center}
.deck .smap.pm .seg.rf>span{font:650 13px var(--f-display);letter-spacing:.02em}
.deck .smap.pm .seg:hover{background:var(--line);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.deck .smap.pm .seg.cur{box-shadow:none;outline:2px solid var(--st);outline-offset:1.5px}
.deck .smap.pm .seg.fl{background:color-mix(in oklab,var(--line) 50%,transparent)}
.deck .smap.pm .seg.rest,.deck .smap.pm .seg.rest:hover{background:transparent;box-shadow:none}
.deck .smap.pm .lab,.deck .smap.pm .mpos{font-size:12.5px}
.deck .smap.pm .mph{top:16px;height:40px;width:2.5px}
.deck .smap.pm .mloop{top:53px;height:7px}
.deck .smap.pm .mocc{top:56px;height:5px}.deck .smap.pm .mocc i{height:4px}
.deck .smap.pm.foc .mloop{display:none}
.deck .smap.pm .mtip{bottom:48px}
.parts .pfx{margin-top:14px;border-top:var(--lw-hair) solid var(--line);padding-top:6px}
.parts .pfx summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:8px 0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.parts .pfx summary::-webkit-details-marker{display:none}
.parts .pfx summary::before{content:"";width:6px;height:6px;border:solid var(--faint);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform var(--dur-pop-in,180ms) var(--ease-out)}
.parts .pfx[open] summary::before{transform:rotate(45deg)}
.parts .pfx .pfn{margin-left:auto;letter-spacing:0;text-transform:none;font-size:12px}
.parts .frow{display:grid;grid-template-columns:74px 1fr auto 18px;align-items:center;gap:10px;padding:6px 10px;margin:0 -10px;border-radius:8px;cursor:pointer;outline:none}
.parts .frow:hover{background:color-mix(in oklab,var(--ink) 4%,transparent)}.parts .frow:focus-visible{box-shadow:0 0 0 2px var(--st-line)}
.parts .frow .fbar{font-size:12.5px;color:var(--ink);font-weight:500;white-space:nowrap}
.parts .frow .fp{grid-column:auto;height:18px}
.parts .frow .pok{font-size:11.5px}
.deck .smap.pm .seg{transition:opacity 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.deck .smap.pm.hl .seg:not(.sib):not(.rest){opacity:.5}
.deck .smap.pm .seg.sib{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--ink) 55%,transparent)}
.deck .smap.pm .seg.sib>span{color:var(--ink)}.deck .smap.pm .seg.sib.lrn>span{color:var(--on)}
.parts .prow.hov,.parts .frow.hov{background:color-mix(in oklab,var(--ink) 6%,transparent)}
@media (prefers-reduced-motion:reduce){.deck .smap.pm .seg{transition:none}}

/* ===== parts ribbon: one slim, continuous timeline; letters above; colour only for progress (green) and here/loop (brass) ===== */
.deck .smap.pm{height:52px}
.deck .smap.pm .lab,.deck .smap.pm .lab.nx{display:none}
.deck .smap.pm .mlet{position:absolute;left:0;right:0;top:2px;height:16px;pointer-events:none}
.deck .smap.pm .mlet span{position:absolute;font:600 12px var(--f-display);color:var(--faint);transition:color 160ms var(--ease-out)}
.deck .smap.pm .mlet span.on{color:var(--st)}
.deck .smap.pm.hl .mlet span{color:color-mix(in oklab,var(--faint) 45%,transparent)}.deck .smap.pm.hl .mlet span.sib{color:var(--ink)}
.deck .smap.pm .segs{top:22px;height:12px;gap:2px}
.deck .smap.pm .seg{height:12px;border-radius:3px;min-width:3px;background:color-mix(in oklab,var(--ink) 13%,transparent);box-shadow:none;outline:none}
.deck .smap.pm .seg>span{display:none}
.deck .smap.pm .seg:hover{background:color-mix(in oklab,var(--ink) 22%,transparent);box-shadow:none}
.deck .smap.pm .seg.cur{outline:none;box-shadow:none}
.deck .smap.pm .seg.fl{background:color-mix(in oklab,var(--ink) 7%,transparent)}
.deck .smap.pm .seg.rest,.deck .smap.pm .seg.rest:hover{background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat;box-shadow:none}
.deck .smap.pm .seg.lrn{background:color-mix(in oklab,var(--ink) 13%,transparent)}
.deck .smap.pm .seg .lf{opacity:.55}.deck .smap.pm .seg.lrn .lf{opacity:1}
.deck .smap.pm.hl .seg:not(.sib):not(.rest){opacity:.45}
.deck .smap.pm .seg.sib{box-shadow:none;background:color-mix(in oklab,var(--ink) 30%,transparent)}
.deck .smap.pm .mph{top:18px;height:20px;width:2px}
.deck .smap.pm .mloop{top:38px;height:3px;border:0;border-radius:2px;background:var(--st)}
.deck .smap.pm .mocc{top:38px;height:3px}.deck .smap.pm .mocc i{height:3px;background:var(--ink);opacity:.22}.deck .smap.pm .mocc i.on{background:var(--st);opacity:1}
.deck .smap.pm{height:58px}.deck .smap.pm .mpos{top:41px;font-size:12px}
.parts .pfx summary{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:600}
.deck .zc{position:relative}.deck .zc .tb.learn{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%)} /* appears beside the transport without shifting it */
@media (max-width:1180px){.deck .zc .tb.learn{position:static;transform:none}}
.tb.learn{color:var(--muted)}.tb.learn svg{stroke:var(--ok)}
.tb.learn:not(.done):hover{border-color:color-mix(in oklab,var(--ok) 60%,var(--line));color:var(--ink)}
.deck .zc .tb.learn:active:not(:disabled){transform:translateY(-50%) scale(.97)}
.tb.learn.done{border-color:transparent;background:transparent;color:var(--ok);cursor:default;opacity:1}
.ctxm{position:fixed;z-index:45;min-width:236px;background:var(--panel);border:var(--lw-hair) solid var(--line-strong);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.28);padding:6px;display:flex;flex-direction:column;
  transition:opacity var(--dur-pop-in) var(--ease-out),transform var(--dur-pop-in) var(--ease-out),display var(--dur-pop-in) allow-discrete}
.ctxm[hidden]{opacity:0;transform:translateY(-3px);transition-duration:var(--dur-pop-out);transition-timing-function:var(--ease-in)}
@starting-style{.ctxm:not([hidden]){opacity:0;transform:translateY(-3px)}}
.ctxm .cxh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 8px 8px;font-size:13px}.ctxm .cxh span{color:var(--muted);font-size:12.5px}
.ctxm>button{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:7px 8px;font-size:13px}
.ctxm>button:hover,.ctxm>button:focus-visible{background:var(--zebra);outline:none}.ctxm>button small{color:var(--faint);font-size:12px}
.ctxm .cxs{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:13px;color:var(--ink)}.ctxm .cxs label{flex:1}
.ctxm .cxs input{width:60px;font-size:16px;padding:2px 6px}.ctxm .cxs button{padding:3px 9px;font-size:12.5px}
.ctxm .cxsep{height:1px;background:var(--line);margin:4px 2px}
[data-input="key"] .ctxm{transition:none!important}
.parts .pprog{font-size:13px;color:var(--muted);margin:2px 0 4px}.parts .pprog b{color:var(--ink);font-weight:600}
.parts .pg{margin-top:12px}
.parts .pgh{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);padding:4px 0 2px;letter-spacing:0;text-transform:none}
.parts .pgh span{color:var(--faint);font-weight:400}
.parts details.pg>summary{cursor:pointer;list-style:none}.parts details.pg>summary::-webkit-details-marker{display:none}
.parts details.pg>summary::after{content:"";width:5px;height:5px;margin-left:2px;border:solid var(--faint);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform var(--dur-pop-in,180ms) var(--ease-out)}
.parts details.pg[open]>summary::after{transform:rotate(45deg)}
.parts details.pg>summary::before{display:none}
.parts .pfx{border-top:0;padding-top:0}
.parts .prow{display:grid;grid-template-columns:28px 1fr 22px;gap:0 12px;align-items:center;padding:7px 10px;margin:0 -10px;border-radius:9px}
.parts .prow .fp{grid-column:auto;height:24px}
.parts .prow .plt{grid-row:auto}
.parts .prow .ptag{position:absolute;right:44px;top:4px;font-size:11px;color:var(--faint)}
.parts .prow.sel{background:color-mix(in oklab,var(--st) 12%,transparent)}
.parts .pg-d .plt{background:color-mix(in oklab,var(--ok) 22%,var(--chip))}
.parts .frow{grid-template-columns:28px 1fr 18px}.parts .frow .fbar{font-size:12px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.parts .pring{width:22px;height:22px;padding:0;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.parts .pring.sm{width:18px;height:18px}.parts .pring svg{width:100%;height:100%;overflow:visible}
.parts .pring .rt{fill:none;stroke:var(--line-strong);stroke-width:1.6}
.parts .pring:hover .rt{stroke:var(--ink)}
.parts .pring .rf{fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round}
.parts .pring.part .rt{stroke:color-mix(in oklab,var(--ok) 30%,var(--line))}
.parts .pring .rd{fill:var(--ok)}.parts .pring .rc{fill:none;stroke:var(--on);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.parts .pring:focus-visible{outline:2px solid var(--st);outline-offset:2px}
.deck .smap.pm .mlet span{transform:translateX(-50%)}.deck .smap.pm .mlet span.xs{font-size:9.5px;top:2px}
/* fills are not parts: a quiet hatch so a missing letter reads as "fill", not as a gap in the labelling */
.deck .smap.pm .seg.fl{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--ink) 16%,transparent) 0 1.5px,transparent 1.5px 4px)}

/* ===== home: practice, library, song ===== */
.home{position:fixed;inset:0;z-index:32;background:var(--bg);display:flex;color:var(--ink);font-family:var(--f-body)} /* the Library and What's new: above the song header (30), below toasts (35) and the rail (40) */
.home[hidden]{display:none}
.hnav{flex:none;width:220px;box-sizing:border-box;padding:24px 14px;display:flex;flex-direction:column;gap:4px;background:var(--panel)}
.hbrand{font:600 16px var(--f-display);padding:4px 12px 22px}
.hnav>button[data-v]{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:14px;text-align:left}
.hnav>button[data-v] svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.hnav>button[data-v]:hover{background:var(--zebra);color:var(--ink)}
.hnav>button[aria-current="true"]{background:var(--st-bg);color:var(--st);font-weight:600}
.hnav .sp{flex:1}.hnav .hbtn{margin-top:6px}
.hmain{flex:1;min-width:0;overflow:auto;box-sizing:border-box;padding:36px 48px 64px;display:flex;flex-direction:column;gap:32px;max-width:1120px}
.hhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hhead h1,.hempty h1{margin:0;font:600 24px var(--f-display)}.hhead>span{color:var(--muted)}
.hsec{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:8px}.hsec h2{margin:0;font:600 16px var(--f-display)}
.hmut{color:var(--muted);font-size:13px}.hmut.sm{font-size:12.5px}
.hbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:9px;border:var(--lw-hair) solid var(--line-strong);background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.hbtn svg{width:14px;height:14px;fill:currentColor}
/* main buttons (Save PDF, Export, the Library's first step) in the Play green, one per surface (board #38) */
.hbtn.pri{background:var(--pv-acc,oklch(0.55 0.09 150));border-color:transparent;color:oklch(0.99 0 0);font-weight:600;height:44px;padding:0 20px}
.hbtn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.hlink{border:0;background:transparent;padding:0;font:inherit;font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.hlink:hover{color:var(--ink)}.hlink.strong{font-size:14px;font-weight:600;color:var(--ink)}.hlink.sm{font-size:12.5px}
.hlink svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}.hback{align-self:flex-start;margin-bottom:-16px}
.htile{width:32px;height:32px;flex:none;border-radius:8px;background:var(--chip);display:grid;place-items:center;font:600 14px var(--f-display);color:var(--ink)}
.htile.on{width:44px;height:44px;border-radius:10px;background:var(--st);color:var(--on);font-size:18px}
.htile.ok{background:color-mix(in oklab,var(--ok) 25%,var(--chip))}
.hfp{position:relative;display:block;height:24px;min-width:0}.hfp i{position:absolute;width:5px;height:3px;border-radius:2px;background:var(--muted);opacity:.85}
.hfp.acc{max-width:420px}.hfp.acc i{background:var(--st);opacity:1}
.hring{width:24px;height:24px;flex:none}.hring .t{fill:none;stroke:var(--line-strong);stroke-width:1.8}.hring .t.p{stroke:color-mix(in oklab,var(--ok) 30%,var(--line))}
.hring .f{fill:none;stroke:var(--ok);stroke-width:2.8;stroke-linecap:round}.hring .d{fill:var(--ok)}.hring .c{fill:none;stroke:var(--on);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hcont{background:var(--panel);border-radius:12px;padding:20px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hcm{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}.hcm b{font-size:16px;font-weight:600}.hr{text-align:right}
.hq,.hrow,.hcard,.hpr{font:inherit;color:inherit;text-align:left;border:0;background:transparent;cursor:pointer}
.hq{display:grid;grid-template-columns:68px 32px minmax(0,1fr) minmax(0,220px) 24px;align-items:center;gap:16px;width:calc(100% + 28px);padding:12px 14px;margin:0 -14px;border-radius:10px}
.hq:hover,.hrow:hover,.hpr:hover{background:color-mix(in oklab,var(--ink) 4%,transparent)}
.hqm{display:flex;flex-direction:column;min-width:0}.hqm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk{font-size:12.5px;font-weight:600}.hk.k-finish{color:var(--ok)}.hk.k-refresh{color:var(--st)}.hk.k-new{color:var(--muted)}
.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.hcard{background:var(--panel);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}.hcard:hover{background:color-mix(in oklab,var(--ink) 3%,var(--panel))}
.hrib{display:flex;gap:2px;height:8px}.hmain .hrib.thin{height:4px;opacity:.6;margin-top:-2px}
.hcard .hrib,.hrow .hrib{height:9px}
.hs{position:relative;border-radius:2px;background:color-mix(in oklab,var(--ink) 13%,transparent);overflow:hidden;min-width:2px}
.hs i{position:absolute;left:0;right:0;bottom:0;background:var(--ok)}
.hs.f{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--ink) 16%,transparent) 0 1.5px,transparent 1.5px 4px)}
.hs.r{background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
.htr .hrib{height:12px;border-radius:3px}
.hlet{position:relative;height:16px}.hlet span{position:absolute;transform:translateX(-50%);font:600 12px var(--f-display);color:var(--faint)}
.hdue{position:absolute;top:1px;right:-6px;width:5px;height:5px;border-radius:50%;background:var(--st)}
.hctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hseg{display:flex;background:color-mix(in oklab,var(--ink) 6%,transparent);border-radius:9px;padding:3px}
.hseg button{height:32px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:13px}
.hseg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:600}
.hctl label{display:flex;align-items:center;gap:8px}.hctl select{font-size:16px}
.hrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 120px;gap:28px;align-items:center;width:calc(100% + 32px);padding:18px 16px;margin:0 -16px;border-radius:12px}
.hrt{display:flex;flex-direction:column;min-width:0}.hrt b{font-size:15px;font-weight:600}.hrr{display:flex;flex-direction:column;gap:6px}.hwhen{text-align:right}
.htracks{display:flex;flex-direction:column;gap:6px}
.htr{border-radius:12px;padding:16px 20px 18px;display:flex;flex-direction:column;gap:6px}.htr.mine{background:var(--panel)}
.htrh{display:flex;align-items:baseline;gap:10px}.htrh .sp{flex:1}.hmine{font-size:12px;color:var(--st)}
.hfresh{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted)}.hfresh .hbtn{height:36px;font-size:13px}
.hgrps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hgrp{display:flex;flex-direction:column;gap:2px}.hgh{font-size:13px;font-weight:600;color:var(--muted);padding-bottom:6px}.hgh span{font-weight:400;color:var(--faint)}
.hpr{display:grid;grid-template-columns:28px minmax(0,1fr) 22px;gap:12px;align-items:center;width:calc(100% + 20px);padding:7px 10px;margin:0 -10px;border-radius:9px}
.hpr .htile{width:28px;height:28px}.hpr .hring{width:22px;height:22px}
.hempty{max-width:440px;margin:12vh auto 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}.hempty p{margin:0;color:var(--muted)}
/* ===== home v2: tabs (start here, your files, shared), featured video, starter riffs, 60-second demo ===== */
.htabs{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;box-shadow:inset 0 -1px 0 var(--line)}
.htabs .tl{display:flex;flex-wrap:wrap;gap:28px}
.htab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;box-shadow:inset 0 -2px 0 transparent}
.htab[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.htab .cnt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.htabs .hbtn{margin-bottom:8px}
@media (hover:hover){.htab:hover{color:var(--ink)}.hbtn:not(.pri):hover{background:var(--zebra)}.hbtn.pri:hover{filter:brightness(0.94)}}
.hbtn{transition:transform 100ms cubic-bezier(0.2,0,0,1)}.hbtn:active{transform:scale(0.97)}
.hhero{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.hvid{position:relative;flex:1.35 1 460px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:0;padding:0;background:oklch(0.18 0.02 250);cursor:pointer;color:#fff}
.hvid svg.poster{display:block;width:100%;height:100%}
.hvid .play{position:absolute;left:50%;top:38%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:oklch(0.95 0.006 85);display:grid;place-items:center;transition:transform 150ms cubic-bezier(0.2,0,0,1)}
.hvid .play svg{width:24px;height:24px;fill:oklch(0.17 0.01 255)}
@media (hover:hover){.hvid:hover .play{transform:scale(1.04)}}
.hvid .badge{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:6px;background:oklch(0.15 0.012 255 / 0.85);font-size:12px;font-weight:600;color:oklch(0.95 0.006 85)}
.hintro{flex:1 1 320px;display:flex;flex-direction:column;gap:14px}
.hintro h1{margin:0;font:600 26px var(--f-display);letter-spacing:-0.3px;line-height:1.2}
.hintro p{margin:0;font-size:16px;line-height:1.55}
.hintro .acts{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding-top:4px}
.hlinkb{border:0;background:transparent;padding:10px 0;font:inherit;font-size:14px;color:var(--st);cursor:pointer;text-underline-offset:4px}
@media (hover:hover){.hlinkb:hover{text-decoration:underline}}
.hriffs{display:flex;flex-direction:column;gap:2px;margin:0 -20px}
.hriff{display:grid;grid-template-columns:minmax(150px,0.9fr) minmax(0,2fr) 130px;gap:24px;align-items:center;padding:12px 20px;border-radius:12px}
.hriff .rn{display:flex;flex-direction:column;gap:4px;min-width:0}.hriff .rn b{font-size:16px;font-weight:600}
.hriff .rfocus{position:relative;font-size:12.5px;color:var(--muted)}
.hriff .soon{display:inline-block;margin-top:6px;font-size:12px;padding:2px 8px;border-radius:20px;background:var(--zebra);color:var(--muted)}
.rprev{position:relative;height:104px;margin:0 12px}
.rprev .str{position:absolute;left:-12px;right:-12px;height:1px;background:var(--line)}
.rprev .bt{position:absolute;top:16px;height:72px;width:1px;background:var(--grid)}
.rprev .lab{position:absolute;top:0;transform:translateX(-50%);text-transform:none;letter-spacing:0;font-size:12px;line-height:14px;white-space:nowrap;color:var(--faint);opacity:.55}
.rprev .lab.hit{opacity:1;font-weight:600;color:var(--ink)}.rprev .lab.hit.and{color:var(--h2)}.rprev .lab.hit.ea{color:var(--h3)}.rprev .lab.hit.tr{color:var(--tu)}
.rprev .tl{position:absolute;height:2px;margin-top:-1px;border-radius:1px;background:var(--cb)}
.rprev .cp{position:absolute;min-width:14px;height:13px;padding:0 2px;box-sizing:border-box;border-radius:3px;transform:translate(-50%,-50%);font-size:12px;font-weight:600;line-height:13px;text-align:center;font-variant-numeric:tabular-nums;background:var(--c);color:var(--ct);white-space:nowrap}
.rprev .cp.acc{box-shadow:0 0 0 1.5px var(--ink)}.rprev .cp.dead{background:var(--chip);color:var(--muted)}
.rprev .brk{position:absolute;top:89px;display:flex;align-items:center;gap:4px;font-size:12px;line-height:12px;color:var(--muted)}
.rprev .brk i{flex:1 1 auto;height:0;border-top:var(--lw-hair) dashed var(--line-strong)}
.hyours{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-radius:12px;background:var(--panel)}
.hyours h2{margin:0 0 4px;font:600 16px var(--f-display)}
.hyours p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.hmini{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:0 -16px}
.hmini>div{display:flex;flex-direction:column;gap:4px;padding:12px 16px}
.hmini b{font-size:14px;font-weight:600}
.hfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:4px;box-shadow:inset 0 1px 0 var(--line)}
.hfoot>*{margin-top:12px}
.hpreview{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px 10px 20px;border-radius:12px;background:var(--st-bg);color:var(--ink);font-size:14px}.hpreview .hlinkb{padding:6px 0}
.hshared{max-width:520px;display:flex;flex-direction:column;gap:8px}.hshared h2{margin:0;font:600 18px var(--f-display)}.hshared p{margin:0;color:var(--muted);line-height:1.55}
.rprev .mk{position:absolute;transform:translate(-50%,-50%);font-size:12px;line-height:12px;color:var(--muted);white-space:nowrap}
@media (max-width:900px){.hriff{grid-template-columns:minmax(0,1fr)}.hvid{flex-basis:100%}}
/* 60-second demo: the same riff as sheet-music rhythm and as Rhythm Lane, on one shared timeline */
.demo{position:fixed;inset:0;z-index:60;background:oklch(0.1 0.01 255 / 0.55);display:flex;align-items:center;justify-content:center;padding:16px}
.demo[hidden]{display:none}
.dsheet{width:min(1240px,100%);max-height:94dvh;overflow:auto;box-sizing:border-box;background:var(--bg);border-radius:16px;padding:28px 32px 24px;display:flex;flex-direction:column;gap:20px;box-shadow:0 20px 60px oklch(0 0 0 / 0.35);animation:demoIn 280ms var(--ease-out-emph)}
@keyframes demoIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dsheet{animation:none}}
.dtop{display:flex;justify-content:space-between;align-items:center;gap:16px}
.dsteps{display:flex;gap:6px;flex-wrap:wrap}.dsteps span{font-size:12px;padding:4px 10px;border-radius:20px;background:var(--zebra);color:var(--muted)}.dsteps span.on{background:var(--st-bg);color:var(--st);font-weight:600}
.dhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.dhead h2{margin:0 0 6px;font:600 24px var(--f-display);letter-spacing:-0.3px}.dhead p{margin:0;max-width:640px;font-size:15px;line-height:1.55;color:var(--muted)}
.dctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dseg{display:flex;align-items:center;gap:2px;padding:4px;border-radius:10px;background:var(--panel)}
.dseg button{min-width:44px;min-height:36px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer}
.dseg button[aria-pressed="true"]{background:var(--st-bg);color:var(--ink);font-weight:600}
.dseg span{font-size:12px;color:var(--muted);padding:0 8px 0 4px}
.dseg.hl{box-shadow:0 0 0 2px var(--st)}
.dstage{display:flex;flex-direction:column;gap:18px;padding:20px 24px;border-radius:14px;background:var(--panel)}
.drl{font-size:13px;font-weight:600;color:var(--muted)}
.dnot{position:relative}.dnot svg{display:block;width:100%;height:auto}
.dcur{position:absolute;top:1%;height:97%;border-radius:5px;background:color-mix(in oklab,var(--st) 24%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--st) 60%,transparent);pointer-events:none}
.dlane{display:flex;transition:opacity 200ms cubic-bezier(0.2,0,0,1)}.dlane.off{opacity:0;pointer-events:none}
.dlane .lead{position:relative;flex:0 0 10.121%;height:122px}
.dlane .sn{position:absolute;right:40%;transform:translateY(-50%);font-family:var(--f-body);font-size:12px;line-height:12px;color:var(--muted)}
.dstrip{position:relative;flex:1 1 auto;height:122px}
.dstrip .str{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.dstrip .bt{position:absolute;top:20px;height:80px;width:1px;background:var(--grid)}
.dstrip .dbar{position:absolute;top:16px;height:88px;width:2px;margin-left:-1px;background:var(--line-strong)}
.dstrip .lab{position:absolute;top:0;transform:translateX(-50%);text-transform:none;letter-spacing:0;font-size:12px;line-height:14px;white-space:nowrap;color:var(--faint);opacity:.55}
.dstrip .lab.hit{opacity:1;font-weight:600;color:var(--ink)}.dstrip .lab.hit.and{color:var(--h2)}.dstrip .lab.hit.ea{color:var(--h3)}.dstrip .lab.hit.tr{color:var(--tu)}
.dstrip .lab.now{opacity:1;font-weight:600;color:var(--st)}
.dstrip .tl{position:absolute;height:3px;margin-top:-1.5px;border-radius:1.5px;background:var(--cb)}
.dstrip .cp{position:absolute;min-width:16px;height:14px;padding:0 3px;box-sizing:border-box;border-radius:3px;transform:translate(-50%,-50%);font-size:12px;font-weight:600;line-height:14px;text-align:center;font-variant-numeric:tabular-nums;background:var(--c);color:var(--ct)}
.dstrip .cp.acc{box-shadow:0 0 0 1.5px var(--ink)}
.dstrip .brk{position:absolute;top:108px;display:flex;align-items:center;gap:4px;font-size:12px;line-height:12px;color:var(--muted)}.dstrip .brk i{flex:1 1 auto;height:0;border-top:var(--lw-hair) dashed var(--line-strong)}
.dph{position:absolute;top:10px;left:0;width:2px;height:100px;margin-left:-1px;border-radius:1px;background:var(--st);pointer-events:none}
.dfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.dfoot .r{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:900px){.dsheet{padding:20px 16px}.dstage{overflow-x:auto;padding:16px}.dstage>*{min-width:760px}} /* phones: the shared timeline scrolls sideways instead of squashing */
@media (max-width:900px){.home{flex-direction:column}.hnav{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px}.hbrand{padding:0 12px 0 4px}.hnav .sp{display:none}
  .hmain{padding:24px 16px 48px}.hq{grid-template-columns:60px 32px minmax(0,1fr) 24px}.hq .hfp{display:none}.hrow{grid-template-columns:minmax(0,1fr)}.hwhen{text-align:left}.hgrps{grid-template-columns:minmax(0,1fr)}}

/* ===== gestures: hover previews the target, drags preview the range, loop edges are handles ===== */
.lanebox .hov,.lanebox .ecur,.lanebox .ph,.lanebox .chord,.lanebox .brs{pointer-events:none} .lanebox .hov line{stroke:var(--ink);stroke-width:1.2;opacity:.28}.lanebox .hov.dim line{opacity:.14}
.lanebox .lh{fill:var(--st);opacity:.5;pointer-events:none}
.dlab{position:fixed;z-index:46;transform:translate(-50%,-100%);background:var(--btn);color:var(--btn-ink);font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.deck .smap.pm{cursor:pointer}.deck .smap.pm.dragging{cursor:ew-resize}
.deck .smap.pm .seg.tgt{background:color-mix(in oklab,var(--st) 38%,transparent)}
.deck .smap.pm .seg.sib:not(.tgt){background:color-mix(in oklab,var(--ink) 20%,transparent)}
.deck .smap.pm.hl .mlet span.sib{color:var(--muted)}
.deck .smap.pm .msel{position:absolute;top:18px;height:20px;border-radius:5px;background:color-mix(in oklab,var(--st) 16%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--st) 55%,transparent);pointer-events:none}
.deck .smap.pm .mh{position:absolute;top:16px;width:14px;height:26px;margin-left:-7px;cursor:ew-resize;z-index:2}
.deck .smap.pm .mh::before{content:"";position:absolute;left:5.5px;top:0;bottom:0;width:3px;border-radius:2px;background:var(--st)}
.deck .smap.pm .mh::after{content:"";position:absolute;left:3px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--st)}
.deck .smap:not(.pm) .mh,.deck .smap:not(.pm) .msel{display:none}

/* ===== one navigation frame: a slim rail on the left, the same on every screen ===== */
.rail{position:fixed;left:0;top:0;bottom:0;width:68px;z-index:40;background:var(--panel);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;box-sizing:border-box;box-shadow:1px 0 0 var(--line)}
.rail .rlogo{width:30px;height:30px;border-radius:8px;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;font:600 12px var(--f-display);margin-bottom:12px}
.rail .rb{width:56px;padding:8px 0 6px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:500 11px var(--f-body);display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.rail .rb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.rail .rb:hover{background:var(--zebra);color:var(--ink)}
.rail .rb[aria-current="true"]{color:var(--st);background:var(--st-bg)}
.rail .rdot{position:absolute;top:7px;right:13px;width:6px;height:6px;border-radius:50%;background:var(--st)}.rail .rdot[hidden]{display:none}
.app{margin-left:68px;width:calc(100% - 68px)}
.home{left:68px}
@media (max-width:900px){
  .rail{top:auto;right:0;width:auto;height:58px;flex-direction:row;justify-content:center;gap:12px;padding:0 0 env(safe-area-inset-bottom,0px);box-shadow:0 -1px 0 var(--line)}.rail .rlogo{display:none}
  .app{margin-left:0;width:100%;height:calc(100dvh - 58px)}.home{left:0;bottom:58px}}

/* ===== Redesign: header chip + strip panel, rail logo and tools, deck chips ===== */
.meter .mread{height:28px;padding:0 11px;border-radius:999px;background:var(--chip);gap:7px;flex:none;font-size:13.5px}
.meter .tsig{display:inline;font-size:13.5px;line-height:1}.meter .tsig b{font-weight:600}
.meter .msep{color:var(--faint)}
.meter .mmark{font-size:13.5px;font-weight:400;gap:3px}.meter .mmark svg{width:7px;height:13px}
.meter{padding-left:12px;gap:16px}
.mstrip{background:var(--bg);border-radius:12px;padding:5px 14px;box-sizing:border-box}
.top{gap:20px}
.top .hparts{flex:none;background:transparent;border-color:transparent;color:var(--ink);font-weight:400}
.top .hparts:hover{background:var(--zebra)}
.top .hparts[aria-expanded="true"]{background:var(--st-bg);color:var(--st)}
.idn .trkw::before,.idn .tun:not(:empty)::before{content:"\00b7";color:var(--faint);margin-right:2px}
.idn .trkw{display:flex;align-items:center}.idn .trkw[hidden]{display:none}
.idn .tun:not(:empty)::before{margin-right:10px}.idn .trkw:not([hidden])+.tun{margin-left:-6px}
.rail .rlogo{width:34px;height:34px;margin-bottom:16px;flex:none;background:none;border-radius:0;filter:none!important} /* the Riff logo: three fret pills climbing the tab, in the fret markers' colours (frets 3, 5, 7) */
.rail .rlogo .tile{fill:var(--bg)}.rail .rlogo path{stroke:var(--ink);stroke-opacity:.32;stroke-width:1;stroke-linecap:round;fill:none}
.rail .rsp{flex:1}
.rail #themeBtn .sun,.rail #themeBtn.dk .moon{display:none} .rail #themeBtn.dk .sun{display:inline} /* light/dark (board #130): a moon to go dark, a sun to go light */
.rail .rb.ri{width:40px;height:40px;padding:0;justify-content:center;gap:0}
.rail .rb.ri svg{width:20px;height:20px;stroke-width:1.6}.rail .rb .fill{fill:currentColor;stroke:none}.rail .rb .knob{fill:var(--panel)}
.rail .rb.ri[aria-expanded="true"]{color:var(--st);background:var(--st-bg)}
#setPop{left:80px;right:auto;top:auto;bottom:14px;max-height:calc(100dvh - 28px);overflow:auto;transform-origin:bottom left}
.deck .swc{border-radius:999px;background:var(--chip);border-color:transparent;color:var(--muted);padding:0 13px 0 9px;gap:8px;height:34px}
.deck .swc .sw{position:relative;width:26px;height:15px;border-radius:8px;background:var(--line-strong);flex:none;transition:background 160ms var(--ease-out,ease-out)}
.deck .swc .sw::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--panel);transition:transform 160ms var(--ease-out,ease-out)}
.deck .swc[aria-pressed="true"]{background:var(--st-bg);color:var(--st);border-color:transparent}
.deck .swc[aria-pressed="true"] .sw{background:var(--st)}.deck .swc[aria-pressed="true"] .sw::after{transform:translateX(11px)}
.deck .tempo{background:var(--chip);border-radius:19px;height:38px;gap:0}
.deck .tempo .tb{background:transparent;border-color:transparent;height:38px}
.deck .tempo .tb.val{border-radius:0}
.deck .tempo .tb.sm{width:36px;border-radius:19px}
.deck .tempo .tb[aria-expanded="true"]{color:var(--st)}
#loopBtn{border-radius:19px}
#loopBtn[aria-pressed="true"]{background:var(--st-bg);border-color:transparent;color:var(--st);font-weight:600}
/* while looping, the pill grows a second segment: back to the loop start */
.lgrp{display:inline-flex;align-items:center}
.lgrp:has(.lhome:not([hidden])) #loopBtn{border-radius:19px 0 0 19px;padding-right:10px}
#loopHome.lhome{border-radius:0 19px 19px 0;width:38px;padding:0;justify-content:center;background:var(--st-bg);border-color:transparent;color:var(--st);box-shadow:inset 1px 0 0 color-mix(in oklab,var(--st) 25%,transparent)}
#loopHome.lhome:hover,#loopHome.lhome:focus-visible{background:color-mix(in oklab,var(--st) 22%,var(--st-bg))}
.lhome svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.lhome svg path{fill:none}
.lhome{overflow:hidden;transition:width var(--dur-hover) var(--ease-standard),opacity var(--dur-hover) var(--ease-standard),background-color var(--dur-hover),display var(--dur-hover) allow-discrete}
.lhome[hidden]{display:none;width:0!important;opacity:0}
@starting-style{.lhome:not([hidden]){width:0!important;opacity:0}} /* the "back to the loop" button slides open beside Loop instead of pushing the bar at once */
#loopBtn{transition:border-radius var(--dur-hover) var(--ease-standard),padding var(--dur-hover) var(--ease-standard),background-color var(--dur-hover),color var(--dur-hover),transform var(--dur-press)}
@media (min-width:641px){.deck #loopBtn{width:132px}} /* a fixed width: the label (Loop, Bars 3–6 …) changing never shifts the transport */
.deck .smap .mpos{display:none}
.deck .zr{gap:12px}
.deck .dpos{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.deck .zr .tb.learn{position:static;transform:none;border-color:transparent;background:transparent}
.deck .zr .tb.learn:active:not(:disabled){transform:scale(.97)}
@media (max-width:900px){
  .rail .rsp{display:none}.rail .rb.ri{width:44px;height:44px;align-self:center}
  #setPop{left:auto;right:12px;bottom:calc(58px + var(--deckH,64px) + 8px);max-height:calc(100dvh - 58px - var(--deckH,64px) - 24px)}
  .top .hparts .tx{display:none}.top .hparts{width:38px;padding:0;justify-content:center}}
@media (max-width:1180px){.deck .dpos{display:none}.deck .smap .mpos{display:block}}
.deck .swc .swi{display:none}
@media (max-width:640px){.deck .swc{padding:0;width:38px;justify-content:center}.deck .swc .sw{display:none}.deck .swc .swi{display:block}.deck .zr .tb.learn .tx,#learnLbl{display:none}}

/* ===== Video export sheet ===== */
.xsheet{max-width:760px;gap:16px}
.xprev{border-radius:12px;overflow:hidden;line-height:0;background:#16130f;aspect-ratio:3840/600}.xprev.light{background:#f6f3ee}.xprev canvas{width:100%;height:auto;display:block}
#xpBody{display:flex;flex-direction:column;gap:12px}
.xrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.xrow .xl{color:var(--muted);font-size:13px}
.xrow .xval{font-size:13.5px;font-weight:600}.xrow .xval .xl{font-weight:400}
.xrow .hseg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:600}
.xhint{margin:-4px 0 4px;color:var(--muted);font-size:12.5px;line-height:1.45}
.xtog{font-size:13px}
.xin{font:inherit;font-size:16px;height:36px;padding:0 12px;border-radius:8px;border:var(--lw-hair) solid var(--line-strong);background:var(--bg);color:var(--ink);width:min(320px,100%)}
.xin:focus-visible{outline:2px solid var(--st);outline-offset:2px}
.xsum{margin:4px 0 0;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.xprog{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.xprog .xbar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.xprog .xbar i{display:block;height:100%;background:var(--st);transform-origin:left;transform:scaleX(0)}
.xact{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.xport.busy .hseg button,#xport.busy .hseg button,#xport.busy #xpClick{pointer-events:none;opacity:.55}

/* top slot switch: notation or a scene */
.mslot{position:relative;flex:1 1 0;min-width:200px;display:flex;align-self:stretch;align-items:center}
.mslot .mstrip{flex:1 1 0;min-width:0}
.mscene{padding:0!important;display:block;border-radius:12px}
.mscene[hidden],.mstrip[hidden]{display:none!important}
.slotw{position:absolute;top:5px;right:6px;z-index:3}
.slotb{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:0;border-radius:7px;background:color-mix(in oklab,var(--panel) 75%,transparent);color:var(--muted);font:500 11.5px var(--f-body);cursor:pointer;opacity:.7;transition:opacity 150ms var(--ease-out,ease-out)}
.mslot:hover .slotb,.slotb:focus-visible,.slotb[aria-expanded="true"]{opacity:1}
.slotb svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.slotmenu{left:auto;right:0;top:30px;width:240px}
.slotmenu .it .nm{display:flex;flex-direction:column;gap:2px;white-space:normal}.slotmenu small{font-size:12px;font-weight:400;color:var(--muted)}

/* ===== Layout v2: one left edge, one right edge, three distinct surfaces, one button rule ===== */
.top{gap:28px;padding-top:12px;padding-bottom:10px}
.top .idn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:none;min-width:0}
.top .song{font-size:19px!important;margin:0}.top .song b{font-size:19px;font-weight:650;letter-spacing:-.2px}
.idn .meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-left:-9px}
.idn .meta .trk{height:28px;font-size:13px;color:var(--ink)}
.idn .trkw::before{content:none}
.idn .meta .mread{display:inline-flex;align-items:center;gap:6px;height:auto;padding:0;background:transparent;font-size:13px;color:var(--muted)}
.idn .meta .mread::before,.idn .meta .tunw::before{content:"\00b7";color:var(--faint);margin-right:4px}
.idn .tun:not(:empty)::before{content:none}
.meter{padding-left:0}
.mstrip{background:var(--bg)}
/* one button rule: every control has a quiet fill and no outline; brass only when something is on */
.tb{border-color:transparent}
.tb:not(.play):not([aria-pressed="true"]):not([aria-expanded="true"]){background:var(--chip)}
.top .hparts{background:var(--chip)!important;font-weight:500}
.top .hparts .tx{display:inline}
.idn .trk{background:transparent!important}
/* fretboard: its own object on its own card */
/* fretboard (board #40): a slim band on the bottom panel, not a card, so two rows of tab fit on a laptop */
.fbx{border-top:var(--lw-hair) solid var(--line);margin:0;background:var(--panel);border-radius:0;box-shadow:none;padding:2px 12px 0;position:relative}
.ntip{position:fixed;left:0;top:0;z-index:40;padding:5px 10px;border-radius:10px;background:var(--panel);box-shadow:0 6px 18px oklch(0.1 0.01 70 / .16),0 0 0 1px var(--line);pointer-events:none;max-width:min(560px,calc(100vw - 32px));transition:opacity var(--dur-tip) var(--ease-out),display var(--dur-tip) allow-discrete} .ntip.mv{transition:opacity var(--dur-tip) var(--ease-out),transform 120ms var(--ease-out),display var(--dur-tip) allow-discrete} /* the hovered note's name (board #60): fades in where it is, glides from note to note */
.ntip[hidden]{display:none;opacity:0} @starting-style{.ntip:not([hidden]){opacity:0}} @media (prefers-reduced-motion:reduce){.ntip.mv{transition:opacity var(--dur-tip) var(--ease-out),display var(--dur-tip) allow-discrete}}
.fbx .fbn0{fill:var(--bg)}
/* timeline + transport: the "where am I in the song" surface */
.bar.deck{background:var(--panel);border-top:var(--lw-hair) solid var(--line);padding-top:8px;padding-bottom:10px;row-gap:6px}
.deck .tline{grid-column:1/-1;grid-row:1}
.deck #dPos{display:block;grid-column:2/-1;grid-row:1;justify-self:end;align-self:start;margin-top:2px}
.bar.deck{grid-template-columns:minmax(0,1fr) auto}
.deck .zl{grid-column:1;grid-row:2;justify-self:start}
.deck .zc{grid-column:1/-1;grid-row:2;justify-self:center}
.deck .zr{grid-column:2;grid-row:2;justify-self:end}
.lpn{font-size:12px;font-weight:500;opacity:.8}.lpn:not(:empty)::before{content:"·";margin:0 6px 0 2px}
/* Click control */
.clkw{position:relative;display:inline-flex;align-items:center;gap:2px}
.tb.clk{border-radius:999px 0 0 999px;padding-right:10px}
.tb.clkm{border-radius:0 999px 999px 0;width:32px}
.tb.clkm svg{width:12px;height:12px}
.clkpop{position:absolute;left:0;bottom:48px;width:300px;padding:14px;background:var(--panel);border:var(--lw-hair) solid var(--line-strong);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:12px;z-index:30}
.clkpop[hidden]{display:none}
.cph{font-size:13px;font-weight:600;color:var(--ink)} /* popup titles in sentence case (Metronome, Speed); small caps only for section labels */
.clkpop .ch{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.clkpop .ch .chn{min-width:96px}
.clkpop .ch select,.clkpop .ch input[type=range]{flex:1}
.clkpop .blendrow .blend{flex:1}
.clkpop .swc{align-self:flex-start}
.deck .zr .status:empty{display:none}
.clkpop .blendrow .blend>span:first-child{min-width:96px}


/* scene mode (direction A): the scene is the header's background, edge to edge; title and Export sit on fades in the header colour; the water is the header's bottom edge */
.top{position:relative;isolation:isolate;z-index:30}
.top>*:not(.hscene){position:relative;z-index:1}
.hscene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.hscene[hidden]{display:none}
.top.scened{border-bottom-color:transparent}
.mslot.scene{align-self:stretch;min-height:72px}
.mslot.scene .slotw{top:2px;right:0}
.mslot.scene .slotb{background:transparent;opacity:0}
.mslot.scene:hover .slotb,.mslot.scene .slotb:focus-visible,.mslot.scene .slotb[aria-expanded="true"]{opacity:1;background:color-mix(in oklab,var(--panel) 85%,transparent)}
@media (hover:none){.mslot.scene .slotb{opacity:.7}}

/* scene themes: every background surface takes the scene's hue; brass, frets and counts keep their colours */
@media (prefers-color-scheme:light){:root[data-scene="fjord"]:not([data-theme="dark"]){--bg:oklch(0.962 0.007 120);--panel:oklch(0.982 0.005 120);--ink:oklch(0.27 0.022 165);--muted:oklch(0.47 0.02 158);--faint:oklch(0.54 0.016 152);--line:oklch(0.895 0.012 140);--line-strong:oklch(0.71 0.016 145);--beat:oklch(0.79 0.014 145);--bar:oklch(0.37 0.02 165);--zebra:oklch(0.3 0.03 160 / .03);--grid:oklch(0.925 0.01 140);--on:oklch(0.99 0.005 120);--btn:oklch(0.30 0.03 170);--btn-ink:oklch(0.97 0.006 120);--chip:oklch(0.90 0.012 140);--chip-line:oklch(0.79 0.014 145);--chip-tail:oklch(0.935 0.01 140);--sea:oklch(0.94 0.02 222 / .55);}}
:root[data-scene="fjord"][data-theme="light"]{--bg:oklch(0.962 0.007 120);--panel:oklch(0.982 0.005 120);--ink:oklch(0.27 0.022 165);--muted:oklch(0.47 0.02 158);--faint:oklch(0.54 0.016 152);--line:oklch(0.895 0.012 140);--line-strong:oklch(0.71 0.016 145);--beat:oklch(0.79 0.014 145);--bar:oklch(0.37 0.02 165);--zebra:oklch(0.3 0.03 160 / .03);--grid:oklch(0.925 0.01 140);--on:oklch(0.99 0.005 120);--btn:oklch(0.30 0.03 170);--btn-ink:oklch(0.97 0.006 120);--chip:oklch(0.90 0.012 140);--chip-line:oklch(0.79 0.014 145);--chip-tail:oklch(0.935 0.01 140);--sea:oklch(0.94 0.02 222 / .55);}
@media (prefers-color-scheme:dark){:root[data-scene="fjord"]:not([data-theme="light"]){--bg:oklch(0.205 0.016 220);--panel:oklch(0.235 0.017 218);--ink:oklch(0.92 0.012 160);--muted:oklch(0.72 0.018 190);--faint:oklch(0.63 0.016 200);--line:oklch(0.305 0.016 216);--line-strong:oklch(0.43 0.017 214);--beat:oklch(0.39 0.016 215);--bar:oklch(0.78 0.02 190);--zebra:oklch(0.95 0.02 200 / .022);--grid:oklch(0.265 0.015 216);--on:oklch(0.19 0.02 220);--btn:oklch(0.92 0.012 160);--btn-ink:oklch(0.2 0.02 220);--chip:oklch(0.34 0.017 216);--chip-line:oklch(0.46 0.017 214);--chip-tail:oklch(0.28 0.016 216);--sea:oklch(0.25 0.035 228 / .5);}}
:root[data-scene="fjord"][data-theme="dark"]{--bg:oklch(0.205 0.016 220);--panel:oklch(0.235 0.017 218);--ink:oklch(0.92 0.012 160);--muted:oklch(0.72 0.018 190);--faint:oklch(0.63 0.016 200);--line:oklch(0.305 0.016 216);--line-strong:oklch(0.43 0.017 214);--beat:oklch(0.39 0.016 215);--bar:oklch(0.78 0.02 190);--zebra:oklch(0.95 0.02 200 / .022);--grid:oklch(0.265 0.015 216);--on:oklch(0.19 0.02 220);--btn:oklch(0.92 0.012 160);--btn-ink:oklch(0.2 0.02 220);--chip:oklch(0.34 0.017 216);--chip-line:oklch(0.46 0.017 214);--chip-tail:oklch(0.28 0.016 216);--sea:oklch(0.25 0.035 228 / .5);}
/* the Thai scenes (canal, and the doodle, which shares it): a warm, faintly peach paper the golden-hour sky melts into (2026-10-25; was a pale green-cream, bg oklch(0.958 0.02 100)) */
@media (prefers-color-scheme:light){:root[data-scene="canal"]:not([data-theme="dark"]){--bg:oklch(0.962 0.014 68);--panel:oklch(0.984 0.012 70);--ink:oklch(0.26 0.024 145);--muted:oklch(0.46 0.024 135);--faint:oklch(0.54 0.02 128);--line:oklch(0.90 0.014 68);--line-strong:oklch(0.70 0.024 118);--beat:oklch(0.78 0.02 112);--bar:oklch(0.37 0.024 145);--zebra:oklch(0.3 0.04 140 / .035);--grid:oklch(0.925 0.012 68);--on:oklch(0.99 0.008 70);--btn:oklch(0.30 0.04 150);--btn-ink:oklch(0.97 0.01 100);--chip:oklch(0.90 0.014 68);--chip-line:oklch(0.78 0.024 110);--chip-tail:oklch(0.935 0.012 68);--sea:oklch(0.93 0.035 150 / .5);}}
:root[data-scene="canal"][data-theme="light"]{--bg:oklch(0.962 0.014 68);--panel:oklch(0.984 0.012 70);--ink:oklch(0.26 0.024 145);--muted:oklch(0.46 0.024 135);--faint:oklch(0.54 0.02 128);--line:oklch(0.90 0.014 68);--line-strong:oklch(0.70 0.024 118);--beat:oklch(0.78 0.02 112);--bar:oklch(0.37 0.024 145);--zebra:oklch(0.3 0.04 140 / .035);--grid:oklch(0.925 0.012 68);--on:oklch(0.99 0.008 70);--btn:oklch(0.30 0.04 150);--btn-ink:oklch(0.97 0.01 100);--chip:oklch(0.90 0.014 68);--chip-line:oklch(0.78 0.024 110);--chip-tail:oklch(0.935 0.012 68);--sea:oklch(0.93 0.035 150 / .5);}
@media (prefers-color-scheme:dark){:root[data-scene="canal"]:not([data-theme="light"]){--bg:oklch(0.195 0.016 155);--panel:oklch(0.225 0.018 152);--ink:oklch(0.92 0.014 95);--muted:oklch(0.72 0.02 120);--faint:oklch(0.63 0.018 128);--line:oklch(0.30 0.018 150);--line-strong:oklch(0.43 0.02 145);--beat:oklch(0.39 0.018 148);--bar:oklch(0.78 0.02 110);--zebra:oklch(0.95 0.02 100 / .022);--grid:oklch(0.26 0.016 150);--on:oklch(0.19 0.02 155);--btn:oklch(0.92 0.014 95);--btn-ink:oklch(0.2 0.02 155);--chip:oklch(0.33 0.02 150);--chip-line:oklch(0.45 0.02 148);--chip-tail:oklch(0.27 0.018 150);--sea:oklch(0.26 0.035 165 / .5);}}
:root[data-scene="canal"][data-theme="dark"]{--bg:oklch(0.195 0.016 155);--panel:oklch(0.225 0.018 152);--ink:oklch(0.92 0.014 95);--muted:oklch(0.72 0.02 120);--faint:oklch(0.63 0.018 128);--line:oklch(0.30 0.018 150);--line-strong:oklch(0.43 0.02 145);--beat:oklch(0.39 0.018 148);--bar:oklch(0.78 0.02 110);--zebra:oklch(0.95 0.02 100 / .022);--grid:oklch(0.26 0.016 150);--on:oklch(0.19 0.02 155);--btn:oklch(0.92 0.014 95);--btn-ink:oklch(0.2 0.02 155);--chip:oklch(0.33 0.02 150);--chip-line:oklch(0.45 0.02 148);--chip-tail:oklch(0.27 0.018 150);--sea:oklch(0.26 0.035 165 / .5);}

/* bottom of the screen in scene themes: deeper water for the transport bar; a wooden neck (light oak in light mode, aged maple in dark) with inlays, strings and nut tuned for contrast */
@media (prefers-color-scheme:light){:root[data-scene="fjord"]:not([data-theme="dark"]){--deep:oklch(0.935 0.02 225);--wood:oklch(0.67 0.03 65);--pearl:oklch(0.97 0.01 90);--fbstring:oklch(0.90 0.012 80);--fbfret:oklch(0.56 0.03 60);--nut:oklch(0.90 0.02 85);--fbmap:.9;--chipedge:transparent;}}
:root[data-scene="fjord"][data-theme="light"]{--deep:oklch(0.935 0.02 225);--wood:oklch(0.67 0.03 65);--pearl:oklch(0.97 0.01 90);--fbstring:oklch(0.90 0.012 80);--fbfret:oklch(0.56 0.03 60);--nut:oklch(0.90 0.02 85);--fbmap:.9;--chipedge:transparent;}
@media (prefers-color-scheme:dark){:root[data-scene="fjord"]:not([data-theme="light"]){--deep:oklch(0.185 0.028 232);--wood:oklch(0.58 0.045 75);--pearl:oklch(0.18 0.012 60);--fbstring:oklch(0.30 0.012 70);--fbfret:oklch(0.46 0.03 70);--nut:oklch(0.74 0.03 80);--fbmap:.9;--chipedge:oklch(0.25 0.01 70 / .55);}}
:root[data-scene="fjord"][data-theme="dark"]{--deep:oklch(0.185 0.028 232);--wood:oklch(0.58 0.045 75);--pearl:oklch(0.18 0.012 60);--fbstring:oklch(0.30 0.012 70);--fbfret:oklch(0.46 0.03 70);--nut:oklch(0.74 0.03 80);--fbmap:.9;--chipedge:oklch(0.25 0.01 70 / .55);}
@media (prefers-color-scheme:light){:root[data-scene="canal"]:not([data-theme="dark"]){--deep:oklch(0.932 0.03 140);--wood:oklch(0.68 0.045 62);--pearl:oklch(0.97 0.01 90);--fbstring:oklch(0.90 0.012 80);--fbfret:oklch(0.56 0.03 60);--nut:oklch(0.90 0.02 85);--fbmap:.9;--chipedge:transparent;}}
:root[data-scene="canal"][data-theme="light"]{--deep:oklch(0.932 0.03 140);--wood:oklch(0.68 0.045 62);--pearl:oklch(0.97 0.01 90);--fbstring:oklch(0.90 0.012 80);--fbfret:oklch(0.56 0.03 60);--nut:oklch(0.90 0.02 85);--fbmap:.9;--chipedge:transparent;}
@media (prefers-color-scheme:dark){:root[data-scene="canal"]:not([data-theme="light"]){--deep:oklch(0.17 0.025 160);--wood:oklch(0.58 0.045 75);--pearl:oklch(0.18 0.012 60);--fbstring:oklch(0.30 0.012 70);--fbfret:oklch(0.46 0.03 70);--nut:oklch(0.74 0.03 80);--fbmap:.9;--chipedge:oklch(0.25 0.01 70 / .55);}}
:root[data-scene="canal"][data-theme="dark"]{--deep:oklch(0.17 0.025 160);--wood:oklch(0.58 0.045 75);--pearl:oklch(0.18 0.012 60);--fbstring:oklch(0.30 0.012 70);--fbfret:oklch(0.46 0.03 70);--nut:oklch(0.74 0.03 80);--fbmap:.9;--chipedge:oklch(0.25 0.01 70 / .55);}
:root[data-scene] .bar.deck{background:var(--panel)}
:root[data-scene] .fbx .fbn0{fill:var(--wood)} /* the brown wood stays (Richard, 2026-10-26: "the soothing brown"); only the neck got slimmer */
:root[data-scene] .fbx .fbin{fill:var(--pearl);opacity:1}
:root[data-scene] .fbx .fbstr{stroke:var(--fbstring)}
:root[data-scene] .fbx .fbf{stroke:var(--fbfret)}
:root[data-scene] .fbx .fbf.nut{stroke:var(--nut);stroke-width:3.5}
:root[data-scene] .fbx .fp rect{stroke:var(--chipedge,transparent);stroke-width:1}

/* bottom v3: one calm surface; the landscape is the only colour; even spacing between card, timeline and controls */
.bar.deck{padding-top:12px;padding-bottom:12px;row-gap:10px}
.deck #dPos{display:inline-block;grid-column:auto;grid-row:auto;margin:0 0 0 6px;align-self:center}
.fbsl,.fbk.sn{font-size:12px}

/* rows of tab (board #56): a small 1 / 2 / 3 switch beside the Fretboard button, the cause and its effect side by side; greyed when that many rows can't fit */
.rowseg{padding:2px;border-radius:999px;align-self:center}
.rowseg button{height:32px;width:34px;padding:0;display:grid;place-items:center;border-radius:999px;cursor:pointer}
.rowseg button:hover:not([aria-disabled="true"]):not([aria-pressed="true"]){color:var(--ink)}
.rowseg button[aria-disabled="true"]{opacity:.35;cursor:default}
.rowseg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
/* header size (board #136): the rows switch's look, pinned to the header's top right; only with a scene strip, not on phones (View keeps the same choice) */
header.top .hseg.hsz{display:none;position:absolute;margin:0;top:5px;right:12px;z-index:6;background:var(--panel);box-shadow:0 0 0 var(--lw-hair) var(--line)}
@media (min-width:761px){header.top.scened .hseg.hsz{display:flex}html:is([data-head="hidden"],[data-head="large"]) .top.scened .idn{padding-right:120px}}
html.focusfill .top .hsz{display:none!important}
@media (max-width:760px){.rowseg{display:none}}
/* the fretboard button lives in the transport (#fbBtn): amber when the fretboard is open, the same place when it is closed */
#fbBtn svg{stroke-width:1.5}#fbBtn circle{fill:currentColor;stroke:none}
.deck .zr #dPos{margin:0}
/* ---- transport v2: nothing moves. timing (click + speed) left, transport centre, where-you-are right ---- */
.deck .timing{display:flex;align-items:center;gap:8px}
.deck .zc{gap:10px}
.deck .zc .tb.tpb{width:38px;height:38px;padding:0;justify-content:center;border-radius:19px;background:transparent;border-color:transparent;color:var(--muted)}
.deck .tb.tpb:hover{background:var(--chip);color:var(--ink)}
.deck .tb.tpb svg{width:16px;height:16px}
.deck .tb.play{min-width:0;width:48px;height:48px;padding:0;border-radius:50%;background:var(--chip);border-color:transparent;color:var(--ink);box-shadow:none}
.deck .tb.play:hover{background:color-mix(in oklab,var(--ink) 12%,var(--chip))}
.deck .tb.play svg{width:18px;height:18px}
.deck #loopBtn{min-width:92px;justify-content:center;border-radius:19px;background:transparent;border-color:transparent;color:var(--muted)}
.deck #loopBtn:hover{background:var(--chip);color:var(--ink)}
.deck #loopBtn[aria-pressed="true"]{background:var(--st-bg);color:var(--st);font-weight:600}
/* speed shows the tempo you actually hear */
.deck .tempo .tb.val{flex-direction:row;align-items:center;justify-content:center;gap:6px;min-width:112px;padding:0 4px;height:38px}
.deck #bpmLbl{display:inline!important;font-size:12px;color:var(--muted)}
.deck #speedLbl{min-width:36px;text-align:right}
/* click on = the amber "on" fill, like Loop and Count-in (design system: on = amber fill, never a darker grey) */
.deck #clickBtn[aria-pressed="true"]{background:var(--st-bg);border-color:transparent;color:var(--st)}
@media (max-width:640px){.deck #clickBtn .tx{display:inline}}
.deck #clkMore{background:var(--chip);border-color:transparent}
.deck #fbBtn{border-radius:999px}
/* the count-in shows on the Click button; its room is always kept so the bar never shifts when it is switched */
.clk .cin{font-size:12px;font-weight:500;color:var(--muted)}
.clk .cin.off{visibility:hidden}
@media (max-width:640px){.deck #clickBtn .cin{display:none}}
.deck .dpos{font-variant-numeric:tabular-nums}
.deck .zr .lpn{margin-left:0;color:var(--st);font-size:13px;font-variant-numeric:tabular-nums}


/* beat dots in the Click button: fixed width so a time-signature change never moves anything */
.bdots{--n:4;display:inline-flex;align-items:center;justify-content:space-between;width:46px;height:12px;flex:none}
.bdots i{width:7px;height:7px;border-radius:50%;background:color-mix(in oklab,currentColor 28%,transparent);transition:background-color 60ms linear,transform 60ms linear}
.bdots i.b1{width:9px;height:9px}
.bdots.many i{width:5px;height:5px} .bdots.many i.b1{width:7px;height:7px}
.bdots.lots i{width:3.5px;height:3.5px} .bdots.lots i.b1{width:5px;height:5px}
.bdots i.on{background:var(--st);transform:scale(1.15)}
.bdots i.b1.on{background:var(--head)}
.deck #clickBtn[aria-pressed="false"] .bdots{opacity:.55}

#clickBtn.pulse,#clickBtn.pulse1{transition:none}

.deck .tempo{position:relative}
/* the tempo is typed inside the Speed popup (the transport's speed button only opens it) */
.pophead{align-items:center;gap:10px}.pophead .big{flex:1;min-width:0}
.bpmtype{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.bpmin{width:64px;height:30px;box-sizing:border-box;border:var(--lw-hair) solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:600 14px var(--f-mono);text-align:center;outline:none}
.bpmin:focus{border-color:transparent;box-shadow:0 0 0 1.5px var(--st)}
#spSeg button{flex:1}

/* ---- View menu in the header; the fretboard costs nothing when hidden ---- */
.slotw{display:none!important}
.vww{position:relative;display:inline-flex}
.viewmenu{left:auto;right:0;top:44px;width:280px;padding:6px}
.viewmenu .vh{padding:8px 10px 4px;font-size:12px;color:var(--muted)}
.viewmenu .vsep{height:1px;margin:6px 4px;background:var(--line)}
.viewmenu .it{display:flex;align-items:flex-start;gap:10px;width:100%;padding:8px 10px;border-radius:8px}
.viewmenu .it .nm{display:flex;flex-direction:column;gap:2px;white-space:normal;flex:1;text-align:left}
.viewmenu small{font-size:12px;font-weight:400;color:var(--muted)}
.viewmenu .vck{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--st);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.viewmenu .it[aria-checked="true"] .vck{visibility:visible}
.viewmenu kbd{margin-top:1px;font:500 11px var(--f-mono);color:var(--muted);border:var(--lw-hair) solid var(--line-strong);border-radius:4px;padding:1px 5px}
.fbx.off{display:none!important}

#openBtn{margin-left:auto}
/* header: the scene fades out at both ends across its full height; the controls are plain, no chips on the picture */
.hscene{-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--hl,30%) + 10px),#000 calc(var(--hl,30%) + 150px),#000 calc(100% - var(--hr,20%) - 150px),transparent calc(100% - var(--hr,20%) - 10px));mask-image:linear-gradient(90deg,transparent calc(var(--hl,30%) + 10px),#000 calc(var(--hl,30%) + 150px),#000 calc(100% - var(--hr,20%) - 150px),transparent calc(100% - var(--hr,20%) - 10px))}
.top.scened .hparts{background:transparent!important}
.top.scened .hparts:hover{background:color-mix(in oklab,var(--ink) 8%,transparent)!important}
.top.scened .hparts[aria-expanded="true"]{background:color-mix(in oklab,var(--ink) 10%,transparent)!important;color:var(--ink)}

/* Open, View and Export live in the left rail; the header is the title and the scene */
.rail .vww,.rail .exw,.rail .yfw{position:relative;display:flex}
.rail #openBtn,.rail #viewBtn,.rail #xpBtn{margin:0;height:auto;width:56px;padding:8px 0 6px;border:0;border-radius:10px;background:transparent!important;color:var(--muted);font:500 11px var(--f-body);display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:none}
.rail #openBtn:hover,.rail #viewBtn:hover,.rail #xpBtn:hover,.rail #viewBtn[aria-expanded="true"],.rail #xpBtn[aria-expanded="true"],.rail #openBtn[aria-expanded="true"]{background:var(--zebra)!important;color:var(--ink)}
.rail #openBtn svg,.rail #viewBtn svg,.rail #xpBtn svg{width:20px;height:20px}
.rail #openBtn .tx,.rail #viewBtn .tx,.rail #xpBtn .tx{display:inline!important}
.rail .viewmenu,.rail .exmenu{left:calc(100% + 8px);right:auto;top:auto;bottom:0}
/* play: filled with the scene's own colour; outlined while playing */
.deck .tb.play,.deck .tb.play:hover{background:var(--pv-acc);color:oklch(0.99 0 0);box-shadow:0 1px 2px oklch(0 0 0 / .12)}
.deck .tb.play:hover{filter:brightness(1.06)}
/* Play stays the filled green circle while playing; only the symbol changes (a pause sign) */
:root{--pv-acc:var(--btn)} :root[data-scene="canal"]{--pv-acc:oklch(0.55 0.09 150)} :root[data-scene="fjord"]{--pv-acc:oklch(0.52 0.07 235)}
@media (prefers-color-scheme:dark){:root[data-scene="canal"]:not([data-theme="light"]){--pv-acc:oklch(0.62 0.09 150)}:root[data-scene="fjord"]:not([data-theme="light"]){--pv-acc:oklch(0.62 0.07 235)}}
:root[data-theme="dark"][data-scene="canal"]{--pv-acc:oklch(0.62 0.09 150)} :root[data-theme="dark"][data-scene="fjord"]{--pv-acc:oklch(0.62 0.07 235)}
.deck .tb.play svg{width:20px;height:20px}
/* back button: a real button, same soft fill as the rest */
.deck .zc .tb.tpb{background:var(--chip);color:var(--ink)}
.deck .zc .tb.tpb:hover{background:color-mix(in oklab,var(--ink) 10%,var(--chip))}
/* click: off = slashed metronome, muted; on = full strength */
#clickBtn .cks{display:none}
.deck #clickBtn[aria-pressed="false"]{color:var(--muted)}
.deck #clickBtn[aria-pressed="false"] .cks{display:inline}
.deck #clickBtn[aria-pressed="true"]{font-weight:600}
/* changed speed: bold, not brass (brass = loop and timing feedback) */
.deck .tb.val.mod .mono{color:var(--ink)}
/* narrow screens: the transport is centred over the whole bar, so the side zones slid under it. Give it its own row; timing (left) and position (right) share the row below */
@media (max-width:1040px){
.deck .zc{grid-column:1/-1;grid-row:2;justify-self:center}
.deck .zl{grid-column:1;grid-row:3;justify-self:start;min-width:0}
.deck .zr{grid-column:2;grid-row:3;justify-self:end}
}
/* timeline section names: hidden ones still stuck out past the screen edge and made the whole page scroll sideways. Clip at the bar's edge (not the timeline's) so the last visible name can still run into the padding */
.bar.deck{overflow-x:clip}
/* phones: timing and position don't fit side by side either, so each gets its own centred row */
@media (max-width:560px){
.deck .zl{grid-column:1/-1;justify-self:center}
.deck .zr{grid-column:1/-1;grid-row:4;justify-self:center}
}
/* very small phones (320px): drop the "bpm" readout so the speed pill fits; the % stays */
@media (max-width:360px){.deck .tempo .tb.val{min-width:0}.deck .tempo #bpmLbl{display:none!important}}

/* focus: the scene across the whole screen (View → Focus on the scene) */
html.focus:not(.focusfill) .top{z-index:9999!important}
html.focus:not(.focusfill) .top>*:not(.hscene){visibility:hidden} /* the header's title and buttons stay out of the way */ /* the scene lives inside the header: lift the header above the rail and the player */
html.focus:not(.focusfill) .hscene{position:fixed;left:0;right:0;top:50%;bottom:auto;width:100vw;height:min(70vh,max(140px,15.56vw));transform:translateY(-50%);z-index:10000;pointer-events:auto;cursor:pointer;background:var(--panel);-webkit-mask-image:none;mask-image:none}
.focusbg{position:fixed;inset:0;z-index:9998;background:var(--panel);cursor:pointer}
.focusx{position:fixed;top:16px;right:16px;z-index:10001;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:var(--lw-hair) solid var(--line,rgba(0,0,0,.15));background:var(--panel);color:var(--ink);font:500 13px var(--f-body);cursor:pointer;opacity:.75}
.focusx:hover,.focusx:focus-visible{opacity:1}
.focusx svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* The tab sheet is the same cream as the header and fretboard panel (2026-10-25: pure or warm grey read as blue next to the cream frame; the darker peach page behind it hid the coral open-string chips, this lighter cream does not), with warm-grey text and lines, so the coloured note chips (the open-string 0 is coral) read clearly; the warm golden-hour paper is for
   everything around it (header, rail, bottom bar), which carries the theme. Light mode only; dark mode is unchanged */
@media (prefers-color-scheme:light){:root[data-scene="canal"]:not([data-theme="dark"]) .main{--bg:oklch(0.984 0.012 70);--panel:oklch(0.993 0.008 70);--line:oklch(0.905 0.012 70);--line-strong:oklch(0.72 0.01 70);--grid:oklch(0.935 0.01 70);--chip:oklch(0.905 0.012 70);--chip-line:oklch(0.80 0.01 70);--chip-tail:oklch(0.945 0.01 70);--on:oklch(0.995 0.006 70);--ink:oklch(0.25 0.008 74);--muted:oklch(0.46 0.008 74);--faint:oklch(0.53 0.007 74);--beat:oklch(0.79 0.006 74);--bar:oklch(0.36 0.008 74);--zebra:oklch(0.3 0.01 74 / .03);background:var(--bg)}}
:root[data-scene="canal"][data-theme="light"] .main{--bg:oklch(0.984 0.012 70);--panel:oklch(0.993 0.008 70);--line:oklch(0.905 0.012 70);--line-strong:oklch(0.72 0.01 70);--grid:oklch(0.935 0.01 70);--chip:oklch(0.905 0.012 70);--chip-line:oklch(0.80 0.01 70);--chip-tail:oklch(0.945 0.01 70);--on:oklch(0.995 0.006 70);--ink:oklch(0.25 0.008 74);--muted:oklch(0.46 0.008 74);--faint:oklch(0.53 0.007 74);--beat:oklch(0.79 0.006 74);--bar:oklch(0.36 0.008 74);--zebra:oklch(0.3 0.01 74 / .03);background:var(--bg)}

/* Type (2026-10-25): Instrument Sans for everything: titles, UI, the tab and every number (Itim and Lexend read as childish; Newsreader titles were tried for a day). Music symbols use Bravura and Noto Music. The variables are set at the top of this file */
:root .tlsec em{font-family:var(--f-display);font-size:12px}
:root :is(#dPos,#mRead,#bpmLbl,#speedLbl){font-family:var(--f-mono)} /* readouts with numbers: the play position, time signature and tempo use the number font */

/* Hand-drawn icons. Every UI icon goes through a small displacement filter (an uneven pen wobble) with round ends;
   the tab, the scene and the fretboard are not icons and are left alone */
:root svg:not(#lane svg):not(.fbx svg):not(.fbx):not(#lane):not([width="0"]){filter:url(#doodleIcon);stroke-linecap:round;stroke-linejoin:round}
:root svg:not(#lane svg):not(.fbx svg) *{stroke-linecap:round;stroke-linejoin:round}

/* doodle scene: the timeline sky sits on its own canvas under the hills. The part already played keeps under half its colour (a soft edge at the playhead, --ph,
   set by tlUpdate), what is coming keeps the full sky; the hills stay full green on both sides (they carry the note density), so the old grey-out of what is coming is off */
#tlSky{position:absolute;left:0;top:17px;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(to right,rgb(0 0 0/.45) calc(var(--ph,0px) - 10px),#000 calc(var(--ph,0px) + 14px));mask-image:linear-gradient(to right,rgb(0 0 0/.45) calc(var(--ph,0px) - 10px),#000 calc(var(--ph,0px) + 14px))}
.tline.nosec #tlSky{top:5px}
.tline.felt .tlrest{display:none}
/* doodle scene: the playhead sun's own canvas over the timeline (tlSun); it replaces the playhead's dot */
#tlSunCv{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
.tline.sun .tlph::before{display:none}
.tline.sun .tlph{width:1.5px;margin-left:-.75px;opacity:.6} /* the line under the sun is lighter, so it reads as the sun's post, not a lollipop stick */
/* doodle scene: the bottom bar on the water. The timeline runs edge to edge (margins set in alignEdges), the water (#deckWater, #deckSun) lies behind the buttons */
.bar.deck.water{position:relative;border-top:0}
.deck.water .zone{position:relative;z-index:1}
.deck.water .tline{z-index:1}
#deckWater,#deckSun{position:absolute;left:0;pointer-events:none;z-index:0}
.deck.water .tlsec span:first-child em{left:14px} /* the first section name keeps clear of the rail */
/* the selected rail item: a soft amber glow like the sun's halo (image made in js/app.js, --rail-hi), not a flat box */
.rail .rb[aria-current="true"]{background:transparent}
/* hover, open buttons and menus in the same family as the rail's glow (--rail-hi): hovering a rail item shows the selected item's glow at half strength, fading in;
   an open rail button (View, Export, Settings while its panel is open) gets the full glow. Menus and panels have a soft warm shadow instead of a heavy grey one;
   a menu's chosen row glows instead of a tinted box and a hovered row glows faintly. The ids in the selectors outrank older rules that forced grey (line ~1034) */
.rail :is(.rb,.tb,#openBtn,#viewBtn,#xpBtn,#setBtn){isolation:isolate;position:relative}
.rail :is(.rb,.tb,#openBtn,#viewBtn,#xpBtn,#setBtn):hover{background:transparent!important;color:var(--ink)}
.rail :is(.rb,.tb,#openBtn,#viewBtn,#xpBtn,#setBtn)[aria-current="true"]:hover{color:var(--st)}
.rail :is(.rb,.tb,#openBtn,#viewBtn,#xpBtn,#setBtn)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rail-hi) center/100% 100% no-repeat;opacity:0;transition:opacity var(--dur-hover) var(--ease-standard)} /* every glow (hover, selected, open) is this layer's opacity, so it always fades */
.rail :is(.rb,.tb,#openBtn,#viewBtn,#xpBtn,#setBtn):is([aria-current="true"],[aria-expanded="true"])::before{opacity:1}
.rail :is(.rb,.tb,#openBtn,#viewBtn,#xpBtn,#setBtn):not([aria-current="true"]):hover::before{opacity:.5}
.rail :is(.rb,.tb,#openBtn,#viewBtn,#xpBtn,#setBtn)[aria-expanded="true"]{background:transparent!important;color:var(--st)}
:is(.pop,.trkmenu,.clkpop,.ctxm,#setPop,#speedPop,#partsPop,#viewMenu){box-shadow:0 10px 28px rgba(120,80,30,.14),0 1px 3px rgba(120,80,30,.08);border-color:var(--line)}
.trkmenu .it[aria-checked="true"]{background:transparent}
.trkmenu .it{position:relative;isolation:isolate}
.trkmenu .it:is(:hover,:focus-visible):not([aria-checked="true"]){background:transparent}
.trkmenu .it::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rail-hi) center/100% 100% no-repeat;opacity:0;transition:opacity var(--dur-hover) var(--ease-standard)}
.trkmenu .it[aria-checked="true"]::before{opacity:1}
.trkmenu .it:is(:hover,:focus-visible):not([aria-checked="true"])::before{opacity:.45}
/* the published site (data-public, set in index.html): no Library in the rail */
:root[data-public] .rail .rb[data-r="library"]{display:none}
/* focus: the timeline and the transport stay with the scene, above the focus background */
html.focus:not(.focusfill) .hscene{top:calc((100dvh - var(--deckH,120px))/2);height:min(70vh,calc(100dvh - var(--deckH,120px) - 56px),max(140px,15.56vw))} /* the scene sits centred in the space above the bar */
html.focus:not(.focusfill) footer.deck{position:relative;z-index:10001;margin-left:-68px;width:calc(100% + 68px);box-sizing:border-box} /* across the whole width: the rail is hidden under the focus background */
@media (max-width:900px){html.focus:not(.focusfill) footer.deck{margin-left:0;width:auto}} /* phones and narrow windows: the rail is at the bottom, not on the left */
@media (max-width:900px){ /* the bottom bar: every button gets an equal share of the width, so labels never run into each other */
  .rail{gap:0;justify-content:space-evenly}
  .rail>:is(.rb,.yfw,.vww,.exw){flex:1 1 0;min-width:0;max-width:76px}
  .rail>:is(.rb,#openBtn),.rail :is(#viewBtn,#xpBtn){width:100%;white-space:nowrap}
  .rail .rb.ri{flex:0 0 44px}}
@media (max-width:560px){ /* phones: icons only, the names stay as tooltips and screen-reader labels */
  .rail>.rb:not(.ri){font-size:0;gap:0;padding:10px 0}.rail :is(#openBtn,#viewBtn,#xpBtn){padding:10px 0;gap:0}.rail :is(#openBtn,#viewBtn,#xpBtn) .tx{display:none!important}}
/* doodle scene: the header's bottom edge is a hand-drawn wooden fence (#edgeCv, js/app.js) instead of a hairline */
html.fenced .top{border-bottom-color:transparent}
#edgeCv{position:absolute;left:0;bottom:-6px;z-index:2;pointer-events:none;display:block}
.top>:has(.trkmenu:not([hidden])){z-index:3} /* an open menu sits above the fence (#98) */
.sl{stroke:var(--grid);stroke-width:var(--lw-hair);opacity:.75} /* subdivision lines (View → Subdivision lines): lighter than the beat lines */
/* header views (View → Header, html[data-head]): scene (as before), hidden (a thin strip with the song details), large (the strip, then the scene across the
   whole width, drawn like focus mode: a 900-unit lane magnified, so its height follows the width) */
html[data-head="hidden"] .top,html[data-head="large"] .top{flex-direction:column;align-items:stretch;gap:0;padding-top:7px;padding-bottom:7px}
html[data-head="hidden"] .top .idn,html[data-head="large"] .top .idn{flex-direction:row;align-items:center;gap:14px}
html[data-head="hidden"] .top .song,html[data-head="large"] .top .song{font-size:16px!important}
html[data-head="hidden"] .top .song b,html[data-head="large"] .top .song b{font-size:16px}
/* open tabs (board #157): the song title is the open tab; the other open files sit after it as quiet chips, then + for a blank tab.
   As many chips as fit the room the header view leaves (tabsFit); the rest go into "N more". Phones: the title's arrow lists them */
.ftrow{position:relative;display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}
.top .ftrow .song{flex:0 1 auto;min-width:0}
html:is([data-head="hidden"],[data-head="large"]) .ftrow{margin-right:12px}
.fts{display:flex;align-items:center;gap:4px;flex:none;margin-block:-4px}
.fts:empty{display:none}
.fts .ft{position:relative;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:0;border-radius:6px;background:color-mix(in oklab,var(--ink) 6%,transparent);color:var(--muted);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer}
.fts .ft::after,.fts .ftplus::after{content:"";position:absolute;inset:-4px 0} /* a 32 px hit area round the 24 px chip (design system §6) */
.fts .ft:is(:hover,:focus-visible,[aria-expanded="true"]){background:color-mix(in oklab,var(--ink) 11%,transparent);color:var(--ink)}
.fts .ft .x{position:relative;z-index:1;display:inline-grid;place-items:center;width:16px;height:16px;margin-right:-4px;border-radius:50%;opacity:0;transition:opacity var(--dur-hover) var(--ease-standard),background-color var(--dur-hover) var(--ease-standard)}
.fts .ft:is(:hover,:focus-visible) .x{opacity:1}
.fts .ft .x:hover{background:color-mix(in oklab,var(--ink) 12%,transparent)}
.fts svg,.ftcaret svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fts .ftplus{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}
.fts .ftplus:is(:hover,:focus-visible){background:color-mix(in oklab,var(--ink) 8%,transparent);color:var(--ink)}
.ftcaret{display:inline-grid;place-items:center;width:44px;height:44px;margin:-10px -10px -10px -18px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer}
.ftcaret[hidden]{display:none}
.ftcaret:hover{color:var(--ink)}
.ftmenu{top:32px;width:280px}
.ftmenu .it{min-height:32px}
@media (max-width:640px){.fts{display:none}.ftmenu .it{min-height:44px}}
@media (min-width:641px){.ftcaret{display:none}}
html.focusfill :is(.fts,.ftcaret){display:none!important}
html[data-head="hidden"] .top .meter,html[data-head="hidden"] #mScene{display:none!important}
html[data-head="large"]{--sceneH:max(80px,min(calc((100vw - 68px)*.1556),34vh,calc(100dvh - var(--deckH,140px) - var(--fbH,0px) - 350px)))} /* never so tall that a whole tab row stops fitting below it, fretboard included (board #57) */
html[data-head="large"] .top .meter{display:flex!important;flex:none;height:var(--sceneH);margin:6px 0 -7px}
html[data-head="large"] .top .mslot{min-height:0}
html[data-head="large"] .top .slotw{display:none}
html[data-head="large"] #mScene{top:auto;bottom:0;height:var(--sceneH);-webkit-mask-image:none;mask-image:none} /* a canvas does not stretch between top and bottom: its height is set */
html[data-head="hidden"] .top{border-bottom-color:var(--line)} /* Hidden has no fence: it ends in the same plain line as the rail's edge (board #135) */
/* switching header views (board #134): the header glides to its new height and the tab slides with it; the pictures are clipped, never stretched, and fade one after the other */
html.vglide .top{view-transition-name:head}
html.vglide #main{view-transition-name:tab}
html.vglide #edgeCv:not([hidden]){view-transition-name:fence} /* hangs below the header, so it moves on its own instead of being clipped */
html.vglide #viewMenu:not([hidden]){view-transition-name:vmenu} /* the open menu stays on top */
::view-transition-group(head),::view-transition-group(tab),::view-transition-group(fence){animation-duration:240ms;animation-timing-function:var(--ease-out);overflow:clip}
::view-transition-old(head),::view-transition-new(head),::view-transition-old(tab),::view-transition-new(tab){height:100%;object-fit:none;object-position:top;mix-blend-mode:normal}
::view-transition-old(head),::view-transition-old(tab),::view-transition-old(fence){animation:vt-out 110ms var(--ease-standard) both}
::view-transition-new(head),::view-transition-new(tab),::view-transition-new(fence){animation:vt-in 160ms var(--ease-standard) 80ms both} /* one after the other: two pictures of different sizes never show on top of each other */
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0}}
/* focus (board #96; a window under 580 px tall keeps the full-screen scene above): the scene fills the screen above one tab row, the timeline and the bar; no rail, no song strip */
html.focusfill #rail{display:none}
html.focusfill .app{margin-left:0;width:100%;height:100dvh} /* also under 900 px, where the rail sits at the bottom and is hidden here */
html.focusfill .top{flex-direction:column;align-items:stretch;gap:0;padding:0;--sceneH:max(140px,calc(100dvh - var(--deckH,140px) - var(--fbH,0px) - var(--rowH,249px)))}
html.focusfill .main{scroll-padding-top:10px;-webkit-mask-image:linear-gradient(transparent 10px,#000 10px calc(100% - 8px),transparent calc(100% - 8px));mask-image:linear-gradient(transparent 10px,#000 10px calc(100% - 8px),transparent calc(100% - 8px))} /* only the playing row: the edges of its neighbours stay hidden */
html.focusfill .top .idn,html.focusfill #tabTip{display:none!important}
html.focusfill .top .meter{display:flex!important;flex:none;height:var(--sceneH);margin:0}
html.focusfill .top .mslot{min-height:0}
html.focusfill .top .slotw{display:none}
html.focusfill #mScene{display:block!important;top:auto;bottom:0;height:var(--sceneH);-webkit-mask-image:none;mask-image:none}
/* focus (board #96): a grip on the line between the scene and the tab; dragging it shows more or fewer rows (design system, section 6: Grip) */
@property --rowH{syntax:'<length>';inherits:true;initial-value:249px}
html.focusfill{transition:--rowH .24s var(--ease-out)} /* lets go: glides to whole rows */
html.focusfill.fdrag{transition:none}
.fgrip{display:none}
html.focusfill .fgrip{display:flex;position:absolute;left:0;right:0;bottom:-8px;height:16px;justify-content:center;align-items:center;cursor:ns-resize;z-index:5;touch-action:none;border-radius:6px}
html.focusfill .fgrip::before{content:'';width:36px;height:4px;border-radius:999px;background:var(--muted);opacity:.35;transition:opacity var(--dur-hover) var(--ease-out)}
html.focusfill .fgrip:hover::before,html.fdrag .fgrip::before{opacity:.9}
html.focusfill .fgrip:focus-visible{outline:2px solid var(--st);outline-offset:-2px} /* the app's focus ring */
@media (prefers-reduced-motion:reduce){html.focusfill{transition:none}}
/* feedback panel (rail → speech bubble), next to the rail at the bottom */
.pop.fbk{left:78px;bottom:16px;top:auto;right:auto;width:360px;padding:14px;display:flex;flex-direction:column;gap:8px;z-index:33} /* above the Library and What's new (32), so feedback can be sent from every page */
.pop.fbk[hidden]{display:none}
.fbkh{font:600 15px var(--f-display);color:var(--ink)}
.fbks{margin:0;font-size:13px;color:var(--muted)}
.fbk textarea,.fbk input{font:14px var(--f-body);color:var(--ink);background:var(--bg);border:var(--lw-hair) solid var(--line-strong,var(--line));border-radius:10px;padding:8px 10px;resize:vertical;min-height:0}
.fbk textarea{min-height:96px}
/* the details editor: a box like the inputs, with a quiet formatting toolbar on top (bold, italic, underline, lists, add a picture) */
.fbkhr{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.fbkdisc{border:0;background:none;padding:0;font:13px var(--f-body);color:var(--faint);cursor:pointer;opacity:0;visibility:hidden;transition:opacity var(--dur-hover) var(--ease-standard),color var(--dur-hover),visibility 0s linear var(--dur-hover)}
.fbkdisc.on{opacity:1;visibility:visible;transition:opacity var(--dur-hover) var(--ease-standard),color var(--dur-hover),visibility 0s}
.fbkdisc:hover{color:var(--ink)}
.fbked{border:var(--lw-hair) solid var(--line-strong,var(--line));border-radius:10px;background:var(--bg);transition:border-color var(--dur-hover)}
.fbked:focus-within{border-color:color-mix(in oklab,var(--st) 55%,var(--line-strong,var(--line)))}
.fbktools{display:flex;align-items:center;gap:2px;padding:4px 6px;border-bottom:var(--lw-hair) solid var(--line)}
.fbktools button{width:28px;height:26px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--muted);font:600 14px var(--f-body);cursor:pointer;padding:0}
.fbktools button:hover{background:var(--chip);color:var(--ink)}
.fbktools button[aria-pressed="true"]{background:var(--st-bg);color:var(--st)}
.fbktools svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fbktools svg circle{fill:currentColor;stroke:none}.fbktools #fbkPicBtn svg circle{fill:none;stroke:currentColor}
.fbksp{flex:1}
.fbkta{position:relative;min-height:104px;max-height:240px;overflow:auto;padding:8px 10px;font:14px/1.5 var(--f-body);color:var(--ink);outline:none;overflow-wrap:anywhere}
.fbkta.empty::before{content:attr(data-ph);color:var(--faint);pointer-events:none;position:absolute}
.fbkta ul,.fbkta ol{margin:2px 0;padding-left:22px}.fbkta p,.fbkta div{margin:0}
/* attached pictures: small thumbnails with a remove button; the row only takes space once there is a picture */
.fbkpics{display:none;gap:8px;flex-wrap:wrap}.fbkpics.on{display:flex}
.fbkpic{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:var(--lw-hair) solid var(--line);background:var(--bg);animation:fbkPicIn 220ms var(--ease-out)}
.fbkpic img{width:100%;height:100%;object-fit:cover;display:block}
.fbkpic button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:10px;border:0;background:color-mix(in oklab,var(--ink) 70%,transparent);color:var(--bg);font:600 13px/20px var(--f-body);padding:0;cursor:pointer;opacity:.85}
.fbkpic button:hover{opacity:1}
@keyframes fbkPicIn{from{opacity:0;transform:translateY(3px)}}
.pop.fbk.drop{outline:2px dashed color-mix(in oklab,var(--st) 60%,transparent);outline-offset:-6px}
/* the Feedback rail button carries a small amber dot while a draft is waiting to be sent */
.rail #fbkBtn::after{content:"";position:absolute;top:7px;right:13px;width:7px;height:7px;border-radius:50%;background:var(--st);box-shadow:0 0 0 2px var(--panel,var(--bg));opacity:0;transform:scale(.6);transition:opacity var(--dur-hover) var(--ease-standard),transform var(--dur-hover) var(--ease-out)}
.rail #fbkBtn.draft::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fbkpic{animation:none}.rail #fbkBtn::after{transform:none}}
.fbk .fbkhp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* the decoy only bots fill in */
.fbkf{display:flex;align-items:center;justify-content:space-between;gap:10px}
#fbkMsg{font-size:13px;color:var(--muted)}
/* the characters-left note and the status message share one spot, so neither moves anything; the note fades in only in the last 500 characters */
.fbkinfo{display:grid;min-width:0}.fbkinfo>*{grid-area:1/1;align-self:center}
.fbkleft{font:12.5px var(--f-mono);color:var(--faint);opacity:0;transition:opacity var(--dur-hover) var(--ease-standard),color var(--dur-hover)}
.fbkleft.on{opacity:1}.fbkleft.low{color:var(--muted)}
.fbkinfo:has(#fbkMsg:not(:empty)) .fbkleft{opacity:0}
#fbkSend{background:var(--pv-acc,oklch(0.55 0.09 150));color:oklch(0.99 0 0);border-color:transparent;padding:0 18px;height:34px;border-radius:17px;font-weight:600} /* the play button's green: clearly the thing to press */
#fbkSend:hover{background:color-mix(in oklab,var(--pv-acc,oklch(0.55 0.09 150)) 88%,black)}
#fbkSend:disabled{opacity:.6;cursor:default}
@media (max-width:900px){.pop.fbk{left:12px;right:12px;width:auto;bottom:70px}}
/* feedback sent: the confirmation sits over the form in the same box, so the panel never changes size; the form fades out as it fades in,
   then a pen tick in the play green draws itself and a lime highlighter swipe marks the thank-you line. Reduced motion: a plain fade */
.fbkform{display:flex;flex-direction:column;gap:8px;transition:opacity 200ms var(--ease-out),visibility 0s linear 0s}
.pop.fbk.sent .fbkform{opacity:0;visibility:hidden;transition:opacity 180ms var(--ease-out),visibility 0s linear 180ms}
.fbkdone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:14px;
  opacity:0;visibility:hidden;transition:opacity 260ms var(--ease-out) 80ms,visibility 0s linear 340ms}
.pop.fbk.sent .fbkdone{opacity:1;visibility:visible;transition:opacity 260ms var(--ease-out) 80ms,visibility 0s}
.fbktick{width:56px;height:56px}
.fbktick .ck{fill:none;stroke:var(--pv-acc,oklch(0.55 0.09 150));stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.fbkthx{position:relative;display:inline-block;padding:2px 10px;font:600 17px var(--f-display);color:var(--ink)}
.fbkthx span{position:relative}
.fbkhl{position:absolute;inset:-2px -4px;width:calc(100% + 8px);height:calc(100% + 4px);transform-origin:left center;transform:scaleX(0)}
.fbkhl path{fill:oklch(0.88 0.16 132 / .62);mix-blend-mode:multiply} /* lime highlighter, the normal pad's green */
.pop.fbk.sent .fbktick .ck{animation:fbkDraw .55s cubic-bezier(.45,.1,.3,1) .25s forwards} /* the animations start when the panel turns to "sent", so each send replays them */
.pop.fbk.sent .fbkhl{animation:fbkSwipe .45s cubic-bezier(.3,.6,.3,1) .75s forwards}
@keyframes fbkDraw{to{stroke-dashoffset:0}}
@keyframes fbkSwipe{to{transform:scaleX(1)}}
#fbkSend{min-width:96px}
#fbkSend.busy{animation:fbkBusy 1.2s ease-in-out infinite alternate} /* sending: the button breathes gently, same size, no text jump */
#fbkSend.busy:disabled{opacity:1}
@keyframes fbkBusy{from{opacity:1}to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.pop.fbk.sent .fbktick .ck{animation:none;stroke-dashoffset:0}.pop.fbk.sent .fbkhl{animation:none;transform:none}#fbkSend.busy{animation:none;opacity:.7}}
/* dusk, the doodle scene's dark mode (2026-10-25; the sky and water are NIGHT in js/app.js): the dark palette moved from green (152) to dusk's violet (308) */
@media (prefers-color-scheme:dark){:root[data-scene="canal"][data-doodle]:not([data-theme="light"]){--bg:oklch(0.195 0.019 308);--panel:oklch(0.225 0.022 308);--ink:oklch(0.920 0.017 308);--muted:oklch(0.720 0.024 308);--faint:oklch(0.630 0.022 308);--line:oklch(0.300 0.022 308);--line-strong:oklch(0.430 0.024 308);--beat:oklch(0.390 0.022 308);--bar:oklch(0.780 0.024 308);--zebra:oklch(0.95 0.02 100 / .022);--grid:oklch(0.260 0.019 308);--on:oklch(0.190 0.024 308);--btn:oklch(0.920 0.017 308);--btn-ink:oklch(0.200 0.024 308);--chip:oklch(0.330 0.024 308);--chip-line:oklch(0.450 0.024 308);--chip-tail:oklch(0.270 0.022 308);--sea:oklch(0.260 0.042 308 / .5);;--deep:oklch(0.170 0.030 308);--wood:oklch(0.58 0.045 75);--pearl:oklch(0.180 0.014 308);--fbstring:oklch(0.300 0.014 308);--fbfret:oklch(0.46 0.03 70);--nut:oklch(0.74 0.03 80);--fbmap:.9;--chipedge:oklch(0.250 0.012 308 / .55);}}
:root[data-scene="canal"][data-doodle][data-theme="dark"]{--bg:oklch(0.195 0.019 308);--panel:oklch(0.225 0.022 308);--ink:oklch(0.920 0.017 308);--muted:oklch(0.720 0.024 308);--faint:oklch(0.630 0.022 308);--line:oklch(0.300 0.022 308);--line-strong:oklch(0.430 0.024 308);--beat:oklch(0.390 0.022 308);--bar:oklch(0.780 0.024 308);--zebra:oklch(0.95 0.02 100 / .022);--grid:oklch(0.260 0.019 308);--on:oklch(0.190 0.024 308);--btn:oklch(0.920 0.017 308);--btn-ink:oklch(0.200 0.024 308);--chip:oklch(0.330 0.024 308);--chip-line:oklch(0.450 0.024 308);--chip-tail:oklch(0.270 0.022 308);--sea:oklch(0.260 0.042 308 / .5);;--deep:oklch(0.170 0.030 308);--wood:oklch(0.58 0.045 75);--pearl:oklch(0.180 0.014 308);--fbstring:oklch(0.300 0.014 308);--fbfret:oklch(0.46 0.03 70);--nut:oklch(0.74 0.03 80);--fbmap:.9;--chipedge:oklch(0.250 0.012 308 / .55);}

/* What's new (2026-10-25): the release notes from releases/releases.json, a rail view like the Library, laid out like Linear's changelog:
   the date on a hairline at the left (stays put while the entry scrolls), a big title, the new things with a heading each, small lists last */
.wnew{overflow:auto}
.rail [data-r=news]{white-space:nowrap}
.wn{width:100%;max-width:860px;margin:0 auto;padding:44px 40px 80px;box-sizing:border-box}
.wn-h{font:600 40px/1.1 var(--f-display);letter-spacing:-.02em;margin:0 0 6px}
.wn-s{color:var(--muted);margin:0 0 34px;font-size:15px}
.wnr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 36px;padding:34px 0 40px;border-top:1px solid var(--line)}
.wnw{position:relative;padding-left:18px;font-size:13.5px;color:var(--muted)}
.wnw>div{position:sticky;top:20px}
.wnw::before{content:"";position:absolute;left:3px;top:24px;bottom:-40px;width:1px;background:var(--line)}
.wnw i{position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--st)}
.wnr.old .wnw i{background:var(--line-strong)}
.wnw b{display:block;font-weight:500;color:var(--ink)}
.wnr h2{font:600 30px/1.15 var(--f-display);letter-spacing:-.015em;margin:0 0 18px;max-width:22ch}
.wnr.old h2{font-size:24px}
.wni{font-size:16.5px;line-height:1.55;max-width:58ch;margin:0 0 8px}
.wnf h3{font:600 19px/1.3 var(--f-display);letter-spacing:-.01em;margin:24px 0 6px}
.wnf p{margin:0;max-width:58ch;font-size:15px;line-height:1.55}
.wnv{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:12px;background:var(--panel);margin:28px 0 -8px}
.wnl{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.wnl h4{font:600 12px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.wnl ul{list-style:none;margin:0;padding:0}.wnl li{padding:6px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45}
.wne{color:var(--faint);font-size:13px;padding-left:186px}
.wnp{background:var(--st-bg);color:var(--st);border-radius:10px;padding:8px 12px;font-size:13px;margin:0 0 20px}
@media (max-width:760px){.wn{padding:28px 16px 48px}.wn-h{font-size:32px}.wnr{grid-template-columns:minmax(0,1fr)}.wnw{margin-bottom:12px}.wnw::before{display:none}.wnw>div{position:static}.wnl{grid-template-columns:minmax(0,1fr)}.wne{padding-left:0}.wnr h2{font-size:26px}}
/* first-visit hint above the tab (#44): fades in with a small drift; on closing it fades and folds away so the tab glides up */
.tabtip{scroll-snap-align:start;margin:4px 0 6px;max-height:60px;overflow:hidden;width:max-content;max-width:100%;display:flex;align-items:center;gap:6px;padding:2px 2px 2px 12px;font-size:12px;color:var(--muted);background:var(--bg);border-radius:8px;box-shadow:inset 0 0 0 var(--lw-hair) var(--line);opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),max-height .4s var(--ease-out),margin .4s var(--ease-out),padding .4s var(--ease-out)}
.tabtip.in{opacity:1;transform:none} .tabtip.shut{max-height:0;margin:0;padding-top:0;padding-bottom:0}
.tabtip .icon{width:26px;height:26px;font-size:17px;color:var(--faint)} .tabtip .icon:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.tabtip{transform:none}}

/* board #43: the rail holds places on top, a short line, then the Player's tools (Open, View, Export, Settings); Feedback and Help at the bottom.
   Away from the Player (Library, What's new) its tools go: the page change is a calm() cross-fade, so they fade out with it */
.rail .rdiv{flex:none;width:32px;height:1px;margin:4px 0;background:var(--line-strong);opacity:.6}
body:is(.athome,.atnews) .rail :is(.rdiv,.yfw,.vww,.exw,#edBtn,#setBtn){display:none}
@media (max-width:900px){.rail .rdiv{display:none}}
/* the View menu holds every look setting: segmented rows for pick-one, switches for on/off */
.viewmenu{width:316px;max-height:calc(100dvh - 28px);overflow:auto}
.rail .viewmenu{position:fixed;left:80px;top:14px;bottom:auto}
.viewmenu .vh{padding:10px 10px 4px}
.viewmenu .vseg{margin:2px 6px 4px;padding:2px;border-radius:999px}
.viewmenu .vseg button{flex:1;height:28px;padding:0 6px;font-size:12.5px;border-radius:999px;white-space:nowrap}
.viewmenu .vseg button:hover:not([aria-disabled="true"]){color:var(--ink)}
.viewmenu .vseg button[aria-disabled="true"]{opacity:.35;cursor:default} /* a row count that cannot fit (board #88), like the transport switch */
.viewmenu .vrow{display:flex;align-items:center;gap:8px;padding:2px 4px 2px 10px}
.viewmenu .vrow>span{flex:none;width:88px;font-size:13px}
.viewmenu .vrow .vseg{flex:1;margin:0}
.viewmenu .it{align-items:center}
.viewmenu .vsw{position:relative;flex:none;width:26px;height:15px;border-radius:8px;background:var(--line-strong);transition:background var(--dur-hover) var(--ease-out)}
.viewmenu .vsw::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--panel);transition:transform var(--dur-hover) var(--ease-out)}
.viewmenu .it[aria-checked="true"] .vsw{background:var(--st)}.viewmenu .it[aria-checked="true"] .vsw::after{transform:translateX(11px)}
@media (max-width:900px){.rail .viewmenu{left:auto;right:12px;top:auto;bottom:calc(58px + var(--deckH,64px) + 8px);max-height:calc(100dvh - 58px - var(--deckH,64px) - 24px)}}
/* Your files (board #128): opens from Open in the rail, placed like the View menu: a new file first, then the files opened before, newest first */
.yfmenu :is(.yfnew,.yfed) .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);margin-top:1px}
.yfmenu .yftools{display:flex;gap:8px;align-items:center;margin:4px 6px 6px}
.yfmenu .yftools input{flex:1;min-width:0;height:32px;box-sizing:border-box;font:400 13px var(--f-body);color:var(--ink);background:var(--bg);border:var(--lw-hair) solid var(--line-strong);border-radius:6px;padding:0 10px}
.yfmenu .yftools input:focus-visible{outline:2px solid var(--st);outline-offset:1px}
.yfmenu .yftools .vseg{margin:0;flex:none}
.yfmenu .yftools .vseg button{flex:none;padding:0 10px}
.yfmenu .yfl .it .nm{overflow:hidden}
.yfmenu .yfl .it .nm b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yfmenu .yfl .it[aria-checked="true"]{background:var(--st-bg)}
.yfmenu .yfl .it[aria-checked="true"] .nm b{font-weight:600}
.yfmenu .yfnone{margin:0;padding:8px 10px 10px;font-size:12.5px;color:var(--muted)}
.viewmenu .it:has(.vsw)::after{display:none} /* a switch row shows on/off with its switch only: no chosen-row glow or dot (those mean "picked one") */
.viewmenu .it:has(.vsw)[aria-checked="true"]{font-weight:inherit}
.viewmenu .it:has(.vsw)[aria-checked="true"]::before{opacity:0}
.viewmenu .it:has(.vsw)[aria-checked="true"]:is(:hover,:focus-visible)::before{opacity:.45}

/* the tab editor (board #147): Edit in the rail is a Toggle, the edit bar sits above the fretboard, the cursor is an amber box on one string */
.rail #edBtn[aria-pressed="true"]{color:var(--st)}
.rail #edBtn[aria-pressed="true"]::before{opacity:1}
.rail #edBtn[aria-disabled="true"]{opacity:.4}
.rail #edBtn[aria-disabled="true"]:hover::before{opacity:0}
.rail #edBtn[hidden],:root[data-public] .yfed,:root[data-public] .hedit,:root[data-public] .ex[data-x=gp]{display:none} /* the editor stays local until Richard ships it, its .gp export too */
@media (max-width:640px){.rail #edBtn,.yfed{display:none!important}}
.edbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 12px;border-top:var(--lw-hair) solid var(--line);background:var(--panel);font-size:14px;color:var(--muted)}
.edbar[hidden]{display:none}
.edbar .hseg button{height:28px}
.edbar .tb{height:28px;padding:0 10px}
.edbar .edlab{font-size:12.5px;display:inline-flex;align-items:center;gap:8px}
.edbar input[type=number]{width:56px}
.edbar .edhint{margin-left:auto;font-size:12.5px;color:var(--faint)}
.lanebox .edlay{pointer-events:none}
.edcur{fill:color-mix(in oklab,var(--st) 14%,transparent);stroke:var(--st);stroke-width:var(--lw-reg)}
.edsel{fill:color-mix(in oklab,var(--st) 22%,transparent);pointer-events:none} /* a selected note: the loop range's tint, stronger, with no outline (the outline is the cursor) */
.edbox{position:fixed;z-index:45;border:var(--lw-hair) solid var(--st);background:color-mix(in oklab,var(--st) 9%,transparent);border-radius:6px;pointer-events:none} .edbox[hidden]{display:none} /* the selection box while dragging in Edit mode */
.edgrip{pointer-events:auto;cursor:ew-resize}
.edgrip rect{fill:transparent}
.edgrip line{stroke:var(--muted);stroke-width:var(--lw-hair)}
.edgrip:hover line{stroke:var(--st);stroke-width:var(--lw-reg)}
body.edsizing,body.edsizing *{cursor:ew-resize!important}