@import url("../tokens/fonts.css");

/* Patchbay — component styles. Colours, shadows, spacing and radii come from tokens.css;
   the fallbacks below only cover motion tokens on a page that has not loaded them. */
:root {
  --pb-t-tick: var(--dur-tick, 60ms);
  --pb-t-press: var(--dur-press, 90ms);
  --pb-t-release: var(--dur-release, 140ms);
  --pb-t-snap: var(--dur-snap, 160ms);
  --pb-t-panel: var(--dur-panel, 220ms);
  --pb-e-thunk: var(--ease-thunk, cubic-bezier(.3, 1.6, .55, 1));
  --pb-e-release: var(--ease-release, cubic-bezier(.2, 1.35, .45, 1));
  --pb-e-detent: var(--ease-detent, cubic-bezier(.5, 0, .1, 1));
  --pb-e-out: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  --pb-e-led: var(--ease-led, cubic-bezier(0, 0, .2, 1));
  --pb-wall: 4px;
  --pb-travel: 3px;
  --pb-hi: color-mix(in srgb, var(--panel-raised) 75%, transparent);
  --pb-lcd-halo: .14;
  --pb-lcd-halo-x: .8px;
  --pb-scrim: rgba(12, 11, 10, .52);
}
[data-theme="night"] { --pb-lcd-halo: .32; --pb-lcd-halo-x: 0px; --pb-scrim: rgba(0, 0, 0, .62); }

body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
}

/* ---------- type helpers ---------- */
.pb-silk { font-family: var(--font-sans); font-size: 11px; line-height: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-stretch: 125%; color: var(--ink); }
.pb-silk--muted { color: var(--ink-muted); }
.pb-silk--signal { color: var(--signal-ink); }
.pb-num { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pb-text { font-size: 14px; line-height: 20px; font-weight: 450; color: var(--ink); }
.pb-text--muted { color: var(--ink-muted); }
.pb-heading { font-size: 20px; line-height: 24px; font-weight: 700; font-stretch: 106%; margin: 0; }
.pb-display { font-size: 40px; line-height: 40px; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; margin: 0; }
.pb-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pb-icon { display: block; width: 16px; height: 16px; flex: none; }

/* preview / layout helpers */
.pb-stage { box-sizing: border-box; padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pb-stage > *, .pb-toast { min-width: 0; }
.pb-row-x { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pb-col { display: flex; flex-direction: column; gap: 12px; }
.pb-labelled { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.pb-labelled > .pb-silk { font-size: 10px; letter-spacing: .14em; }

/* ---------- LED ---------- */
.pb-led {
  --led: var(--led-green); --glow: var(--glow-green); --d: 8px;
  position: relative; display: inline-block; flex: none; vertical-align: middle;
  width: var(--d); height: var(--d); border-radius: 50%;
  background: var(--panel-sunk);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.35), 0 1px 0 var(--pb-hi);
}
.pb-led::before, .pb-led::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--led); }
.pb-led::before { opacity: .26; }
.pb-led::after {
  background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.85) 0 14%, rgba(255,255,255,0) 46%), var(--led);
  box-shadow: var(--glow); opacity: 0;
  transition: opacity var(--pb-t-snap) var(--pb-e-led);
}
.pb-led.is-on::after { opacity: 1; transition-duration: var(--pb-t-tick); }
.pb-led.is-blink::after { animation: pb-blink 1s var(--pb-e-led) infinite; }
.pb-led--amber { --led: var(--led-amber); --glow: var(--glow-amber); }
.pb-led--red { --led: var(--led-red); --glow: var(--glow-red); }
.pb-led--signal { --led: var(--signal); --glow: var(--glow-signal); }
.pb-led--sm { --d: 6px; }
.pb-led--lg { --d: 12px; }
.pb-led--bar { width: 16px; height: 4px; border-radius: 1px; }
.pb-led--bar.pb-led--lg { width: 24px; height: 6px; }
@keyframes pb-blink { 0%, 48% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* LED badge */
.pb-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px 0 6px; box-sizing: border-box;
  border-radius: var(--radius-hair); background: var(--panel-sunk); box-shadow: var(--well);
  font-family: var(--font-sans); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .12em; font-stretch: 125%; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.pb-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); }
.pb-badge--lcd { background: var(--lcd); color: var(--lcd-ink); font-family: var(--font-mono); font-stretch: 100%; letter-spacing: .04em; font-weight: 600; }

/* ---------- Key ---------- */
.pb-key {
  --cap: var(--panel-raised); --cap-ink: var(--ink); --wallsh: var(--key-wall);
  --h: 40px; --px: 16px; --fs: 12px;
  position: relative; display: inline-flex; flex: none; vertical-align: top;
  margin: 0; padding: 0 0 var(--pb-wall); border: 0; background: none; color: var(--cap-ink);
  font: inherit; cursor: pointer; border-radius: var(--radius-key); outline: none;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.pb-key::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: var(--pb-wall); border-radius: inherit; background: var(--cap); box-shadow: var(--wallsh); }
.pb-key__cap {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-width: var(--h); height: var(--h); padding: 0 var(--px); box-sizing: border-box;
  border-radius: inherit; background: var(--cap); box-shadow: var(--key-cap);
  transition: transform var(--pb-t-release) var(--pb-e-release);
}
.pb-key__cap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; transition: opacity var(--pb-t-snap) var(--pb-e-out); }
.pb-key__label { position: relative; font-size: var(--fs); line-height: 1; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-stretch: 118%; white-space: nowrap; }
.pb-key .pb-icon { position: relative; }
.pb-key:hover .pb-key__cap { transform: translateY(1px); }
.pb-key:hover .pb-key__cap::after { opacity: .07; }
.pb-key[aria-pressed="true"] .pb-key__cap { transform: translateY(2px); }
.pb-key.is-down .pb-key__cap { transform: translateY(var(--pb-travel)); transition: transform var(--pb-t-press) var(--pb-e-thunk); }
.pb-key.is-down .pb-key__cap::after { opacity: 0; }
.pb-key:focus-visible .pb-key__cap { box-shadow: var(--key-cap), var(--focus-ring); }
.pb-key--primary { --cap: var(--signal); --cap-ink: var(--on-signal); --wallsh: var(--key-wall-signal); }
.pb-key--danger { --cap: var(--ink); --cap-ink: var(--panel-raised); --wallsh: var(--key-wall-ink); }
.pb-key--ghost::before { background: transparent; box-shadow: none; }
.pb-key--ghost .pb-key__cap { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); }
.pb-key--ghost:hover .pb-key__cap { transform: none; background: var(--panel-sunk); box-shadow: var(--well); }
.pb-key--ghost:hover .pb-key__cap::after { opacity: 0; }
.pb-key--ghost.is-down .pb-key__cap { transform: translateY(1px); background: var(--panel-sunk); box-shadow: var(--well); }
.pb-key--ghost[aria-pressed="true"] .pb-key__cap { transform: none; background: var(--panel-sunk); box-shadow: var(--well); }
.pb-key--ghost:focus-visible .pb-key__cap { box-shadow: inset 0 0 0 1px var(--edge), var(--focus-ring); }
.pb-key--sm { --h: 28px; --px: 10px; --fs: 10px; }
.pb-key--lg { --h: 52px; --px: 22px; --fs: 13px; }
.pb-key--icon .pb-key__cap { padding: 0; width: var(--h); }
.pb-key__corner { position: absolute; top: 5px; right: 5px; }
.pb-key--round .pb-key__corner { top: 6px; right: auto; left: 50%; margin-left: -3px; }
.pb-key--sm .pb-key__corner { top: 3px; right: 3px; --d: 5px; }
.pb-key--round { border-radius: var(--radius-round); }
.pb-key--wide { width: 100%; }
.pb-key:disabled, .pb-key[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }
.pb-key:disabled .pb-key__cap { transform: none; }
.pb-key:disabled .pb-key__cap::after { opacity: 0; }
.pb-key--icon.pb-key--sm .pb-icon { width: 14px; height: 14px; }
.pb-key--icon.pb-key--lg .pb-icon { width: 20px; height: 20px; }

/* ---------- Rocker toggle ---------- */
.pb-rocker {
  position: relative; display: inline-block; flex: none; width: 84px; height: 40px; padding: 4px; box-sizing: border-box; margin: 0;
  border: 0; border-radius: var(--radius-key); background: var(--panel-sunk); box-shadow: var(--well);
  cursor: pointer; perspective: 90px; outline: none; -webkit-tap-highlight-color: transparent;
}
.pb-rocker__paddle {
  position: relative; display: flex; width: 100%; height: 100%; border-radius: 3px; overflow: hidden;
  background: var(--panel-raised); box-shadow: var(--key-cap);
  transform: rotateY(-20deg); transition: transform var(--pb-t-snap) var(--pb-e-detent);
}
.pb-rocker[aria-checked="true"] .pb-rocker__paddle { transform: rotateY(20deg); }
.pb-rocker__face { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .12em; font-stretch: 120%; color: var(--ink); }
.pb-rocker__face + .pb-rocker__face { border-left: 1px solid var(--seam); }
.pb-rocker__face::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity var(--pb-t-snap) var(--pb-e-detent); }
.pb-rocker[aria-checked="false"] .pb-rocker__face--off::after, .pb-rocker[aria-checked="true"] .pb-rocker__face--on::after { opacity: .2; }
.pb-rocker__face::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: #000; opacity: 0; transition: opacity var(--pb-t-snap) var(--pb-e-detent); }
.pb-rocker__face--off::before { left: 0; } .pb-rocker__face--on::before { right: 0; }
.pb-rocker[aria-checked="true"] .pb-rocker__face--off::before, .pb-rocker[aria-checked="false"] .pb-rocker__face--on::before { opacity: .22; }
.pb-rocker__face--on .pb-rocker__mark { color: var(--signal-ink); }
.pb-rocker:hover .pb-rocker__paddle { box-shadow: var(--key-cap), inset 0 0 0 1px var(--seam); }
.pb-rocker:focus-visible { box-shadow: var(--well), var(--focus-ring); }
.pb-rocker-wrap { display: inline-flex; flex-direction: column; gap: 8px; }
.pb-rocker-wrap__head { display: flex; align-items: center; gap: 6px; }

/* ---------- Slide switch ---------- */
.pb-slide { display: inline-flex; flex-direction: column; gap: 8px; --pitch: 40px; }
.pb-slide__track {
  position: relative; width: calc(var(--pitch) * var(--n)); height: 28px; box-sizing: border-box;
  border-radius: var(--radius-key); background: var(--panel-sunk); box-shadow: var(--well); cursor: pointer; outline: none; touch-action: none;
}
.pb-slide__track::before { content: ""; position: absolute; left: 10px; right: 10px; top: 13px; height: 2px; border-radius: 1px; background: rgba(0,0,0,.28); }
.pb-slide__thumb {
  position: absolute; left: 4px; top: 3px; width: calc(var(--pitch) - 8px); height: 18px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,.13) 4px 5px, transparent 5px 6px), var(--panel-raised);
  background-position: 7px 0; background-size: calc(100% - 14px) 100%; background-repeat: no-repeat, repeat;
  box-shadow: var(--key-cap), 0 2px 0 rgba(0,0,0,.28), 0 3px 4px rgba(0,0,0,.2);
  transition: transform var(--pb-t-snap) var(--pb-e-thunk); cursor: grab;
}
.pb-slide__track.is-dragging .pb-slide__thumb { transition: none; cursor: grabbing; }
.pb-slide__track:focus-visible { box-shadow: var(--well), var(--focus-ring); }
.pb-slide__stops { display: flex; width: calc(var(--pitch) * var(--n)); }
.pb-slide__stop { flex: 1; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; font-family: var(--font-sans); font-size: 9px; line-height: 12px; font-weight: 700; letter-spacing: .1em; font-stretch: 115%; text-transform: uppercase; color: var(--ink-muted); transition: color var(--pb-t-tick) linear; }
.pb-slide__stop[aria-checked="true"] { color: var(--ink); }
.pb-slide__stop::before { content: ""; display: block; width: 1px; height: 4px; margin: 0 auto 3px; background: var(--edge); }

/* ---------- Illuminated checkbox / radio ---------- */
.pb-check { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pb-check__key { position: relative; flex: none; width: 28px; height: 32px; }
.pb-check__key::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; border-radius: var(--radius-key); background: var(--panel-raised); box-shadow: var(--key-wall); }
.pb-check__cap { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: var(--radius-key); background: var(--panel-raised); box-shadow: var(--key-cap); display: flex; align-items: center; justify-content: center; transition: transform var(--pb-t-release) var(--pb-e-release); }
.pb-check:hover .pb-check__cap { transform: translateY(1px); }
.pb-check input:checked ~ .pb-check__key .pb-check__cap { transform: translateY(2px); }
.pb-check.is-down .pb-check__cap, .pb-check input:checked ~ .pb-check__key.is-down .pb-check__cap { transform: translateY(var(--pb-travel)); transition: transform var(--pb-t-press) var(--pb-e-thunk); }
.pb-check__lamp { --led: var(--signal); --glow: var(--glow-signal); position: relative; width: 14px; height: 5px; border-radius: 1px; background: var(--panel-sunk); box-shadow: inset 0 1px 1px rgba(0,0,0,.35); }
.pb-check--radio .pb-check__lamp { width: 8px; height: 8px; border-radius: 50%; }
.pb-check__lamp::before, .pb-check__lamp::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--led); }
.pb-check__lamp::before { opacity: .24; }
.pb-check__lamp::after { opacity: 0; box-shadow: var(--glow); background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0) 60%), var(--led); transition: opacity var(--pb-t-snap) var(--pb-e-led); }
.pb-check input:checked ~ .pb-check__key .pb-check__lamp::after { opacity: 1; transition-duration: var(--pb-t-tick); }
.pb-check--green .pb-check__lamp { --led: var(--led-green); --glow: var(--glow-green); }
.pb-check--amber .pb-check__lamp { --led: var(--led-amber); --glow: var(--glow-amber); }
.pb-check--red .pb-check__lamp { --led: var(--led-red); --glow: var(--glow-red); }
.pb-check input:focus-visible ~ .pb-check__key .pb-check__cap { box-shadow: var(--key-cap), var(--focus-ring); }
.pb-check input:disabled ~ * { opacity: .45; }
.pb-check:has(input:disabled) { cursor: not-allowed; }
.pb-check__text { padding-bottom: 4px; }
.pb-group { display: inline-flex; flex-direction: column; gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.pb-group > legend { padding: 0; margin-bottom: 12px; }
.pb-group__items { display: flex; flex-wrap: wrap; gap: 12px 20px; }

/* ---------- Text field ---------- */
.pb-field { display: inline-flex; flex-direction: column; gap: 8px; min-width: 0; width: 240px; }
.pb-field__head { display: flex; align-items: center; gap: 6px; }
.pb-field__bezel { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; box-sizing: border-box; border-radius: var(--radius-key); background: var(--lcd); box-shadow: var(--well); }
.pb-field__input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--lcd-ink); font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: .02em; caret-color: var(--lcd-ink); }
.pb-field__input::placeholder { color: var(--lcd-ink); opacity: .8; }
.pb-field__unit { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--lcd-ink); letter-spacing: .04em; }
.pb-field__bezel:focus-within { box-shadow: var(--well), var(--focus-ring); }
.pb-field__msg { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.pb-field.is-error .pb-field__msg { color: var(--ink); }
.pb-field.is-error .pb-field__bezel { box-shadow: var(--well), inset 0 0 0 2px var(--ink); }
.pb-field.is-error .pb-field__bezel:focus-within { box-shadow: var(--well), inset 0 0 0 2px var(--ink), var(--focus-ring); }

/* ---------- Segmented selector ---------- */
.pb-seg { display: inline-flex; flex-direction: column; gap: 8px; }
.pb-seg__well { display: inline-flex; gap: 4px; padding: 4px 4px 2px; border-radius: calc(var(--radius-key) + 2px); background: var(--panel-sunk); box-shadow: var(--well); }
.pb-seg__well .pb-key { --h: 30px; --px: 12px; --fs: 10px; }
.pb-seg__well .pb-key[aria-checked="true"] .pb-key__cap { transform: translateY(var(--pb-travel)); transition: transform var(--pb-t-press) var(--pb-e-thunk); }
.pb-seg__well .pb-key[aria-checked="true"] .pb-key__cap::after { opacity: 0; }

/* ---------- Knob ---------- */
.pb-knob { --size: 76px; --cap: 46px; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.pb-knob--sm { --size: 56px; --cap: 32px; }
.pb-knob--lg { --size: 104px; --cap: 64px; }
.pb-knob__body { position: relative; width: var(--size); height: var(--size); cursor: ns-resize; }
.pb-knob__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pb-knob__ticks line { stroke: var(--edge); stroke-width: 1.5; stroke-linecap: butt; transition: stroke var(--pb-t-tick) linear; }
.pb-knob__ticks line.is-major { stroke: var(--ink-muted); stroke-width: 2; }
.pb-knob__arc { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: butt; }
.pb-knob__track { fill: none; stroke: var(--panel-sunk); stroke-width: 2.5; }
.pb-knob:hover .pb-knob__ticks line { stroke: var(--ink-muted); }
.pb-knob__base, .pb-knob__cap, .pb-knob__gloss { position: absolute; left: 50%; top: 50%; width: var(--cap); height: var(--cap); margin: calc(var(--cap) / -2) 0 0 calc(var(--cap) / -2); border-radius: 50%; }
.pb-knob__base { background: var(--panel-raised); box-shadow: var(--key-wall); }
.pb-knob__cap {
  background: repeating-conic-gradient(from 0deg, rgba(0,0,0,0) 0 5deg, rgba(0,0,0,.14) 5deg 7.5deg, rgba(0,0,0,0) 7.5deg 10deg), var(--panel-raised);
  box-shadow: var(--key-cap);
  transition: transform var(--pb-t-tick) var(--pb-e-detent);
}
.pb-knob__cap::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--panel-raised); box-shadow: 0 0 0 1px rgba(0,0,0,.1), inset 0 1px 0 var(--pb-hi); }
.pb-knob__line { position: absolute; left: 50%; top: 9%; width: 3px; height: 34%; margin-left: -1.5px; border-radius: 1px; background: var(--ink); }
.pb-knob--signal .pb-knob__line { background: var(--signal-ink); }
.pb-knob__gloss { pointer-events: none; background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.38), rgba(255,255,255,0) 58%); }
[data-theme="night"] .pb-knob__gloss { background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.1), rgba(255,255,255,0) 58%); }
.pb-knob.is-turning .pb-knob__cap { transition-duration: 0ms; }
.pb-knob:focus-visible .pb-knob__base { box-shadow: var(--key-wall), var(--focus-ring); }
.pb-knob__value { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--pb-t-tick) linear; }
.pb-knob.is-turning .pb-knob__value, .pb-knob:focus-visible .pb-knob__value { color: var(--ink); }
.pb-knob--sm .pb-knob__value { font-size: 10px; }
.pb-knob__label { white-space: nowrap; }
.pb-knob--sm .pb-knob__label { font-size: 9px; letter-spacing: .12em; }

/* ---------- Fader ---------- */
.pb-fader { --len: 180px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.pb-fader__body { position: relative; width: 80px; height: var(--len); cursor: ns-resize; }
.pb-fader__slot { position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--panel-sunk); box-shadow: var(--well); }
.pb-fader__slot::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; bottom: 4px; border-radius: 1px; background: rgba(0,0,0,.45); }
.pb-fader__scale { position: absolute; left: 0; top: 10px; bottom: 10px; width: 22px; }
.pb-fader__mark { position: absolute; right: 0; display: flex; align-items: center; gap: 3px; transform: translateY(-50%); font-family: var(--font-mono); font-size: 8px; line-height: 10px; color: var(--ink-muted); }
.pb-fader__mark::after { content: ""; width: 5px; height: 1px; background: var(--edge); }
.pb-fader__mark.is-zero { color: var(--ink); font-weight: 700; }
.pb-fader__mark.is-inf { font-size: 11px; }
.pb-fader__mark.is-zero::after { width: 8px; background: var(--ink); }
.pb-fader__scale--r { left: auto; right: 0; }
.pb-fader__scale--r .pb-fader__mark { left: 0; right: auto; }
.pb-fader__scale--r .pb-fader__mark::after { order: -1; }
.pb-fader__cap {
  position: absolute; left: 50%; top: 0; width: 32px; height: 20px; margin-left: -16px; border-radius: 3px;
  background: linear-gradient(transparent 0 9px, var(--ink) 9px 11px, transparent 11px), repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.12) 2px 3px), var(--panel-raised);
  box-shadow: var(--key-cap), var(--key-wall);
  transition: transform var(--pb-t-tick) var(--pb-e-detent); cursor: grab;
}
.pb-fader.is-moving .pb-fader__cap { transition-duration: 0ms; cursor: grabbing; }
.pb-fader.is-snapping .pb-fader__cap { transition: transform var(--pb-t-snap) var(--pb-e-thunk); }
.pb-fader:focus-visible .pb-fader__cap { box-shadow: var(--key-cap), var(--key-wall), var(--focus-ring); }
.pb-fader--signal .pb-fader__cap { background: linear-gradient(transparent 0 9px, var(--on-signal) 9px 11px, transparent 11px), repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.12) 2px 3px), var(--signal); box-shadow: var(--key-cap), var(--key-wall-signal); }
.pb-fader__value { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-fader.is-moving .pb-fader__value, .pb-fader:focus-visible .pb-fader__value { color: var(--ink); }

/* ---------- Tabs (channel selector) ---------- */
.pb-tabs { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pb-tabs { container-type: inline-size; }
@container (max-width: 460px) { .pb-tabs .pb-tabs__num { display: none; } .pb-tabs .pb-tabs__tab { padding: 0 4px; } .pb-tabs .pb-tabs__name { letter-spacing: .03em; font-stretch: 92%; } .pb-tabs .pb-tabs__inner { gap: 5px; } }
.pb-tabs__list { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px; border-radius: calc(var(--radius-key) + 2px); background: var(--panel-sunk); box-shadow: var(--well); }
.pb-tabs__shuttle { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / var(--n)); border-radius: var(--radius-key); background: var(--panel-raised); box-shadow: var(--key-cap), 0 1px 0 rgba(0,0,0,.18), 0 2px 3px rgba(0,0,0,.14); transition: transform var(--pb-t-snap) var(--pb-e-thunk); }
.pb-tabs__shuttle::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 1px; background: var(--signal-ink); }
.pb-tabs__tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 40px; padding: 0 10px; border: 0; background: none; border-radius: var(--radius-key); cursor: pointer; color: var(--ink-muted); outline: none; font: inherit; -webkit-tap-highlight-color: transparent; transition: color var(--pb-t-tick) linear; }
.pb-tabs__tab:hover { color: var(--ink); }
.pb-tabs__tab[aria-selected="true"] { color: var(--ink); }
.pb-tabs__tab:focus-visible { box-shadow: var(--focus-ring); }
.pb-tabs__tab:active .pb-tabs__inner { transform: translateY(1px); }
.pb-tabs__inner { display: flex; align-items: center; gap: 8px; min-width: 0; transition: transform var(--pb-t-press) var(--pb-e-thunk); }
.pb-tabs__num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.pb-tabs__name { font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: .12em; font-stretch: 120%; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-tabs__panel[hidden] { display: none; }

/* ---------- Panel / plate ---------- */
.pb-panel { position: relative; box-sizing: border-box; padding: 20px 24px; border-radius: var(--radius-plate); background: var(--panel); box-shadow: var(--plate), inset 0 0 0 1px var(--seam); min-width: 0; }
.pb-panel--raised { background: var(--panel-raised); }
.pb-panel--sunk { background: var(--panel-sunk); box-shadow: var(--well); }
.pb-panel--screws { padding: 24px 28px; }
.pb-panel__head { display: flex; align-items: center; gap: 8px; min-height: 16px; margin-bottom: 16px; }
.pb-panel__head .pb-silk { flex: 1; min-width: 0; }
.pb-panel__meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); }
.pb-seam { display: block; height: 1px; margin: 16px 0; border: 0; background: var(--seam); box-shadow: 0 1px 0 var(--pb-hi); }
.pb-panel > .pb-seam--bleed { margin-left: -24px; margin-right: -24px; }
.pb-panel--screws > .pb-seam--bleed { margin-left: -28px; margin-right: -28px; }
.pb-screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--panel-sunk); box-shadow: inset 0 1px 1px rgba(0,0,0,.32), 0 1px 0 var(--pb-hi); }
.pb-screw::before { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--panel-raised); box-shadow: inset 0 1px 0 var(--pb-hi), inset 0 -1px 0 rgba(0,0,0,.18); }
.pb-screw::after { content: ""; position: absolute; left: 2.5px; right: 2.5px; top: 4.25px; height: 1.5px; border-radius: 1px; background: var(--edge); transform: rotate(var(--r, 30deg)); }
.pb-screw--tl { top: 7px; left: 7px; } .pb-screw--tr { top: 7px; right: 7px; }
.pb-screw--bl { bottom: 7px; left: 7px; } .pb-screw--br { bottom: 7px; right: 7px; }

/* ---------- LCD readout ---------- */
.pb-lcd { --dh: 36px; display: inline-flex; flex-direction: column; gap: 6px; vertical-align: top; }
.pb-lcd--sm { --dh: 22px; }
.pb-lcd--lg { --dh: 56px; }
.pb-lcd__bezel { display: inline-flex; padding: 4px; border-radius: var(--radius-plate); background: var(--panel-sunk); box-shadow: var(--well); }
.pb-lcd--sm .pb-lcd__bezel { padding: 3px; border-radius: 6px; }
.pb-lcd__glass { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; border-radius: var(--radius-key); background: var(--lcd); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); color: var(--lcd-ink); }
.pb-lcd--sm .pb-lcd__glass { padding: 5px 7px; gap: 6px; border-radius: 3px; }
.pb-lcd__bezel > .pb-lcd__glass { flex: 1; }
.pb-lcd__side { margin-left: auto; }
.pb-lcd__digits { display: block; height: var(--dh); width: auto; overflow: visible; }
.pb-lcd__ghost { fill: var(--lcd-ghost); }
.pb-lcd__lit polygon, .pb-lcd__lit rect { fill: var(--lcd-ink); opacity: 0; transition: opacity var(--pb-t-tick) var(--pb-e-led); }
.pb-lcd__lit .on { opacity: 1; }
.pb-lcd__halo { opacity: var(--pb-lcd-halo); transform: translate(var(--pb-lcd-halo-x), var(--pb-lcd-halo-x)); }
.pb-lcd__halo polygon, .pb-lcd__halo rect { stroke: var(--lcd-ink); stroke-width: 1.4; }
.pb-lcd__side { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: 4px; padding-bottom: 1px; }
.pb-lcd__cap, .pb-lcd__unit { font-family: var(--font-mono); font-size: 10px; line-height: 10px; font-weight: 600; letter-spacing: .06em; color: var(--lcd-ink); text-transform: uppercase; white-space: nowrap; }
.pb-lcd--sm .pb-lcd__cap, .pb-lcd--sm .pb-lcd__unit { font-size: 8px; line-height: 8px; }
.pb-lcd__text { font-family: var(--font-mono); font-size: calc(var(--dh) * .5); line-height: var(--dh); font-weight: 600; letter-spacing: .06em; color: var(--lcd-ink); white-space: pre; }
.pb-lcd__label { display: flex; align-items: center; gap: 6px; }

/* ---------- Meter ---------- */
.pb-meter { display: inline-flex; flex-direction: column; gap: 8px; vertical-align: top; }
.pb-meter__bar { display: flex; flex-direction: column-reverse; gap: 2px; padding: 4px; border-radius: var(--radius-key); background: var(--panel-sunk); box-shadow: var(--well); }
.pb-meter--h .pb-meter__bar { flex-direction: row; }
.pb-meter__seg { --led: var(--led-green); position: relative; width: 10px; height: 5px; border-radius: 1px; background: var(--led); opacity: .2; transition: opacity var(--pb-t-snap) var(--pb-e-led); }
.pb-meter--h .pb-meter__seg { width: 5px; height: 12px; }
.pb-meter--wide .pb-meter__seg { width: 14px; }
.pb-meter__seg.is-amber { --led: var(--led-amber); }
.pb-meter__seg.is-red { --led: var(--led-red); }
.pb-meter__seg.is-on, .pb-meter__seg.is-peak { opacity: 1; transition-duration: 0ms; }
.pb-meter__pair { display: flex; gap: 3px; }
.pb-vu { position: relative; width: 200px; height: 116px; padding: 4px; box-sizing: border-box; border-radius: var(--radius-plate); background: var(--panel-sunk); box-shadow: var(--well); }
.pb-vu__face { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius-key); background: var(--panel-raised); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.pb-vu__scale { position: absolute; inset: 0; width: 100%; height: 100%; }
.pb-vu__scale .t { stroke: var(--ink); stroke-width: 1.2; }
.pb-vu__scale .t.red { stroke: var(--led-red); stroke-width: 2.2; }
.pb-vu__scale .arc { fill: none; stroke: var(--ink); stroke-width: 1; }
.pb-vu__scale .arc-red { fill: none; stroke: var(--led-red); stroke-width: 3; }
.pb-vu__scale text { font-family: var(--font-mono); font-size: 8px; fill: var(--ink-muted); }
.pb-vu__scale text.big { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .1em; fill: var(--ink); }
.pb-vu__needle { position: absolute; left: 50%; bottom: -42px; width: 2px; height: 120px; margin-left: -1px; background: var(--ink); transform-origin: 50% 100%; transform: rotate(-48deg); transition: transform 120ms var(--pb-e-out); border-radius: 1px; }
.pb-vu__needle::after { content: ""; position: absolute; left: -1px; top: 0; width: 4px; height: 22px; background: var(--signal); border-radius: 1px; }
.pb-vu__pivot { position: absolute; left: 50%; bottom: -18px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: var(--panel-sunk); box-shadow: inset 0 1px 0 var(--pb-hi), 0 -1px 0 rgba(0,0,0,.15); }

/* ---------- Tooltip (silkscreen callout) ---------- */
.pb-tipwrap { position: relative; display: inline-flex; }
.pb-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-hair);
  background: var(--ink); color: var(--panel-raised); box-shadow: var(--float);
  font-family: var(--font-sans); font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: .12em; font-stretch: 120%; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 3px); transition: opacity 120ms var(--pb-e-out), transform 120ms var(--pb-e-out);
}
.pb-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: var(--ink); }
.pb-tip--bottom { bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -3px); }
.pb-tip--bottom::after { top: auto; bottom: 100%; }
.pb-tip__key { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 1px 4px; border-radius: 2px; box-shadow: inset 0 0 0 1px currentColor; }
.pb-tipwrap:hover .pb-tip { opacity: 1; transform: translate(-50%, 0); transition-delay: 250ms; }
.pb-tipwrap:focus-within .pb-tip, .pb-tip.is-shown { opacity: 1; transform: translate(-50%, 0); transition-delay: 0ms; }

/* ---------- Toast / status line ---------- */
.pb-toaster { position: fixed; left: 50%; bottom: 24px; z-index: 60; display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); pointer-events: none; }
.pb-toaster--inline { position: relative; left: auto; bottom: auto; transform: none; max-width: 100%; }
.pb-toast {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; height: 40px; padding: 0 6px 0 12px; box-sizing: border-box; overflow: hidden;
  border-radius: var(--radius-key); background: var(--lcd); color: var(--lcd-ink); box-shadow: 0 0 0 3px var(--panel-sunk), var(--float); pointer-events: auto;
  animation: pb-toast-in var(--pb-t-panel) var(--pb-e-out) both;
}
.pb-toast.is-leaving { animation: pb-toast-out var(--pb-t-release) var(--pb-e-detent) both; }
.pb-toast__code { flex: none; font-family: var(--font-sans); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .14em; font-stretch: 125%; text-transform: uppercase; }
.pb-toast__msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.pb-toast__x { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 4px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--lcd-ink); cursor: pointer; }
.pb-toast__x:hover { box-shadow: inset 0 0 0 1px var(--lcd-ink); }
.pb-toast__x:focus-visible { outline: 2px solid var(--lcd-ink); outline-offset: -2px; }
.pb-toast__x .pb-icon { width: 12px; height: 12px; }
.pb-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lcd-ink); opacity: .45; transform-origin: 0 50%; animation: pb-timer linear both; }
@keyframes pb-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pb-toast-out { to { opacity: 0; transform: translateY(6px); } }
@keyframes pb-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Modal / dialog ---------- */
.pb-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--pb-scrim); animation: pb-fade var(--pb-t-panel) var(--pb-e-out) both; }
.pb-modal--inline { position: absolute; }
.pb-modal.is-leaving { animation: pb-fade-out var(--pb-t-snap) var(--pb-e-detent) both; }
.pb-dialog { position: relative; width: 100%; max-width: 420px; box-sizing: border-box; padding: 28px 28px 24px; border-radius: var(--radius-plate); background: var(--panel); box-shadow: var(--plate), inset 0 0 0 1px var(--seam), var(--float); animation: pb-drop var(--pb-t-panel) var(--pb-e-thunk) both; outline: none; }
.pb-modal.is-leaving .pb-dialog { animation: pb-lift var(--pb-t-release) var(--pb-e-detent) both; }
.pb-dialog__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pb-dialog__title { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; font-stretch: 106%; }
.pb-dialog__body { margin: 0; color: var(--ink-muted); }
.pb-dialog__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--seam); box-shadow: inset 0 1px 0 var(--pb-hi); }
@keyframes pb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-fade-out { to { opacity: 0; } }
@keyframes pb-drop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pb-lift { to { opacity: 0; transform: translateY(8px) scale(.99); } }

/* ---------- Progress (16-step row) ---------- */
.pb-steps { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pb-steps__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pb-steps__row { display: grid; grid-template-columns: repeat(var(--groups), minmax(0, 1fr)); gap: 8px; padding: 6px; border-radius: var(--radius-key); background: var(--panel-sunk); box-shadow: var(--well); }
.pb-steps__group { display: grid; grid-template-columns: repeat(var(--per), minmax(0, 1fr)); gap: 3px; }
.pb-steps__lamp { position: relative; height: 10px; border-radius: 1px; background: rgba(0,0,0,.16); }
[data-theme="night"] .pb-steps__lamp { background: rgba(255,255,255,.05); }
.pb-steps__lamp::before, .pb-steps__lamp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--signal); opacity: 0; transition: opacity var(--pb-t-snap) var(--pb-e-led); }
.pb-steps__lamp.is-on::before { opacity: .78; transition-duration: var(--pb-t-tick); }
.pb-steps__lamp.is-head::after { opacity: 1; box-shadow: var(--glow-signal); background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0) 70%), var(--signal); transition-duration: 0ms; }
.pb-steps__nums { display: grid; grid-template-columns: repeat(var(--groups), minmax(0, 1fr)); gap: 8px; padding: 0 6px; }
.pb-steps__nums span { font-family: var(--font-mono); font-size: 9px; line-height: 10px; color: var(--ink-muted); }

/* ---------- List row ---------- */
.pb-list { display: flex; flex-direction: column; border-radius: var(--radius-plate); background: var(--panel); box-shadow: var(--plate), inset 0 0 0 1px var(--seam); overflow: hidden; }
.pb-listrow {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 16px; box-sizing: border-box;
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
}
.pb-listrow + .pb-listrow { box-shadow: inset 0 1px 0 var(--seam), inset 0 2px 0 var(--pb-hi); }
.pb-listrow::before { content: ""; position: absolute; inset: 0; background: var(--panel-sunk); opacity: 0; transition: opacity var(--pb-t-snap) var(--pb-e-out); }
.pb-listrow:hover::before { opacity: 1; transition-duration: var(--pb-t-tick); }
.pb-listrow > * { position: relative; transition: transform var(--pb-t-release) var(--pb-e-release); }
.pb-listrow.is-down > * { transform: translateY(1px); transition: transform var(--pb-t-press) var(--pb-e-thunk); }
.pb-listrow:focus-visible { box-shadow: inset 0 0 0 2px var(--signal-ink); }
.pb-listrow__lead { flex: none; display: flex; align-items: center; justify-content: center; width: 16px; color: var(--ink-muted); }
.pb-listrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-listrow__title { font-size: 11px; line-height: 12px; font-weight: 700; letter-spacing: .12em; font-stretch: 122%; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-listrow__sub { font-size: 12px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-listrow__value { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pb-listrow[aria-current="true"] .pb-listrow__value { color: var(--signal-ink); }
.pb-listrow__trail { flex: none; display: flex; color: var(--ink-muted); }
.pb-listrow:hover .pb-listrow__trail { color: var(--ink); }
.pb-listrow:disabled { cursor: not-allowed; }
.pb-listrow:disabled > * { opacity: .45; }

/* ---------- Empty state ---------- */
.pb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 24px; box-sizing: border-box; border-radius: var(--radius-plate); background: var(--panel-sunk); box-shadow: var(--well); }
.pb-empty .pb-lcd { margin-bottom: 8px; }
.pb-empty__body { max-width: 300px; margin: 0 0 8px; color: var(--ink-muted); }

/* ---------- Widgets ---------- */
.pb-w { position: relative; box-sizing: border-box; border-radius: var(--radius-plate); background: var(--panel); box-shadow: var(--plate), inset 0 0 0 1px var(--seam); padding: 24px 28px; min-width: 0; }
.pb-w { container-type: inline-size; }
.pb-w__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.pb-w__head > .pb-silk { flex: 1 1 auto; }
.pb-w__model { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); white-space: nowrap; }
@container (max-width: 420px) {
  .pb-w__head > .pb-silk { flex-basis: calc(100% - 20px); }
  .pb-w__model { display: none; }
}

.pb-wrow { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.pb-lights { display: flex; flex-wrap: wrap; gap: 16px 12px; }
.pb-light { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1 0 84px; }
.pb-light__head { display: flex; align-items: center; gap: 6px; }
.pb-light__head .pb-silk { font-size: 10px; }
.pb-light .pb-rocker { width: 64px; height: 32px; }
.pb-kpi { display: flex; flex-direction: column; gap: 8px; }
.pb-kpi .pb-lcd, .pb-kpi .pb-lcd__bezel { display: flex; width: 100%; box-sizing: border-box; }
.pb-kpi .pb-lcd__glass { flex: 1; justify-content: space-between; }
.pb-kpi__foot { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }

.pb-sysmon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; }
.pb-sysmon__leds { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 20px; }
.pb-sysmon__leds > span { display: inline-flex; align-items: center; gap: 6px; }
.pb-sysmon .pb-meter__bar { flex-wrap: nowrap; }
.pb-sysmon .pb-meter { min-width: 0; width: 100%; }
.pb-sysmon .pb-meter__bar { justify-content: space-between; }
.pb-sysmon .pb-meter--h .pb-meter__seg { flex: 1; width: auto; max-width: 10px; min-width: 3px; }

@media (max-width: 480px) {
  .pb-w, .pb-panel--screws { padding: 22px 18px; }
  .pb-panel--screws > .pb-seam--bleed { margin-left: -18px; margin-right: -18px; }
  .pb-stage { padding: 16px; }
}

/* ---------- reduced motion: state changes stay, travel and fades go ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="pb-"], [class*="pb-"]::before, [class*="pb-"]::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
  .pb-led.is-blink::after { animation: none !important; opacity: 1; }
  .pb-toast__timer { display: none; }
}