/* ON1 sys-KG gallery — three viz designs sharing one data source.
 *
 * Each design has its own scoped style block; the gallery shell is
 * deliberately neutral so the personalities stand out against it. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  /* gallery shell tokens (subdued) */
  --shell-bg:   #0c1014;
  --shell-fg:   #d6d6d6;
  --shell-dim:  #6e6e6e;
  --shell-rule: #1d2330;
  --shell-acc:  #f5b541;
}

body {
  background: var(--shell-bg);
  color: var(--shell-fg);
  font-family: 'Familjen Grotesk', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- top strip ---------- */
.gallery-strip {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem 1.25rem;
  border-bottom: 1px solid var(--shell-rule);
  font: 400 .72rem 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
  color: var(--shell-dim);
  background: linear-gradient(180deg, #10141b 0%, #0c1014 100%);
  position: sticky; top: 0; z-index: 10;
}
.brand-back {
  font: 400 1rem 'Major Mono Display', monospace;
  color: var(--shell-acc);
  text-decoration: none;
  letter-spacing: .12em;
}
.strip-l, .strip-r { display: flex; gap: .55rem; align-items: baseline; }
.strip-sep { color: #2a3142; }
.strip-where { color: var(--shell-fg); }
.strip-stamp { color: var(--shell-dim); }

/* ---------- design picker ---------- */
.gallery-nav {
  display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
  padding: .65rem 1.25rem;
  border-bottom: 1px solid var(--shell-rule);
  background: #0a0d12;
  font: 400 .7rem 'IBM Plex Mono', monospace;
}
.nav-pill {
  display: inline-flex; align-items: center;
  padding: .3rem .7rem;
  border: 1px solid var(--shell-rule);
  border-radius: 999px;
  color: var(--shell-fg);
  text-decoration: none;
  letter-spacing: .07em;
  transition: border-color .15s, color .15s, background .15s;
}
.nav-pill:hover { border-color: var(--shell-acc); color: var(--shell-acc); }
.nav-hint {
  margin-left: auto;
  color: var(--shell-dim);
  font-style: italic;
  letter-spacing: 0;
}

/* ---------- design wrapper ---------- */
.gallery {
  display: flex; flex-direction: column;
}
.design {
  position: relative;
  border-bottom: 1px solid var(--shell-rule);
  padding: 2rem 1.25rem 3rem;
  scroll-margin-top: 4.5rem;
}
.design-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px dashed #25304a;
  padding-bottom: .75rem;
}
.design-head-l { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.design-head-r { color: var(--shell-dim); font: 400 .7rem 'IBM Plex Mono', monospace; letter-spacing: .14em; }
.design-roman {
  font: 400 1.6rem 'Major Mono Display', monospace;
  color: #2a3142;
  letter-spacing: .1em;
}
.design-title {
  margin: 0;
  font: 400 1.45rem 'Major Mono Display', monospace;
  letter-spacing: .14em;
  color: var(--shell-fg);
}
.design-sub {
  color: var(--shell-dim);
  font-style: italic;
  letter-spacing: .02em;
}
.design-tag {
  border: 1px solid #25304a;
  padding: .15rem .55rem;
  color: #8a93a8;
}
.design-canvas {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  min-height: 540px;
}
.design-meta {
  margin-top: 1rem;
  border: 1px solid var(--shell-rule);
  border-radius: 4px;
  padding: .9rem 1.1rem;
  font-size: .92rem;
  background: #0a0d12;
  min-height: 4.5rem;
}
.meta-empty { color: var(--shell-dim); margin: 0; font-style: italic; }
.meta-h {
  font: 400 .9rem 'Major Mono Display', monospace;
  letter-spacing: .12em;
  color: var(--shell-acc);
  margin: 0 0 .5rem;
}
.meta-tag {
  display: inline-block;
  font: 400 .7rem 'IBM Plex Mono', monospace;
  border: 1px solid var(--shell-rule);
  padding: .12rem .5rem;
  margin-right: .35rem; margin-top: .35rem;
  color: #b6c0d4;
  letter-spacing: .04em;
}
.meta-truth { color: #c8d2e3; line-height: 1.5; margin: .5rem 0 .25rem; }
.meta-dim   { color: var(--shell-dim); font-size: .82rem; }

/* ====================================================================
 * VI · HIERARCHY
 * Archival dendrogram on gridded index stock. OSYS is the root, ON1
 * is the main branch, n0d categories are folders, leaves are services.
 * ==================================================================== */

.design-hierarchy {
  background: #e9e1d0;
  color: #201b16;
}
.design-hierarchy .design-title { color: #201b16; }
.design-hierarchy .design-sub   { color: #6f6151; }
.design-hierarchy .design-roman { color: #b9aa92; }
.design-hierarchy .design-tag   { border-color: #b9aa92; color: #6f6151; }
.design-hierarchy .design-meta  {
  background: #f2ead9;
  border-color: #c9b99c;
  color: #201b16;
}
.design-hierarchy .meta-h       { color: #9b2d20; }
.design-hierarchy .meta-truth   { color: #201b16; }
.design-hierarchy .meta-dim     { color: #6f6151; }
.design-hierarchy .meta-tag     { border-color: #c9b99c; color: #6f6151; }
.hierarchy-canvas {
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(45,35,24,.07) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(45,35,24,.06) 119px 120px),
    linear-gradient(180deg, #f5edda 0%, #eadfca 100%);
  border: 1px solid #c9b99c;
  box-shadow:
    inset 0 0 0 6px rgba(155,45,32,.08),
    inset 0 0 48px rgba(80,52,20,.12);
}
.hierarchy-canvas svg { display: block; width: 100%; height: 100%; }
.hier-sheet-title {
  fill: #201b16;
  font: 600 17px 'Major Mono Display', monospace;
  letter-spacing: .18em;
}
.hier-sheet-note {
  fill: #776852;
  font: 400 10px 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
}
.hier-spine {
  stroke: #8b7b61;
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 3 5;
  opacity: .72;
}
.hier-spine.on1-spine { stroke: #1f6d5a; opacity: .62; }
.hier-spine.sibling-spine { stroke: #315f9f; opacity: .55; }
.hier-branch {
  fill: none;
  stroke: #8b7b61;
  stroke-width: 1.35;
  opacity: .78;
}
.hier-branch.root-link { stroke: #9b2d20; stroke-width: 1.8; }
.hier-branch.on1-link { stroke: #1f6d5a; stroke-width: 1.6; }
.hier-branch.category-link { stroke: #6f6151; }
.hier-branch.sibling-link { stroke: #315f9f; }
.hier-branch.leaf-link {
  stroke-width: .9;
  stroke-dasharray: 2 4;
  opacity: .48;
}
.hier-branch.sibling-leaf-link { stroke: #315f9f; }
.hier-node, .hier-leaf {
  cursor: pointer;
}
.hier-node-box {
  fill: #f9f2e4;
  stroke: var(--node-accent, #6f6151);
  stroke-width: 1.4;
  filter: drop-shadow(0 2px 0 rgba(80,52,20,.12));
}
.hier-node.root .hier-node-box {
  fill: #201b16;
  stroke: #9b2d20;
  stroke-width: 1.8;
}
.hier-node.system .hier-node-box {
  fill: #fff8e9;
}
.hier-node.category .hier-node-box {
  fill: #f7efdf;
}
.hier-node-title {
  fill: #201b16;
  font: 600 11px 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  pointer-events: none;
}
.hier-node.root .hier-node-title {
  fill: #f2ead9;
  font: 600 12px 'Major Mono Display', monospace;
  letter-spacing: .16em;
}
.hier-node-sub {
  fill: #776852;
  font: 400 8.5px 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
  pointer-events: none;
}
.hier-node.root .hier-node-sub { fill: #c9b99c; }
.hier-leaf-box {
  fill: #fffaf0;
  stroke: #b9aa92;
  stroke-width: 1;
  transition: fill .15s, stroke .15s, transform .15s, filter .15s;
}
.hier-leaf.n0d .hier-leaf-box {
  stroke: var(--leaf-accent, #1f6d5a);
}
.hier-leaf.entity .hier-leaf-box {
  fill: #eef4fb;
  stroke: #315f9f;
}
.hier-leaf-title {
  fill: #201b16;
  font: 600 9.5px 'Familjen Grotesk', sans-serif;
  letter-spacing: .01em;
  pointer-events: none;
}
.hier-leaf-sub {
  fill: #776852;
  font: 400 7.5px 'IBM Plex Mono', monospace;
  letter-spacing: .03em;
  pointer-events: none;
}
.hier-leaf:hover .hier-leaf-box,
.hier-leaf.pinned .hier-leaf-box {
  fill: #fff4d5;
  stroke: #9b2d20;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 7px rgba(155,45,32,.28));
}
.hier-leaf:hover .hier-leaf-title,
.hier-leaf.pinned .hier-leaf-title {
  fill: #9b2d20;
}

/* ====================================================================
 * I · PCB SCHEMATIC
 * Right-angle copper traces on a green substrate. Modules are chips
 * with white silkscreen labels and solder-pad pins. Hovered traces
 * brighten as if probed with an oscilloscope.
 * ==================================================================== */

.design-pcb { background: linear-gradient(180deg, #050a08 0%, #0c1014 100%); }
.pcb-canvas {
  background:
    repeating-linear-gradient(
      0deg, transparent 0 19px, rgba(140,210,170,.045) 19px 20px),
    repeating-linear-gradient(
      90deg, transparent 0 19px, rgba(140,210,170,.045) 19px 20px),
    radial-gradient(ellipse at 50% 50%, #1a4538 0%, #0d2a22 60%, #06140f 100%);
  border: 1px solid #1f4d3d;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.45),
    inset 0 0 0 6px #082218,
    inset 0 0 0 7px #1f4d3d;
  position: relative;
}
.pcb-canvas svg { display: block; width: 100%; height: 100%; }
.pcb-fiducial   { fill: #ffaa00; opacity: .85; }
.pcb-silk       { fill: #f0ede6; font: 400 9px 'IBM Plex Mono', monospace; letter-spacing: .04em; }
.pcb-silk-faded { fill: #b9c3b0; opacity: .55; font: 400 7.5px 'IBM Plex Mono', monospace; }
.pcb-zone-label { fill: #ffaa00; font: 400 13px 'Major Mono Display', monospace; letter-spacing: .18em; opacity: .65; }
.pcb-zone-rail  { stroke: #d44a3b; stroke-width: 1.2; opacity: .42; fill: none; stroke-dasharray: 2 6; }
.pcb-zone-gnd   { stroke: #2a3142; stroke-width: 1.4; opacity: .55; fill: none; }
.pcb-trace      { fill: none; stroke: #c19a45; stroke-width: 1.6; opacity: .58; transition: stroke .18s, opacity .18s, stroke-width .18s; }
.pcb-trace.bus  { stroke-width: 2.6; opacity: .68; }
.pcb-trace.lit  { stroke: #ffaa00; opacity: 1; stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(255,170,0,.85)); }
.pcb-via        { fill: #d8a85c; stroke: #5a3a14; stroke-width: .6; }
.pcb-pad        { fill: #d8a85c; stroke: #2a1a04; stroke-width: .6; }
.pcb-grove      { fill: #1c2330; stroke: #ffaa00; stroke-width: 1; }
.pcb-grove-pin  { fill: #ffaa00; opacity: .75; }
.pcb-usbc       { fill: #2a3142; stroke: #b9c3b0; stroke-width: .6; }

.pcb-chip-body  { fill: #15110a; stroke: #2b251a; stroke-width: 1; }
.pcb-chip-strip { fill: #ffaa00; }              /* M5 brand strip across top of module */
.pcb-chip-strip-text { fill: #15110a; font: 600 8.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-anchor: middle; pointer-events: none; }
.pcb-chip-screen { fill: #0a0d12; stroke: #3a4258; stroke-width: .8; }
.pcb-chip-label { fill: #f0ede6; font: 400 11px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-anchor: middle; pointer-events: none; }
.pcb-chip-desig { fill: #c8e3c1; font: 400 8.5px 'IBM Plex Mono', monospace; text-anchor: middle; pointer-events: none; opacity: .85; }
.pcb-chip-tag   { fill: #8ad4b3; font: 400 7.5px 'IBM Plex Mono', monospace; text-anchor: middle; pointer-events: none; opacity: .75; }
.pcb-chip-stat  { font: 400 7.5px 'IBM Plex Mono', monospace; text-anchor: middle; pointer-events: none; }
.pcb-chip       { cursor: pointer; transition: filter .15s; }
.pcb-chip:hover .pcb-chip-body,
.pcb-chip.pinned .pcb-chip-body { stroke: #ffaa00; stroke-width: 1.8; filter: drop-shadow(0 0 6px rgba(255,170,0,.45)); }
.pcb-chip:hover .pcb-chip-label { fill: #ffd47a; }
.pcb-chip-status-alpha    { fill: #6dd49a; }
.pcb-chip-status-beta     { fill: #ffaa00; }
.pcb-chip-status-deferred { fill: #6e6e6e; }

/* ====================================================================
 * II · CONSTELLATION ATLAS
 * Categories form constellations. Stars sized by connection magnitude.
 * Faint declination grid + ecliptic for chart-like authority.
 * ==================================================================== */

.design-constellation { background: #04060c; }
.constellation-canvas {
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(80,60,140,.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(60,110,140,.15) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 50%, #0a1024 0%, #04060c 70%, #02030a 100%);
  border: 1px solid #1c2240;
  box-shadow: inset 0 0 80px rgba(0,0,0,.7);
  position: relative;
  overflow: hidden;
}
.constellation-canvas svg { display: block; width: 100%; height: 100%; }
.con-grid       { stroke: #1a2444; stroke-width: .5; opacity: .35; fill: none; }
.con-grid-major { stroke: #29345e; stroke-width: .7; opacity: .55; fill: none; stroke-dasharray: 2 4; }
.con-ecliptic   { stroke: #6c4ea0; stroke-width: 1; opacity: .35; stroke-dasharray: 6 6; fill: none; }
.con-zone-label { fill: #c9c0e6; font: 400 13px 'Major Mono Display', monospace; letter-spacing: .25em; opacity: .55; }
.con-zone-sub   { fill: #6e6c8a; font: 400 9px 'IBM Plex Mono', monospace; letter-spacing: .12em; opacity: .65; }
.con-line       { stroke: #4a5a8a; stroke-width: .8; opacity: .35; fill: none; transition: stroke .2s, opacity .2s; }
.con-line.lit   { stroke: #f5d27a; opacity: 1; }
.con-star-glow  { fill: #fff8e0; opacity: .15; pointer-events: none; }
.con-star       { fill: #fff8e0; cursor: pointer; transition: fill .15s, transform .15s; transform-origin: center; transform-box: fill-box; }
.con-star:hover, .con-star.pinned { fill: #ffd47a; transform: scale(1.6); }
.con-star.dim     { fill: #c25e4a; }     /* deferred = dim red giant */
.con-star.warm    { fill: #ffe2a8; }     /* beta/mature = warm yellow */
.con-star.cool    { fill: #b3d8ff; }     /* alpha = cool white-blue */
.con-bayer        { fill: #b3a5d8; font: 400 9px 'Major Mono Display', monospace; pointer-events: none; opacity: .8; }
.con-cardinal     { fill: #6e6c8a; font: 400 11px 'Major Mono Display', monospace; letter-spacing: .25em; opacity: .6; }
.con-glyph        { fill: #c9c0e6; font: 400 16px serif; pointer-events: none; opacity: .55; }
.con-star-label {
  fill: #d8d4f0;
  font: 400 10.5px 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.con-star-group:hover .con-star-label,
.con-star-group.pinned .con-star-label { opacity: 1; fill: #ffd47a; }

/* ====================================================================
 * III · SUBWAY MAP
 * Beck-style. Categories are colored lines. Stations along each line.
 * Transfer rings where a service depends on multiple categories.
 * ==================================================================== */

.design-subway { background: #f5efe1; color: #2a2620; }
.design-subway .design-title { color: #2a2620; }
.design-subway .design-sub   { color: #7a6a4f; }
.design-subway .design-roman { color: #d4c8a8; }
.design-subway .design-tag   { border-color: #d4c8a8; color: #7a6a4f; }
.design-subway .design-meta  { background: #fbf6e8; border-color: #e0d7bf; color: #2a2620; }
.design-subway .meta-h       { color: #c4391a; }
.design-subway .meta-truth   { color: #2a2620; }
.design-subway .meta-dim     { color: #7a6a4f; }
.design-subway .meta-tag     { border-color: #d4c8a8; color: #7a6a4f; }
.subway-canvas {
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(0,0,0,.04) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(0,0,0,.04) 39px 40px),
    #faf4e4;
  border: 1px solid #d4c8a8;
}
.subway-canvas svg { display: block; width: 100%; height: 100%; }
.subway-line       { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s; }
.subway-line.dim   { opacity: .25; }
.subway-station    { fill: #fbf6e8; stroke: #2a2620; stroke-width: 2.4; cursor: pointer; transition: stroke .15s, transform .15s; transform-origin: center; transform-box: fill-box; }
.subway-station.transfer { stroke-width: 3.5; }
.subway-station:hover, .subway-station.pinned { stroke: #c4391a; transform: scale(1.25); }
.subway-station-label { fill: #2a2620; font: 600 11.5px 'Familjen Grotesk', sans-serif; pointer-events: none; }
.subway-line-key   { fill: #2a2620; font: 400 11px 'IBM Plex Mono', monospace; letter-spacing: .08em; }
.subway-key-block  { fill: #fbf6e8; stroke: #d4c8a8; }

/* ====================================================================
 * IV · PERIODIC TABLE
 * Slate scientific table. Group columns = categories; period rows by
 * status (alpha=top, beta=middle, deferred=bottom). Each cell is an
 * "element" with symbol, name, atomic-number-equivalent, and a category
 * accent stripe.
 * ==================================================================== */

.design-periodic { background: linear-gradient(180deg, #1a1d24 0%, #0f1217 100%); }
.periodic-canvas {
  background:
    repeating-linear-gradient(
      0deg, transparent 0 19px, rgba(255,255,255,.025) 19px 20px),
    repeating-linear-gradient(
      90deg, transparent 0 19px, rgba(255,255,255,.025) 19px 20px),
    linear-gradient(180deg, #20242c 0%, #161a22 100%);
  border: 1px solid #2d3340;
  box-shadow: inset 0 0 60px rgba(0,0,0,.35);
}
.periodic-canvas svg { display: block; width: 100%; height: 100%; }
.per-title-mark { fill: #d6cfb8; font: 400 18px 'Major Mono Display', monospace; letter-spacing: .25em; }
.per-period-label, .per-group-label {
  fill: #6e6c8a; font: 400 9.5px 'IBM Plex Mono', monospace; letter-spacing: .14em;
}
.per-cell-bg { stroke: #3a4258; stroke-width: 1; transition: stroke .15s, filter .15s; }
.per-cell-stripe { transition: opacity .15s; }
.per-cell-symbol { fill: #f0ede6; font: 400 22px 'Major Mono Display', monospace; text-anchor: middle; pointer-events: none; letter-spacing: .04em; }
.per-cell-name   { fill: #d6cfb8; font: 400 9px 'IBM Plex Mono', monospace; text-anchor: middle; pointer-events: none; }
.per-cell-num    { fill: #b3a5d8; font: 400 8.5px 'IBM Plex Mono', monospace; pointer-events: none; }
.per-cell-mass   { fill: #6e6c8a; font: 400 7.5px 'IBM Plex Mono', monospace; text-anchor: middle; pointer-events: none; }
.per-cell        { cursor: pointer; }
.per-cell:hover .per-cell-bg,
.per-cell.pinned .per-cell-bg { stroke: #ffd47a; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255,212,122,.45)); }
.per-cell:hover .per-cell-symbol { fill: #ffd47a; }
.per-legend-block { fill: #20242c; stroke: #3a4258; stroke-width: 1; }
.per-legend-text  { fill: #d6cfb8; font: 400 10px 'IBM Plex Mono', monospace; letter-spacing: .06em; }

/* ====================================================================
 * V · CIRCUIT SCHEMATIC
 * Classic schematic — symbolic IC blocks on cream paper, schematic
 * lines (not copper traces) with right-angle bends + junction dots,
 * VCC rail across the top, GND rail across the bottom, net labels.
 * Drawing-on-load animation: wires draw themselves, then ICs power
 * up. Hovered nets show simulated current flow.
 * ==================================================================== */

@keyframes sch-draw-wire {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}
@keyframes sch-draw-rail {
  from { stroke-dashoffset: 1400; }
  to   { stroke-dashoffset: 0; }
}
@keyframes sch-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sch-power-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
@keyframes sch-current-flow {
  to   { stroke-dashoffset: -16; }
}
@keyframes sch-pulse-ring {
  0%   { r: 4;  opacity: .6; }
  100% { r: 26; opacity: 0;  }
}

.design-schematic { background: #f0e6cc; color: #1f1a13; }
.design-schematic .design-title { color: #1f1a13; }
.design-schematic .design-sub   { color: #6e5c3a; }
.design-schematic .design-roman { color: #c8b27c; }
.design-schematic .design-tag   { border-color: #c8b27c; color: #6e5c3a; }
.design-schematic .design-meta  { background: #f7eed3; border-color: #d4c08c; color: #1f1a13; }
.design-schematic .meta-h       { color: #b34a1a; }
.design-schematic .meta-truth   { color: #1f1a13; }
.design-schematic .meta-dim     { color: #6e5c3a; }
.design-schematic .meta-tag     { border-color: #c8b27c; color: #6e5c3a; }
.schematic-canvas {
  background:
    repeating-linear-gradient(0deg,  transparent 0 39px, rgba(31,26,19,.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(31,26,19,.05) 39px 40px),
    #f4ead0;
  border: 1px solid #d4c08c;
}
.schematic-canvas svg { display: block; width: 100%; height: 100%; }
.sch-rail-vcc {
  stroke: #b34a1a; stroke-width: 2; fill: none;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: sch-draw-rail 1.2s ease-out .1s forwards;
}
.sch-rail-gnd {
  stroke: #1f1a13; stroke-width: 2; fill: none;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: sch-draw-rail 1.2s ease-out .35s forwards;
}
.sch-rail-label { fill: #1f1a13; font: 400 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; }
.sch-rail-vcc-label { fill: #b34a1a; }
.sch-power-led { fill: #6dd49a; animation: sch-power-blink 2.4s ease-in-out infinite; }
.sch-power-led-off { fill: #2b251a; opacity: .3; }
.sch-wire {
  stroke: #1f1a13; stroke-width: 1.4; fill: none;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: sch-draw-wire 1.4s ease-out var(--draw-delay, 0s) forwards;
  transition: stroke .2s, stroke-width .2s;
}
.sch-wire.lit {
  stroke: #b34a1a; stroke-width: 2;
  stroke-dasharray: 6 6; stroke-dashoffset: 0;
  animation: sch-current-flow .9s linear infinite;
}
.sch-junction { fill: #1f1a13; }
.sch-net-label {
  fill: #6e5c3a; font: 400 9.5px 'IBM Plex Mono', monospace; letter-spacing: .04em;
  opacity: 0;
  animation: sch-fade-in .5s ease-out 1.6s forwards;
}
.sch-ic {
  cursor: pointer;
  opacity: 0;
  animation: sch-fade-in .45s ease-out var(--ic-delay, 1s) forwards;
  transition: filter .2s;
}
.sch-ic:hover, .sch-ic.pinned { filter: drop-shadow(0 0 8px rgba(179,74,26,.55)); }
.sch-ic-body  { fill: #f7eed3; stroke: #1f1a13; stroke-width: 1.6; }
.sch-ic:hover .sch-ic-body, .sch-ic.pinned .sch-ic-body { stroke: #b34a1a; stroke-width: 2.2; }
.sch-ic-notch { fill: none; stroke: #1f1a13; stroke-width: 1.2; }
.sch-ic-pin   { stroke: #1f1a13; stroke-width: 1.2; }
.sch-ic-pinlabel { fill: #1f1a13; font: 400 7.5px 'IBM Plex Mono', monospace; }
.sch-ic-name  { fill: #1f1a13; font: 600 11.5px 'IBM Plex Mono', monospace; text-anchor: middle; pointer-events: none; letter-spacing: .04em; }
.sch-ic-desig { fill: #b34a1a; font: 400 9px 'IBM Plex Mono', monospace; text-anchor: middle; pointer-events: none; }
.sch-ic-cat   { fill: #6e5c3a; font: 400 8px 'IBM Plex Mono', monospace; text-anchor: middle; pointer-events: none; }
.sch-pulse {
  fill: none; stroke: #b34a1a; stroke-width: 1.6;
  animation: sch-pulse-ring .6s ease-out forwards;
  pointer-events: none;
}
.sch-titleblock {
  fill: #f7eed3; stroke: #1f1a13; stroke-width: 1.5;
}
.sch-titleblock-text {
  fill: #1f1a13; font: 400 9.5px 'IBM Plex Mono', monospace; letter-spacing: .06em;
}
.sch-titleblock-h {
  fill: #1f1a13; font: 600 12px 'Major Mono Display', monospace; letter-spacing: .12em;
}

/* ====================================================================
 * Modern micro-interactions across designs (also in dark designs).
 * ==================================================================== */
@keyframes nav-pill-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-pill {
  animation: nav-pill-fade .35s ease-out forwards;
}
.nav-pill.active {
  background: var(--shell-acc); color: #0a0d12; border-color: var(--shell-acc);
  box-shadow: 0 0 0 4px rgba(245,181,65,.18);
}
.design { transition: opacity .3s; }
.design.dim { opacity: .35; }

/* PCB chip lift on hover (more decisive movement) */
.pcb-chip { transition: transform .18s, filter .15s; transform-box: fill-box; transform-origin: center; }
.pcb-chip:hover, .pcb-chip.pinned { transform: scale(1.04); }

/* Constellation: smoother lit transition + idle twinkle on the largest stars */
@keyframes con-twinkle {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .65; transform: scale(.92); }
}
.con-star.bright { animation: con-twinkle 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* Subway station pulse on hover */
@keyframes subway-station-pulse {
  0%, 100% { stroke-width: 2.4; }
  50%      { stroke-width: 4.5; }
}
.subway-station:hover { animation: subway-station-pulse 1.2s ease-in-out infinite; }

/* Periodic cell lift */
.per-cell:hover .per-cell-bg, .per-cell.pinned .per-cell-bg { transform: translate(-1px,-2px); transform-box: fill-box; }

/* ====================================================================
 * VII · POLYHEDRAL FRACTAL
 * A dodecahedron whose 12 pentagonal faces stand for the 12 categories.
 * Each face wears a Sierpinski-triangle fractal flourish + the
 * category's n0ds. CSS 3D transforms drive a slow continuous rotation;
 * "UNFOLD NET" tweens the dodecahedron flat to its planar net so the
 * viewer can see all faces at once, then folds back when toggled.
 *
 * Pure SVG + CSS 3D transforms — no Three.js. The dodecahedron is
 * built from 12 absolutely-positioned <div>'s, each containing one
 * SVG pentagon. The dihedral fold angle of a regular dodecahedron is
 * acos(-sqrt(5)/5) ≈ 116.565°, which is what gives the seams their
 * shape; we use that to position the side faces around the top cap.
 * ==================================================================== */

@keyframes poly-rotate {
  from { transform: rotateX(-22deg) rotateY(0deg); }
  to   { transform: rotateX(-22deg) rotateY(360deg); }
}
@keyframes poly-pulse-face {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5); }
}
@keyframes poly-twinkle {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

.design-polyhedron {
  background:
    radial-gradient(ellipse at 50% 0%, #1a1530 0%, #06081a 60%, #02030a 100%);
  color: #d8d4f0;
}
.design-polyhedron .design-title { color: #e8d8a8; }
.design-polyhedron .design-sub   { color: #7c739c; }
.design-polyhedron .design-roman { color: #4a3e6a; }
.design-polyhedron .design-tag   { border-color: #4a3e6a; color: #b0a8c8; }
.design-polyhedron .design-meta  { background: #0c0e1c; border-color: #2c2848; color: #d8d4f0; }
.design-polyhedron .meta-h       { color: #f5d27a; }
.design-polyhedron .meta-truth   { color: #d8d4f0; }
.design-polyhedron .meta-dim     { color: #7c739c; }
.design-polyhedron .meta-tag     { border-color: #2c2848; color: #b0a8c8; }

.poly-btn {
  background: transparent; color: #e8d8a8;
  border: 1px solid #4a3e6a;
  font: 700 .72rem 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  padding: .35rem .8rem;
  cursor: pointer;
  margin-left: .35rem;
  transition: border-color .15s, color .15s, background .15s;
}
.poly-btn:hover {
  border-color: #f5d27a; color: #f5d27a;
  background: rgba(245,210,122,.08);
}

.polyhedron-canvas {
  background:
    radial-gradient(circle at 30% 30%, rgba(140,90,200,.10) 0%, transparent 50%),
    radial-gradient(circle at 70% 75%, rgba(80,170,200,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, #0a0c1c 0%, #04060e 70%, #02030a 100%);
  border: 1px solid #1c2240;
  box-shadow: inset 0 0 80px rgba(0,0,0,.65);
  perspective: 1400px;
  perspective-origin: 50% 35%;
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex; align-items: center; justify-content: center;
}

/* Decorative starfield (added by JS as <svg> inside .polyhedron-canvas)
 * sits behind the polyhedron stage. */
.poly-stars { position: absolute; inset: 0; pointer-events: none; }

/* The "stage" carries the rotation. The polyhedron groups inside live
 * in 3D space; preserve-3d cascades down. */
.poly-stage {
  position: relative;
  width: 360px; height: 360px;
  transform-style: preserve-3d;
  animation: poly-rotate 60s linear infinite;
  will-change: transform;
}
.poly-stage.spin-paused { animation-play-state: paused; }
.poly-stage.unfolded {
  /* When laid flat as a net, freeze the rotation and tilt slightly so the
   * net reads cleanly. The face transforms (computed in JS) will animate
   * to their flat positions independently. */
  animation: none;
  transform: rotateX(-12deg) rotateY(0deg) rotateZ(8deg);
}

.poly-face {
  position: absolute;
  left: 50%; top: 50%;
  /* Each face is square-bounded; SVG inside is a regular pentagon. */
  width: 200px; height: 200px;
  margin-left: -100px; margin-top: -100px;
  transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(.5,.05,.25,1), filter .25s;
  cursor: pointer;
}
.poly-face svg { display: block; width: 100%; height: 100%; overflow: visible; }
.poly-face:hover { animation: poly-pulse-face 1.6s ease-in-out infinite; }
.poly-face.pinned { filter: drop-shadow(0 0 16px rgba(245,210,122,.6)); }

/* Pentagon paint */
.poly-face-bg {
  fill: rgba(20,18,40,.85);
  stroke: var(--cat-color, #6c759c);
  stroke-width: 1.6;
  transition: fill .2s, stroke-width .2s;
}
.poly-face:hover .poly-face-bg,
.poly-face.pinned .poly-face-bg {
  fill: rgba(40,32,68,.92);
  stroke-width: 2.6;
}

/* Sierpinski fractal flourish per face */
.poly-fractal-tri {
  fill: none;
  stroke: var(--cat-color, #6c759c);
  stroke-width: .6;
  opacity: .55;
  transition: opacity .2s;
}
.poly-fractal-tri.depth-1 { opacity: .35; }
.poly-fractal-tri.depth-2 { opacity: .55; }
.poly-fractal-tri.depth-3 { opacity: .75; }
.poly-face:hover .poly-fractal-tri,
.poly-face.pinned .poly-fractal-tri { opacity: 1; stroke-width: .9; }

/* Category label across the top of each face */
.poly-face-label {
  fill: var(--cat-color, #d8d4f0);
  font: 700 11px 'Major Mono Display', monospace;
  letter-spacing: .14em;
  text-anchor: middle;
  pointer-events: none;
}
.poly-face-sub {
  fill: #b0a8c8;
  font: 400 8px 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  text-anchor: middle;
  pointer-events: none;
  opacity: .75;
}

/* N0d marker dots placed at fractal vertices on each face */
.poly-n0d {
  cursor: pointer;
  transition: transform .15s, filter .15s;
  transform-origin: center;
  transform-box: fill-box;
}
.poly-n0d-glow {
  fill: var(--cat-color, #f5d27a);
  opacity: .25;
  pointer-events: none;
  animation: poly-twinkle 3s ease-in-out infinite;
}
.poly-n0d-dot {
  fill: var(--cat-color, #f5d27a);
  stroke: #04060e;
  stroke-width: .8;
}
.poly-n0d:hover .poly-n0d-dot,
.poly-n0d.pinned .poly-n0d-dot {
  transform: scale(1.7);
  filter: drop-shadow(0 0 6px var(--cat-color, #f5d27a));
}
.poly-n0d-label {
  fill: #fff8e0;
  font: 400 7.5px 'IBM Plex Mono', monospace;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.poly-n0d:hover .poly-n0d-label,
.poly-n0d.pinned .poly-n0d-label { opacity: 1; }

/* Title cartouche overlay (drawn outside the 3D stage so it doesn't rotate) */
.poly-cartouche {
  position: absolute; bottom: 1rem; left: 1rem;
  color: #b0a8c8;
  font: 400 .7rem 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  pointer-events: none;
  opacity: .6;
}

/* ---------- footer ---------- */
.gallery-foot {
  text-align: center;
  padding: 1.5rem;
  font: 400 .72rem 'IBM Plex Mono', monospace;
  color: var(--shell-dim);
  letter-spacing: .04em;
}

@media (max-width: 720px) {
  .design-head { flex-direction: column; align-items: flex-start; }
  .nav-hint { display: none; }
}