/* Components: one set for every surface. Flat, square, hairline. Density comes from --hit only. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--plate-1);color:var(--print-2);font:var(--t-body);-webkit-font-smoothing:antialiased}
[data-theme]{background:var(--plate-1);color:var(--print-2)}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--print);outline-offset:2px}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}

/* ---------- Type ---------- */
.us::before{content:"_"}
.hero-t{font:var(--t-hero);color:var(--print);margin:0;letter-spacing:-.01em}
.hero-t .thin,.display .thin,.h1 .thin{display:block;font-weight:200}
.display{font:var(--t-display);color:var(--print);margin:0;letter-spacing:-.005em}
.h1{font:var(--t-h1);color:var(--print);margin:0}
.h2{font:var(--t-h2);color:var(--print);margin:0}
.h3{font:var(--t-h3);color:var(--print);text-transform:uppercase;letter-spacing:.04em;margin:0}
.lbl{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--print-3)}
.meta{font:var(--t-meta);color:var(--print-3);font-variant-numeric:tabular-nums}
.body-mono{font:var(--t-body-mono);color:var(--print-2)}
.pix{font:var(--t-lcd)}
.tlink{font:var(--t-btn);letter-spacing:.04em;color:var(--print);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:color var(--t-fast)}
.tlink:hover{color:var(--accent-text)}

/* ---------- Buttons ---------- */
.btn{--h:var(--hit);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--h);min-width:var(--h);padding:0 var(--s-3);
  border:0;border-radius:0;background:var(--plate-4);color:var(--print);font:var(--t-btn);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:hover{background:var(--plate-5)}
.btn:active{background:var(--rule-2)}
.btn svg.i{width:16px;height:16px}
.btn[aria-pressed="true"],.btn.is-on{background:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.4;cursor:default}
/* Primary CTA: accent block with a solid bar on its left edge */
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:inset 6px 0 0 var(--bar);padding-left:calc(var(--s-4) + 6px);padding-right:var(--s-4)}
.btn-primary:hover{background:var(--accent-hi);box-shadow:inset 10px 0 0 var(--bar)}
.btn-primary:active{background:var(--accent)}
/* The instrument's ROLL key */
.btn-roll{background:var(--cream);color:var(--cream-ink)}
.btn-roll:hover{background:var(--print)}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 var(--hair) var(--rule-2);color:var(--print)}
.btn-ghost:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--print)}
.btn-outline{background:transparent;box-shadow:inset 0 0 0 2px var(--print);color:var(--print)}
.btn-outline:hover{background:var(--print);color:var(--plate-1)}
.btn-quiet{background:transparent;color:var(--print-3)}
.btn-quiet:hover{background:var(--plate-4);color:var(--print)}
.btn-icon{padding:0;width:var(--h)}
.btn-lg{--h:48px;font-size:14px;padding:0 var(--s-5)}
.btn-lg.btn-primary{padding-left:calc(var(--s-5) + 6px)}
.btn-sm{--h:24px;font-size:11px;padding:0 var(--s-2)}
.btn-sm svg.i{width:14px;height:14px}
.btn-sm.btn-primary{box-shadow:inset 4px 0 0 var(--bar);padding-left:calc(var(--s-2) + 4px)}
.btn-block{width:100%}

/* Segmented control and chips: square, hairline */
.seg{display:inline-flex;box-shadow:inset 0 0 0 var(--hair) var(--rule-2)}
.seg button{height:var(--hit);padding:0 var(--s-3);border:0;background:transparent;color:var(--print-3);font:var(--t-btn);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.seg button+button{box-shadow:inset var(--hair) 0 0 var(--rule-2)}
.seg button:hover{color:var(--print)}
.seg button[aria-selected="true"]{background:var(--print);color:var(--plate-1)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--s-2);background:var(--plate-4);color:var(--print-2);font:var(--t-label);font-size:10px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.chip.is-lit,.tag-new{background:var(--accent);color:var(--accent-ink)}
.chip.is-line{background:transparent;box-shadow:inset 0 0 0 var(--hair) var(--rule-2)}
.tag-new{position:absolute;left:0;top:0;z-index:2;padding:4px 8px;font:var(--t-label);font-size:10px;letter-spacing:.1em}
.dot{width:6px;height:6px;background:currentColor;flex:none}

/* ---------- Surfaces: hairline boxes; the phone's 3px top rule marks a "part" ---------- */
.card{position:relative;background:var(--plate-3);box-shadow:inset 0 0 0 var(--hair) var(--rule);border-top:3px solid var(--print);padding:var(--s-4)}
.card.is-lit{border-top-color:var(--accent)}
.card.is-quiet{border-top-color:var(--rule-2)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.section-rule{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-3);border-top:var(--hair) solid var(--print);margin-bottom:var(--s-4)}

/* ---------- LCD: where the instrument speaks ---------- */
/* Dot-matrix panel. Everything below is the panel BACKGROUND, behind the characters: unlit ghost cells (--lcd-dim) and a
   faint pixel grid, both on the 2px cell of Silkscreen at 16px and anchored at the box corner, so cells and glyph pixels
   line up. The characters themselves are never masked, clipped, blurred or patterned. A slim bezel frames it.
   lcd.js adds the behaviour (boot, messages, progress, marquee). */
.lcd,.lcd-ov{background-color:var(--lcd);background-image:linear-gradient(to right,rgba(var(--lcd-dim-rgb),.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(var(--lcd-dim-rgb),.07) 1px,transparent 1px),radial-gradient(circle at 1px 1px,rgba(var(--lcd-dim-rgb),.13) 0,rgba(var(--lcd-dim-rgb),.13) .9px,transparent 1.1px);background-size:2px 2px,2px 2px,4px 4px;background-position:0 0,0 0,0 0}
.lcd{position:relative;color:var(--lcd-ink);padding:var(--s-2) var(--s-3);font:var(--t-lcd);box-shadow:inset 0 0 0 var(--hair) rgba(var(--lcd-ink-rgb),.4),inset 0 2px 4px rgba(var(--lcd-ink-rgb),.22)}
.lcd,.lcd-ov,.lcd-fill{-webkit-font-smoothing:antialiased;font-kerning:none;font-variant-ligatures:none;text-rendering:optimizeSpeed;font-variant-numeric:tabular-nums}
/* Transient message layer: covers the readout, never changes the layout. One .c per character cell for the reveal. */
.lcd-ov{position:absolute;inset:0;z-index:2;display:none;align-items:center;gap:var(--s-3);padding:0 var(--s-3);color:var(--lcd-ink);font:var(--t-lcd);white-space:nowrap;overflow:hidden;pointer-events:none}
.lcd.is-msg .lcd-ov{display:flex}
.lcd-ov .t{flex:0 1 auto;min-width:0;overflow:hidden}
.lcd-ov .c{display:inline-block;opacity:0;transition:opacity var(--lc-off,150ms) ease-out}
.lcd-ov .c.on{opacity:1;transition:opacity var(--lc-on,75ms) ease-out}
.lcd-ov.instant .c,.lcd-ov.instant .c.on{transition:none}
.lcd-ov .bar{flex:1 1 auto;display:flex;gap:2px;height:8px;min-width:24px;max-width:160px}
.lcd-ov .bar i{flex:1 1 0;background:transparent;box-shadow:inset 0 0 0 var(--hair) rgba(var(--lcd-dim-rgb),.55)}
.lcd-ov .bar i.on{background:var(--lcd-ink);box-shadow:none}
.lcd-ov[data-ph="all"]{background-color:var(--lcd);background-image:radial-gradient(circle at 1px 1px,var(--lcd-ink) 0,var(--lcd-ink) .9px,transparent 1.1px);background-size:2px 2px;background-position:0 0}
.lcd-ov[data-ph="blank"] .t,.lcd-ov[data-ph="all"] .t,.lcd-ov[data-ph="all"] .bar{visibility:hidden}
.lcd-ov[data-ph="title"]{justify-content:center}
@media (prefers-reduced-motion:reduce){.lcd-ov .c,.lcd-ov .c.on{transition:none}}
/* Names longer than their cell scroll in character steps instead of ending in an ellipsis */
.lcd [data-marq]{text-overflow:clip}
.lcd-run{display:inline-block;animation:lcdrun var(--dur,6s) steps(var(--n,20),end) infinite}
@keyframes lcdrun{0%,14%{transform:translateX(0)}86%,100%{transform:translateX(var(--d,0px))}}
@media (prefers-reduced-motion:reduce){.lcd-run{animation:none}}
.lcd-k{display:block;font:var(--t-lcd-s);opacity:1;color:var(--lcd-label);letter-spacing:.04em}
.lcd-v{display:block;font:var(--t-lcd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd-cells{display:grid;grid-auto-flow:column;gap:0}
.lcd-cells>div{padding:0 var(--s-3);border-left:var(--hair) solid rgba(var(--lcd-ink-rgb),0.251)}
.lcd-cells>div:first-child{padding-left:0;border-left:0}

/* ---------- Steps (round 2: trigs are the accent; states from tokens) ---------- */
.steps{display:grid;grid-template-columns:repeat(var(--n,16),minmax(0,1fr));gap:var(--sg,4px)}
.step{position:relative;height:var(--sh,28px);border:0;padding:0;background:var(--trig-off);cursor:pointer;transition:none}
.step:nth-child(8n+5),.step:nth-child(8n+6),.step:nth-child(8n+7),.step:nth-child(8n+8){background:var(--trig-off-2)}
.step:hover{filter:brightness(1.15)}
.step.on{background:var(--trig-on)}
.step.acc{background:var(--trig-on)}
.step.acc::before{content:"";position:absolute;left:4px;top:4px;width:5px;height:5px;border-radius:50%;background:var(--trig-mark)}
.steps.mini .step.acc::before{display:none}
.step.lock::after{content:"";position:absolute;right:0;top:0;width:9px;height:9px;background:var(--trig-mark);clip-path:polygon(0 0,100% 0,100% 100%)}   /* p-lock: one corner notch */
.step.now{box-shadow:inset 0 0 0 2px var(--trig-now)}
.steps.mini{--sh:6px;--sg:2px}
.steps.mini .step{cursor:default}
.steps.mini .step:nth-child(4n+1){box-shadow:-1px 0 0 0 var(--print-4)}
.steps.mini .step.now{box-shadow:none;background:var(--trig-now)}

/* ---------- The app's slider (.pc) and curve editor (canvas.ed), in this style ---------- */
.ctl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.pc{position:relative;height:var(--pch,32px);background:var(--plate-4);color:var(--print);display:flex;justify-content:space-between;align-items:center;gap:6px;padding:0 8px;cursor:ew-resize;user-select:none;touch-action:none;overflow:hidden;outline:0;transition:background var(--t-fast)}
.pc::after{content:"";position:absolute;bottom:0;left:0;height:3px;width:var(--f,50%);background:var(--print-3);pointer-events:none}   /* the value: a bar along the bottom edge (round 2) */
.pc span{position:relative;min-width:0;font:var(--t-label);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--print-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc b{position:relative;font:500 13px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--print)}
.pc:hover{background:var(--plate-5)}
.pc.act{background:var(--plate-5)}
.pc.act::after{background:var(--print)}
.pc:focus-visible{outline-offset:-2px}
.pc.lk::after{background:var(--trig-on)}
.pc.lk span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;background:var(--trig-on);vertical-align:1px}
.pc.bip::after{left:var(--pl);width:var(--pw)}                                                                           /* centre-zero: grows from the centre tick */
.pc.bip::before{content:"";position:absolute;left:50%;bottom:0;width:1px;height:7px;background:var(--print-3);pointer-events:none}
canvas.ed{display:block;width:100%;height:100%;min-height:0;background:var(--plate-0);box-shadow:inset 0 0 0 var(--hair) var(--rule);touch-action:none}

/* ---------- Knob: flat encoder, printed arc ---------- */
.knob{--v:.5;--k:40px;display:inline-grid;justify-items:center;gap:var(--s-1);user-select:none;touch-action:none;cursor:ns-resize;width:max(var(--k),48px)}
.knob .kl{font:var(--t-label);font-size:10px;letter-spacing:.06em;color:var(--print-3);text-transform:uppercase;line-height:12px;white-space:nowrap}
.knob .kd{position:relative;width:var(--k);height:var(--k);border-radius:50%;
  background:conic-gradient(from 225deg,var(--accent) 0 calc(var(--v)*270deg),var(--rule-2) 0 270deg,transparent 0)}
.knob .kd::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--plate-4);transition:background var(--t-fast)}
.knob .kd::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:calc(var(--k)/2 - 7px);margin-left:-1px;background:var(--print);
  transform-origin:50% calc(var(--k)/2 - 5px);transform:rotate(calc(-135deg + var(--v)*270deg))}
.knob .kv{font:var(--t-lcd-s);color:var(--print);height:12px}
.knob:hover .kd::before{background:var(--plate-5)}
.knob.is-locked .kv{color:var(--accent-text)}
.knob.sm{--k:32px}
.knob.lg{--k:56px}

/* Fader and meter */
.fader{position:relative;width:24px;height:var(--fh,160px);background:var(--plate-0);box-shadow:inset 0 0 0 var(--hair) var(--rule);cursor:ns-resize;touch-action:none}
.fader::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--rule-2)}
.fader i{position:absolute;left:2px;right:2px;height:24px;bottom:calc(var(--v,.7)*(100% - 24px));background:var(--plate-5);box-shadow:inset 0 0 0 var(--hair) var(--rule-2)}
.fader i::after{content:"";position:absolute;left:3px;right:3px;top:11px;height:2px;background:var(--print)}
.meter{position:relative;width:6px;height:var(--fh,160px);background:var(--plate-0);overflow:hidden}
.meter i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--m,.5)*100%);
  background:linear-gradient(to top,var(--print-3) 0 70%,var(--print) 70% 88%,var(--accent) 88%);transition:none}

/* ---------- Navigation: underscore words, active in the accent ---------- */
.nav{display:flex;gap:var(--s-1)}
.nav a,.nav button{position:relative;display:inline-flex;align-items:center;height:var(--hit);padding:0 var(--s-3);border:0;background:transparent;
  color:var(--print-3);font:var(--t-btn);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:color var(--t-fast)}
.nav a::before,.nav button::before{content:"_"}
.nav a:hover,.nav button:hover{color:var(--print)}
.nav [aria-current="page"]{color:var(--accent-text)}

/* ---------- List rows ---------- */
.row{display:grid;grid-template-columns:var(--cols,40px 1fr auto);align-items:center;gap:var(--s-3);min-height:48px;padding:0 var(--s-3);border-bottom:var(--hair) solid var(--rule);cursor:pointer;transition:background var(--t-fast)}
.row:hover{background:var(--plate-3)}
.row[aria-selected="true"]{background:var(--plate-4);box-shadow:inset 3px 0 0 var(--accent)}
.row .name{color:var(--print);font:600 16px/20px var(--sans);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Audition: a square play key */
.aud{position:relative;display:grid;place-items:center;width:32px;height:32px;border:0;background:transparent;color:var(--print);cursor:pointer;box-shadow:inset 0 0 0 var(--hair) var(--rule-2);transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.aud:hover{box-shadow:inset 0 0 0 var(--hair) var(--print)}
.aud svg.i{width:12px;height:12px}
.aud.is-playing{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.wave{display:block;height:24px;width:100%;color:var(--print-4)}
.is-playing-row .wave{color:var(--accent-text)}

/* ---------- LP: square full-bleed artwork, the record behind it ---------- */
.lp{--sz:180px;position:relative;width:var(--sz);cursor:pointer}
.lp .rec{position:absolute;top:3%;left:3%;width:94%;aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,var(--vinyl-a) 0 1px,var(--vinyl-b) 1px 2px,var(--vinyl-a) 2px 3px);transition:transform var(--t-slow) var(--ease)}
.lp .rec::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,transparent,rgba(var(--glint-rgb),0.0706) 8%,transparent 16%,transparent 50%,rgba(var(--glint-rgb),0.055) 58%,transparent 66%)}
.lp .rec .spin{position:absolute;inset:0;border-radius:50%}
.lp .rec .lab{position:absolute;inset:34%;border-radius:50%;background:var(--lab,var(--accent));display:grid;place-items:center;color:var(--lt-text);font:var(--t-lcd-s);font-size:7px;line-height:9px;text-align:center;padding:6px;overflow:hidden}
.lp .rec .lab::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--vinyl-a)}
.lp .slv{position:relative;z-index:1;aspect-ratio:1;overflow:hidden;background:var(--shade)}
.lp .slv svg{display:block;width:100%;height:100%}
.lp:hover .rec{transform:translateX(14%)}
.lp.is-playing .rec{transform:translateX(38%)}
.lp.is-playing .rec .spin{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lp .cap{margin-top:var(--s-3);position:relative;z-index:1}
.lp .cap b{display:block;color:var(--print);font:700 13px/16px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp .cap span{display:block;font:var(--t-meta);font-size:11px;color:var(--print-3)}
.lp .play-badge{position:absolute;z-index:2;left:0;bottom:0;width:40px;height:40px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);
  opacity:0;transition:opacity var(--t-fast)}
.lp:hover .play-badge,.lp.is-playing .play-badge{opacity:1}
.lp .play-badge svg.i{width:16px;height:16px}

/* Artwork tiles (kits, patterns, store) */
.tile{position:relative;display:grid;gap:var(--s-3);cursor:pointer}
.tile .art{position:relative;aspect-ratio:1;overflow:hidden;background:var(--shade)}
.tile .art svg{display:block;width:100%;height:100%;transition:transform var(--t-slow) var(--ease)}
.tile:hover .art svg{transform:scale(1.02)}
.tile[aria-selected="true"] .art{outline:2px solid var(--accent);outline-offset:-2px}
.tile .t{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.tile .t b{color:var(--print);font:700 13px/16px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.machines{display:grid;grid-template-columns:repeat(16,1fr);gap:2px}
.machines i{height:8px;background:var(--c,var(--print-4))}
.cat{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--s-5);background:var(--plate-3);box-shadow:inset 0 0 0 var(--hair) var(--rule);color:var(--print);font:var(--t-btn);font-size:14px;letter-spacing:.04em;text-decoration:none;transition:box-shadow var(--t-fast)}
.cat:hover{box-shadow:inset 0 0 0 var(--hair) var(--print)}
.cat svg.i{width:16px;height:16px;transition:transform var(--t-fast) var(--ease)}
.cat:hover svg.i{transform:translateX(3px)}

/* ---------- Fields ---------- */
.field{display:grid;gap:var(--s-2)}
.input{height:48px;padding:0 var(--s-4);border:0;border-radius:0;background:var(--plate-0);box-shadow:inset 0 0 0 var(--hair) var(--rule-2);color:var(--print);font:400 16px/1 var(--mono);transition:box-shadow var(--t-fast)}
.input::placeholder{color:var(--print-4)}
.input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--print)}
.search{display:flex;align-items:center;gap:var(--s-2);height:var(--hit);padding:0 var(--s-3);background:var(--plate-0);box-shadow:inset 0 0 0 var(--hair) var(--rule-2);color:var(--print-3)}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:0;color:var(--print);font:var(--t-meta);font-size:13px}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--print)}
.search svg.i{width:16px;height:16px}
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-2)}
.code span{display:grid;place-items:center;height:56px;background:var(--plate-0);box-shadow:inset 0 0 0 var(--hair) var(--rule-2);color:var(--print);font:400 24px/1 var(--pix)}
.code span.f{background:var(--lcd);color:var(--lcd-ink);box-shadow:none}
.code span.c{box-shadow:inset 0 0 0 2px var(--print)}
.code span.c::after{content:"";width:2px;height:24px;background:var(--print);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Toast ---------- */
.toast{display:inline-flex;align-items:center;gap:var(--s-3);height:40px;padding:0 var(--s-4);background:var(--print);color:var(--plate-1);font:var(--t-btn);font-size:12px;letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 4px 0 0 var(--accent)}
.toast svg.i{width:16px;height:16px}
.toast.is-lit{background:var(--lcd);color:var(--lcd-ink);font:var(--t-lcd-s);font-size:12px;box-shadow:none}
#toasts{position:fixed;left:50%;bottom:var(--s-6);transform:translateX(-50%);display:grid;gap:var(--s-2);justify-items:center;z-index:100;pointer-events:none}
#toasts .toast{animation:toastIn var(--t-med) var(--ease)}
#toasts .toast.out{opacity:0;transform:translateY(8px);transition:opacity var(--t-med),transform var(--t-med)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- Sheets and dialogs ---------- */
.sheet{background:var(--plate-2);border-top:3px solid var(--accent);padding:var(--s-5) var(--s-5) var(--s-6)}
.dialog{background:var(--plate-2);box-shadow:inset 0 0 0 var(--hair) var(--rule-2);padding:var(--s-8)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--print);color:var(--plate-1);font:700 13px/1 var(--mono);text-transform:uppercase}
.avatar.ghost{background:transparent;box-shadow:inset 0 0 0 var(--hair) var(--rule-2);color:var(--print-3)}
.divider{display:flex;align-items:center;gap:var(--s-3);color:var(--print-4);font:var(--t-label);letter-spacing:.08em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--rule)}
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Mockup chrome (not product UI) */
.mock-top{display:flex;align-items:center;gap:var(--s-4);height:40px;padding:0 var(--s-6);border-bottom:var(--hair) solid var(--rule);background:var(--plate-1);font:var(--t-meta);color:var(--print-3)}
.mock-top a{text-decoration:none;color:var(--print-2)}
.mock-top a:hover{color:var(--print)}
.mock-top .here{color:var(--print)}
.mock-cap{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--print-3);margin:0 0 var(--s-3)}
.theme-switch .seg button{height:24px;font-size:10px}

/* art chips: every item shows its hash-seeded art, simplified at small sizes */
.artchip{display:inline-block;flex:none;width:16px;height:16px;overflow:hidden;vertical-align:middle}
.artchip svg{display:block;width:100%;height:100%}
.artchip.m{width:24px;height:24px}.artchip.l{width:32px;height:32px}

/* Name field (R4): the input takes the host's font, colour and box; only a 1 px underline and the caret show */
.namef{display:block;width:100%;min-width:0;height:1.2em;margin:0;padding:0;border:0;border-radius:0;outline:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;box-shadow:0 1px 0 var(--print);caret-color:var(--accent)}
[data-name]{cursor:text;text-decoration:underline dotted transparent;text-underline-offset:3px;transition:text-decoration-color 0s .3s}
[data-name]:hover{text-decoration-color:var(--print-4)}

/* R6 slider states (spec 3.1). Default and focus are above; hover and dragging deepen the bar, the rest are markers */
.pc{transition:background var(--t-fast)}
.pc:hover span,.pc.act span{color:var(--print-2)}
.pc:hover::after{background:var(--print-2)}
.pc.act span{color:var(--print)}
.pc.act::after{height:4px;background:var(--print)}
.pc.act b{font-variant-numeric:tabular-nums}
.pc.fine span::after{content:"FINE";position:absolute;right:0;color:var(--accent-text)}
.pc.lk b{color:var(--accent-text)}
.pc.mod:not(.bip)::before{content:"";position:absolute;left:var(--f,50%);bottom:0;width:var(--mw,14%);height:0;border-bottom:1px dashed var(--print-3);pointer-events:none}
.pc.learn{outline:1px dashed var(--print);outline-offset:-1px}
.pc .cc{font:var(--t-meta);font-size:9px;color:var(--print-3);margin-left:4px}
.pc.hostauto span::after{content:"H";margin-left:5px;font:400 9px/1 var(--mono);color:var(--print-3)}
.pc.off{opacity:.4;pointer-events:none}.pc.off::after{display:none}
.pc.flash b{color:var(--accent-text)}

/* R8 shared parts: one focus ring (2 px print), tooltip, toast action, select button, empty state */
.input:focus,.search:focus-within{outline:2px solid var(--print);outline-offset:-2px;box-shadow:inset 0 0 0 var(--hair) var(--rule-2)}
.tip{position:fixed;z-index:120;display:flex;align-items:center;gap:8px;max-width:280px;padding:6px 10px;background:var(--plate-3);box-shadow:inset 0 0 0 var(--hair) var(--rule-2);color:var(--print-2);font:400 11px/14px var(--mono);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity var(--t-fast),transform var(--t-fast) var(--ease)}
.tip.on{opacity:1;transform:none}
.tip .kbdk{flex:none}
.toast .tact{margin-left:var(--s-3);height:24px;padding:0 var(--s-2);border:0;background:transparent;box-shadow:inset 0 0 0 var(--hair) currentColor;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;pointer-events:auto}
.toast .tact:hover{background:var(--plate-1);color:var(--print)}
#toasts .toast.out{transform:translateY(4px)}
@keyframes toastIn{from{opacity:0;transform:translateY(4px)}}
.tbsel{justify-content:space-between;min-width:140px;max-width:100%}
.tbsel svg.i{width:14px;height:14px;flex:none}
.tbsel span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.empty-state{display:grid;justify-items:center;align-content:center;gap:var(--s-3);height:100%;min-height:96px;padding:var(--s-4);text-align:center;font:var(--t-meta);color:var(--print-3)}

/* .tb toolbar control (R2), shared so the sheet can show it */
.tb{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 var(--s-3);border:0;background:transparent;box-shadow:inset 0 0 0 var(--hair) var(--rule-2);color:var(--print);font:var(--t-btn);font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.tb:hover{box-shadow:inset 0 0 0 var(--hair) var(--print)}
.tb svg.i{width:14px;height:14px}

/* .lcd-fill: every accent-filled key is a small nugget of the same panel: ghost cells and a faint pixel grid inside the fill
   (image only, the colour stays the key's own), crisp ink, and hardware press feedback: dim at once, relit at once.
   The class is also matched by the selectors of the controls that use the accent fill, so nothing needs re-marking. */
.lcd-fill,.btn-primary,.btn[aria-pressed="true"],.btn.is-on,.chip.is-lit,.tag-new,.aud.is-playing,.lp .play-badge,.th .ms button[aria-pressed="true"],.mlist button[aria-pressed="true"],.strip .ms button[aria-pressed="true"],.arr .lane2 span.cur,.tile .art .aud,.pad.cur,.lp2.cur,.rk.on,.ccb,.pa-card .pb,.pf-step.on,.ph-group .gc button[aria-pressed="true"],.np-arr span.cur,.np-play,.hero .blk,.au .ok,.desk .art .logo,.plug .bar .blk,.step.on,.step.acc,.sqs>.sq.on{background-image:linear-gradient(to right,rgba(var(--lcd-dim-rgb),.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(var(--lcd-dim-rgb),.06) 1px,transparent 1px),radial-gradient(circle at 1px 1px,rgba(var(--lcd-dim-rgb),.1) 0,rgba(var(--lcd-dim-rgb),.1) .9px,transparent 1.1px)!important;background-size:2px 2px,2px 2px,4px 4px!important;background-position:0 0,0 0,0 0!important}
.lcd-fill{background-color:var(--accent);color:var(--accent-ink)}
.lcd-fill:active,.btn-primary:active,.btn.is-on:active,.btn[aria-pressed="true"]:active,.chip.is-lit:active,.np-play:active,.pad.cur:active,.rk.on:active,.pa-card .pb:active,.tile .art .aud:active{opacity:.55;transition:none}

/* Appearance: LCD swatches, each a tiny LCD sample in that LCD's own panel and ink */
.swrow{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.swrow button{width:40px;height:28px;padding:3px;border:0;background:var(--plate-4);box-shadow:inset 0 0 0 var(--hair) var(--rule-2);cursor:pointer}
.swrow button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--print)}
.swrow i{display:grid;place-items:center;width:100%;height:100%;font:var(--t-lcd-s);font-size:8px;font-style:normal;background:var(--dk-lcd);color:var(--dk-lcd-ink);box-shadow:inset 0 0 0 var(--hair) rgba(var(--dk-lcd-ink-rgb),.4)}