/* perun groove atlas: look A of the dub lab (picked 2026-10-18 on /dub/look/):
   the palette's two colours only, the site's condensed display face and
   monospace, 3px lines, no radius, no shadow, hard edges. Needs
   site/css/tokens.css linked first. Colours go through --paper / --ink /
   --rule / --acc so a look sheet can swap them later. */
:root{--paper:var(--vo-paper);--ink:var(--vo-ink);--rule:var(--ink);--acc:var(--ink);--acc-ink:var(--paper)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper)}
body{color:var(--ink);font-family:var(--mono);font-size:var(--t-body);line-height:1.6}
.page{max-width:1240px;margin:0 auto;padding:0 var(--gut) var(--s-8)}
button,select{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer}
:focus-visible{outline:var(--line) solid var(--acc);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the bar: the site's own top bar and phone menu (2026-10-21), copied from
   site/css/site.css because the whole site stylesheet would restyle the
   instrument; keep in step with it (top bar, .stack, the phone menu). The
   behaviour is common.js's (startMenu, initMenu, initPalette), as on the
   Sound page. The atlas's own bar is the strip at the bottom (.pbar). */
html{scroll-padding-top:64px}
:is(.bar,.tabbar,.sheet) a{color:inherit}   /* site.css sets a{color:inherit} for the whole page */
@media (min-width:821px){.page{padding-top:57px}}
/* ---------- top bar ---------- */
.bar{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;gap:var(--s-5);
  /* Side padding puts the mark and the colour button on the edges of the
     content column (max 1240px, centred), not the window's, so the bar
     lines up with every block under it on wide screens. */
  padding:10px max(var(--gut), calc((100% - 1240px) / 2 + var(--gut)));
  background:var(--vo-paper);border-bottom:var(--line) solid var(--vo-ink);
  font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase;
  transition:background-color .5s,color .5s}
.bar-mark{font-family:var(--cond);font-size:24px;letter-spacing:0;text-decoration:none;line-height:1}
.bar-nav{display:flex;gap:var(--s-4);margin-left:auto;overflow-x:auto;scrollbar-width:none}
.bar-nav::-webkit-scrollbar{display:none}
.bar-nav a{text-decoration:none;white-space:nowrap}
.bar-nav a:hover{text-decoration:underline;text-underline-offset:4px}
/* EN / PL. The current language is filled, the other is a plain link. */
.lang{display:flex;border:var(--line) solid var(--vo-ink)}
.lang a{padding:var(--s-1) var(--s-2);text-decoration:none;font-size:var(--t-xs);letter-spacing:var(--tr-2)}
.lang a + a{border-left:var(--line) solid var(--vo-ink)}
.lang a[aria-current]{background:var(--vo-ink);color:var(--vo-paper)}
.lang a:not([aria-current]):hover{background:var(--vo-ink);color:var(--vo-paper)}
.pal{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-2) var(--s-1) var(--s-1);border:var(--line) solid var(--vo-ink);
  font-size:var(--t-xs);letter-spacing:var(--tr-2);text-transform:uppercase;white-space:nowrap}
.pal:hover{background:var(--vo-ink);color:var(--vo-paper)}
.pal-chip{width:18px;height:18px;background:linear-gradient(135deg,var(--vo-a) 0 50%,var(--vo-b) 50% 100%);
  box-shadow:inset 0 0 0 2px currentColor}
@media(max-width:820px){
  .bar{flex-wrap:wrap;gap:var(--s-2) var(--s-3)}
  .bar-nav{order:3;width:100%;margin-left:0;gap:var(--s-3)}
  .lang{margin-left:auto}
  .pal-name{display:none}
  html[data-bar="top"]{scroll-padding-top:92px}
}
.stack{display:inline-grid}
.stack>span{grid-area:1 / 1;visibility:hidden}
.stack>span.on{visibility:visible}
/* ---------- the phone menu (built in common.js, startMenu) ---------- */
/* Below 820px the top bar steps aside for one bar at the bottom: the name,
   the page you are on, and Menu, which opens the whole screen as a list. */
.tabbar,.sheet{display:none}
@media(max-width:820px){
  html:not([data-bar="top"]) .bar{display:none}
  html:not([data-bar="top"]) body{padding-bottom:var(--tabbar-h,55px)}
  .tabbar{display:grid;position:fixed;z-index:52;left:0;right:0;bottom:0;grid-template-columns:auto minmax(0,1fr) auto;
    background:var(--vo-paper);color:var(--vo-ink);border-top:var(--line) solid var(--vo-ink);padding-bottom:env(safe-area-inset-bottom);
    font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase;transition:background-color .5s,color .5s}
  .tabbar>*{display:flex;align-items:center;min-height:52px;padding:0 var(--s-4);text-decoration:none}
  .tabbar>*+*{border-left:var(--line) solid var(--vo-ink)}
  .tab-name{font-family:var(--cond);font-size:24px;letter-spacing:0;line-height:1}
  .tab-here{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .tab-menu{display:grid!important;place-items:center;background:var(--vo-ink);color:var(--vo-paper);padding:0 var(--s-5);text-transform:inherit;letter-spacing:inherit}
  .tab-menu>span{grid-area:1 / 1}
  .sheet{display:flex;position:fixed;z-index:51;left:0;right:0;top:0;bottom:var(--tabbar-h,55px);flex-direction:column;justify-content:flex-end;gap:var(--s-5);
    overflow:auto;padding:var(--s-4) var(--gut);background:var(--vo-paper);color:var(--vo-ink)}
  .sheet[hidden]{display:none}
  html.sheet-open{overflow:hidden}
  .sheet-pages,.sheet-sections{display:flex;flex-direction:column;border-top:var(--line) solid var(--vo-ink)}
  .sheet-pages:empty,.sheet-sections:empty{display:none}
  .sheet:focus{outline:0}
  :is(.sheet-pages,.sheet-sections) a{font-family:var(--cond);font-size:clamp(32px,10vw,44px);line-height:1.1;text-transform:uppercase;text-decoration:none;padding:var(--s-1) 0;border-bottom:var(--line) solid var(--vo-ink)}
  .sheet-pages a::after{content:" \2192"}
  .sheet-pages a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
  .sheet-row{display:flex;gap:var(--s-3);align-items:center;font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase}
  .sheet-row .lang{margin:0}
  .sheet-row .pal-name{display:grid}
}
@media(max-width:820px){.lang a,.pal-name{font-size:var(--t-s)}}
@media(pointer:coarse){
  .bar-nav a,.lang a,.pal{position:relative}
  :is(.bar-nav a,.lang a,.pal)::before{content:"";position:absolute;inset:var(--hit,-4px) 0}
  .lang a{--hit:-12px}
  .bar-nav{padding-block:12px;margin-block:-12px}
  .bar-nav a{padding-block:12px;margin-block:-12px}
  .bar-nav a::before{content:none}
  .pal{--hit:-6px}
}

/* the title */
.hero{display:grid;gap:var(--s-4);padding-block:var(--s-7) var(--s-6)}
.hero .eyebrow{grid-column:1/-1;margin:0;font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase;opacity:var(--fade-2)}
.hero h1{grid-column:1/-1;margin:0;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(64px,13vw,190px);line-height:.8}

/* the style pads' box (pads.js): its own layer, so nothing in it draws over the sticky bar */
.mapsec{position:relative;isolation:isolate;border:var(--line) solid var(--rule);margin-bottom:var(--s-5)}

/* the console: genre card, transport, grid */
.console{border:var(--line) solid var(--rule)}
.console > * + *{border-top:var(--line) solid var(--rule)}
select{border:var(--line) solid var(--rule);padding:var(--s-2) var(--s-3);font-size:var(--t-m);background:var(--paper);min-height:42px}

/* the style panel (deck.js; layout in the panel's own block below) */
.deck{display:grid}
/* Play, BPM and key, at the foot of the panel's board */
.ringctl{display:grid;gap:var(--s-2);padding:var(--s-3);border-top:var(--line) solid var(--rule);margin-top:auto}
.ringctl .play{border:var(--line) solid var(--rule);background:var(--ink);color:var(--paper);min-height:48px;font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase;font-weight:700}
.ringctl .play:hover{background:var(--paper);color:var(--ink)}
.ringctl .play.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.ringctl .fader{display:grid;grid-template-columns:9ch minmax(0,1fr) auto;gap:var(--s-2)}
.ringctl .fader input{width:100%}
.ringctl .fader output{text-align:right;min-width:3ch}
/* the key menu, third line under the ring */
.ringctl .keyrow{grid-template-columns:9ch minmax(0,1fr)}   /* 9ch: the Polish Tonacja with its letter spacing */
.ringctl .keyrow select{min-height:38px;padding-block:var(--s-1);padding-left:var(--s-2)}

/* the transport: three groups, each with a heading and a one-line hint */
.transport{display:flex;flex-wrap:wrap;align-items:stretch;padding:0;gap:var(--line);background:var(--rule)}
/* each group as wide as its controls (the hint wraps to fit), growing to fill the row; the 3px
   gap shows the ink behind as the dividing line, so lines stay right however the row wraps */
.tgroup{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-3);min-width:0;flex:0 1 auto;background:var(--paper)}
/* Presets and Live moves: equal halves of the row, four big buttons each, two by two */
.tgroup.tg-wide{flex:1 1 0}
.tg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
/* every big button the same size; .transport makes it outrank the general button rule below */
.transport .tg-grid{grid-auto-rows:64px}
.transport .tg-grid > button,.transport .tg-grid > .slot{min-height:0;height:100%}
/* the controls of all three groups share one line at the foot of the row */
.tgroup > :last-child{margin-top:auto}
/* the key menu sits in the middle of the space under its heading */
.tgroup:not(.tg-wide) > select{margin-block:auto}
.tgroup select{min-height:64px;min-width:16ch}
.tg-h{margin:0;font-size:var(--t-s);line-height:1.4;width:0;min-width:100%}
.tg-h b{display:block;letter-spacing:var(--tr-2);text-transform:uppercase}
@media (max-width:760px){.tgroup,.tgroup.tg-wide{flex:1 1 100%}}
.transport button{border:var(--line) solid var(--rule);padding:var(--s-2) var(--s-3);font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase;min-height:48px}
.transport button:hover{background:var(--ink);color:var(--paper)}
.hold{user-select:none;-webkit-user-select:none;touch-action:none}
.hold.held{background:var(--acc)!important;color:var(--acc-ink)!important;border-color:var(--acc)!important}
.fader{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase}
.fader input{width:110px}
.fader output{font-family:var(--cond);font-weight:700;font-size:28px;line-height:1;min-width:3ch;font-variant-numeric:tabular-nums;letter-spacing:0}
.slot{display:flex;position:relative}
.slot .s{flex:1;min-width:0;position:relative}
.slot .s i{font-style:normal}
/* saved: filled; active (last saved or loaded): filled with a play mark before the name */
.slot .s{display:flex;align-items:center;justify-content:center;gap:var(--s-2);padding-inline:32px!important;text-align:center}
.slot .s.saved,.slot .s.active,.slot .s.changed{background:var(--ink);color:var(--paper)}
.slot .s .pl{display:none;width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent currentColor}
/* every saved preset shows a play mark; the one sounding shows three level bars
   instead, lows, mids and highs, set from the output (--h, 0 to 1) */
.slot .s.saved .pl,.slot .s.active .pl,.slot .s.changed .pl{display:block}
.slot .s .eq{display:none;align-items:flex-end;gap:2px;height:12px}
.slot .s .eq i{display:block;width:3px;background:currentColor;height:calc(2px + var(--h,0) * 10px)}
.slot .s.sounding .pl{display:none}
.slot .s.sounding .eq{display:flex}
.transport .reset:disabled{opacity:var(--fade-1);cursor:default;background:none;color:inherit}
/* clear: a small square in the preset's top-right corner */
.slot .x{position:absolute;top:0;right:0;min-height:0!important;width:28px;height:28px;padding:0!important;display:grid;place-items:center;font-size:var(--t-m)!important;letter-spacing:0!important}
.slot .s.saved ~ .x,.slot .s.active ~ .x,.slot .s.changed ~ .x{color:var(--paper);border-color:var(--paper)!important}

input[type=range]{-webkit-appearance:none;appearance:none;height:24px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:var(--line);background:var(--rule)}
input[type=range]::-moz-range-track{height:var(--line);background:var(--rule)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:22px;margin-top:-9.5px;background:var(--acc);border:0;border-radius:0}
input[type=range]::-moz-range-thumb{width:14px;height:22px;background:var(--acc);border:0;border-radius:0}

/* bars (lab, grid.js): the bar shown, the one playing underlined, Follow and Length */
.barbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-3) 0;position:sticky;left:0}
.barbar .bb-l{font-size:var(--t-s);font-weight:700;letter-spacing:var(--tr-1);text-transform:uppercase}
.barbar .bb-len{margin-left:auto}
.barbar .bb-bars{display:flex;gap:var(--s-1)}
.barbar button{min-width:40px;min-height:36px;padding:0 var(--s-2);border:var(--line) solid var(--rule);font-size:var(--t-s);font-weight:700;letter-spacing:var(--tr-1);text-transform:uppercase}
.barbar button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.barbar .bb-bars button.now{box-shadow:inset 0 -5px 0 var(--ink)}
.barbar .bb-bars button.now[aria-pressed="true"]{box-shadow:inset 0 -5px 0 var(--paper)}
@media (max-width:760px){ .barbar button{min-height:44px} .barbar .bb-len{margin-left:0} html[data-seq="b"] .barbar .bb-follow{display:none} }

/* the grid: scrolls inside itself on narrow screens, row names stay put */
.seq{overflow-x:auto}
.seqin{min-width:760px;padding:var(--s-3);display:grid;gap:var(--s-1)}
.row{display:grid;grid-template-columns:230px repeat(16,minmax(0,1fr));gap:var(--s-1);align-items:center}
.row.head .beat{font-size:var(--t-s);font-weight:700;padding-left:2px}
.rh{position:sticky;left:0;z-index:3;background:var(--paper);display:flex;align-items:center;gap:3px;min-width:0;align-self:stretch;padding-right:var(--s-2)}
.rh .nm{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.15;padding:2px 0}
.rh .nm b{font-family:var(--cond);font-size:20px;text-transform:uppercase;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* a name too long for its column (grid.js) crawls like the site's strips, only while
   hovered or focused (Damian: distracting otherwise); on touch screens and with
   reduced motion it wraps onto two lines instead */
.rh .nm b.crawl{text-overflow:clip}
.rh .nm b .cr{display:inline-flex;animation:nm-crawl var(--cr-t, 3s) linear infinite;animation-play-state:paused}
.rh .nm:hover b .cr,.rh .nm:focus-visible b .cr{animation-play-state:running}
.rh .nm b .cr > span{padding-right:1em}
@keyframes nm-crawl{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce),(hover:none){.rh .nm b{white-space:normal;text-overflow:clip}}
.rh.muted .nm b{text-decoration:line-through;text-decoration-thickness:3px}
.rh.muted .nm{opacity:var(--fade-1)}
.mini{flex:none;width:26px;height:26px;display:grid;place-items:center;border:2px solid var(--rule);font-size:var(--t-xs);font-weight:700;padding:0}
.mini:hover{background:var(--ink);color:var(--paper)}
.mini.on{background:var(--ink);color:var(--paper)}
.mini svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}

/* phones: a narrow name column, the four row buttons in a 2 x 2 block */
@media (max-width:760px){
  .seqin{min-width:660px}
  .row{grid-template-columns:132px repeat(16,minmax(0,1fr))}
  .rh{display:grid;grid-template-columns:minmax(0,1fr) 24px 24px;gap:3px;align-content:center}
  .rh .nm{grid-row:1/3;align-self:stretch;justify-content:center}
  .rh .nm b{font-size:16px}
  .mini{width:24px;height:24px}
}
.cell{position:relative;height:36px;min-width:0;border:var(--line) solid var(--rule);padding:0;
  font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums;color:var(--paper);overflow:visible}
/* first step of each beat carries a notch, as in the dub lab */
.cell.b::after{content:"";position:absolute;left:3px;top:3px;width:5px;height:5px;background:var(--rule)}
/* on: a block inside the cell; accent: the whole cell */
.cell.v1{background:var(--ink);box-shadow:inset 0 0 0 5px var(--paper)}
.cell.v2{background:var(--ink)}
.cell.v1::after,.cell.v2::after{background:var(--paper)}
.cell.v1.b::after{left:7px;top:7px;width:4px;height:4px}
/* held: a bar through the middle, joined to the note before */
.cell.tie{background:linear-gradient(var(--ink),var(--ink)) center/100% 8px no-repeat;border-left-color:transparent}
/* slide: a link out of the right edge into the next note */
.cell.sl::before{content:"";position:absolute;right:calc(-1 * var(--s-1) - var(--line));top:50%;margin-top:-2px;width:calc(var(--s-1) + var(--line) * 2);height:4px;background:var(--ink);z-index:2}
.cell:hover:not(.v1):not(.v2){background-image:repeating-linear-gradient(-45deg,var(--ink) 0 2px,transparent 2px 6px)}
.cell.now:not(.v1):not(.v2){background-image:repeating-linear-gradient(45deg,var(--acc) 0 3px,transparent 3px 7px)}
.cell.now.v1,.cell.now.v2{outline:var(--line) solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cell.now:not(.v1):not(.v2){background-image:none;outline:var(--line) dashed var(--acc);outline-offset:-6px}}

/* Sound and Bass line tabs */
/* the tab row: the tab list (only tabs inside, for screen readers) and the Animations switch beside it */
.tabrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-3) 0}
.tabs{display:flex;gap:var(--s-2)}
.tabs button{border:var(--line) solid var(--rule);padding:var(--s-2) var(--s-4);font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase;min-height:42px}
.tabs button:hover{background-image:repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 5px)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
/* Animations on / off: a switch in the tab row, not a tab (update 2, §8) */
.fxsw{display:inline-flex;align-items:center;gap:var(--s-2);border:2px solid var(--rule);padding:var(--s-1) var(--s-3);min-height:42px;
  font-size:var(--t-s);letter-spacing:var(--tr-1);text-transform:uppercase;opacity:var(--fade-2)}
.fxsw .led{width:8px;height:8px;background:var(--ink);opacity:var(--fade-1)}
.fxsw[aria-checked="true"]{opacity:1}
.fxsw[aria-checked="true"] .led{background:#ff8a1f;opacity:1}   /* the device's LED colour */
.fxsw:hover{background-image:repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 5px)}
.panel{padding:var(--s-4) var(--s-3) var(--s-5)}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-5) var(--s-6)}
.group{display:grid;gap:var(--s-3);align-content:start}
.group h3{margin:0;font-family:var(--cond);font-weight:700;font-size:24px;line-height:1;text-transform:uppercase;border-bottom:var(--line) solid var(--rule);padding-bottom:var(--s-1)}
.kn{display:grid;gap:var(--s-1)}
.kn label{display:flex;justify-content:space-between;gap:var(--s-2);font-size:var(--t-s);letter-spacing:var(--tr-1);text-transform:uppercase}
.kn output{font-weight:700;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.kn input[type=range]{width:100%}
/* the DJ filter: the slider gets the full width, Spring back and Off sit on a line below it */
.kn.has-off{grid-template-columns:minmax(0,1fr)}
.kn-btns{display:flex;gap:var(--s-1);margin-top:var(--s-1)}
.kn-btns .kn-spring{flex:1}
.kn-spring[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
/* the DJ filter's centre: a mark under the middle of the track */
.track{position:relative}
.track.zero::before{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:var(--line);margin-left:-1px;background:var(--rule);pointer-events:none}
.kn-off{border:2px solid var(--rule);padding:0 var(--s-2);font-size:var(--t-s);letter-spacing:var(--tr-1);text-transform:uppercase;min-height:32px}
.kn-off:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.kn-off:disabled{opacity:var(--fade-1);cursor:default}
.kn select{width:100%;min-height:38px;padding-block:var(--s-1);padding-left:var(--s-2)}

/* the Sound tab as a faceplate (2026-10-21, layout C): a DRUMS and a TONE row of knobs,
   a line of dropdowns, a Master column on the right. Knobs in the palette's two colours.
   The slider panel above (.groups) is kept for ?panel=sliders. */
.groups.fp{display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:0;border:var(--line) solid var(--rule)}
.fp-rows{display:grid;min-width:0}
.fp-row{display:flex;align-items:stretch;min-width:0;overflow-x:auto;scrollbar-width:thin}
.fp-rows > * + *{border-top:2px solid var(--rule)}
.fp-rl{flex:none;position:sticky;left:0;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;padding:var(--s-2) var(--s-1);
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:var(--paper)}
.fp-grp{flex:1 0 auto;display:grid;gap:var(--s-2);align-content:start;padding:var(--s-2) var(--s-3) var(--s-3);border-left:2px solid var(--rule)}
.fp-rl + .fp-grp{border-left:0}
.fp-grp h3{margin:0;font-family:var(--cond);font-weight:700;font-size:20px;line-height:1;text-transform:uppercase}
.fp-knobs{display:flex;gap:6px}
.knob{display:grid;justify-items:center;gap:2px;min-width:52px;cursor:ns-resize;user-select:none;-webkit-user-select:none;touch-action:none}
.knob svg{width:44px;height:44px;display:block;overflow:visible}
.knob.big svg{width:72px;height:72px}
.knob .tr{fill:none;stroke:var(--ink);stroke-opacity:.22;stroke-width:3;stroke-linecap:round}
.knob .va{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.knob .mid{stroke:var(--ink);stroke-width:1.5}
.knob .cap{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.knob .ptr{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.knob .kl{font-size:var(--t-xs);letter-spacing:var(--tr-1);text-transform:uppercase;line-height:1.15;white-space:nowrap;opacity:var(--fade-2)}
.knob .kv{font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.knob:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.knob:hover .cap{fill:var(--ink);fill-opacity:.12}
.fp-sels{display:grid;grid-template-columns:minmax(130px,1.3fr) repeat(5,minmax(100px,1fr));gap:var(--s-2) var(--s-3);padding:var(--s-2) var(--s-3) var(--s-3)}
.fp-sel{display:grid;gap:2px;min-width:0}
.fp-sel label{font-size:var(--t-xs);letter-spacing:var(--tr-1);text-transform:uppercase;opacity:var(--fade-2)}
.fp-sel select{width:100%;min-height:36px;padding-block:var(--s-1);padding-left:var(--s-2);font-size:var(--t-s);border-width:2px}
.fp-mst{display:grid;justify-items:center;align-content:center;gap:var(--s-1);padding:var(--s-2);border-left:var(--line) solid var(--rule)}
.fp-mb{display:grid;justify-items:center;gap:var(--s-1)}
.fp-sec{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:1px var(--s-2)}
.fp-pair{display:flex;gap:var(--s-2)}
.fp-btns{display:flex;gap:var(--s-1)}
.fp-btns .kn-off{min-height:28px;padding:0 var(--s-1);font-size:var(--t-xs)}
@media (max-width:900px){
  .groups.fp{grid-template-columns:minmax(0,1fr)}
  /* Master becomes a strip under the rows: the filter with its buttons, then the four knobs */
  /* Master becomes a strip under the rows, labelled down its left edge like DRUMS and TONE */
  .fp-mst{border-left:0;border-top:2px solid var(--rule);display:flex;align-items:stretch;padding:0}
  .fp-mst .fp-sec{flex:none;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;padding:var(--s-2) var(--s-1)}
  .fp-mb{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-2) var(--s-4);padding:var(--s-2) var(--s-3) var(--s-3)}
}
@media (max-width:900px) and (min-width:561px){.fp-sels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.fp-sels{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the bass roll: scrolls inside itself, note names stay put */
.roll{overflow-x:auto}
.rollin{min-width:700px;display:grid;gap:3px}
.rrow{display:grid;grid-template-columns:64px repeat(16,minmax(0,1fr));gap:3px;align-items:center}
.rrow.first{margin-top:var(--s-3)}
.rl{position:sticky;left:0;z-index:1;background:var(--paper);align-self:stretch;display:flex;align-items:center;justify-content:flex-end;
  padding-right:var(--s-2);font-size:var(--t-s);font-weight:700;letter-spacing:var(--tr-1);text-transform:uppercase}
.rl.blk{background:var(--ink);color:var(--paper)}
.rl.root{text-decoration:underline;text-decoration-thickness:var(--line);text-underline-offset:3px}
.rc{position:relative;height:24px;min-width:0;border:2px solid var(--rule);padding:0}
.rc.q{border-left-width:var(--line)}
.rc:hover:not(:disabled){background-image:repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 5px)}
.rc.on{background:var(--ink);box-shadow:inset 0 0 0 4px var(--paper)}
.rc.on.acc,.rc.flag{background:var(--ink);box-shadow:none}
.rc.tie{background:linear-gradient(var(--ink),var(--ink)) center/100% 6px no-repeat;border-left-color:transparent}
.rc:disabled{opacity:var(--fade-1);cursor:default;border-style:dotted}
.rc.now{outline:2px solid var(--acc);outline-offset:1px}
.rollnote{margin:var(--s-4) 0 0;font-size:var(--t-m);max-width:80ch}

/* notes in the bass and chord rows can be dragged to hold them */
.row[data-held] .cell.v1,.row[data-held] .cell.v2{cursor:grab;touch-action:none}

/* How it works: cells with 3px lines, as the site draws rows (site/DESIGN.md) */
.guide{margin-top:var(--s-8)}
/* a fold-out, closed by default (2026-10-21): the heading with the site's + / - on the right */
.guide summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  padding:var(--s-3) 0;border-top:var(--line) solid var(--rule)}
.guide summary::-webkit-details-marker{display:none}
/* "Click to reveal" before the + (Damian, 2026-10-21), "Click to hide" while open */
.guide-hint{font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase;white-space:nowrap}
.guide-hint .c,.guide[open] .guide-hint .r{display:none}
/* the mono arrow is drawn small; this one is about the height of the capitals */
.guide-hint .ar{display:inline-block;margin-left:.45em;font-size:1.6em;line-height:0;vertical-align:-.12em}
.guide[open] .guide-hint .c{display:inline}
.guide summary::after{content:"+";font-family:var(--cond);font-weight:700;font-size:clamp(32px,4vw,48px);line-height:1}
.guide[open] summary::after{content:"\2212"}   /* a true minus, at the height of the + */
.guide[open] summary{margin-bottom:var(--s-4)}
.guide summary h2{margin:0 auto 0 0;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(40px,6vw,72px);line-height:.85}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--line);border:var(--line) solid var(--rule);background:var(--rule)}
@media (max-width:760px){.guide-grid{grid-template-columns:minmax(0,1fr)}}
.guide-grid article{background:var(--paper);padding:var(--s-4) var(--s-3);min-width:0}
.guide-grid article.wide{grid-column:1/-1}
.guide h3{margin:0 0 var(--s-2);font-family:var(--cond);font-weight:700;font-size:24px;line-height:1;text-transform:uppercase}
.guide p{margin:0;max-width:72ch}
.guide p + .legend,.guide p + dl,.guide .legend + dl{margin-top:var(--s-3)}
.guide dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s-1) var(--s-3)}
.guide dt{font-weight:700;font-size:var(--t-s);letter-spacing:var(--tr-1);text-transform:uppercase;padding-top:1px}
.guide dd{margin:0}
@media (max-width:520px){.guide dl{grid-template-columns:minmax(0,1fr)}.guide dd{margin-bottom:var(--s-2)}}
.guide dl.keys{grid-template-columns:repeat(3,max-content minmax(0,1fr))}
@media (max-width:760px){.guide dl.keys{grid-template-columns:max-content minmax(0,1fr)}}
.legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-2) var(--s-4)}
.legend li{display:flex;align-items:center;gap:var(--s-2)}
.legend .cell{display:inline-block;flex:none;width:36px;height:30px}
.legend .cell.sl{margin-right:calc(var(--s-1) - var(--s-2))}

.foot{margin-top:var(--s-6);font-size:var(--t-m);max-width:78ch;opacity:var(--fade-2)}

/* ---------- the step grid on phones (2026-10-21, compared on the sheet at phone/) ----------
   Under 760px only, switched by ?seq= (app.js sets it on <html>; B is the default).
   A each row's sixteen steps in two lines of eight; B half a bar at a time that
   follows the playhead; C a tracker, steps down, the eight rows across. The style
   list's phone layouts went with the tempo map when the pads replaced it. */
.halfbar{display:none}
@media (max-width:760px){

  html:is([data-seq="a"],[data-seq="b"],[data-seq="c"]) .seq{overflow:visible}
  html:is([data-seq="a"],[data-seq="b"],[data-seq="c"]) .seqin{min-width:0}
  html[data-seq="a"] .seqin{gap:var(--s-4)}
  html[data-seq="a"] .row{grid-template-columns:repeat(8,minmax(0,1fr));row-gap:var(--s-1)}
  html[data-seq="a"] .row.head{display:none}
  html[data-seq="a"] .rh{grid-column:1/-1;position:static;display:flex;padding:0}
  html[data-seq="a"] .rh .nm{grid-row:auto}
  html[data-seq="a"] .mini{width:36px;height:32px}

  html[data-seq="b"] .halfbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);padding:var(--s-3) var(--s-3) 0}
  .halfbar button{min-height:44px;border:var(--line) solid var(--rule);font-size:var(--t-s);font-weight:700;letter-spacing:var(--tr-1);text-transform:uppercase}
  .halfbar button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
  html[data-seq="b"] .row{grid-template-columns:132px repeat(8,minmax(0,1fr))}
  html[data-seq="b"] .seqin[data-half="1"] .row > :nth-child(n+10){display:none}
  html[data-seq="b"] .seqin[data-half="2"] .row > :nth-child(n+2):nth-child(-n+9){display:none}
  html[data-seq="b"] .cell{height:44px}

  html[data-seq="c"] .seqin{grid-template-columns:20px repeat(8,minmax(0,1fr));gap:var(--s-1)}
  html[data-seq="c"] .row{display:contents}
  html[data-seq="c"] .rh{position:static;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0 0 var(--s-1)}
  html[data-seq="c"] .rh .nm{grid-row:auto;align-items:center;justify-content:flex-end;min-height:92px}
  html[data-seq="c"] .rh .nm b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:15px;max-height:88px}
  html[data-seq="c"] .mini{width:100%;height:24px}
  html[data-seq="c"] .row.head .rh{visibility:hidden}
  html[data-seq="c"] .row.head .beat{align-self:center;padding:0}
  html[data-seq="c"] .cell{height:30px}
  html[data-seq="c"] .seqin > .row:nth-child(1) > *{grid-column:1}
  html[data-seq="c"] .seqin > .row:nth-child(2) > *{grid-column:2}
  html[data-seq="c"] .seqin > .row:nth-child(3) > *{grid-column:3}
  html[data-seq="c"] .seqin > .row:nth-child(4) > *{grid-column:4}
  html[data-seq="c"] .seqin > .row:nth-child(5) > *{grid-column:5}
  html[data-seq="c"] .seqin > .row:nth-child(6) > *{grid-column:6}
  html[data-seq="c"] .seqin > .row:nth-child(7) > *{grid-column:7}
  html[data-seq="c"] .seqin > .row:nth-child(8) > *{grid-column:8}
  html[data-seq="c"] .seqin > .row:nth-child(9) > *{grid-column:9}
  html[data-seq="c"] .seqin > .row > :nth-child(1){grid-row:1}
  html[data-seq="c"] .seqin > .row > :nth-child(2){grid-row:2}
  html[data-seq="c"] .seqin > .row > :nth-child(3){grid-row:3}
  html[data-seq="c"] .seqin > .row > :nth-child(4){grid-row:4}
  html[data-seq="c"] .seqin > .row > :nth-child(5){grid-row:5}
  html[data-seq="c"] .seqin > .row > :nth-child(6){grid-row:6}
  html[data-seq="c"] .seqin > .row > :nth-child(7){grid-row:7}
  html[data-seq="c"] .seqin > .row > :nth-child(8){grid-row:8}
  html[data-seq="c"] .seqin > .row > :nth-child(9){grid-row:9}
  html[data-seq="c"] .seqin > .row > :nth-child(10){grid-row:10}
  html[data-seq="c"] .seqin > .row > :nth-child(11){grid-row:11}
  html[data-seq="c"] .seqin > .row > :nth-child(12){grid-row:12}
  html[data-seq="c"] .seqin > .row > :nth-child(13){grid-row:13}
  html[data-seq="c"] .seqin > .row > :nth-child(14){grid-row:14}
  html[data-seq="c"] .seqin > .row > :nth-child(15){grid-row:15}
  html[data-seq="c"] .seqin > .row > :nth-child(16){grid-row:16}
  html[data-seq="c"] .seqin > .row > :nth-child(17){grid-row:17}
}

/* ---------- the style panel, layout 4 (deck.js, 2026-10-21) ----------
   HANDOVER-groove-atlas-genre-panel.md, board 4C: a split-flap board with Play, BPM
   and Key on the left, the name in flaps with tagline, meta line and variations in
   the middle, origin, traits and artists in a rail. Lab first, with the pads. */
.deck.deck4{grid-template-columns:minmax(0,400px) minmax(0,1fr) 240px}
.d4-left{display:grid;grid-template-rows:1fr auto;min-width:0;border-right:var(--line) solid var(--rule)}
.d4-board{display:grid;gap:14px;align-content:start;padding:var(--s-4) var(--s-5)}
.d4-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.d4-lbl{margin:0;font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase}
.d4-status{opacity:var(--fade-2)}
.d4-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.d4-tile{height:104px}
.d4-count{display:flex;align-items:flex-end;justify-content:center;gap:var(--s-2)}
.d4-count .d4-lbl{padding-bottom:var(--s-2)}
.d4-sep{font-size:16px;opacity:var(--fade-2);padding-bottom:10px}
.d4-barl{margin-left:18px}
.d4-dig{width:46px;height:58px}
.d4-ctl{border-top:var(--line) solid var(--rule)}
.d4-ctl .ringctl{border-top:0;margin-top:0}
.d4-mid{display:grid;gap:16px;align-content:start;min-width:0;padding:24px 28px;border-right:var(--line) solid var(--rule)}
.d4-title{display:flex;flex-wrap:wrap;gap:10px 16px;min-width:0}   /* min-width 0: as wide as the column, never its letters, so deck.js can measure the room */
.d4-word{display:flex;gap:4px}
/* A flap .72em wide and the letter at .8em: the widest letters (W, M: .77 to .8em in Arial Narrow and
   Avenir Next Condensed) fit inside the border (2026-10-21; at .64em and 1em they spilled over on iPhones).
   deck.js shrinks a word too long for the column, with the same .72. */
.d4-ch{width:.72em;height:1em;font-size:var(--d4-fs,clamp(46px,6.2vw,84px))}
.d4-tag{margin:0;font-size:17px;line-height:1.45;max-width:34ch}
.d4-meta{margin:0;font-size:var(--t-m);font-variant-numeric:tabular-nums;opacity:var(--fade-2)}
.d4-vars{display:grid;gap:var(--s-2)}
.d4-vars button{text-align:left;padding:11px 12px;font-size:13px;line-height:1.45;border:2px solid var(--rule)}
.d4-vars button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.d4-vars button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.d4-rail{display:grid;gap:6px;align-content:start;min-width:0;padding:24px 20px;font-size:var(--t-m);line-height:1.45}
.d4-rail p{margin:0}
.d4-rail .d4-lbl{margin-top:var(--s-2);font-size:var(--t-xs);opacity:var(--fade-2)}
.d4-rail .d4-lbl:first-child{margin-top:0}
.d4-made{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.d4-made b{margin-right:6px;opacity:var(--fade-2)}
/* a split-flap tile (flap.js): four halves, the line across the middle, the letter in the display face */
.flap{position:relative;perspective:420px;color:var(--ink)}
.flap .half{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--paper);border:2px solid var(--rule);backface-visibility:hidden}
.flap .top{top:0;border-bottom:0;transform-origin:50% 100%}
.flap .bot{bottom:0;border-top:0;transform-origin:50% 0}
.flap .half span{position:absolute;left:0;right:0;height:200%;display:grid;place-items:center;font-family:var(--cond);font-weight:700;line-height:1}
.flap .top span{top:0}
.flap .bot span{bottom:0}
.flap .half.hit{background:var(--ink);color:var(--paper)}
.flap .half.idle span{opacity:.28}
.flap::after{content:"";position:absolute;left:2px;right:2px;top:calc(50% - 1px);height:2px;background:var(--rule);opacity:.35;z-index:5}
.flap .flip{z-index:3;visibility:hidden}
.d4-tile .half span{font-size:54px}
.d4-tile.small .half span{font-size:42px}
.d4-dig .half span{font-size:38px;font-family:var(--mono)}
.d4-ch .half span{font-size:.8em}
@media (max-width:980px){
  .deck.deck4{grid-template-columns:minmax(0,1fr)}
  .d4-left,.d4-mid{border-right:0;border-bottom:var(--line) solid var(--rule)}
}
@media (max-width:420px){
  .d4-tiles{gap:6px}
  .d4-tile{height:84px}
  .d4-tile .half span{font-size:42px}
  .d4-tile.small .half span{font-size:32px}
}

/* ---------- the style picker as pads (pads.js, 2026-10-21) ----------
   HANDOVER-groove-atlas-genre-pads.md, B2. A 4 x 4 grid, one row per family, every
   pad the same size with a dot grid of its drums; a readout on the right (above
   the grid on tablets, a card on top on phones). In the palette's two colours, so
   it is the design's yellow and black in that palette. */
.padsec{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:var(--s-5);padding:var(--s-4)}
.pads{display:grid;grid-template-columns:96px repeat(4,minmax(0,1fr));gap:var(--s-2);align-items:center}
.pad-fam{margin:0;font-size:var(--t-s);font-weight:700;letter-spacing:var(--tr-2);text-transform:uppercase}
.pad{display:grid;grid-template-rows:auto 1fr;gap:8px;min-width:0;height:80px;padding:7px 8px;text-align:left;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink)}
.pad-empty{visibility:hidden}
.pad-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-1);min-width:0}
.pad-top b{min-width:0;font-size:var(--t-m);font-weight:700;letter-spacing:var(--tr-1);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pad .pm{display:none}
.pad-bpm{flex:none;font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.pad-dots{display:grid;grid-template-columns:repeat(16,6px);grid-auto-rows:6px;gap:2px;align-content:center}
.pad-dots i{background:currentColor;opacity:.14}
.pad-dots i.on{opacity:1}
.pad.sel{background:var(--ink);color:var(--paper)}
.pad.sel .pad-dots i{opacity:.18}
.pad.sel .pad-dots i.on{opacity:1}
/* tapped while playing: the border blinks until the bar turns over */
.pad.pend{animation:pad-wait .5s steps(1) infinite}
@keyframes pad-wait{50%{border-color:transparent}}
.pad:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover){.pad:hover{outline:2px solid var(--ink);outline-offset:3px}}
.readout{display:grid;align-content:start;gap:var(--s-2);padding-left:var(--s-5);border-left:2px solid var(--rule)}
.readout p{margin:0}
.ro-state,.ro-k{font-size:var(--t-s);letter-spacing:var(--tr-3);text-transform:uppercase;opacity:.6}
/* the keys and, under them, what they do (Damian, 2026-10-21) */
.ro-keys{display:grid;gap:var(--s-1);margin-top:var(--s-2)}
.ro-kx{max-width:34ch;opacity:.9}
.ro-name{font-family:var(--cond);font-weight:700;font-size:38px;line-height:.95;text-transform:uppercase;overflow-wrap:anywhere}
.ro-meta{font-size:var(--t-m);font-weight:700;letter-spacing:var(--tr-1);text-transform:uppercase}
.ro-or{opacity:.6}
.ro-intro{display:none;max-width:36ch}
/* before the first pick: the intro in the readout's place */
.padsec.fresh .readout > :not(.ro-intro):not(.ro-keys){display:none}
.padsec.fresh .ro-intro{display:block}
@media (pointer:coarse){.ro-keys{display:none}}
@media (prefers-reduced-motion:reduce){.pad.pend{animation:none;border-style:dashed}}
/* tablets: the grid as on a computer, the readout above it */
@media (max-width:1024px){
  .padsec{grid-template-columns:minmax(0,1fr)}
  .readout{order:-1;padding:0 0 var(--s-3);border-left:0;border-bottom:2px solid var(--rule)}
}
/* phones: a compact readout card on top, each family's name above its four pads */
@media (max-width:640px){
  .padsec{padding:var(--s-3);gap:var(--s-3)}
  .pads{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .pad-fam{grid-column:1/-1;margin-top:var(--s-2)}
  .pad{grid-template-rows:auto 1fr auto;grid-template-areas:"name" "dots" "bpm";height:auto;min-height:92px;padding:6px;gap:5px}
  .pad-top{display:contents}
  .pad-top b{grid-area:name;white-space:normal;font-size:var(--t-s);letter-spacing:0;line-height:1.15;overflow-wrap:anywhere}
  .pad .pd{display:none}
  .pad .pm{display:inline}
  .pad-bpm{grid-area:bpm;font-size:var(--t-s)}
  .pad-dots{grid-area:dots;grid-template-columns:repeat(16,minmax(0,1fr));grid-auto-rows:auto;gap:1px}
  .pad-dots i{aspect-ratio:1}
  .ro-name{font-size:30px}
  .ro-tag,.ro-sw{display:none}
  .ro-meta,.ro-or{display:inline;font-size:var(--t-s)}
  .ro-meta + .ro-tag + .ro-or::before{content:" · "}
  .readout{display:block}
  .readout > p + p{margin-top:var(--s-1)}
  .readout .ro-or{margin-top:0}
}

/* ---------- the atlas's bar at the bottom (2026-10-21) ----------
   Play / Stop, the style and BPM, and on wide screens the keys (app.js). Always
   there on a computer; on phones it sits on the site's menu bar and slides up
   only while the ring's own Play is out of view. The FX screen and the page end
   move up by what is under them (--lift), and the hidden FX screen still clears
   the screen edge from there. */
.pbar{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:var(--s-3) var(--s-5);position:fixed;z-index:49;left:0;right:0;bottom:0;
  padding:var(--s-2) max(var(--gut), calc((100% - 1240px) / 2 + var(--gut))) calc(var(--s-2) + env(safe-area-inset-bottom,0px));
  background:var(--paper);border-top:var(--line) solid var(--rule);transform:translateY(100%);transition:transform .25s ease}
.pbar.on{transform:none}
.pb-play{min-width:120px;min-height:44px;border:var(--line) solid var(--rule);background:var(--ink);color:var(--paper);
  font-size:var(--t-s);font-weight:700;letter-spacing:var(--tr-2);text-transform:uppercase}
.pb-play:hover{background:var(--paper);color:var(--ink)}
.pb-play.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.pb-now{min-width:0;font-size:var(--t-s);font-weight:700;letter-spacing:var(--tr-1);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbd{margin:0;min-width:0;text-align:right;font-size:var(--t-s);letter-spacing:var(--tr-1);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbd b{border:1px solid var(--rule);padding:0 4px;font-weight:400}
html{--lift:0px}
html.pbar-on{--lift:var(--pbar-h,62px)}
html.pbar-on .page{padding-bottom:calc(var(--s-8) + var(--pbar-h,62px))}
.te:not(.top){bottom:calc(16px + var(--lift) + env(safe-area-inset-bottom,0px))}
.te:not(.top):not(.on){transform:translateY(calc(100% + 48px + var(--lift)))}
@media (max-width:820px){
  .pbar{bottom:var(--tabbar-h,55px);padding-bottom:var(--s-2)}
  html{--lift:var(--tabbar-h,55px)}
  html.pbar-on{--lift:calc(var(--tabbar-h,55px) + var(--pbar-h,62px))}
  html.sheet-open .pbar{display:none}
}
@media (max-width:760px){
  .pbar{grid-template-columns:auto minmax(0,1fr)}
  .kbd{display:none}
}
@media (prefers-reduced-motion:reduce){.pbar{transition:none}}

/* ---------- phones: the knob panels (2026-10-21) ----------
   The faceplate's rows stop scrolling sideways: each panel takes a line, its
   name left of its knobs. */
@media (max-width:760px){
  .fp-row{display:grid;grid-template-columns:auto minmax(0,1fr);overflow:visible}
  .fp-rl{grid-row:1 / span 4;position:static}
  .fp-grp{grid-column:2;border-left:0;grid-template-columns:64px minmax(0,1fr);align-items:center;padding:var(--s-2) var(--s-3)}
  .fp-grp + .fp-grp{border-top:2px solid var(--rule)}
  .fp-grp h3{font-size:18px}
  .fp-knobs{flex-wrap:wrap;gap:var(--s-1) 4px}
}


/* phones and touch screens (site/DESIGN.md): no text under 11px on a phone;
   fields at 16px on touch screens, or iPhone Safari zooms in and stays there;
   holding Throw or Fill must not open the long-press menu. */
@media (max-width:760px){.page{--t-xs:var(--t-s)}}
@media (pointer:coarse){select{font-size:16px}}

/* dropdowns draw their own arrow, a small ink triangle about 18px in from the edge
   (the browser's own sits against the border and cannot be moved) */
select{-webkit-appearance:none;appearance:none;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 24px) 55%,calc(100% - 18px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.hold{-webkit-touch-callout:none}

/* the FX screen (update 2, §6): a small device like a teenage engineering EP unit
   that slides up while Throw or Fill is held. Its own colours, radius and shadow on
   purpose: an object on the page, like the bust in the site's visual slot. */
.te{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;width:236px;max-width:calc(100vw - 32px);background:#d9d5cd;border-radius:14px;padding:12px 12px 9px;
  box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 -3px 0 #b8b2a7,inset 0 1px 0 #f1eee8;transform:translateY(calc(100% + 48px));transition:transform .3s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.te.on{transform:none}
.te canvas{display:block;width:100%;aspect-ratio:3/2;max-width:100%;image-rendering:pixelated;background:#0b0a09;border-radius:5px;box-shadow:inset 0 0 0 2px #1b1916}
.te .te-bar{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;color:#3b362f;text-transform:uppercase}
.te .grille{display:flex;gap:3px}.te .grille i{width:4px;height:4px;border-radius:50%;background:#a8a297}
.te .led{width:8px;height:8px;border-radius:50%;background:#7a3d10;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.te .led.hit{background:#ff8a1f;box-shadow:0 0 8px #ff8a1f}
/* when the held button is in the lower half of the screen: down from the top, under the header */
.te.top{bottom:auto;top:calc(60px + env(safe-area-inset-top,0px));transform:translateY(calc(-100% - 90px))}
.te.top.on{transform:none}
@media (prefers-reduced-motion:reduce){.te{transition:none}}

/* ---------- the site's contact block and footer (2026-10-22) ----------
   Copied from site/css/site.css (boxes, .two, contact) and kept to #contact, as the
   menu is: the whole site stylesheet would restyle the instrument. Keep in step with
   site.css. Built by site/js/contact.js. */
.site-contact{margin-top:37px}
.site-contact :is(form,label,p,ul,li){margin:0;padding:0}
.site-contact :is(p,li){font-size:var(--t-body);line-height:1.85}
.site-contact a{color:inherit}
.site-contact h2{font-size:var(--t-s);letter-spacing:var(--tr-3);text-transform:uppercase;font-weight:700;margin:0 0 var(--s-3)}
.site-contact ul{list-style:none;margin:0;padding:0}
.site-contact .box{border:var(--line) solid var(--vo-ink);padding:var(--s-6);margin:0}
.site-contact .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--line);
  border:var(--line) solid var(--vo-ink);margin-bottom:calc(var(--line) * -1)}
.site-contact .two>*{border:0;margin:0;box-shadow:0 0 0 var(--line) var(--vo-ink)}
.site-contact .book label{display:block;font-size:var(--t-s);letter-spacing:var(--tr-2);text-transform:uppercase;margin-bottom:var(--s-3)}
.site-contact .book input,.site-contact .book textarea{display:block;width:100%;margin-top:var(--s-2);padding:var(--s-3);background:transparent;color:inherit;font-family:inherit;
  border:var(--line) solid var(--vo-ink);border-radius:0;font-size:var(--t-body);text-transform:none;letter-spacing:0;resize:vertical}
.site-contact .book input:focus,.site-contact .book textarea:focus{outline:0;background:var(--vo-ink);color:var(--vo-paper)}
.site-contact .book .hp{position:absolute;left:-9999px}
.site-contact .book button{padding:var(--s-3) var(--s-6);background:var(--vo-ink);color:var(--vo-paper);font-size:var(--t-m);letter-spacing:var(--tr-3);text-transform:uppercase}
.site-contact .book button:hover{background:var(--vo-paper);color:var(--vo-ink);box-shadow:inset 0 0 0 var(--line) var(--vo-ink)}
.site-contact .book-msg{margin-top:var(--s-3);min-height:calc(1.85em * 2)}
.site-contact .links a{text-decoration:none}
.site-contact .links a:hover{text-decoration:underline;text-underline-offset:3px}
.site-contact .cta{display:block;background:var(--vo-ink);color:var(--vo-paper);text-decoration:none;text-align:center;
  font-family:var(--cond);font-size:clamp(34px,9vw,96px);text-transform:uppercase;padding:var(--s-6) var(--s-3);line-height:1}
.site-contact .cta:hover{background:var(--vo-paper);color:var(--vo-ink);box-shadow:inset 0 0 0 var(--line) var(--vo-ink)}
.site-contact .foot{display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin:0;max-width:none;opacity:1;padding:var(--s-5) 0 60px;font-size:var(--t-m)}
@media(max-width:700px){.site-contact .two{grid-template-columns:1fr}}
@media(pointer:coarse){.site-contact .book input,.site-contact .book textarea{font-size:16px}}