/* ye-ast architecture explorer · halftone identity, no build */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --night: #0d0c10;
  --ground: #262734;
  --ground-2: #30313e;
  --ground-3: #3a3b4a;
  --bone: #efece8;
  --heat: #f24e25;
  --lime: #d2f23a;
  --frost: #5b6bff;
  --frost-text: #7f8cff;

  --bg: var(--night);
  --panel: #17171f;
  --panel-2: var(--ground);
  --panel-3: var(--ground-3);
  --line: #4c4d5e;
  --line-soft: #32333f;
  --outline: var(--night);
  --ink: var(--bone);
  --muted: #bdbab4;
  --faint: #9a98a0;
  --on-accent: var(--night);
  --block: var(--bone);
  --block-ink: #16151b;
  --block-sub: #45444f;
  --dim-fill: var(--ground-3);
  --dim-stroke: var(--line);
  --dim-ink: #c4c1cc;
  --dim-sub: #a3a1ad;
  --hover-ring: var(--lime);
  --dot: rgb(239 236 232 / .13);

  --cyan: var(--lime);
  --cyan-dim: #8da12a;
  --green: var(--lime);
  --amber: var(--heat);
  --red: var(--heat);
  --violet: var(--frost-text);
  --entry: var(--lime);
  --composition: var(--heat);
  --application: var(--bone);
  --domain: #b4b1c2;
  --ports: var(--frost-text);
  --adapters: #b6bcff;
  --grid: transparent;
  --bg-2: var(--panel);

  --radius: 3px;
  --radius-sm: 2px;
  --stroke: 2px;
  --shadow: none;
  --glow-heat: drop-shadow(0 0 4px rgb(242 78 37 / .85)) drop-shadow(0 0 10px rgb(242 78 37 / .45));

  --display: "Avenir Next Condensed", "DIN Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --serif: var(--display);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ht-am: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='104'%3E%3Ccircle cx='4' cy='4' r='4.30'/%3E%3Ccircle cx='20' cy='4' r='4.30'/%3E%3Ccircle cx='12' cy='12' r='3.89'/%3E%3Ccircle cx='-4' cy='12' r='3.89'/%3E%3Ccircle cx='4' cy='20' r='3.49'/%3E%3Ccircle cx='20' cy='20' r='3.49'/%3E%3Ccircle cx='12' cy='28' r='3.11'/%3E%3Ccircle cx='-4' cy='28' r='3.11'/%3E%3Ccircle cx='4' cy='36' r='2.73'/%3E%3Ccircle cx='20' cy='36' r='2.73'/%3E%3Ccircle cx='12' cy='44' r='2.37'/%3E%3Ccircle cx='-4' cy='44' r='2.37'/%3E%3Ccircle cx='4' cy='52' r='2.02'/%3E%3Ccircle cx='20' cy='52' r='2.02'/%3E%3Ccircle cx='12' cy='60' r='1.69'/%3E%3Ccircle cx='-4' cy='60' r='1.69'/%3E%3Ccircle cx='4' cy='68' r='1.37'/%3E%3Ccircle cx='20' cy='68' r='1.37'/%3E%3Ccircle cx='12' cy='76' r='1.07'/%3E%3Ccircle cx='-4' cy='76' r='1.07'/%3E%3Ccircle cx='4' cy='84' r='0.79'/%3E%3Ccircle cx='20' cy='84' r='0.79'/%3E%3Ccircle cx='12' cy='92' r='0.54'/%3E%3Ccircle cx='-4' cy='92' r='0.54'/%3E%3Ccircle cx='4' cy='100' r='0.31'/%3E%3Ccircle cx='20' cy='100' r='0.31'/%3E%3C/svg%3E");
  --ht-dots: radial-gradient(circle, #000 1.15px, transparent 1.55px) 0 0 / 6px 6px;
  --wind: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='300' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 276h12' stroke-opacity='0.38'/%3E%3Cpath d='M350 160h13' stroke-opacity='0.70'/%3E%3Cpath d='M362 163h21' stroke-opacity='0.63'/%3E%3Cpath d='M392 73h14' stroke-opacity='0.67'/%3E%3Cpath d='M335 16h21' stroke-opacity='0.53'/%3E%3Cpath d='M443 242h9' stroke-opacity='0.56'/%3E%3Cpath d='M443 207h20' stroke-opacity='0.60'/%3E%3Cpath d='M438 273h14' stroke-opacity='0.45'/%3E%3Cpath d='M402 100h9' stroke-opacity='0.43'/%3E%3Cpath d='M206 88h27' stroke-opacity='0.58'/%3E%3Cpath d='M350 263h7' stroke-opacity='0.41'/%3E%3Cpath d='M269 153h15' stroke-opacity='0.37'/%3E%3Cpath d='M436 16h14' stroke-opacity='0.46'/%3E%3Cpath d='M319 277h17' stroke-opacity='0.35'/%3E%3Cpath d='M195 85h14' stroke-opacity='0.50'/%3E%3Cpath d='M160 159h20' stroke-opacity='0.39'/%3E%3Cpath d='M435 137h25' stroke-opacity='0.63'/%3E%3Cpath d='M304 155h17' stroke-opacity='0.66'/%3E%3Cpath d='M451 119h22' stroke-opacity='0.40'/%3E%3Cpath d='M282 105h13' stroke-opacity='0.48'/%3E%3Cpath d='M381 263h8' stroke-opacity='0.74'/%3E%3Cpath d='M37 122h9' stroke-opacity='0.30'/%3E%3Cpath d='M478 66h20' stroke-opacity='0.34'/%3E%3Cpath d='M219 178h9' stroke-opacity='0.80'/%3E%3Cpath d='M425 267h25' stroke-opacity='0.79'/%3E%3Cpath d='M365 83h6' stroke-opacity='0.40'/%3E%3Cpath d='M36 0h20' stroke-opacity='0.39'/%3E%3Cpath d='M356 147h21' stroke-opacity='0.39'/%3E%3Cpath d='M423 71h14' stroke-opacity='0.79'/%3E%3Cpath d='M57 147h6' stroke-opacity='0.80'/%3E%3Cpath d='M306 277h6' stroke-opacity='0.79'/%3E%3Cpath d='M90 291h18' stroke-opacity='0.66'/%3E%3Cpath d='M128 67h11' stroke-opacity='0.59'/%3E%3Cpath d='M25 231h21' stroke-opacity='0.68'/%3E%3C/svg%3E");
  --ease-set: cubic-bezier(.2, 1.4, .4, 1);
  --rail-w: 52px;
  --bar-h: 56px;
  --ease-draw: cubic-bezier(.6, 0, .2, 1);
  --logo: url("assets/logo-on-dark.png");
}

[data-theme="light"] {
  --bg: var(--bone);
  --panel: #f7f5f1;
  --panel-2: #e4e0d8;
  --panel-3: #d6d1c7;
  --line: #2a2a33;
  --line-soft: #c9c4ba;
  --outline: var(--night);
  --ink: var(--night);
  --muted: #3d3c44;
  --faint: #66646c;
  --on-accent: var(--night);
  --block: #fffdf8;
  --block-ink: var(--night);
  --block-sub: #45444f;
  --dim-fill: #e4e0d8;
  --dim-stroke: #b9b4aa;
  --dim-ink: #55545e;
  --dim-sub: #6b6974;
  --hover-ring: #4f6400;
  --frost-text: #2f3fd6;
  --dot: rgb(13 12 16 / .16);
  --cyan: #4f6400;
  --cyan-dim: #6d8400;
  --green: #4f6400;
  --amber: #c23812;
  --red: #c23812;
  --heat: #d93d16;
  --violet: #2f3fd6;
  --frost: #2f3fd6;
  --entry: #4f6400;
  --composition: #c23812;
  --application: var(--night);
  --domain: #55535e;
  --ports: #2f3fd6;
  --adapters: #4b55b8;
  --glow-heat: drop-shadow(0 0 3px rgb(217 61 22 / .45));
  --logo: url("assets/logo-on-light.png");
}

html { scroll-behavior: smooth; scroll-padding-top: 70px; }
html, body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-left: var(--rail-w);
}

a { color: var(--cyan); text-underline-offset: 3px; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
[data-theme="light"] :focus-visible { outline-color: var(--frost); }
.skip { position: absolute; left: 10px; top: -80px; z-index: 100; background: var(--lime); color: var(--night); padding: 8px 12px; text-decoration: none; font-weight: 700; }
.skip:focus { top: 8px; }
code { font-family: var(--mono); font-size: .88em; background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: var(--radius-sm); padding: .06em .3em; overflow-wrap: anywhere; }
p { margin: 0 0 8px; }

/* Stamp: the short heavy label the identity speaks in. */
.stamp, .eyebrow, .callout-kicker, .info-kicker, .panel-head h2, .info-block h3, .info-why strong, .step-paused strong, .legend-title {
  font-family: var(--display); font-stretch: condensed; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
}

/* Halftone fields: color comes from background-color, dot geometry from the mask. */
.ht-field { -webkit-mask: var(--ht-am) repeat-x 0 0 / 16px auto; mask: var(--ht-am) repeat-x 0 0 / 16px auto; }

/* ── bar ─────────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 20;
  height: var(--bar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  margin-left: calc(-1 * var(--rail-w)); padding: 0 16px; border-bottom: var(--stroke) solid var(--line);
  background: var(--bg);
}
.bar-section {
  margin: 0; min-width: 0; text-align: center; color: var(--ink);
  font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 17px; letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-section::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: 1px; background: var(--heat); }
.bar-section:empty::before { display: none; }
.bar-section.is-stamped { animation: stamp-in .42s var(--ease-draw) both; }

/* ── section rail: one brick per section ─────────────────────────────── */
.rail {
  position: fixed; z-index: 19; left: 0; top: var(--bar-h); bottom: 0; width: var(--rail-w);
  display: flex; align-items: center;
  border-right: var(--stroke) solid var(--line); background: var(--bg);
}
.rail ol { list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; gap: 7px; }
.rail-heat { position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; background: var(--line-soft); }
.rail-heat::after {
  content: ""; position: absolute; inset: 0; background: var(--heat); filter: var(--glow-heat);
  transform-origin: 50% 0; transform: scaleY(var(--total, 0));
}
.rail-item { position: relative; display: flex; align-items: center; height: 16px; text-decoration: none; outline-offset: 3px; }
.rail-brick {
  position: relative; display: block; width: 12px; height: 9px; overflow: hidden;
  border: 1.5px solid var(--faint); background: transparent;
  transition: width .5s var(--ease-draw), height .3s var(--ease-draw), border-color .3s ease, background-color .3s ease;
}
.rail-brick::before {
  content: ""; position: absolute; inset: 0; background: var(--faint); opacity: .55;
  -webkit-mask: radial-gradient(circle, #000 .9px, transparent 1.25px) 0 0 / 3px 3px; mask: radial-gradient(circle, #000 .9px, transparent 1.25px) 0 0 / 3px 3px;
}
.rail-fill { position: absolute; inset: 0; background: var(--heat); transform-origin: 0 50%; transform: scaleX(0); }
.rail-item.is-passed .rail-brick { width: 20px; border-color: var(--ink); background: var(--ink); }
.rail-item.is-passed .rail-brick::before, .rail-item.is-current .rail-brick::before { display: none; }
.rail-item.is-current .rail-brick { width: 30px; height: 11px; border-color: var(--heat); background: var(--bg); box-shadow: 0 0 8px rgb(242 78 37 / .45); }
.rail-item.is-current .rail-fill { transform: scaleX(var(--p, 0)); }
.rail-item:hover .rail-brick, .rail-item:focus-visible .rail-brick { border-color: var(--lime); }
[data-theme="light"] .rail-item:hover .rail-brick, [data-theme="light"] .rail-item:focus-visible .rail-brick { border-color: var(--hover-ring); }
.rail-label {
  position: absolute; left: calc(100% + 12px); top: 50%; z-index: 2; white-space: nowrap; pointer-events: none;
  padding: 3px 8px; border: var(--stroke) solid var(--ink); background: var(--bg); color: var(--ink);
  font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase;
  transform: translateY(-50%); clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease-draw);
}
.rail-item.is-current .rail-label { color: var(--heat); border-color: var(--heat); }
.rail-item:hover .rail-label, .rail-item:focus-visible .rail-label { clip-path: inset(0 0 0 0); }
.brand { display: flex; align-items: center; gap: 10px; justify-self: start; color: var(--ink); text-decoration: none; }
.brand-mark {
  flex: none; width: 0; height: 28px; margin-right: -10px; opacity: 0; transform: translateY(-6px) scale(.6);
  background: var(--logo) center / contain no-repeat;
  transition: width .45s var(--ease-draw), margin-right .45s var(--ease-draw), opacity .3s var(--ease-draw), transform .45s var(--ease-set);
}
.brand.has-mark .brand-mark { width: 28px; margin-right: 0; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .brand-mark { transition: none; } }
.brand-text { font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 19px; letter-spacing: .01em; white-space: nowrap; }
.brand-text span { color: var(--faint); font-weight: 600; }
.bar-tools { justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
.level-switch { display: flex; gap: 2px; padding: 2px; border: var(--stroke) solid var(--line); background: var(--panel); }
.level-switch button {
  border: 0; background: transparent; color: var(--muted);
  padding: 4px 10px; cursor: pointer;
  font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 14px; letter-spacing: .02em;
  transition: background .18s steps(3), color .18s;
}
.level-switch button:hover { color: var(--ink); }
.level-switch button.is-active { background: var(--lime); color: var(--night); }
.lang-switch { display: flex; gap: 2px; height: 30px; padding: 2px; border: var(--stroke) solid var(--line); background: var(--panel); }
.lang-switch > * { display: grid; place-items: center; min-width: 28px; padding: 0 6px; font-family: var(--display); font-stretch: condensed; font-size: 14px; font-weight: 800; color: var(--muted); text-decoration: none; }
.lang-switch .is-current { background: var(--lime); color: var(--night); }
.lang-switch a:hover { color: var(--night); background: var(--bone); }
.icon-button { width: 30px; height: 30px; border: var(--stroke) solid var(--line); border-radius: 15px 15px 2px 2px; background: var(--panel); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 13px; }
.icon-button:hover { border-color: var(--lime); color: var(--lime); }

/* ── workspace ───────────────────────────────────────────────────────── */
.workspace {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 252px minmax(0, 1fr) 372px;
  gap: var(--stroke); height: calc(100vh - var(--bar-h)); background: var(--line); border-top: var(--stroke) solid var(--line);
  overflow: hidden;
}
.panel { min-height: 0; background: var(--panel); overflow: auto; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
.panel-head:first-child { margin-top: 0; }
.panel-head h2 { margin: 0; font-size: 17px; color: var(--ink); }
.panel-head span { font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 17px; color: var(--faint); }

/* ── flow rail ───────────────────────────────────────────────────────── */
.flows-panel { padding: 14px; display: flex; flex-direction: column; }
.flow-list { display: grid; gap: 4px; }
.flow-item {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 7px 9px; border: var(--stroke) solid transparent;
  background: transparent; color: var(--muted);
}
.flow-item strong { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.flow-item span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--faint); }
.flow-item:hover { border-color: var(--line); }
.flow-item.is-active { background: var(--block); border-color: var(--outline); color: var(--block-ink); }
.flow-item.is-active strong { color: var(--block-ink); }
.flow-item.is-active span { color: color-mix(in srgb, var(--block-ink) 70%, transparent); }
.flow-item.is-active { padding-bottom: 15px; }
.flow-item.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; pointer-events: none;
  background: var(--block-ink); opacity: .5; -webkit-mask: var(--ht-dots); mask: var(--ht-dots);
}
.step-list { display: grid; gap: 2px; }
.step-item {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 5px; align-items: baseline;
  width: 100%; text-align: left; padding: 5px 7px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.4;
}
.step-item span { color: var(--faint); font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 13px; }
.step-item:hover { background: var(--panel-2); color: var(--ink); }
.step-item.is-active { background: color-mix(in srgb, var(--heat) 16%, var(--panel)); color: var(--ink); box-shadow: inset 3px 0 0 var(--heat); }
.step-item.is-active span { color: var(--heat); }
.step-paused { display: grid; gap: 5px; padding: 10px; border: var(--stroke) dashed var(--line); background: var(--panel-2); }
.step-paused strong { font-size: 15px; color: var(--heat); }
.step-paused span { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.step-paused .small-button { justify-self: start; margin-top: 3px; }
.legend { margin-top: auto; padding-top: 12px; border-top: var(--stroke) solid var(--line-soft); display: grid; gap: 4px; }
.legend p { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--faint); }
.swatch { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--line); }
.swatch.active { border-color: var(--heat); box-shadow: 0 0 6px var(--heat); }
.swatch.node { height: 9px; width: 12px; border: 1.5px solid var(--outline); background: var(--block); }
.swatch.edge { border-color: var(--faint); border-top-style: dashed; }
.swatch.edge-calls { border-color: var(--ink); }
.swatch.edge-uses { border-color: var(--faint); border-top-style: dashed; }
.swatch.edge-implements { border-color: var(--frost-text); border-top-style: dotted; }
.swatch.edge-wires { border-color: var(--muted); border-top-style: dashed; border-top-width: 3px; }
.legend-title { margin-top: 6px; font-size: 13px; color: var(--muted); }
.panel-note { margin: 8px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--faint); }
.panel-link { display: inline-block; margin-top: 8px; color: var(--ink); font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 14px; text-decoration: none; }
.panel-link:hover { color: var(--lime); }

/* ── graph ───────────────────────────────────────────────────────────── */
.graph-panel { display: flex; flex-direction: column; min-width: 0; background: var(--bg); overflow: hidden; }
.graph-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 11px 16px 10px; border-bottom: var(--stroke) solid var(--line); background: var(--bg); }
.graph-title { min-width: 0; }
.eyebrow { margin: 0; font-size: 14px; color: var(--heat); }
.graph-title h2 { margin: 0; font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.005em; color: var(--ink); }
.graph-title p:last-child { margin: 4px 0 0; font-size: 12px; color: var(--muted); max-width: 68ch; }
.graph-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: 0 1 auto; }
.zoom-tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.graph-hint {
  position: absolute; left: 50%; bottom: 16px; z-index: 3; margin: 0; pointer-events: none;
  padding: 5px 12px; border: var(--stroke) solid var(--ink); background: var(--bg); color: var(--ink);
  font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 15px; letter-spacing: .02em;
  transform: translateX(-50%); clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease-draw);
}
.graph-hint.is-visible { clip-path: inset(0 0 0 0); }
.zoom-tools button, .step-controls button {
  min-width: 28px; height: 28px; padding: 0 7px; border: var(--stroke) solid var(--line); background: var(--panel);
  color: var(--ink); cursor: pointer; font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 15px; line-height: 1;
}
.zoom-tools button:hover, .step-controls button:hover:not(:disabled) { color: var(--night); background: var(--bone); border-color: var(--bone); }
.zoom-tools .text-button { min-width: 42px; }
#zoom-label, #step-count, #graph-status { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 14px; color: var(--faint); }
#zoom-label { min-width: 38px; text-align: center; }
.graph-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; background-color: var(--bg); isolation: isolate; }
.graph-canvas::before, .graph-canvas::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background-color: var(--ink); opacity: .16;
  -webkit-mask: var(--wind) repeat 0 0 / 480px 300px; mask: var(--wind) repeat 0 0 / 480px 300px;
  animation: wind 26s linear infinite;
}
.graph-canvas::after { opacity: .09; -webkit-mask-size: 300px 190px; mask-size: 300px 190px; -webkit-mask-position: 140px 60px; mask-position: 140px 60px; animation-duration: 41s; }
@keyframes wind { to { -webkit-mask-position: -480px 0; mask-position: -480px 0; } }
.graph-canvas::after { animation-name: wind-far; }
@keyframes wind-far { from { -webkit-mask-position: 140px 60px; mask-position: 140px 60px; } to { -webkit-mask-position: -160px 60px; mask-position: -160px 60px; } }
#graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#graph-svg:active { cursor: grabbing; }
.graph-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; border-top: var(--stroke) solid var(--line); background: var(--bg); }
.step-controls { display: flex; align-items: center; gap: 6px; }
.step-controls button:disabled { opacity: .35; cursor: default; }
#step-count { min-width: 40px; text-align: center; }
#step-play { min-width: 52px; background: transparent; border-color: var(--heat); color: var(--amber); box-shadow: 0 0 8px rgb(242 78 37 / .35); }
#step-play:hover { background: var(--heat); border-color: var(--heat); color: var(--night); }

/* ── svg ─────────────────────────────────────────────────────────────── */
[data-layer="entry"] { --layer-color: var(--entry); }
[data-layer="composition"] { --layer-color: var(--composition); }
[data-layer="application"] { --layer-color: var(--application); }
[data-layer="domain"] { --layer-color: var(--domain); }
[data-layer="ports"] { --layer-color: var(--ports); }
[data-layer="adapters"] { --layer-color: var(--adapters); }

.ht-dot { fill: var(--ink); }
.ht-shade-dot { fill: var(--block-ink); }

.gband { transition: opacity .35s ease; }
.gband rect { fill: var(--ground); stroke: var(--line); stroke-width: var(--stroke); transition: fill .35s ease, stroke .35s ease; }
[data-theme="light"] .gband rect { fill: var(--panel-2); }
.gband .gband-dots { fill: url(#ht-ground); stroke: none; pointer-events: none; }
.gband-title { fill: var(--layer-color); font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; }
.gband-count { fill: var(--muted); font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 13px; }
.gband-chips { fill: var(--faint); font-family: var(--mono); font-size: 9px; }
.gband.is-overview:hover rect { stroke: var(--layer-color); }
.gband.is-focus rect { stroke: var(--layer-color); }
.gband.is-dim { opacity: .35; }
.gband.is-overview .gband-title { font-size: 22px; }
.gband.is-overview .gband-count { font-size: 14px; }
.gband.is-overview .gband-chips { font-size: 9.5px; }
.gband { cursor: default; }

.gnode rect { fill: var(--block); stroke: var(--outline); stroke-width: 2.5; transition: fill .3s ease, stroke .3s ease; }
.gnode .gnode-shade { fill: url(#ht-shade); stroke: none; pointer-events: none; }
.gnode-name { fill: var(--block-ink); font-family: var(--mono); font-size: 13.5px; font-weight: 700; }
.gnode-sub { fill: var(--block-sub); font-family: var(--sans); font-size: 11.5px; font-weight: 500; }
.gnode-tag {
  fill: var(--block-ink); font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  paint-order: stroke; stroke: var(--block); stroke-width: 3px; stroke-linejoin: round;
}
.gnode-name, .gnode-sub, .gnode-tag { transition: fill .3s ease; }
.gnode { cursor: pointer; transition: opacity .3s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.gnode:hover rect { stroke: var(--hover-ring); stroke-width: 3.5; }
.gnode.is-dim rect { fill: var(--dim-fill); stroke: var(--dim-stroke); }
.gnode.is-dim .gnode-name { fill: var(--dim-ink); }
.gnode.is-dim .gnode-sub { fill: var(--dim-sub); }
.gnode.is-dim .gnode-tag { fill: var(--dim-sub); stroke: var(--dim-fill); }
.gnode.is-dim .gnode-shade { opacity: .25; }
.gnode.is-dim:hover rect { fill: var(--block); stroke: var(--hover-ring); }
.gnode.is-dim:hover .gnode-name { fill: var(--block-ink); }
.gnode.is-dim:hover .gnode-sub { fill: var(--block-sub); }
.gnode.is-dim:hover .gnode-tag { fill: var(--block-ink); stroke: var(--block); }
.gnode.is-dim:hover .gnode-shade { opacity: 1; }
.gnode.is-active rect { stroke: var(--heat); stroke-width: 3; filter: var(--glow-heat); }
.gnode.is-active { animation: brick-set .5s var(--ease-set) calc(var(--i, 0) * 70ms) both; }
.gnode.is-neighbor rect { stroke: var(--frost); stroke-width: 3; }
.gnode.is-selected rect { fill: var(--lime); stroke: var(--outline); stroke-width: 3; filter: none; }
.gnode.is-selected .gnode-tag, .gnode.is-files-hub .gnode-tag { stroke: var(--lime); }
.gnode.is-selected .gnode-sub, .gnode.is-files-hub .gnode-sub { fill: var(--block-ink); }
.gnode.is-files-hub rect { fill: var(--lime); }
.gfile rect { fill: var(--block); stroke: var(--outline); stroke-width: 2; }
.gfile-name { fill: var(--block-ink); font-family: var(--mono); font-size: 9.5px; font-weight: 700; }
.gfile-path { fill: var(--block-sub); font-family: var(--mono); font-size: 8px; }
.gfile { cursor: default; }
.gfile { animation: brick-drop .45s var(--ease-set) calc(var(--o, 0) * 45ms) both; transform-box: fill-box; transform-origin: 50% 100%; }

.gedge { fill: none; stroke: var(--ink); stroke-width: 1.3; opacity: .32; transition: opacity .25s, stroke .25s, stroke-width .25s; }
.gedge.rel-calls { stroke: var(--ink); }
.gedge.rel-uses { stroke: var(--faint); stroke-dasharray: 5 4; }
.gedge.rel-implements { stroke: var(--frost-text); stroke-dasharray: 2 4; opacity: .55; }
.gedge.rel-wires { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 8 5; }
.gedge.is-dim { opacity: .06; }
.gedge.is-active {
  stroke: var(--heat); stroke-width: 2.6; opacity: 1; filter: var(--glow-heat);
  stroke-dasharray: 100 100; stroke-dashoffset: 0;
  animation: heat-draw .6s var(--ease-draw) both, heat-flow 1.1s linear .6s infinite;
}
.gedge.rel-implements.is-active { stroke: var(--frost-text); filter: none; }
@keyframes heat-draw { from { stroke-dasharray: 100 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100 100; stroke-dashoffset: 0; } }
@keyframes heat-flow { from { stroke-dasharray: 5 2.5; stroke-dashoffset: 0; } to { stroke-dasharray: 5 2.5; stroke-dashoffset: -7.5; } }
@keyframes brick-set { 0% { transform: translateY(-10px) scale(.97); } 100% { transform: none; } }
@keyframes brick-drop { from { opacity: 0; transform: translateY(-16px); } }

/* The one orchestrated moment: on first load the graph is built course by course. */
.is-building .gband { animation: course-rise .5s var(--ease-draw) calc(var(--o, 0) * 90ms) backwards; }
.is-building .gnode { animation: brick-drop .5s var(--ease-set) calc(250ms + var(--o, 0) * 28ms) backwards; }
.is-building .gedge { animation: heat-draw .7s var(--ease-draw) calc(900ms + var(--o, 0) * 8ms) backwards; }
@keyframes course-rise { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

#callout-line { animation: dashMove 1.1s linear infinite; }
@keyframes dashMove { to { stroke-dashoffset: -14; } }

/* ── callout ─────────────────────────────────────────────────────────── */
.callout-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .18s; }
.callout-layer.is-visible { opacity: 1; }
.callout-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#callout-line { fill: none; stroke: var(--heat); stroke-width: 2; stroke-dasharray: 4 3; }
.callout-card {
  position: absolute; max-width: 300px; padding: 10px 12px 11px;
  border: var(--stroke) solid var(--ink); background: var(--bg);
  pointer-events: auto;
}
.callout-card.is-stamped { animation: stamp-in .42s var(--ease-draw) both; }
@keyframes stamp-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.callout-kicker { margin: 0 0 1px; font-size: 15px; line-height: 1.1; color: var(--heat); }
.callout-card strong { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink); }
.callout-card p:last-child { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

/* ── info ────────────────────────────────────────────────────────────── */
.info-panel { padding: 18px; }
.info-kicker { margin: 0 0 2px; font-size: 15px; color: var(--heat); }
.info-panel h2 { margin: 0 0 4px; font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 1.9rem; line-height: 1.02; letter-spacing: -.005em; }
.info-sub { margin: 0 0 14px; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.info-role { color: var(--muted); font-size: 14px; line-height: 1.6; }
.info-body { color: var(--muted); font-size: 14px; line-height: 1.65; }
.info-body p { margin-bottom: 9px; }
.info-why { margin-top: 12px; padding: 10px 12px; border: var(--stroke) solid var(--heat); background: color-mix(in srgb, var(--heat) 9%, transparent); }
.info-why strong { display: block; margin-bottom: 3px; font-size: 15px; color: var(--heat); }
.info-why p { margin: 0; color: var(--ink); font-size: 12.5px; line-height: 1.55; }
.relation-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.relation-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.relation-list em { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 12px; font-style: normal; color: var(--faint); }
.term-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.term-chip {
  display: inline-block; padding: 3px 7px; border: 1.5px solid var(--line);
  background: var(--panel-2); color: var(--ink);
  font-family: var(--mono); font-size: 9.5px; line-height: 1.3; cursor: pointer;
}
.term-chip:hover { color: var(--night); background: var(--lime); border-color: var(--lime); }
.term-chip.is-active { color: var(--night); background: var(--lime); border-color: var(--lime); }
.term-chip.is-static { cursor: default; }
.term-card { margin-top: 8px; padding: 9px 11px; border-left: 4px solid var(--lime); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.term-card strong { font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 15px; }
.term-card p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.term-chip.is-static:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line); }
a.small-button { display: inline-flex; align-items: center; text-decoration: none; }
.info-block { margin-top: 16px; padding-top: 11px; border-top: var(--stroke) solid var(--line-soft); }
.info-block h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink); font-weight: 800; }
.info-block p { margin: 0; font-size: 11.5px; line-height: 1.5; }
.info-block p.ok { color: var(--green); }
.info-block p.bad { color: var(--red); }
.info-block ul { margin: 0; padding-left: 15px; display: grid; gap: 4px; }
.info-block li { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.file-list code { font-size: 9px; display: inline-block; margin-bottom: 3px; }
.ref-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ref-list a { font-family: var(--mono); font-size: 9px; color: var(--muted); border: 1.5px solid var(--line-soft); padding: 2px 5px; text-decoration: none; }
.ref-list a:hover { color: var(--night); background: var(--bone); border-color: var(--bone); }
.info-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.small-button { padding: 5px 10px; border: var(--stroke) solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 13.5px; }
.small-button:hover { color: var(--night); background: var(--lime); border-color: var(--lime); }
.layer-modules { display: flex; flex-wrap: wrap; gap: 5px; }

noscript { display: block; padding: 20px; color: var(--ink); }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 224px minmax(0, 1fr) 330px; }
  .brand-text span { display: none; }
}

@media (max-width: 980px) {
  body { height: auto; overflow: auto; }
  :root { --rail-w: 24px; --bar-h: 52px; }
  .bar { position: sticky; top: 0; padding: 0 12px; }
  .rail ol { padding-left: 7px; gap: 6px; }
  .rail-heat { left: 3px; width: 1.5px; }
  .rail-brick { width: 6px; height: 7px; border-width: 1px; }
  .rail-item { height: 12px; }
  .rail-item.is-passed .rail-brick { width: 9px; }
  .rail-item.is-current .rail-brick { width: 14px; height: 9px; }
  .rail-label { display: none; }
  .brand-text { display: none; }
  .level-switch button { padding: 4px 8px; font-size: 13px; }
  .workspace { display: block; height: auto; background: var(--bg); }
  .panel { overflow: visible; }
  .flows-panel { padding: 9px 12px 10px; border-bottom: var(--stroke) solid var(--line); }
  .flows-panel .panel-head { margin: 0 0 5px; }
  .flows-panel .panel-head:nth-of-type(2) { margin-top: 9px; }
  .flow-list, .step-list { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
  .flow-item { min-width: 168px; flex: 0 0 auto; padding: 6px 8px; }
  .flow-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
  .step-item { width: auto; min-width: 120px; flex: 0 0 auto; padding: 5px 7px; }
  .legend, .panel-note { display: none; }
  .graph-panel { height: 68vh; min-height: 460px; border-bottom: var(--stroke) solid var(--line); }
  .graph-head { padding: 8px 12px; gap: 8px; }
  .graph-title h2 { font-size: 1.6rem; }
  .graph-title p:last-child { font-size: 11px; }
  .graph-foot { padding: 6px 10px; }
  .info-panel { padding: 14px 16px 28px; }
  .info-panel h2 { font-size: 1.6rem; }
  .callout-card { max-width: 220px; }
}

@media (max-width: 620px) {
  .bar { gap: 8px; padding: 0 9px; }
  .bar-tools { gap: 5px; }
  .level-switch button { padding: 3px 6px; font-size: 12.5px; }
  .bar-section { font-size: 14px; }
  .lang-switch { height: 28px; }
  .lang-switch > * { min-width: 24px; padding: 0 4px; font-size: 13px; }
  .icon-button { width: 28px; height: 28px; }
  .eyebrow { display: none; }
  .graph-title p:last-child { max-width: 42ch; }
  .zoom-tools .text-button { min-width: 36px; }
  .graph-panel { height: 62vh; min-height: 420px; }
  .graph-head { flex-wrap: wrap; }
  .graph-tools { width: 100%; justify-content: space-between; }
  .callout-card { max-width: 190px; padding: 7px 9px; }
  .callout-card p:last-child { font-size: 10px; }
  .flow-item { flex: 0 0 186px; width: 186px; max-width: 186px; min-width: 186px; }
  .step-item { min-width: 108px; font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}