style.css

:root {
  --bg: #f7f7f5;
  --border: #d9d6cf;
  --text: #22221f;
  --muted: #79766d;
  --accent: #b5442e;
  --wire: #69665c;
  --wire-loop: #7c786c;
  --wire-power: #728880;
  --wire-exp: #5f73c2;
  --wire-arrow-out: #4f7a3d;
  --wire-arrow-in: #b23a2a;
  --board-bg: rgba(0, 0, 0, 0.067);
  /* The arcade original is this same yellow on a black cabinet -- against
     this theme's light board/pedal photos that contrast is gone, so
     light mode gets a deeper, more saturated gold instead (dark mode
     keeps the classic arcade shade below) plus a dark outline
     (--pacman-stroke) on the shape itself, see .connector-bulge/-trace. */
  --pacman: #e0bb00;
  --pacman-stroke: #a88c00;
}

/* :not([data-theme="light"]) is what lets the header's theme-toggle (see
   index.html/app.js) override the system preference: an explicit "light"
   choice has to win here even on a system set to dark, but with no
   explicit choice at all this still just follows prefers-color-scheme,
   same as before the toggle existed. An explicit "dark" choice doesn't
   need a matching guard here -- the block below applies it unconditionally,
   system preference or not. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #3B4044;
    --border: #42484c;
    --text: #ece9e1;
    --muted: #c4bfb1;
    --accent: #b5442e;
    --wire: #0d0d0d;
    --wire-loop: #1a1a1a;
    --wire-power: #728880;
    --wire-exp: #5070c2;
    --wire-arrow-out: #6b9b56;
    --wire-arrow-in: #ca4e3e;
    --board-bg: #545A5E;
    --pacman: #ffd400;
    --pacman-stroke: #a88c00;
  }
}

/* Same palette as above, forced on regardless of system preference --
   reached only once the visitor has actually clicked the theme-toggle to
   "dark" (see app.js), which is also the only time this attribute is
   ever set to "dark" at all. Necessarily a duplicate of the block above
   rather than something shared, since a plain CSS class/attribute
   selector can't itself reach inside a @media block's own rule. */
:root[data-theme="dark"] {
  --bg: #3B4044;
  --border: #42484c;
  --text: #ece9e1;
  --muted: #c4bfb1;
  --accent: #b5442e;
  --wire: #0d0d0d;
  --wire-loop: #1a1a1a;
  --wire-power: #728880;
  --wire-exp: #5070c2;
  --wire-arrow-out: #6b9b56;
  --wire-arrow-in: #ca4e3e;
  --board-bg: #545A5E;
  --pacman: #ffd400;
  --pacman-stroke: #a88c00;
}

* { box-sizing: border-box; }

/* Rule 1 (no scrolling, ever) is enforced structurally here, not just by
   getting the layout math in app.js right: even a 1px overshoot in that
   math can never produce a visible scrollbar, which matters because a
   scrollbar changing the viewport's own size is exactly what fed the old
   zoom-based layout's resize feedback loop (see app.js's relayout comment).
   height:100% is required for overflow:hidden to actually clip on some
   mobile browsers otherwise treat body as content-sized regardless. */
html, body {
  overflow: hidden;
  height: 100%;
}

/* A flex column so #app (the second child) can claim "the rest of the
   viewport, after the header" via flex:1 and center its one child (the
   board) both ways within that -- see #app below. Replaces the old
   fitToViewport's hand-computed marginTop centering trick now that there's
   no natural-size measurement pass left for a permanent flex ancestor to
   throw off (see app.js's relayout). */
body {
  margin: 0;
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* A row so the three controls (grouped in .header-controls, see
   index.html) sit beside "My Gear" instead of wrapping under it --
   justify-content:space-between pushes that whole group flush right
   without needing a margin-left:auto on it specifically. The bottom
   spacing that used to live on h1's own margin and each control's own
   margin (both now zeroed below) moves here instead, so it applies once
   to the row as a whole regardless of which item ends up tallest. */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

header h1 {
  color: var(--muted);
  margin: 0;
  font-size: 1.6rem;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* svg/GitHub_Invertocat_Black.svg's own <path d>, inlined the same way the
   other header controls' icons are -- currentColor + var(--muted) keeps it
   visually consistent with them rather than showing its own fixed black. */
.github-link {
  display: inline-flex;
  color: var(--muted);
}

.github-link svg path {
  fill: currentColor;
}

.github-link:hover {
  color: var(--text);
}

/* The checkbox (hidden, see index.html) only exists to hold :checked
   state; the label's <svg> -- toggled between plain-bolt and
   struck-through by the sibling rules below -- is the only thing shown. */
.power-toggle {
  display: inline-flex;
  cursor: pointer;
}

.power-toggle svg {
  fill: var(--muted);
}

.power-toggle-slash {
  display: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
}

/* Same hidden-checkbox-drives-a-sibling-<svg> shape as .power-toggle
   above, sun/moon rather than plain/struck-through -- the standard way a
   light/dark switch reads at a glance almost everywhere it shows up.
   currentColor (rather than a --wire-* token, which wouldn't mean
   anything here) is what lets both icons track the header's own text
   color across themes for free. Unlike .power-toggle, this checkbox's
   initial :checked state isn't set in the markup -- app.js sets it once,
   on load, to whatever theme actually resolved (stored choice, or
   prefers-color-scheme if there isn't one yet -- see initTheme). */
.theme-toggle {
  display: inline-flex;
  cursor: pointer;
  color: var(--muted);
}

.theme-toggle svg circle,
.theme-toggle svg path {
  fill: currentColor;
}

.theme-toggle svg line {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.theme-toggle-moon {
  display: none;
}

.theme-toggle input:checked ~ svg .theme-toggle-sun {
  display: none;
}

.theme-toggle input:checked ~ svg .theme-toggle-moon {
  display: block;
}

/* A real <button>, not a hidden-checkbox label like the two above -- see
   its own comment in index.html for why. The reset (no border/background/
   padding/font-inherit-fighting) is what makes a <button> read as a plain
   icon control rather than a form button; currentColor + var(--muted)
   keeps it visually consistent with .theme-toggle right next to it. */
.cascade-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
}

.cascade-toggle svg path,
.cascade-toggle svg rect {
  fill: currentColor;
}

.cascade-toggle-stop {
  display: none;
}

/* .playing is toggled by setCascadeActive (app.js), not a CSS-only
   :checked the way the other two header controls are -- this state can
   change from three different places (this button, spacebar, the
   guitar's own click, see toggleCascade), not just a click on this
   control itself, so app.js has to be the one keeping it current
   regardless of which of those actually fired. */
.cascade-toggle.playing .cascade-toggle-play {
  display: none;
}

.cascade-toggle.playing .cascade-toggle-stop {
  display: block;
}

.power-toggle input:not(:checked) ~ svg {
  fill: var(--muted);
}

.power-toggle input:not(:checked) ~ svg .power-toggle-slash {
  display: block;
}

/* Connector paths are drawn in coordinates relative to #app's own
   top-left (see localRect() in app.js), so #app must be the positioned
   ancestor those coordinates resolve against. flex:1 claims whatever
   height body's column layout has left after the header; centering the
   one child (section.config) both ways here is what used to need
   fitToViewport's hand-rolled marginTop math -- app.js's relayout()
   already sizes that child to fit, so plain centering is enough now.
   min-height:0 is required for a flex item to actually be allowed to
   shrink below its content size in a column flex container -- without it
   a tall board could quietly push the header off past the top edge
   instead of ever triggering app.js's own too-big correction. */
#app {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shown until app.js removes it (see main()) -- absolutely positioned and
   covering #app entirely (not just flex-centered alongside its other
   child) so it fully occludes the diagram while that's still mid-render,
   rather than the two ever appearing side by side as plain flex siblings
   for a frame. */
.loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.9rem;
}

.loading p {
  margin: 0;
}

.spinner {
  animation: spinner-rotate 1s linear infinite;
  /* SVG's default transform-origin is (0,0), unlike HTML elements'
     50%/50% -- without this, "rotate" spins the whole viewBox around its
     top-left corner instead of the circle's own center. */
  transform-origin: center;
}

.spinner-track {
  stroke: var(--border);
}

/* Circumference at r=20 is ~125.7px -- a ~30px dash leaves a ~96px gap,
   the visible "arc" look; stroke-linecap:round rounds off both ends of
   that arc instead of leaving it flat-cut. */
.spinner-arc {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 30 95.7;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* The libavoid-routed connectors are rendered into one <svg> appended as
   the last child of #app, sized to its own default box unless told
   otherwise -- absolutely-positioned and stretched to cover #app, with
   overflow left visible so a path segment that pokes past the nominal
   box (a routed corner right at the edge) still paints instead of being
   clipped. pointer-events is off since the overlay sits on top of the
   whole board and shouldn't intercept clicks/hover.

   z-index is required, not just DOM order, to actually win that "on top"
   -- .node-box sets its own z-index:1 (see below), which makes each
   pedal a positioned stacking context in its own right rather than plain
   in-flow content, and a positioned box with any explicit z-index always
   paints after a position:absolute sibling stuck at the implicit
   z-index:auto/0 level, regardless of DOM order. Without this, the
   traveling Pac-Man (bulge/trace, riding right up to each pin) ducks
   behind the pedal photo it's approaching instead of crossing over it.
*/
.connector-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* #app's own flex centering (both axes) does all the work now -- app.js's
   relayout() already sizes this to fit available space, so there's
   nothing left for this element's own box model to contribute.
   --ui-scale is set once per relayout (see applyScale in app.js) and
   drives every fixed-looking dimension below via calc(... *
   var(--ui-scale)) -- the direct-sizing replacement for what CSS zoom used
   to do uniformly. The default of 1 here only matters before the first
   relayout ever runs (there's nothing to render at that point anyway). */
section.config {
  margin: 0;
  --ui-scale: 1;
}

.chain {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: calc(3rem * var(--ui-scale));
  /* Rule 1 is enforced by app.js's own sizing math (plus the corrective
     pass in relayout()), not by letting a row scroll internally if that
     math is ever slightly off -- hidden, not auto, so a 1px miss clips
     instead of growing a scrollbar (see html/body's own overflow:hidden
     for why that specifically has to never happen). */
  overflow: hidden;
  padding: calc(2rem * var(--ui-scale)) calc(0.5rem * var(--ui-scale)) calc(1rem * var(--ui-scale));
}

/* Every routed connector is one <g class="connector-group"> (see
   wireConnectors in app.js) holding a wide invisible hit path, the
   visible line, its arrow(s), and (solid kinds only) a hover bulge --
   grouping them is what lets the hover rules below reach all of a
   connector's own pieces at once via ":hover >", regardless of how many
   arrows it has, without caring about sibling order. This stylesheet is
   the *only* place any connector's appearance (color, width, dash) is
   set -- app.js only ever picks which of these classes applies, never a
   color, so there's one place to look, not two. `> path` stays scoped to
   direct children so it doesn't reach the power bolt's <path>, nested
   inside its own <svg> for icon scaling (see connectorArrows) -- that one
   needs its .connector-arrow-power fill to actually apply. */
.connector-overlay > g > path {
  fill: none;
}

/* One of these sits right under every visible connector path (see
   wireConnectors in app.js), sharing its `d` but invisible and much
   wider -- the visible stroke alone (1.5-2px) is too thin to hover
   reliably. `path.connector-hit` (element+class) outweighs the bare
   .connector-KIND class selectors below on specificity alone, so this
   stays transparent regardless of source order. pointer-events is
   re-enabled just for this one path -- .connector-overlay's own `none`
   is inherited by everything else here, keeping the gaps between
   connectors click-through. */
path.connector-hit {
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
}

/* 40 is a common multiple of every dasharray cycle length in use below
   (power's "2 3" = 5, loop's "6 2" = 8) -- one offset value loops
   seamlessly for both patterns at once, no per-kind tuning needed. A
   negative offset marches the dashes in the direction the path was
   drawn (source -> target, see wireConnectors), so this happens to
   track real flow direction on power/loop wires for free. */
@keyframes connector-march {
  to { stroke-dashoffset: -40; }
}

/* Travels the hover bulge (a solid-kind connector's own ellipse, see
   wireConnectors) along the connector's own routed path -- offset-path
   is set inline per element in app.js since the geometry is per-
   connector, but the animation itself is identical for all of them. */
@keyframes connector-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

/* Specificity (0,2,1) beats every .connector-KIND rule below regardless
   of source order, so one rule covers every kind uniformly. The bulge
   and trace used to live right here too (see makePacman in app.js) but
   don't any more -- they're their own painted shape in a separate shared
   layer now (see pacmanLayer in wireConnectors), not a wire outline, so
   this only ever reaches an actual connector path regardless. */
.connector-group:hover > path:not(.connector-hit) {
  /* stroke: var(--accent); */
  stroke-width: 3.5;
}

/* The bulge lives in the shared pacmanLayer, not this connector's own
   group (see wireConnectors), so plain `.connector-group:hover > ...`
   can't reach it -- .hovering is toggled directly on the bulge by a
   mouseenter/mouseleave pair set up right where it's built, on the same
   hover boundary (the group's own wide .connector-hit stroke) this used
   to key off of. */
.connector-bulge.hovering {
  opacity: 1;
}

/* Motion (the dash march, the bulge's travel) is kept out of the base
   hover rules above and behind this guard -- the color/width highlight
   and the bulge's fade-in still show for prefers-reduced-motion users,
   just without anything actually moving. */
@media (prefers-reduced-motion: no-preference) {
  .connector-group:hover > path:not(.connector-hit) {
    animation-name: connector-march;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  /* animation-duration is deliberately left out here (unlike the march
     rule above) -- it's set inline per element in app.js instead (see
     BULGE_SPEED_PX_S), since unlike the march's fixed 1s, each
     connector's own routed length needs its own travel time. */
  .connector-bulge.hovering {
    animation-name: connector-travel;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  /* Power wires don't carry the guitar's own signal, so they never take
     part in the click-triggered trace cascade the way SIGNAL_KINDS
     connectors do (see traceFrom in app.js) -- but every pedal is
     drawing power for the cascade's whole duration, not just while the
     bulge happens to be passing near it, so all of them march at once
     here rather than one at a time. .cascade-active is toggled on <body>
     by startCascade/stopCascade, independently of :hover above -- the
     two states can overlap freely (hovering a power wire mid-cascade
     just keeps marching, nothing conflicts). */
  body.cascade-active .connector-power {
    animation-name: connector-march;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}

/* Hidden by default -- .connector-bulge until .hovering is added (see
   above), .connector-trace until traceFrom() (app.js) toggles its
   opacity directly for its own one-shot click-triggered travel, driven
   by the Web Animations API rather than a CSS animation. offset-rotate:
   auto turns either to face the path's own tangent as it travels --
   makePacman() (app.js) draws the local shape with its mouth toward
   local +x, so this is what keeps the mouth pointing the way it's
   actually moving around every bend. Both live directly under
   .pacman-layer's own <g> (see wireConnectors), which the shared
   `.connector-overlay > g > path { fill: none }` reset above still
   reaches just as it would any other g's path -- qualified with
   .pacman-layer so this rule outranks it on specificity alone. The dark
   --pacman-stroke outline (on top of --pacman's own deeper light-mode
   shade, see :root) is what keeps the body readable against a light
   board/pedal photo -- the plain arcade yellow all but disappears there
   the way it never would against the original's black cabinet. */
.pacman-layer path.connector-bulge,
.pacman-layer path.connector-trace {
  fill: var(--pacman);
  stroke: var(--pacman-stroke);
  stroke-width: 1.5;
  stroke-linejoin: round;
  offset-rotate: auto;
  opacity: 0;
}

/* The "get ready" pose shown at the guitar's own jack while the opening
   jingle plays (see showStartPreview in app.js) -- same look as the
   bulge/trace above, but its own rule rather than sharing theirs: it's
   appended straight into .connector-overlay, not inside a .connector-group
   <g>, so it never meets that :not-qualified `fill: none` reset those
   need outranking for in the first place, and needs to default to
   visible (opacity: 1) instead of hidden-until-triggered. */
.pacman-preview {
  fill: var(--pacman);
  stroke: var(--pacman-stroke);
  stroke-width: 1.5;
  stroke-linejoin: round;
  offset-rotate: auto;
  offset-distance: 0%;
  pointer-events: none;
}

.connector-through {
  stroke: var(--wire);
  stroke-width: 2;
}

/* Layered on top of a connector's own kind class (app.js's
   markLoopInteriorLinks/wireConnectors) for an ordinary through/fork
   connector that happens to sit between some pedal's loop-out and its
   loop-in -- only the dash pattern changes, kind's own stroke/width
   stand. Must come after every base kind rule above so it wins the
   cascade. */
.connector-loop-inside {
  stroke-dasharray: 6 2;
}

.connector-loop-out,
.connector-loop-in {
  stroke: var(--wire-loop);
  stroke-width: 1.8;
  stroke-dasharray: 6 2;
}

.connector-fork {
  stroke: var(--wire);
  stroke-width: 2;
}

.connector-power {
  stroke: var(--wire-power);
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
}

.connector-exp {
  stroke: var(--wire-exp);
  stroke-width: 1.5;
}

/* Direction-arrow triangles wireConnectors() adds at both ends of every
   connector -- separate classes from the path's own (rather than reusing
   .connector-KIND) because that rule's `fill` would otherwise also hit
   the path and override its explicit fill:none, filling in the whole
   zigzag as one shape.

   Signal connectors (through/loop-out/loop-in/fork -- the actual audio
   path) get their arrows colored by direction rather than kind: green
   leaving the source ("out"), red entering the target ("in") -- same
   two colors regardless of which of the 4 signal kinds it is, so the
   line's own color (still kind-specific, see .connector-KIND above)
   keeps telling you *what* the connection is, while the arrows tell you
   *which way*. Power and expression connectors aren't part of the
   signal path, so their arrows just stay their own line color. */
.connector-arrow-out {
  fill: var(--wire-arrow-out);
}

.connector-arrow-in {
  fill: var(--wire-arrow-in);
}

.connector-arrow-power {
  fill: var(--wire-power);
}

/* Driven by the header's power-toggle checkbox (see index.html):
   :has() lets that rule reach these regardless of where in the DOM they
   sit relative to the checkbox, no JS wiring required. Purely a paint-time
   toggle -- libavoid still routes power connectors every time (they still
   occupy space, still avoid obstacles), so hiding them here can never
   change how anything else on the board is laid out. */
body:has(#power-connectors-toggle:not(:checked)) .connector-power,
body:has(#power-connectors-toggle:not(:checked)) .connector-arrow-power {
  display: none;
}

.connector-arrow-exp {
  fill: var(--wire-exp);
  stroke: var(--wire-exp);
  stroke-width: 1.2;
}

/* Every node on the page -- the rectangle and every place="free" node
   alike -- is positioned by an explicit left/top app.js computes (see
   solveLayout/renderPage/applyScale), not by any CSS layout algorithm's
   own opinion about alignment: a CSS Grid area's align-items:center was
   exactly what used to throw away "how far along this edge" a free node's
   own computed position meant, centering it in the whole area regardless.
   .board-canvas only needs to be the positioned ancestor those explicit
   coordinates resolve against, and to actually have a size of its own
   (an absolutely-positioned child contributes nothing to a normal parent's
   size, so its width/height are set explicitly too, in applyScale) for
   #app's flex centering to center against. */
.board-canvas {
  position: relative;
}

/* The one rectangle standing in for the physical pedalboard: every real
   pedal in the whole rig goes in here, however deep it sits in a loop or
   split -- only place="free" nodes (guitar, amps, the PSU...) render
   outside it, as siblings in .board-canvas, each at their own computed
   position (see .node-box.free below). */
.board {
  position: absolute;
  border: 2px solid var(--border);
  border-radius: calc(16px * var(--ui-scale));
  background: var(--board-bg);
  padding: calc(1.75rem * var(--ui-scale)) calc(2rem * var(--ui-scale));
}

/* Row-direction: the packed pedal rows on one side, any sidebar item
   alongside them -- deliberately a sibling of the PSU row, not a
   container for it, so align-items here only ever sees the pedal rows. */
.board-lower {
  display: flex;
  flex-direction: row;
  /* flex-start (top), not flex-end -- StroboStomp HD sits at the near
     (right) end of the bottom row, right beside the sidebar, with its
     `in` jack on that same right edge partway down. Bottom-aligning the
     sidebar would put its bulk right where that jack needs clearance to
     route into; top-aligning leaves that space open underneath it. */
  align-items: flex-start;
  gap: calc(2.5rem * var(--ui-scale));
}

.board-rows {
  display: flex;
  flex-direction: column-reverse;
  /* Just enough for the one cable crossing rows (Tim V3 -> P-Split) to
     route without overlapping either row -- not sized for legibility
     the way .chain's inter-pedal gap is. */
  gap: calc(0.1rem * var(--ui-scale));
  flex: 1 1 auto;
  min-width: 0;
}

.board-sidebar {
  display: flex;
  align-items: flex-start;
}

.board-row.row-reverse {
  flex-direction: row-reverse;
}

.node-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* A place="free" node (guitar, amps, the PSU...), positioned directly
   against .board-canvas at its own computed left/top -- see the
   .board-canvas comment above. */
.node-box.free {
  position: absolute;
}

/* The product-page link (see renderNodeBox) lives on the node-name label
   itself now -- the whole label is the click target (role="link" +
   click/keydown handlers, not a wrapped <a>) -- inheriting the label's
   own color/weight keeps it reading as the pedal's name first and a link
   second, with just enough of a dotted underline to still say
   "clickable". */
.node-name.linked {
  cursor: pointer;
  /* border-bottom: 1px dotted var(--muted); */
}

/*
.node-name.linked:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
*/

/* Shrink-wraps to the image's own rendered box -- same technique as
   calibrate.html's .imgwrap -- so .led-dot's x/y % below lands on the
   exact fraction-of-image-box that config.json's jack points already use
   (see app.js's jackFraction/portPoint), rather than a box inflated by
   the node-name label underneath. The label gap lives here instead of on
   the img itself for the same reason: a bottom margin on the img would
   still inflate this wrap's own auto height (inline-block establishes a
   new formatting context, which stops the margin from collapsing *out*
   but doesn't stop it from still occupying space *inside*). */
.img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin-bottom: calc(0.5rem * var(--ui-scale));
}

.node-box img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18));
}

/* Synthetic LED glow, positioned at config.json's `led` fraction. Off by
   default -- the real (unlit) LED already shows through from the photo
   underneath. `screen` blend brightens whatever's really there instead of
   painting a flat colored sticker over it, so this works regardless of
   the photographed LED's actual color. */
.led-dot {
  position: absolute;
  width: calc(7px * var(--ui-scale));
  height: calc(7px * var(--ui-scale));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle, #fff2ea 0%, #ff3324 55%, transparent 75%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.led-dot.on {
  opacity: 1;
  box-shadow: 0 0 calc(6px * var(--ui-scale)) calc(2px * var(--ui-scale)) rgba(255, 51, 36, 0.85);
}

/* Transient "signal just landed here" cue -- see blinkLed() in app.js.
   The hard on/off cut lives in the keyframe percentages themselves (each
   phase held flat, not eased into) rather than a steps()+alternate timing
   function -- steps(1) alternate's "on" value only technically exists for
   a zero-duration instant right at the iteration boundary, so it never
   actually gets painted (found by testing: the wait was visible, the
   flicker wasn't). One keyframe cycle already contains both phases, so
   no alternate is needed either. */
@keyframes led-blink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.led-dot.blinking {
  animation: led-blink 160ms step-end infinite;
  box-shadow: 0 0 calc(6px * var(--ui-scale)) calc(2px * var(--ui-scale)) rgba(255, 51, 36, 0.85);
}

/* The guitar, the one node with neither an LED nor a product url (see
   renderNodeBox) -- cursor is the only static affordance; nothing else
   marks it as clickable, same restraint as a plain <img> anywhere else
   on the page. */
.node-box img.node-traceable {
  cursor: pointer;
}

/* Any pedal with an LED -- clicking anywhere on the image toggles it
   (see renderNodeBox), not just the tiny .led-dot itself. */
.node-box img.led-toggle {
  cursor: pointer;
}

/* The power supply's own image -- clicking it mirrors the header's
   power-toggle checkbox (see renderNodeBox). */
.node-box img.node-power-toggle {
  cursor: pointer;
}

/* 120x90 matches DEFAULT_WIDTH_PX and the no-image aspect fallback in
   app.js's nodeAspect -- keep the three in sync. */
.node-box.no-image {
  justify-content: center;
  min-height: calc(90px * var(--ui-scale));
  width: calc(120px * var(--ui-scale));
  border: 1px dashed var(--border);
  border-radius: calc(8px * var(--ui-scale));
  padding: calc(0.5rem * var(--ui-scale));
}

.node-box.annotation {
  min-height: auto;
  width: auto;
  padding: 0 0.4rem;
}

.node-box.annotation .node-name {
  font-style: italic;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.75rem;
}

.node-name {
  font-size: calc(0.78rem * var(--ui-scale));
  font-weight: 600;
  line-height: 1.2;
}

/* Nodes whose config.json spec has a dominantColor get it inline as this
   label's background (see renderNodeBox/contrastingTextColor) -- padding
   and rounding only kick in there, via the attribute selector, so plain
   node-name labels elsewhere are untouched. */
.node-name[style*="background-color"] {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: calc(4px * var(--ui-scale));
}

.node-owner {
  font-size: calc(0.8rem * var(--ui-scale));
  color: var(--muted);
  margin-top: calc(0.15rem * var(--ui-scale));
}

/* A pedal's own attached-sound preview (see renderSoundButton) -- same
   reset-to-plain-icon shape as .cascade-toggle above, sized down so the
   glyph reads as a quiet secondary control, not a fourth headline action
   competing with the name/owner text above it. visibility (not display),
   see below, is what keeps its layout space reserved while hidden -- an
   LED-off pedal's owner line shouldn't jump around as the LED toggles. */
.node-sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: calc(0.25rem * var(--ui-scale)) 0 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  visibility: hidden;
}

/* .led-dot.on is toggled by both a manual click and the cascade's own
   arrival cue (see settleLedOn) -- this button follows either one for
   free, no JS wiring of its own needed, same :has() trick as the header's
   power-toggle checkbox above. */
.node-box:has(.led-dot.on) .node-sound-toggle {
  visibility: visible;
}

.node-sound-toggle svg {
  width: calc(14px * var(--ui-scale));
  height: calc(14px * var(--ui-scale));
}

.node-sound-toggle:hover {
  color: var(--text);
}