/* The Answerable State — local assets only, system fonts, light and dark themes. */
:root {
  color-scheme: light dark;
  --bg: #eef1f2; --surface: #fafbfb; --surface-2: #e3e8ea; --ink: #16212a; --ink-2: #39464f; --muted: #5b6870;
  --line: #d2d9dd; --line-2: #b6c1c7;
  --accent: #1f5a8c; --accent-ink: #184b77; --accent-soft: #dce7f1;
  --seal: #a8382c; --seal-soft: #f5e0dc; --gold: #8a6411; --gold-soft: #f1e7cb;
  --good: #276a51; --good-soft: #d8eae1; --prop: #574e85; --prop-soft: #e5e2f0;
  --fig-line: #93a1a9; --fig-land: #e0e7e3; --fig-mute: #b9c2c7; --fig-web: #8fb0cc;
  --clk-a: #cfe0ee; --clk-b: #9fc0dd; --clk-c: #5d8fbd; --clk-d: #1f5a8c;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1519; --surface: #161e23; --surface-2: #1d272d; --ink: #e6ebee; --ink-2: #c3ccd1; --muted: #8f9ca4;
    --line: #27333a; --line-2: #3a4852;
    --accent: #78aad8; --accent-ink: #a2c6ea; --accent-soft: #1a2b3b;
    --seal: #e58374; --seal-soft: #3a2320; --gold: #d8b05c; --gold-soft: #332a19;
    --good: #72c09f; --good-soft: #193027; --prop: #ad9fdb; --prop-soft: #29253b;
    --fig-line: #66757e; --fig-land: #1c272c; --fig-mute: #46545c; --fig-web: #3f6687;
    --clk-a: #1d3346; --clk-b: #2a4e6e; --clk-c: #3f6f9b; --clk-d: #78aad8;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-wrap: break-word; }
a { color: var(--accent-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
h2, h3, h4 { overflow-wrap: anywhere; }

.library-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px max(16px, 3.7%); border-bottom: 1px solid var(--line); font-size: 12px; background: var(--surface-2); }
.library-bar a { color: var(--ink); text-decoration: none; font-weight: 600; padding: 8px 0; }
.library-bar a:hover { text-decoration: underline; }
.library-bar span { font-size: 9px; letter-spacing: 1.6px; color: var(--muted); }

/* Hero */
.hero { padding: 76px 16px 56px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%231f5a8c' stroke-opacity='.28' stroke-width='2'%3E%3Ccircle cx='300' cy='300' r='210'/%3E%3Ccircle cx='300' cy='300' r='150' stroke-dasharray='3 9'/%3E%3C/g%3E%3Cg fill='%231f5a8c' fill-opacity='.42'%3E%3Ccircle cx='300' cy='90' r='16'/%3E%3Ccircle cx='464' cy='169' r='16'/%3E%3Ccircle cx='505' cy='347' r='16'/%3E%3Ccircle cx='391' cy='489' r='16'/%3E%3Ccircle cx='209' cy='489' r='16'/%3E%3Ccircle cx='95' cy='347' r='16'/%3E%3C/g%3E%3Ccircle cx='136' cy='169' r='20' fill='%23a8382c' fill-opacity='.55'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right -110px top 30px; background-size: min(54vw, 620px) auto; }
.hero-inner { max-width: 1120px; margin: 0 auto; }
.eyebrow { font: 700 12px/1.4 var(--sans); letter-spacing: .14em; color: var(--accent-ink); margin: 0 0 10px; }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 7.6vw, 5.8rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 26px; max-width: 8.4em; }
h1 .subtitle { display: block; margin-top: .32em; font-style: italic; font-size: .4em; letter-spacing: 0; color: var(--seal); }
.lede { font-family: var(--serif); font-size: clamp(1.25rem, 2.5vw, 1.65rem); line-height: 1.38; max-width: 31em; margin: 0 0 18px; }
.intro { max-width: 42em; color: var(--ink-2); margin: 0 0 26px; }
.author { display: flex; gap: 14px; align-items: flex-start; max-width: 50em; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; font-size: .92rem; color: var(--ink-2); }
.author p { margin: 0; }
.author-mark { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 700 12px var(--sans); letter-spacing: .04em; }
.summary { max-width: 50em; margin-top: 26px; padding: 22px 24px 18px; background: var(--ink); color: var(--bg); border-radius: 16px; }
.summary h2 { font: 700 12.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; color: var(--accent-soft); }
.summary p { margin: 0 0 12px; font-size: 1.02rem; }
.summary .value-note { font-size: .86rem; opacity: .85; margin: 0; }

/* Sticky rail */
.rail { position: sticky; top: 0; z-index: 20; background: var(--bg); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rail-inner { max-width: 1120px; margin: 0 auto; display: flex; gap: 2px; align-items: center; overflow-x: auto; padding: 6px 16px; scrollbar-width: none; }
.rail-inner::-webkit-scrollbar { display: none; }
.rail a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: 999px; font: 600 13px var(--sans); color: var(--ink-2); text-decoration: none; }
.rail a:hover { background: var(--surface-2); }
.rail a.is-current { background: var(--ink); color: var(--bg); }

/* Sections */
main { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.block { padding: 72px 0 28px; border-top: 1px solid var(--line); scroll-margin-top: 54px; }
.block:first-child { border-top: 0; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.9vw, 2.85rem); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 12px; }
.section-head { max-width: 46em; margin: 0 0 30px; }
.section-head > p:last-child { color: var(--ink-2); margin: 0; }
h3 { font: 400 1.4rem/1.25 var(--serif); margin: 0 0 8px; }
h4 { font: 700 12.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.note, .fiction-note, .sim-note { font-size: .88rem; color: var(--muted); max-width: 54em; }
.fiction-note { margin: -12px 0 24px; }

/* Badges and chips */
.badge { display: inline-block; font: 700 11px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; vertical-align: 2px; }
.st-in-use { background: var(--good-soft); color: var(--good); }
.st-piloted { background: var(--gold-soft); color: var(--gold); }
.st-research { background: var(--accent-soft); color: var(--accent-ink); }
.st-proposed { background: var(--prop-soft); color: var(--prop); }
.summary .st-proposed { background: var(--prop); color: var(--ink); }
.src-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 10px; margin: 0 6px 6px 0; border-radius: 999px; font: 600 12.5px var(--sans); text-decoration: none; border: 1px solid transparent; }
.src-chip:hover { border-color: currentColor; }

/* Why */
.why-stack { display: grid; gap: 22px; margin-bottom: 26px; }
.why-text { max-width: 48em; }
.why-text p { color: var(--ink-2); margin: 0; }
.fig-static { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.fig-wide { margin-bottom: 24px; }
.fig-svg { display: block; width: 100%; height: auto; }
.loops { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.loops li { border-top: 2px solid var(--seal); padding-top: 12px; }
.loops h3 { font: 700 1rem/1.3 var(--sans); }
.loops p { margin: 0; font-size: .94rem; color: var(--ink-2); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; }
.stat { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.stat dt { font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.stat dd { margin: 0; }
.stat .v { order: -1; font: 400 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--serif); color: var(--accent); margin-bottom: 8px; }
.stat .src { font-size: .78rem; margin-top: 10px; }
.stat .src a { color: var(--muted); }
.reading { max-width: 54em; margin: 0; padding: 16px 20px; background: var(--surface-2); border-radius: 12px; }

/* Aims */
.aims { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aim { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px 14px; position: relative; scroll-margin-top: 64px; }
.aim-n { position: absolute; right: 18px; top: 12px; margin: 0; font: 400 2.4rem/1 var(--serif); color: var(--line-2); }
.aim h3 { margin-bottom: 2px; }
.aim-line { margin: 0 0 12px; font: italic 1.05rem/1.4 var(--serif); color: var(--accent-ink); }
.aim dl { margin: 0 0 10px; }
.aim dl div { padding: 8px 0; border-top: 1px solid var(--line); }
.aim dt { font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.aim dd { margin: 0; font-size: .95rem; color: var(--ink-2); }
.builds { margin: 0; display: flex; flex-wrap: wrap; align-items: center; }
.builds > span { font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 10px; margin-bottom: 6px; }

/* Walkthroughs */
.walk { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; align-items: start; margin-bottom: 26px; }
.fig { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; position: sticky; top: 62px; z-index: 1; }
.step-list { list-style: none; margin: 0; padding: 0; }
.step { border-left: 3px solid var(--line); padding: 2px 0 12px 16px; transition: border-color .25s; }
.step-btn { appearance: none; display: flex; gap: 10px; align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 700 1.05rem/1.3 var(--sans); text-align: left; cursor: pointer; }
.step-t small { display: block; font: 600 12px var(--sans); color: var(--muted); letter-spacing: .04em; }
.step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); font: 700 13px var(--sans); transition: background .25s, border-color .25s, color .25s; }
.step-x { margin: 0 0 0 38px; color: var(--ink-2); font-size: .97rem; transition: color .25s; }
.step-x p { margin: 0 0 8px; }
.step-line { font-weight: 600; color: var(--ink); }
.story { padding: 10px 12px; background: var(--surface-2); border-radius: 10px; font-size: .93rem; }
.story span { display: block; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--seal); margin-bottom: 2px; }
.walk.is-enhanced .step:not(.is-current) .step-x { display: none; }
.step.is-current { border-left-color: var(--accent); }
.step.is-current .step-n { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.step.is-past .step-n { border-color: var(--accent); color: var(--accent-ink); }
.step-nav { display: flex; align-items: center; gap: 14px; margin: 8px 0 0 19px; font-size: .9rem; color: var(--muted); }
.step-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; }
.step-nav button:hover:not(:disabled) { border-color: var(--accent); }
.step-nav button:disabled { opacity: .35; cursor: default; }

/* Figure drawing classes */
.fig [data-s], .fig [data-u] { transition: opacity .45s ease, visibility .45s; }
.fig .is-off { opacity: 0; visibility: hidden; }
.fig .is-new { animation: reveal .6s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fig-final { display: none; }
svg text { font-family: var(--sans); }
.ft { font-size: 13.5px; font-weight: 600; fill: var(--ink-2); }
.ft-s { font-size: 12.5px; font-weight: 500; fill: var(--ink-2); }
.ft-b { font-size: 14.5px; font-weight: 700; fill: var(--ink); }
.ft-h { font: 400 17px var(--serif); fill: var(--ink); }
.ft-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; fill: var(--muted); }
.ft-cap-acc { fill: var(--seal); }
.ft-acc { font-size: 13px; font-weight: 700; fill: var(--accent-ink); }
.ft-seal { font-size: 13px; font-weight: 700; fill: var(--seal); }
.ft-good { font-size: 13px; font-weight: 700; fill: var(--good); }
.ft-inv { font-size: 12.5px; font-weight: 700; fill: var(--surface); }
.ft-mute { font-size: 12.5px; font-weight: 500; fill: var(--muted); }
.ft-vert { writing-mode: vertical-rl; transform: rotate(180deg); transform-box: fill-box; transform-origin: center; }
.ft-num { font-size: 15px; font-weight: 700; fill: var(--muted); }
.ft-num-done { font-size: 15px; font-weight: 700; fill: var(--accent-ink); }
.ft-num-now { font-size: 15px; font-weight: 800; fill: var(--surface); }
.ft-clk { font: 400 26px var(--serif); fill: var(--surface); }
.fh { fill: var(--fig-line); } .fh-acc { fill: var(--accent); } .fh-seal { fill: var(--seal); } .fh-good { fill: var(--good); } .fh-gold { fill: var(--gold); }
.fx-ink { fill: var(--ink); } .fx-ink-2 { fill: var(--ink-2); } .fx-ink-s { stroke: var(--ink); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx-paper { fill: var(--surface); stroke: var(--fig-line); stroke-width: 1.5; } .fx-paper-f { fill: var(--surface); }
.fx-soft { fill: var(--surface-2); } .fx-soft-b { fill: var(--surface-2); stroke: var(--fig-line); stroke-width: 1.5; }
.fx-rule { stroke: var(--fig-line); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.fx-col { stroke: var(--fig-line); stroke-width: 4; }
.fx-line { stroke: var(--fig-line); stroke-width: 2; fill: none; stroke-linecap: round; }
.fx-dash { stroke-dasharray: 5 7; } .fx-faint { opacity: .7; }
.fx-acc { fill: var(--accent); } .fx-acc-s { stroke: var(--accent); fill: none; stroke-linecap: round; }
.fx-seal { fill: var(--seal); } .fx-gold { fill: var(--gold); } .fx-gold-s { stroke: var(--gold); fill: none; }
.fx-good-s { stroke: var(--good); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx-mute { fill: var(--fig-mute); }
.fx-land { fill: var(--fig-land); }
.fx-web { stroke: var(--fig-web); stroke-width: 2; fill: none; }
.dot-off { fill: none; stroke: var(--fig-mute); stroke-width: 2; }
.ring-dash { fill: none; stroke: var(--seal); stroke-width: 2; stroke-dasharray: 3 4; }
.nation { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 6; }
.pill { fill: var(--accent-soft); } .pill-good { fill: var(--good-soft); }
.gov-a { fill: var(--accent); } .gov-b { fill: var(--seal); }
.gbox rect { stroke-width: 1.5; }
.gbox-old rect { fill: var(--surface-2); stroke: var(--line-2); stroke-dasharray: 4 4; }
.gbox-new rect { fill: var(--accent-soft); stroke: var(--accent); }
.node-base { fill: var(--surface); stroke: var(--line-2); stroke-width: 2; }
.node-done { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.node-now { fill: var(--accent); }
.node-halo { fill: none; stroke: var(--accent); stroke-opacity: .35; stroke-width: 5; }
.wedge { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.band-private { fill: var(--good-soft); stroke: var(--good); stroke-width: 1.2; }
.role-dot { cursor: pointer; }
.role-dot circle { fill: var(--surface); stroke: var(--accent); stroke-width: 3; transition: fill .2s; }
.role-dot:hover circle, .role-dot.is-on circle { fill: var(--accent); }
.role-dot:focus { outline: none; } .role-dot:focus-visible circle { stroke: var(--ink); stroke-width: 4; }
.clk { stroke: none; transition: opacity .2s; }
.clk-A { fill: var(--clk-a); } .clk-B { fill: var(--clk-b); } .clk-C { fill: var(--clk-c); } .clk-D { fill: var(--clk-d); }
.clk-A + .ft-clk, .clk-B + .ft-clk { fill: var(--ink); }
.clock-bar:focus { outline: none; } .clock-bar:focus-visible rect { stroke: var(--ink); stroke-width: 3; }
.clock-fig.has-pick .clock-bar:not(.is-on) rect { opacity: .3; }
.clock-bar.is-on rect { stroke: var(--seal); stroke-width: 3; }
.strand { fill: none; stroke-width: 7; stroke-linecap: round; }
.strand-parallel { stroke: var(--gold); } .strand-city { stroke: var(--accent); } .strand-mandate { stroke: var(--seal); } .strand-merged { stroke: var(--ink); stroke-width: 11; }
.strand-mandate.fx-dash { stroke-dasharray: 2 12; }
.strand-label-parallel { fill: var(--gold); } .strand-label-city { fill: var(--accent-ink); } .strand-label-mandate { fill: var(--seal); }

/* Contract */
.contract-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; margin-bottom: 34px; }
.anatomy ol { list-style: none; counter-reset: f; margin: 0; padding: 0; }
.anatomy li { counter-increment: f; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.anatomy li::before { content: counter(f); grid-row: span 3; font: 400 1.3rem/1.1 var(--serif); color: var(--accent); }
.anatomy strong { color: var(--ink); }
.anatomy span { color: var(--ink-2); }
.anatomy small { color: var(--seal); font-size: .82rem; }
.contract-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 1px 0 var(--line), 0 14px 32px -24px rgba(0, 0, 0, .45); overflow: hidden; margin-bottom: 18px; }
.contract-card header { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; padding: 12px 18px; background: var(--ink); color: var(--bg); font: 700 11.5px var(--mono); letter-spacing: .1em; }
.contract-card dl { margin: 0; padding: 4px 18px; }
.contract-card dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line-2); }
.contract-card dl > div:last-child { border-bottom: 0; }
.contract-card dt { font: 700 11.5px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.contract-card dd { margin: 0; font-size: .95rem; }
.contract-card dd ul { margin: 0; padding-left: 1.1em; }
.contract-card footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
.stamp { display: inline-block; padding: 4px 10px; border: 2px solid var(--seal); color: var(--seal); border-radius: 4px; font: 800 11px var(--sans); letter-spacing: .12em; transform: rotate(-2deg); }
.hash { font: 500 11.5px var(--mono); color: var(--muted); }
.rules { background: var(--surface-2); border-radius: 14px; padding: 18px 20px 8px; }
.rules ul { margin: 0; padding-left: 1.1em; font-size: .95rem; color: var(--ink-2); }
.rules li { margin-bottom: 8px; }
.measures { list-style: none; padding: 0 !important; }
.measures li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dotted var(--line-2); }
.measures strong { color: var(--accent-ink); text-align: right; flex: none; max-width: 45%; }

/* Builder */
.builder { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 18px; }
.builder-head { max-width: 46em; margin-bottom: 16px; }
.builder-head p:last-child { color: var(--ink-2); margin: 0; font-size: .95rem; }
.builder-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.builder-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.bf { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.bf:first-child { grid-column: 1 / -1; }
.bf > span { font-weight: 700; color: var(--ink); }
.bf small { color: var(--muted); font-size: .8rem; }
.bf input, .bf textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 10px; min-height: 44px; }
.bf textarea { resize: vertical; }
.range { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.range input { flex: 1; padding: 0; border: 0; background: none; accent-color: var(--accent); }
.range output { font: 700 1rem var(--sans); min-width: 3em; text-align: right; }
.builder-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.builder button, .download { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; }
.builder button:hover:not(:disabled) { border-color: var(--accent); }
.download { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.download:disabled { opacity: .4; cursor: default; }
.builder-out { position: sticky; top: 70px; background: var(--surface-2); border-radius: 14px; padding: 16px 18px; }
.meter { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; margin-bottom: 10px; }
.meter-n { font: 400 2rem/1 var(--serif); color: var(--accent); }
.meter-label { font-size: .85rem; color: var(--muted); }
.meter-bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 8px; }
.meter-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.checks { list-style: none; margin: 0 0 14px; padding: 0; font-size: .9rem; }
.checks li { padding: 6px 0 6px 24px; position: relative; border-top: 1px solid var(--line); }
.checks li::before { position: absolute; left: 2px; top: 6px; font-weight: 800; }
.checks .ok::before { content: "✓"; color: var(--good); }
.checks .warn::before { content: "!"; color: var(--seal); left: 6px; }
.checks .todo::before { content: "○"; color: var(--muted); }
.builder-note { font-size: .8rem; color: var(--muted); margin: 10px 0 0; }
.builder-noscript { color: var(--muted); }

/* Consequences */
.ladder { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 10px; }
.rung { --tc: var(--muted); background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--tc); border-radius: 12px; padding: 14px 18px; }
.rung:nth-child(2) { margin-left: 3%; } .rung:nth-child(3) { margin-left: 6%; } .rung:nth-child(4) { margin-left: 9%; } .rung:nth-child(5) { margin-left: 12%; }
.tone-good { --tc: var(--good); } .tone-pilot { --tc: var(--gold); } .tone-seal { --tc: var(--seal); } .tone-prop { --tc: var(--prop); }
.rung-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-bottom: 4px; }
.rung-name { font: 700 1.05rem var(--sans); color: var(--tc); }
.rung-who { font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rung p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.sim { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 12px; }
.sim-title { margin-bottom: 4px; }
.sim-intro { margin: 0 0 16px; color: var(--ink-2); font-size: .95rem; }
.scenario { padding: 12px 0 8px; border-top: 1px solid var(--line); }
.scenario h4 { font: 400 1.2rem/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 6px 0 14px; }
.tracks { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.track { border-radius: 12px; padding: 14px 16px 6px; }
.track-new { background: var(--accent-soft); }
.track-old { background: var(--surface-2); }
.track-label { font: 700 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; color: var(--accent-ink); }
.track-old .track-label { color: var(--muted); }
.track ol { list-style: none; margin: 0; padding: 0; }
.track li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 10px; padding: 0 0 12px; position: relative; font-size: .94rem; }
.track .t { font: 700 12.5px/1.6 var(--mono); color: var(--accent-ink); }
.track-old .t { color: var(--muted); }

/* Tabs (created by app.mjs; without JavaScript every panel is visible) */
.tablist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.tab { min-height: 44px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: 600 14px var(--sans); cursor: pointer; }
.tab:hover { border-color: var(--accent); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.is-tabbed > .tabpanel { border-top: 0; }

/* Transparency */
.role { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 10px; margin-bottom: 14px; scroll-margin-top: 70px; }
.role-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.role-cols > div { border-top: 3px solid var(--line-2); padding-top: 10px; }
.col-public { border-color: var(--accent) !important; } .col-sealed { border-color: var(--gold) !important; } .col-private { border-color: var(--good) !important; }
.role-cols ul { margin: 0; padding-left: 1.1em; font-size: .94rem; color: var(--ink-2); }
.role-cols li { margin-bottom: 6px; }
.none { color: var(--muted); font-size: .94rem; margin: 0; }
.role-rights { font-size: .92rem; color: var(--ink-2); margin: 12px 0 4px; }

/* Clocks */
.clock-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.clock-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 8px; scroll-margin-top: 70px; transition: border-color .2s, box-shadow .2s; }
.clock-card.is-on { border-color: var(--seal); box-shadow: 0 0 0 2px var(--seal); }
.clock-id { margin: 0; font: 400 2.2rem/1 var(--serif); color: var(--accent); }
.clock-card h3 { font: 700 1rem/1.3 var(--sans); margin: 6px 0 4px; }
.clock-card h3 small { display: block; font-weight: 600; color: var(--seal); font-size: .86rem; }
.clock-ex { font-size: .88rem; color: var(--muted); margin: 0 0 8px; }
.clock-card dl { margin: 0; font-size: .9rem; }
.clock-card dl div { border-top: 1px solid var(--line); padding: 6px 0; }
.clock-card dt { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.clock-card dd { margin: 0; color: var(--ink-2); }
.sorter { background: var(--surface-2); border-radius: 16px; padding: 18px 20px 12px; }
.sorter > p { margin: 0 0 10px; color: var(--ink-2); font-size: .94rem; }
.sorter ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sorter details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; }
.sorter summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: .95rem; }
.sorter details p { margin: 0 0 12px; font-size: .92rem; color: var(--ink-2); }
.clk-tag { display: inline-block; font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; margin-right: 4px; color: var(--surface); background: var(--clk-d); }
.clk-tag-A { background: var(--clk-a); color: var(--ink); } .clk-tag-B { background: var(--clk-b); color: var(--ink); } .clk-tag-C { background: var(--clk-c); }

/* Institutions */
.ring-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 26px; align-items: start; margin-bottom: 18px; }
.ring-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 10px; }
.ring-spoke { stroke: var(--fig-line); stroke-width: 1.5; stroke-dasharray: 2 5; fill: none; }
.ring-edge { fill: none; stroke: var(--line-2); stroke-width: 2; transition: stroke .2s, opacity .2s, stroke-width .2s; }
.ring-wrap.has-focus .ring-edge { opacity: .18; }
.ring-wrap .ring-edge.is-on { stroke: var(--accent); stroke-width: 3; opacity: 1; marker-end: url(#ah-ring-acc); }
.ring-wrap .ring-edge.is-on[marker-start] { marker-start: url(#ah-ring-acc); }
.ring-node { cursor: pointer; transition: opacity .2s; }
.ring-node > circle { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.ring-ledger > circle { fill: var(--accent-soft); stroke-width: 3; }
.ring-ico, .ring-ico * { fill: var(--ink); }
.ring-ico .fx-paper { fill: var(--surface); stroke: var(--ink); }
.ring-node .fx-ink-s, .ring-ico-s { stroke: var(--ink); fill: none; }
.ring-node:focus { outline: none; }
.ring-node:focus-visible > circle, .ring-node.is-self > circle { stroke: var(--seal); stroke-width: 4; }
.ring-wrap.has-focus .ring-node:not(.is-on):not(.ring-ledger) { opacity: .35; }
.ring-svg text { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.ring-clerk rect { fill: var(--prop-soft); stroke: var(--prop); stroke-width: 2; }
.ring-panel { font-size: .94rem; color: var(--ink-2); padding-top: 6px; }
.ring-panel h3 { margin: 0 0 6px; }
.ring-panel ul { margin: 4px 0 12px; padding-left: 1.1em; }
.ring-panel li { margin-bottom: 4px; }
.ring-hint { color: var(--muted); margin: 0 0 12px; }
.ring-ledger-note { padding: 12px 14px; background: var(--surface-2); border-radius: 10px; margin: 0; font-size: .9rem; }
.ring-go { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.all-checks { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; margin-bottom: 26px; }
.all-checks summary { cursor: pointer; font: 700 12.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
.all-checks ul { padding-left: 1.1em; margin: 0 0 14px; font-size: .94rem; color: var(--ink-2); }
.bodies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.body-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; padding: 18px 20px 12px; scroll-margin-top: 64px; }
.body-card:target { box-shadow: 0 0 0 2px var(--accent); }
.body-line { margin: 0 0 10px; font: italic 1.02rem/1.4 var(--serif); color: var(--accent-ink); }
.body-meta { margin: 0 0 10px; font-size: .9rem; }
.body-meta div { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.body-meta dt { font: 700 11px/1.7 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.body-meta dd { margin: 0; color: var(--ink-2); }
.pl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pl ul { margin: 0; padding-left: 1.05em; font-size: .9rem; color: var(--ink-2); }
.pl li { margin-bottom: 5px; }
.checked { font-size: .88rem; color: var(--muted); margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.clerk-card { border-top-color: var(--prop); grid-column: 1 / -1; }
.clerk-card > p { font-size: .95rem; color: var(--ink-2); }

/* Never */
.never { list-style: none; counter-reset: n; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.never li { counter-increment: n; background: var(--ink); color: var(--bg); border-radius: 14px; padding: 16px 16px 12px; }
.never li::before { content: counter(n); display: block; font: 400 1.6rem/1 var(--serif); color: var(--seal); margin-bottom: 8px; }
.never h3 { font: 700 1rem/1.3 var(--sans); color: var(--bg); }
.never p { margin: 0; font-size: .9rem; opacity: .85; }

/* Replays */
.replays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.replay { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 12px; }
.rp p { margin: 0 0 10px; font-size: .94rem; color: var(--ink-2); padding-left: 12px; border-left: 3px solid var(--line-2); }
.rp span { display: block; font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rp .rp-new { border-left-color: var(--accent); }
.rp .rp-new span { color: var(--accent-ink); }
.rp-link { margin: 0; font-weight: 700; font-size: .92rem; }

/* Paths */
.path { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 14px; margin-bottom: 18px; scroll-margin-top: 64px; }
.path-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.path-n { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 400 1.6rem var(--serif); }
.path-head h3 { font-size: 1.7rem; margin: 0; }
.tagline { margin: 2px 0 0; font: italic 1.05rem var(--serif); color: var(--seal); }
.premise { max-width: 52em; color: var(--ink-2); margin: 0 0 22px; }
.path .walk .fig { top: 70px; }
.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.path-grid section { background: var(--surface-2); border-radius: 12px; padding: 14px 16px 6px; }
.path-grid ol, .path-grid ul { margin: 0; padding-left: 1.15em; font-size: .92rem; color: var(--ink-2); }
.path-grid li { margin-bottom: 6px; }
.risk-table ul { list-style: none; margin: 0 0 16px; padding: 0; }
.risk-table li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .93rem; }
.risk-table p { margin: 0; }
.risk-table .r { color: var(--seal); font-weight: 600; }
.risk-table .c { color: var(--ink-2); }
.risk-table .c::before { content: "→ "; color: var(--accent); font-weight: 700; }
.path-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.path-ends section { border-radius: 12px; padding: 14px 16px 4px; font-size: .93rem; }
.path-ends p { margin: 0 0 10px; }
.kill { background: var(--seal-soft); } .kill h4 { color: var(--seal); }
.win { background: var(--good-soft); } .win h4 { color: var(--good); }
.precedent { font-size: .9rem; color: var(--ink-2); margin: 0 0 6px; }
.compare { margin: 30px 0 34px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
thead th { font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
tbody th { font-weight: 700; color: var(--ink); min-width: 10em; }
tbody tr:last-child > * { border-bottom: 0; }
td span { display: block; color: var(--ink-2); margin-top: 4px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); }
.dots i.on { background: var(--accent); }
.recommend { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--ink); border-radius: 18px; padding: 22px 22px 12px; }
.recommend > p { max-width: 54em; color: var(--ink-2); }
.recommend .fig-static { background: var(--bg); }
.braid-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.braid-steps li { font-size: .92rem; color: var(--ink-2); border-top: 2px solid var(--ink); padding-top: 8px; }
.braid-steps .t { display: block; font: 700 12px var(--mono); color: var(--ink); margin-bottom: 4px; }

/* Lineage, self, risks, sources */
.lineage-links { margin: -14px 0 18px; font-weight: 600; font-size: .95rem; }
.lineage td:last-child { background: var(--accent-soft); color: var(--ink); }
.lineage th[scope="col"]:last-child { color: var(--accent-ink); }
.self-card { max-width: 820px; }
.self-card dl > div { grid-template-columns: 12em minmax(0, 1fr); }
.failures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.failure { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 8px; }
.failure h3 { font-size: 1.15rem; }
.failure p { margin: 0 0 10px; font-size: .92rem; color: var(--ink-2); }
.failure span { display: block; font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.failure .sign span { color: var(--seal); }
.failure .counter span { color: var(--good); }
.unsure-title { font-size: 1.6rem; margin-bottom: 14px; }
.unsure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.unsure section { border-top: 2px solid var(--ink); padding-top: 12px; }
.unsure h4 { font: 400 1.2rem/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.unsure p { margin: 0; font-size: .94rem; color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; font-size: .86rem; color: var(--ink-2); }
.sources { list-style: none; margin: 0; padding: 0; }
.sources li { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .93rem; scroll-margin-top: 64px; }
.sources li:target { background: var(--accent-soft); }
.sources .badge { justify-self: start; align-self: start; margin-top: 2px; }
.sources span { grid-column: 2; color: var(--muted); font-size: .88rem; }
.sources a { color: var(--ink); font-weight: 600; }
.site-footer { max-width: 1120px; margin: 48px auto 0; padding: 26px 16px 52px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.site-footer p { margin: 0 0 8px; }
.site-footer strong { color: var(--ink); }

@media (max-width: 980px) {
  .loops, .stats, .never, .braid-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clock-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .failures, .unsure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .walk, .contract-grid, .builder-body, .ring-grid, .tracks, .path-grid, .path-ends { grid-template-columns: minmax(0, 1fr); }
  .aims, .bodies, .replays, .sorter ul { grid-template-columns: minmax(0, 1fr); }
  .role-cols { grid-template-columns: minmax(0, 1fr); }
  .hero { background-position: right -160px top 10px; background-size: 92vw auto; }
  .builder-out { position: static; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding: 44px 16px 40px; }
  .block { padding-top: 52px; }
  .loops, .stats, .never, .braid-steps, .clock-cards, .failures, .unsure { grid-template-columns: minmax(0, 1fr); }
  .builder-form { grid-template-columns: minmax(0, 1fr); }
  .fig { padding: 6px; border-radius: 14px; }
  .fig-static { padding: 8px; }
  .contract-card dl > div, .self-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .risk-table li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pl { grid-template-columns: minmax(0, 1fr); }
  .rung:nth-child(n) { margin-left: 0; }
  .track li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sources li { grid-template-columns: minmax(0, 1fr); }
  .sources span { grid-column: 1; }
  .library-bar span { font-size: 8px; letter-spacing: 1px; }
  .path, .sim, .builder, .recommend { padding: 16px 14px 10px; }
  .summary { padding: 18px 16px 14px; }
  .hero { background-image: none; }
  .lineage thead { display: none; }
  .lineage tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .lineage th, .lineage td { display: block; border: 0; padding: 4px 14px; }
  .lineage td::before { content: attr(data-label); display: block; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .compare thead { display: none; }
  .compare tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .compare th, .compare td { display: block; border: 0; padding: 4px 14px; }
  .compare td::before { content: attr(data-label); display: block; font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fig [data-s], .fig [data-u], .step, .step-n, .ring-edge, .ring-node, .meter-bar i { transition: none; }
  .fig .is-new { animation: none; }
}
@media print {
  .rail, .library-bar, .step-nav, .skip-link, .tablist, .builder { display: none !important; }
  body { background: #fff; }
  .hero { background-image: none; }
  .fig { position: static; }
  .fig .is-off { opacity: 1; visibility: visible; }
  .fig [data-u] { display: none; }
  .fig .fig-final { display: inline; }
  .walk.is-enhanced .step:not(.is-current) .step-x { display: block; }
  .tabpanel[hidden] { display: block !important; }
  .block { break-before: page; }
  .fig, .stat, .aim, .contract-card, .body-card, .path, .failure { break-inside: avoid; }
}