/* CIN site — hand-written, no framework, no external fonts or requests. */

:root {
  --paper: #f5f2eb;
  --paper-2: #ece7dc;
  --card: #fbf9f4;
  --ink: #17181c;
  --ink-2: #44464d;
  --ink-3: #6d6f76;
  --rule: #d8d2c4;
  --accent: #c8402a;      /* vermilion: signals, refusals */
  --ok: #1f6f68;          /* teal: verified, answered */
  --gold: #d99a1b;
  --violet: #5a3d8a;
  --blue: #1f6fb3;
  --spectrum: linear-gradient(90deg, #1f6fb3, #1f8f5a, #d99a1b, #c8402a, #5a3d8a);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --maxw: 72rem;
  --radius: 14px;
  --night: #17181c;       /* fixed dark surfaces */
  --night-ink: #f5f2eb;
  --bad: var(--accent);
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --surface: var(--card);
  --line: var(--rule);
  --muted: var(--paper-2);
  --muted-ink: var(--ink-3);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121317;
    --paper-2: #1a1c21;
    --card: #1b1d23;
    --ink: #ece9e1;
    --ink-2: #c3c0b8;
    --ink-3: #8f8d87;
    --rule: #2e3038;
    --accent: #ef6a52;
    --ok: #4fb3a8;
    --night: #0a0b0e;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id], [id] { scroll-margin-top: 4.5rem; }
#top, body { scroll-margin-top: 0; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -0.012em; margin: 0; }
h1 { font-size: clamp(2.6rem, 7.2vw, 5.4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
.lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--ink-2); max-width: 40rem; }
.label {
  font: 600 .74rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: .55rem;
}
.label::before { content: ""; width: 1.6rem; height: 2px; background: var(--spectrum); border-radius: 2px; }
em.hl { font-style: italic; color: var(--accent); }
.mono { font-family: var(--mono); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-head.scrolled { border-bottom-color: var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 4.1rem; gap: 1.25rem; min-width: 0; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 650; letter-spacing: -.01em; min-width: 0; flex-shrink: 0; white-space: nowrap; }
.brand > span { min-width: 0; line-height: 1.15; white-space: nowrap; }
.brand img { width: 30px; height: 30px; flex-shrink: 0; }
.brand small { display: block; font: 500 .66rem/1 var(--mono); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(.75rem, 1.3vw, 1.35rem); font-size: .9rem; flex-shrink: 0; white-space: nowrap; }
.nav a { text-decoration: none; color: var(--ink-2); padding: .3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.menu-btn { display: none; background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .45rem .9rem; font: inherit; font-size: .9rem; color: var(--ink); flex-shrink: 0; }
@media (max-width: 980px) {
  .menu-btn { display: block; }
  .nav { position: absolute; top: 4.1rem; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: .5rem 1.25rem 1rem; display: none; }
  .nav.open { display: flex; }
  .nav a { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
}

/* ---------- sections ---------- */
section { padding: clamp(4.5rem, 10vw, 8rem) 0; position: relative; }
section + section { border-top: 1px solid var(--rule); }
.sec-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); max-width: 46rem; }
.alt { background: var(--paper-2); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(2.2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.hero-grid > div:first-child { max-width: 52rem; margin-inline: auto; text-align: center; }
.hero h1 { max-width: 22ch; margin-inline: auto; }
.hero h1 .line2 { display: block; color: var(--ink-3); font-style: italic; font-weight: 500; }
.hero .lede { margin-top: 1.4rem; margin-inline: auto; max-width: 46rem; font-size: clamp(1.08rem, 1.45vw, 1.24rem); line-height: 1.65; }
.hero-rule-box { text-align: left; max-width: 48rem; margin: 1.35rem auto 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.3rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .96rem; border: 1px solid var(--ink);
  transition: transform .15s, background .15s, color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.btn.ghost { color: var(--ink); }
.status-pill {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem;
  font: 500 .8rem/1 var(--mono); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: .5rem .85rem; background: var(--card);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }

.boundary-fig { margin: 0 auto; width: 100%; max-width: 1040px; }
.boundary-frame {
  position: relative; aspect-ratio: 16 / 9; min-height: 440px; width: 100%; max-width: 1040px; margin-inline: auto;
  border-radius: 24px; background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ok) 9%, transparent) 0 30%, transparent 62%),
    var(--card);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.35);
}
@media (max-width: 720px) {
  .boundary-frame { aspect-ratio: 4 / 3; min-height: 340px; border-radius: 18px; }
}
.boundary-frame canvas { width: 100%; height: 100%; border-radius: 24px; display: block; }
.boundary-fig figcaption { font-size: .94rem; line-height: 1.55; color: var(--ink-3); max-width: 820px; margin: 1.1rem auto 0; text-align: center; }
.boundary-fig figcaption strong { color: var(--ink); font-family: var(--sans); font-weight: 650; font-size: .94rem; }

/* ---------- commitments ---------- */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .three { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.7rem 1.6rem 1.5rem; position: relative;
}
.card .num { font: 600 .78rem/1 var(--mono); color: var(--ink-3); letter-spacing: .1em; }
.card h3 { margin: .9rem 0 .7rem; }
.card p { color: var(--ink-2); font-size: .98rem; margin: 0; }
.card .src { margin-top: 1.1rem; font: 500 .74rem/1.3 var(--mono); color: var(--ink-3); }

/* ---------- receipt (shown in the footer dialog) ---------- */
.receipt {
  font-family: var(--mono); font-size: .86rem; line-height: 1.7;
  background: color-mix(in srgb, var(--paper) 6%, transparent);
  border: 1px dashed color-mix(in srgb, var(--paper) 25%, transparent);
  border-radius: 12px; padding: 1.3rem 1.4rem;
}
.receipt .row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted color-mix(in srgb, var(--paper) 18%, transparent); padding: .25rem 0; }
.receipt .row:last-child { border-bottom: 0; }
.receipt .k { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.receipt .v { text-align: right; word-break: break-all; }
.receipt .good { color: #6fd3c6; }
.receipt .bad { color: #ff8b76; }
.receipt .note { padding: 0; margin-top: .9rem; font-size: .76rem; color: color-mix(in srgb, var(--paper) 50%, transparent); }

/* ---------- instruments ---------- */
.instr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 960px) { .instr { grid-template-columns: 1fr; } }
.instr .card { padding-top: 1.4rem; display: flex; flex-direction: column; }
.instr .glyph { width: 52px; height: 52px; margin-bottom: 1rem; }
.instr ul { margin: .9rem 0 0; padding: 0; list-style: none; font-size: .95rem; color: var(--ink-2); }
.instr li { padding: .45rem 0 .45rem 1.3rem; border-top: 1px solid var(--rule); position: relative; }
.instr li::before { content: "→"; position: absolute; left: 0; color: var(--ink-3); }
.chip { display: inline-block; font: 600 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .4rem .6rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); background: var(--paper); }
.chip.spec { border-color: color-mix(in srgb, var(--blue) 45%, var(--rule)); color: var(--blue); }
.chip.idea { border-color: color-mix(in srgb, var(--violet) 45%, var(--rule)); color: var(--violet); }
@media (prefers-color-scheme: dark) { .chip.spec { color: #7db6e8; } .chip.idea { color: #b49ae0; } }
.instr .foot { margin-top: auto; padding-top: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.instr .foot .mono { font-size: .74rem; color: var(--ink-3); }

/* ---------- roadmap ---------- */
.road { margin-top: clamp(3rem, 6vw, 4.5rem); }
.road-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
@media (max-width: 860px) { .road-track { grid-template-columns: 1fr; } }
.phase { padding: 1.4rem 1.2rem 1.2rem 0; border-top: 3px solid var(--rule); position: relative; }
.phase.now { border-top-color: var(--accent); }
.phase .ph { font: 600 .74rem/1 var(--mono); color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.phase.now .ph { color: var(--accent); }
.phase h3 { font-size: 1.15rem; margin: .55rem 0 .5rem; }
.phase p { font-size: .9rem; color: var(--ink-2); margin: 0; }
.phase .here { position: absolute; top: -.75rem; left: 0; font: 700 .66rem/1 var(--mono); background: var(--accent); color: #fff; padding: .3rem .5rem; border-radius: 4px; letter-spacing: .08em; }
@media (max-width: 860px) { .phase { padding-left: 0; } }

/* ---------- bounded agents ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split .body p { color: var(--ink-2); }
.quote {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.35;
  border-left: 3px solid; border-image: var(--spectrum) 1; padding-left: 1.3rem; margin: 1.6rem 0;
}
.principles-mini { display: grid; gap: .8rem; margin-top: 1.5rem; }
.principles-mini div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; font-size: .93rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.principles-mini b { font-family: var(--mono); font-size: .8rem; font-weight: 600; }
.principles-mini span { color: var(--ink-2); }
@media (max-width: 520px) { .principles-mini div { grid-template-columns: 1fr; gap: .2rem; } }
.stack-fig { background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 1.2rem; }
.stack-fig svg { width: 100%; height: auto; }

/* ---------- work in the open ---------- */
.loop { list-style: none; padding: 0; margin-top: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; counter-reset: step; margin-bottom: 3rem; }
@media (max-width: 960px) { .loop { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .loop { grid-template-columns: repeat(2, 1fr); } }
.step { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem .95rem; position: relative; counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); font: 600 .72rem/1 var(--mono); color: var(--ink-3); }
.step b { display: block; margin: .5rem 0 .25rem; font-size: .98rem; }
.step span { font-size: .84rem; color: var(--ink-2); line-height: 1.45; display: block; }
.step.human { border-color: color-mix(in srgb, var(--ok) 55%, var(--rule)); }
.step.human::after { content: "human"; position: absolute; top: .8rem; right: .8rem; font: 600 .62rem/1 var(--mono); color: var(--ok); text-transform: uppercase; letter-spacing: .08em; }

.work-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .work-grid { grid-template-columns: 1fr; } }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 700px) { .board { grid-template-columns: 1fr; } }
.col h3 { font: 600 .76rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; padding-bottom: .7rem; border-bottom: 2px solid var(--rule); margin-bottom: .7rem; }
.col.done h3 { border-color: var(--ok); }
.col.doing h3 { border-color: var(--gold); }
.col.next h3 { border-color: var(--ink-3); }
.ticket { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: .75rem .85rem; font-size: .88rem; line-height: 1.4; margin-bottom: .6rem; }
.ticket .t { font: 600 .68rem/1 var(--mono); color: var(--ink-3); display: block; margin-bottom: .35rem; }
.commit { font: .8rem/1.6 var(--mono); background: var(--ink); color: var(--paper); border-radius: 14px; padding: 1.2rem 1.3rem; overflow-x: auto; white-space: pre; }
.commit { background: var(--night); color: var(--night-ink); }
.commit .c1 { color: #f1c76b; }
.commit .c2 { color: #8fa0b8; }
.commit .c3 { color: #6fd3c6; }
.nevers { margin-top: 1.25rem; }
.nevers h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.nevers ul { margin: 0; padding: 0; list-style: none; }
.nevers li { padding: .55rem 0 .55rem 1.7rem; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-2); position: relative; }
.nevers li::before { content: "✕"; position: absolute; left: .1rem; color: var(--accent); font-weight: 700; }

/* ---------- observatory ---------- */
.obs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 860px) { .obs-grid { grid-template-columns: 1fr; } }
.obs-col { border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--rule); background: var(--card); }
.obs-col h3 { font-size: 1.15rem; display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.obs-col h3 i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.obs-col.conv h3 i { background: var(--ok); }
.obs-col.div h3 i { background: var(--accent); }
.ind { display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--rule); font-size: .92rem; }
.ind .fam { font: 700 .8rem/1 var(--mono); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px; background: var(--paper-2); }
.ind .pend { font: 500 .7rem/1 var(--mono); color: var(--ink-3); }
.calib { margin-top: 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem 1.7rem; }
@media (max-width: 700px) { .calib { grid-template-columns: 1fr; gap: 1rem; } }
.calib .big { font: 600 clamp(3rem, 8vw, 4.6rem)/1 var(--serif); }
.calib .big small { display: block; font: 600 .72rem/1.3 var(--mono); color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; margin-top: .5rem; }
.calib svg { width: 100%; height: auto; max-height: 150px; }
.calib p { font-size: .93rem; color: var(--ink-2); margin: .6rem 0 0; }

/* ---------- floor ---------- */
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .8rem; }
.right { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.right summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .6rem; align-items: baseline; }
.right summary::-webkit-details-marker { display: none; }
.right summary .f { font: 700 .82rem/1 var(--mono); color: var(--accent); }
.right summary .n { font-weight: 600; font-size: .96rem; line-height: 1.3; }
.right summary .pm { font: 400 1.1rem/1 var(--mono); color: var(--ink-3); transition: transform .2s; }
.right[open] summary .pm { transform: rotate(45deg); }
.right[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.right p { padding: 0 1.1rem 1.1rem 4.3rem; margin: 0; font-size: .9rem; color: var(--ink-2); }
.floor-note { margin-top: 1.5rem; font-size: .9rem; color: var(--ink-3); max-width: 48rem; }

/* ---------- involve ---------- */
.involve { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .involve { grid-template-columns: 1fr; } }
.honest-list { margin: 0; padding: 0; list-style: none; }
.honest-list li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); font-size: .96rem; }
.honest-list li b { font: 600 .74rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.honest-list li b.y { color: var(--ok); }
.honest-list li b.n { color: var(--ink-3); }
.honest-list li span { color: var(--ink-2); }
.contact-card { --paper: var(--night-ink); background: var(--night); color: var(--night-ink); border-radius: 20px; padding: 2rem; }
.contact-card h3 { color: var(--paper); margin-bottom: .8rem; }
.contact-card p { color: color-mix(in srgb, var(--paper) 72%, transparent); font-size: .96rem; }
.contact-card a.mail { display: inline-block; margin-top: .6rem; font: 600 1rem/1.4 var(--mono); color: var(--paper); word-break: break-all; }
.contact-card a.mail:hover { color: #ffb4a6; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--rule); padding: 3rem 0 3.5rem; font-size: .88rem; color: var(--ink-3); }
.site-foot .spectrum { height: 3px; background: var(--spectrum); border-radius: 3px; margin-bottom: 2rem; opacity: .85; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot h4 { font: 600 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); margin: 0 0 .8rem; }
.site-foot p { margin: 0 0 .6rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .45rem; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- small screens ---------- */
@media (max-width: 520px) {
  .brand > span { font-size: .9rem; line-height: 1.2; }
  .brand small { font-size: .6rem; }
  .status-pill { border-radius: 12px; line-height: 1.35; }
  .cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .receipt .row { flex-direction: column; gap: 0; }
  .receipt .v { text-align: left; }
  .right p { padding-left: 1.1rem; }
}
/* ---------- goals (8-step pastel rainbow spectrum) ---------- */
.goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.goal { --goal-color: var(--ink-3); display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.8rem 2rem; position: relative; overflow: hidden; }
.goal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--goal-color, var(--spectrum)); opacity: .75; transition: opacity .3s, width .2s; }
.goal:hover::before { opacity: 1; width: 6px; }
.g-num { font: 600 clamp(2.6rem, 6vw, 3.8rem)/1 var(--serif); color: var(--goal-color, var(--ink-3)); letter-spacing: -.03em; }
.goal:nth-child(1) { --goal-color: #d45b53; }
.goal:nth-child(2) { --goal-color: #db7c43; }
.goal:nth-child(3) { --goal-color: #c69832; }
.goal:nth-child(4) { --goal-color: #2f9966; }
.goal:nth-child(5) { --goal-color: #258d91; }
.goal:nth-child(6) { --goal-color: #3477b8; }
.goal:nth-child(7) { --goal-color: #5a67c9; }
.goal:nth-child(8) { --goal-color: #8759bd; }
.goal:nth-child(1) .g-num,
.goal:nth-child(2) .g-num,
.goal:nth-child(3) .g-num,
.goal:nth-child(4) .g-num,
.goal:nth-child(5) .g-num,
.goal:nth-child(6) .g-num,
.goal:nth-child(7) .g-num,
.goal:nth-child(8) .g-num { color: var(--goal-color); }
@media (prefers-color-scheme: dark) {
  .goal:nth-child(1) { --goal-color: #f4978e; }
  .goal:nth-child(2) { --goal-color: #f8b282; }
  .goal:nth-child(3) { --goal-color: #f6d285; }
  .goal:nth-child(4) { --goal-color: #8fd6a8; }
  .goal:nth-child(5) { --goal-color: #7edbd5; }
  .goal:nth-child(6) { --goal-color: #8cbbf7; }
  .goal:nth-child(7) { --goal-color: #a9b0fa; }
  .goal:nth-child(8) { --goal-color: #cca1f8; }
}
.g-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .8rem; }
.g-body p { color: var(--ink-2); max-width: 52rem; }
.g-body ul { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; }
.g-body li { font-size: .9rem; color: var(--ink-2); line-height: 1.45; padding: .75rem .9rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
@media (max-width: 700px) { .goal { grid-template-columns: 1fr; gap: .4rem; padding: 1.4rem 1.2rem; } }

/* ---------- lines we hold ---------- */
.lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
@media (max-width: 860px) { .lines { grid-template-columns: 1fr; } }
.lines div { padding: 1.4rem 1.4rem 1.4rem 0; border-bottom: 1px solid var(--rule); }
.lines b { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin-bottom: .35rem; }
.lines span { color: var(--ink-2); font-size: .95rem; }
/* related organizations */
.orgs b a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.orgs b a:hover { text-decoration-color: currentColor; }

/* signals: the oversight gap chart */
/* risk explorer: assumptions in, odds and toll out */
.risk-lab { --risk: .45; --safe: .2; --doom: .5; margin: 0 0 2.4rem; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1rem, 3vw, 2.2rem); display: grid; gap: 1.8rem; box-shadow: 0 30px 60px -45px rgba(0,0,0,.35); }
.rl-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.2rem; }
.rl-slider label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 600; }
.rl-slider label b { font: 600 .78rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rl-slider.danger label b { color: var(--accent); } .rl-slider.good label b { color: var(--ok); }
.rl-slider p { margin: .45rem 0 0; font-size: .84rem; color: var(--ink-3); }
.rl-slider.danger { --c: var(--accent); --v: var(--risk); } .rl-slider.good { --c: var(--ok); --v: var(--safe); }
.rl-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.2rem; background: transparent; margin: .2rem 0 0; cursor: pointer; }
.rl-slider input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--c) 0 calc(var(--v) * 100%), var(--rule) calc(var(--v) * 100%)); }
.rl-slider input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--rule); }
.rl-slider input[type=range]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--c); }
.rl-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: var(--card); border: 3px solid var(--c); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.rl-slider input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 3px solid var(--c); }
.rl-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font: 600 .78rem/1 var(--mono); color: var(--ink-3); }
.rl-presets button { font: inherit; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: .5rem .8rem; cursor: pointer; }
.rl-presets button:hover { border-color: var(--ink-3); color: var(--ink); }

.rl-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 2rem; align-items: start; }
.rl-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; margin: .8rem 0 .2rem; }
.rl-big b { font: 600 clamp(3.2rem, 7vw, 4.6rem)/1 var(--serif); color: color-mix(in oklab, var(--accent) calc(var(--doom, .5) * 100%), var(--ok)); font-variant-numeric: tabular-nums; transition: color .3s; }
.rl-big span { font: 600 .95rem/1.2 var(--mono); color: var(--ink-2); }
.rl-analogy { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink-2); margin: .4rem 0 1.2rem; min-height: 2.6em; }
.rl-scale { position: relative; padding-top: 1.4rem; }
.rl-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 30%, transparent), color-mix(in srgb, var(--gold) 30%, transparent), color-mix(in srgb, var(--accent) 30%, transparent)); overflow: hidden; }
.rl-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--ok), var(--gold), var(--accent)); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.rl-mark { position: absolute; top: .2rem; height: 2.2rem; width: 0; border-left: 2px dashed var(--ink-2); }
.rl-mark em { position: absolute; top: -.1rem; left: .35rem; font: 700 .7rem/1 var(--mono); font-style: normal; color: var(--ink-2); }
.rl-ticks { display: flex; justify-content: space-between; margin-top: .4rem; font: 600 .68rem/1 var(--mono); color: var(--ink-3); }
.rl-ref { font-size: .8rem; color: var(--ink-3); margin: 1rem 0 0; line-height: 1.5; }
.rl-ref a, .rl-how a, .rl-src a { color: inherit; }

.rl-map-fig { margin: 0; }
.rl-map-fig canvas { display: block; width: 100%; }
.rl-map-fig figcaption p { font-size: .8rem; color: var(--ink-3); margin: .6rem 0 0; }
.rl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.rl-stats div { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; }
.rl-stats b { font: 600 1.6rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.rl-stats small { grid-column: 2; font-size: .8rem; color: var(--ink-3); }
.sw { width: .8rem; height: .8rem; border-radius: 50%; grid-row: span 2; margin-top: .45rem; }
.sw.r { background: var(--accent); } .sw.y { background: var(--gold); }

.rl-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.rl-col h3 { font-size: 1.15rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .6rem; border-bottom: 3px solid var(--accent); margin-bottom: .4rem; }
.rl-col.good h3 { border-color: var(--ok); }
.rl-sub { margin: 0 0 .3rem; font: 600 .68rem/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
.rl-col h3 span { font: 600 .75rem/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.rl-list { list-style: none; margin: 0; padding: 0; }
.rl-item { border-bottom: 1px solid var(--rule); transition: opacity .2s, background .2s; }
.rl-item.enter { animation: rl-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rl-in { from { opacity: 0; transform: translateY(-6px); background: color-mix(in srgb, var(--gold) 18%, transparent); } }
.rl-row { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "n t p" "b b b"; gap: .3rem .7rem; padding: .6rem .3rem; align-items: center; }
.rl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.rl-name { grid-area: n; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.rl-tag { grid-area: t; font: 600 .62rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 99px; padding: .28rem .45rem; white-space: nowrap; }
.rl-tag.cin { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--rule)); }
.rl-p { grid-area: p; font: 600 .8rem/1 var(--mono); color: var(--accent); min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.safe .rl-p { color: var(--ok); }
.rl-bar { grid-area: b; height: 4px; border-radius: 99px; background: var(--rule); position: relative; overflow: hidden; }
.rl-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.rl-bar .y { background: var(--gold); } .rl-bar .r { background: var(--accent); }
.rl-detail { padding: 0 .3rem .8rem; font-size: .86rem; color: var(--ink-2); }
.rl-detail p { margin: .3rem 0; }
.rl-if b.y { color: color-mix(in srgb, var(--gold) 75%, var(--ink)); } .rl-if b.r { color: var(--accent); }
.rl-src { font-size: .8rem; color: var(--ink-3); }
.risk-lab.linking .rl-item:not(.lit):not(.linked) { opacity: .38; }
.rl-item.linked { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.rl-item.risk.lit { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rl-hint { margin: -.8rem 0 0; font-size: .8rem; color: var(--ink-3); }
.rl-how { border-top: 1px solid var(--rule); padding-top: 1rem; font-size: .88rem; color: var(--ink-2); }
.rl-how summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.rl-how p { max-width: 62rem; }
@media (max-width: 900px) { .rl-main, .rl-controls, .rl-lists { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .rl-stats { grid-template-columns: 1fr; } .rl-tag { display: none; } .rl-row { grid-template-columns: 1fr auto; grid-template-areas: "n p" "b b"; } }
@media (prefers-reduced-motion: reduce) { .rl-item.enter { animation: none; } .rl-track i { transition: none; } }
.more { margin-top: 1.5rem; font-weight: 600; }
.more a { color: var(--accent); }

/* ---------- notes (article pages) ---------- */
.wrap-narrow { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }
.note { padding: clamp(6rem, 12vw, 8rem) 0 4rem; }
.note-head { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.note-head h1 { font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.1; margin: 0; letter-spacing: -.01em; }
.note .back { font: 600 .85rem var(--mono); color: var(--ink-3); text-decoration: none; }
.note .back:hover { color: var(--accent); }
.note .meta { font: 500 .8rem var(--mono); color: var(--ink-3); margin: 0; }
.note-body { font-size: 1.08rem; line-height: 1.75; }
.note-body h2 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.25; margin: 2.6rem 0 .8rem; }
.note-body h3 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }
.note-body p, .note-body ul, .note-body ol { margin: 0 0 1.1rem; }
.note-body li + li { margin-top: .35rem; }
.note-body blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--accent); font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.callout { margin: 1.8rem 0; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--ok); }
.callout > b { display: block; font: 700 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ok); margin-bottom: .4rem; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout.spec { border-left-color: var(--gold); } .callout.spec > b { color: var(--gold); }
.callout.risk { border-left-color: var(--accent); } .callout.risk > b { color: var(--accent); }
.diagram { margin: 2rem 0; padding: 1.2rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.diagram svg { width: 100%; height: auto; font: 600 13px var(--mono); }
.diagram figcaption { margin-top: .7rem; font-size: .85rem; color: var(--ink-3); }
.diagram .d-ink { stroke: var(--ink); fill: none; } .diagram .d-ok { stroke: var(--ok); fill: none; }
.diagram .d-bad { stroke: var(--accent); fill: none; } .diagram .d-muted { stroke: var(--ink-3); fill: none; }
.diagram .d-fill { fill: var(--paper-2); stroke: var(--rule); } .diagram .d-box { fill: var(--card); stroke: var(--ink); }
.diagram text:not([fill]) { fill: var(--ink-2); } .diagram text { stroke: none; } .diagram text.d-ok { fill: var(--ok); } .diagram text.d-bad { fill: var(--accent); } .diagram text.d-ink { fill: var(--ink); }
.tbl { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.tbl th, .tbl td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl th { font: 700 .75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.note-foot { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.note-foot h2 { font-family: var(--serif); font-size: 1.3rem; }
.note-links { list-style: none; padding: 0; display: grid; gap: .6rem; }
.note-links a { font-weight: 600; }
.note-contact { color: var(--ink-3); font-size: .9rem; }
/* notes index */
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; min-width: 0; }
@media (max-width: 900px) { .notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .notes-grid { grid-template-columns: minmax(0, 1fr); } }
.note-card { display: grid; gap: .5rem; align-content: start; padding: 1.3rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; transition: border-color .2s, transform .2s; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.note-card:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; }
.note-card .k { font: 700 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.note-card h3 { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; margin: 0; overflow-wrap: anywhere; word-break: break-word; }
.note-card p { margin: 0; font-size: .93rem; color: var(--ink-2); overflow-wrap: anywhere; word-break: break-word; }

.g-more { margin: .8rem 0 0; font-size: .9rem; font-weight: 600; }
.g-more a { color: var(--accent); }

/* ---------- the first warning shot: a dated, sourced timeline ---------- */
.warning-shot { margin-top: 1rem; }
.ws-head h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.2; max-width: 46rem; margin: .9rem 0 .6rem; }
.ws-head p { color: var(--ink-2); max-width: 42rem; margin: 0 0 1.6rem; }
.ws-line { list-style: none; margin: 0; padding: 0 0 0 1.6rem; position: relative; display: grid; gap: .9rem; }
.ws-line::before { content: ""; position: absolute; left: .45rem; top: .4rem; bottom: .4rem; width: 2px; background: linear-gradient(var(--rule), var(--accent) 45%, var(--accent)); border-radius: 2px; }
.ws-line li { position: relative; display: grid; grid-template-columns: 8.5rem 1fr; gap: .2rem 1.2rem; padding: .9rem 1.1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; }
.ws-line li::before { content: ""; position: absolute; left: -1.5rem; top: 1.15rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--ink-3); }
.ws-line li.t-res::before { border-color: var(--ok); }
.ws-line li.t-pol::before { border-color: var(--gold); }
.ws-line li.t-inc::before { border-color: var(--accent); background: var(--accent); }
.ws-line li.big { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.ws-line li.big::before { width: .95rem; height: .95rem; left: -1.6rem; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.ws-line time { grid-row: span 3; font: 700 .78rem/1.3 var(--mono); color: var(--ink); }
.ws-tag { font: 600 .62rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.t-res .ws-tag { color: var(--ok); } .t-inc .ws-tag { color: var(--accent); } .t-pol .ws-tag { color: color-mix(in srgb, var(--gold) 80%, var(--ink)); }
.ws-line p { margin: 0; font-size: .93rem; color: var(--ink-2); line-height: 1.5; }
.ws-line li > a, .ws-src { font-size: .78rem; color: var(--ink-3); } .ws-src a { color: inherit; }
.ws-view { margin-top: 1.6rem; padding: 1.3rem 1.5rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--accent); }
.ws-view b { display: block; font: 700 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .4rem; }
.ws-view p { margin: 0 0 .8rem; color: var(--ink-2); max-width: 60rem; }
.ws-view a { font-weight: 600; color: var(--accent); }
@media (max-width: 640px) { .ws-line li { grid-template-columns: 1fr; } .ws-line time { grid-row: auto; } }
.rl-presets button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rl-presets button.hot::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); margin-right: .45rem; vertical-align: .05em; }

/* ---------- the floor: nineteen commitments in six themes ---------- */
.floor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 3rem; }
@media (max-width: 960px) { .floor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .floor-grid { grid-template-columns: 1fr; } }
.floor-card { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 0; align-self: start; transition: border-color .2s; }
.floor-card[open] { border-color: color-mix(in srgb, var(--ok) 50%, var(--rule)); }
.floor-card summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; padding: 1.2rem 1.3rem; }
.floor-card summary::-webkit-details-marker { display: none; }
.floor-card summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
.fc-n { grid-row: span 2; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem/1 var(--mono); color: var(--ok); border: 2px solid var(--ok); }
.floor-card summary b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.fc-s { font-size: .88rem; color: var(--ink-3); }
.floor-card summary::after { content: "+"; grid-column: 2; font: 600 .75rem/1 var(--mono); color: var(--ink-3); margin-top: .3rem; }
.floor-card[open] summary::after { content: "\2212"; }
.floor-card ul { margin: 0; padding: 0 1.3rem 1.2rem 4.5rem; display: grid; gap: .55rem; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
.floor-card li::marker { color: var(--ok); }

/* ---------- how we build: the principles wheel ---------- */
.principles { background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2.2rem); }
.pr-head h3 { font-size: 1.5rem; }
.pr-head p { color: var(--ink-2); max-width: 46rem; margin: .5rem 0 0; }
.pr-flag { display: inline-block; font: 600 .62rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); border: 1px dashed var(--gold); border-radius: 99px; padding: .25rem .45rem; vertical-align: middle; }
.pr-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: 1.4rem; }
@media (min-width: 861px) { .pr-wheel { position: sticky; top: 5.2rem; } }
@media (max-width: 860px) { .pr-stage { grid-template-columns: 1fr; } }
.pr-wheel svg { width: 100%; max-width: 520px; display: block; margin: 0 auto; overflow: visible; }
.pr-guide { fill: none; stroke: var(--rule); stroke-dasharray: 2 5; }
.pr-band { fill: color-mix(in srgb, var(--c) 14%, transparent); stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 1; cursor: pointer; transition: fill .25s, opacity .25s; }
.pr-seg:hover .pr-band, .pr-seg.on .pr-band { fill: color-mix(in srgb, var(--c) 26%, transparent); }
.pr-lab { font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--c); pointer-events: none; }
.pr-dot { fill: var(--c); stroke: var(--card); stroke-width: 2.5; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.pr-dot.flag { fill: var(--card); stroke: var(--c); stroke-dasharray: 3 2; }
.pr-dot:hover, .pr-dot.sel { transform: scale(1.45); }
.pr-dot.sel { stroke: var(--ink); }
.pr-wheel.pre .pr-dot { opacity: 0; }
.pr-wheel.in .pr-dot { animation: pr-pop .5s cubic-bezier(.2,.9,.3,1.4) both; animation-delay: calc(var(--i) * 25ms); }
@keyframes pr-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.pr-wheel.in .pr-dot.sel { transform: scale(1.45); }
svg.focus .pr-seg:not(.on) { opacity: .3; }
.pr-core { cursor: pointer; }
.pr-core-bg { fill: var(--ink); }
.pr-core-ring { fill: none; stroke: var(--ok); stroke-width: 2; stroke-dasharray: 4 4; animation: pr-spin 40s linear infinite; transform-origin: 200px 200px; }
@keyframes pr-spin { to { transform: rotate(360deg); } }
.pr-core-n { font: 600 34px var(--serif); fill: var(--paper); }
.pr-core-t { font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: color-mix(in srgb, var(--paper) 70%, transparent); }
.pr-panel { min-height: 31rem; display: flex; flex-direction: column; }
.pr-cat { font: 700 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pr-panel h4 { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600; line-height: 1.2; margin: .5rem 0 .45rem; min-height: 2.4em; }
.pr-panel > p { color: var(--ink-2); margin: 0 0 .9rem; min-height: 4.8em; }
.pr-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pr-pick button { all: unset; cursor: pointer; font-size: .92rem; color: var(--ink); border-bottom: 1px dotted var(--ink-3); }
.pr-pick button:hover, .pr-pick button:focus-visible { color: var(--accent); border-color: var(--accent); }
.pr-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.pr-legend button { font: 600 .74rem/1 var(--sans); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: .45rem .7rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.pr-legend button i { width: .6rem; height: .6rem; border-radius: 50%; }
.pr-legend button small { color: var(--ink-3); font-family: var(--mono); }
.pr-legend button[aria-pressed="true"] { border-color: var(--ink-3); color: var(--ink); }
.pr-all { margin-top: 1.6rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.pr-all summary { cursor: pointer; font-weight: 600; }
.pr-list { columns: 2 22rem; column-gap: 2.4rem; margin-top: 1rem; }
.pr-list section { break-inside: avoid; margin-bottom: 1.2rem; padding: 0; border: 0; }
.pr-list h5 { font: 700 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .4rem; }
.pr-list ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .88rem; color: var(--ink-2); }
.pr-list li[data-flag]::after { content: " proposal"; font: 600 .6rem/1 var(--mono); text-transform: uppercase; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .pr-wheel.pre .pr-dot { opacity: 1; } .pr-wheel .pr-dot { animation: none !important; } .pr-core-ring { animation: none; } }

/* ---------- the receipt, in a dialog ---------- */
.js-only { display: list-item; } .no-js .js-only { display: none; }
.link-btn { all: unset; cursor: pointer; color: inherit; border-bottom: 1px dotted currentColor; }
.link-btn:hover, .link-btn:focus-visible { color: var(--accent); }
.receipt-dlg { --paper: var(--night-ink); background: var(--night); color: var(--night-ink); border: 0; border-radius: 20px; padding: 2rem; width: min(34rem, calc(100vw - 2rem)); box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }
.receipt-dlg::backdrop { background: rgba(10, 11, 14, .55); backdrop-filter: blur(3px); }
.receipt-dlg .label { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.receipt-dlg h2 { color: var(--paper); font-size: 1.8rem; margin: .8rem 0 .6rem; }
.receipt-dlg p { color: color-mix(in srgb, var(--paper) 75%, transparent); font-size: .92rem; }
.dlg-x { position: absolute; top: .8rem; right: 1rem; background: none; border: 0; color: var(--paper); font-size: 1.6rem; cursor: pointer; line-height: 1; }

/* ---------- the boundary, interactive: situations, your call, and a log ---------- */
/* One fixed-height dock holds your decision, an agent's description, or the log, layered,
   so nothing in the hero changes height while the story plays. */
.bd-dock { position: relative; height: 9.8rem; max-width: 920px; margin: .9rem auto 0; border-top: 1px solid var(--rule); overflow: hidden; }
.bd-dock > * { position: absolute; inset: .7rem 0 0 0; }
.bd-dock > [hidden] { display: none; }
.bd-logwrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6rem; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.no-js .bd-scenes, .no-js .bd-dock { display: none; }
@media (max-width: 520px) { .bd-dock { height: 11.5rem; } }
.bd-consent { background: var(--card); border: 1px solid var(--ok); border-radius: 14px; padding: .8rem 1rem .9rem; bottom: auto; animation: bd-up .3s cubic-bezier(.2,.8,.2,1); }
@keyframes bd-up { from { opacity: 0; transform: translateY(-6px); } }
.bd-consent p { margin: .35rem 0 .8rem; font-size: .92rem; line-height: 1.4; color: var(--ink); }
.bd-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.bd-btns button { font: 600 .85rem/1 var(--sans); border-radius: 99px; padding: .6rem 1rem; cursor: pointer; border: 1px solid var(--ok); }
.bd-yes { background: var(--ok); color: var(--card); }
.bd-no { background: transparent; color: var(--ink); border-color: var(--rule) !important; }
.bd-no:hover { border-color: var(--accent) !important; color: var(--accent); }
.bd-k { font: 700 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.bd-consent .bd-k { color: var(--ok); }
.bd-scenes { display: flex; flex-wrap: wrap; gap: .45rem; max-width: 980px; margin: 1rem auto 0; justify-content: center; align-content: flex-start; }
.bd-scenes button { font: 600 .76rem/1 var(--mono); color: var(--ink-2); background: var(--card); border: 1px solid var(--rule); border-radius: 99px; padding: .5rem .75rem; cursor: pointer; }
.bd-scenes button:hover { border-color: var(--ink-3); color: var(--ink); }
.bd-scenes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bd-log { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .82rem; color: var(--ink-2); }
.bd-log li { padding-left: 1.3rem; position: relative; line-height: 1.35; animation: bd-in .4s ease; }
.bd-log li::before { position: absolute; left: 0; top: 0; font: 700 .8rem/1.35 var(--mono); }
.bd-log li.bd-ok::before { content: "\2713"; color: var(--ok); }
.bd-log li.bd-no::before { content: "\2715"; color: var(--accent); }
.bd-log li.bd-empty { color: var(--ink-3); padding-left: 0; }
.bd-log b { color: var(--ink); font-weight: 600; }
@keyframes bd-in { from { opacity: 0; transform: translateY(-4px); } }
.bd-detail { display: grid; gap: .3rem; font-size: .86rem; color: var(--ink-2); }
.bd-detail b { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.bd-count { font: 600 .72rem/1.4 var(--mono); color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .bd-consent, .bd-log li { animation: none; } }

/* ---------- power brings visibility ---------- */
.power-vis { margin-top: clamp(3rem, 6vw, 4.5rem); background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2.2rem); }
.pv-head h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.2; max-width: 46rem; margin: .9rem 0 .6rem; }
.pv-head p { color: var(--ink-2); max-width: 46rem; margin: 0; }
.pv-stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "roles roles" "fig panel"; gap: 1.2rem 2rem; margin-top: 1.4rem; align-items: start; }
@media (max-width: 860px) { .pv-stage { grid-template-columns: 1fr; grid-template-areas: "roles" "fig" "panel"; } }
.pv-roles { grid-area: roles; display: flex; flex-wrap: wrap; gap: .4rem; }
.pv-roles button { font: 600 .78rem/1 var(--sans); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: .5rem .8rem; cursor: pointer; }
.pv-roles button:hover { border-color: var(--ink-3); color: var(--ink); }
.pv-roles button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pv-figure { grid-area: fig; position: sticky; top: 5.5rem; }
.pv-figure svg { width: 100%; display: block; overflow: visible; }
.pv-stair { fill: color-mix(in srgb, var(--ink-3) 10%, transparent); stroke: var(--rule); }
.pv-stair-on { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 1.5; }
#pv-clip rect { transition: width .5s cubic-bezier(.2,.8,.2,1); }
.pv-tlab { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-3); }
.pv-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.pv-tick { font: 600 10.5px var(--mono); fill: var(--ink-3); }
.pv-dot { fill: var(--card); stroke: var(--ink-3); stroke-width: 2; cursor: pointer; }
.pv-dot.on { fill: var(--accent); stroke: var(--accent); }
.pv-cursor { stroke: var(--accent); stroke-dasharray: 3 4; transition: all .5s cubic-bezier(.2,.8,.2,1); }
.pv-you { fill: var(--ink); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.pv-ring { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0; transition: opacity .3s; }
.pv-ring.on { opacity: .75; }
.pv-panel { grid-area: panel; }
.pv-reach { font: 700 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pv-panel h4 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; margin: .5rem 0 .8rem; }
.pv-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pv-tiers li { display: grid; gap: .1rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--rule); font-size: .84rem; color: var(--ink-3); opacity: .45; transition: opacity .3s, border-color .3s, background .3s; }
.pv-tiers li b { font-size: .86rem; color: var(--ink-2); }
.pv-tiers li.on { opacity: 1; color: var(--ink-2); }
.pv-tiers li.now { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pv-ask { margin: .8rem 0 0; font-size: .86rem; color: var(--ink-2); border-left: 3px solid var(--ok); padding-left: .7rem; }
.pv-private { margin: .9rem 0 0; font-size: .86rem; color: var(--ink-2); padding: .6rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--ok) 9%, transparent); }
.pv-private b { color: var(--ok); }
.pv-note { font-size: .82rem; color: var(--ink-3); margin: 1.2rem 0 0; max-width: 52rem; }
.pv-thesis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
@media (max-width: 860px) { .pv-thesis { grid-template-columns: 1fr; } }
.pv-thesis b { font-family: var(--serif); font-size: 1.1rem; }
.pv-thesis p { font-size: .9rem; color: var(--ink-2); margin: .4rem 0 0; }

/* ---------- the hardware this needs ---------- */
.hw { margin-top: clamp(3rem, 6vw, 4.5rem); background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2.2rem); }
.hw-head h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.2; max-width: 46rem; margin: .9rem 0 .6rem; }
.hw-head p { color: var(--ink-2); max-width: 50rem; margin: 0; }
.hw-stage { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; margin-top: 1.6rem; align-items: center; }
@media (max-width: 860px) { .hw-stage { grid-template-columns: 1fr; } }
.hw-chart svg { width: 100%; display: block; overflow: visible; }
.hw-goal { fill: color-mix(in srgb, var(--ok) 10%, transparent); stroke: var(--ok); stroke-dasharray: 5 4; }
.hw-goal-t { font: 700 10.5px var(--mono); letter-spacing: .1em; fill: var(--ok); }
.hw-lane { stroke: var(--rule); stroke-width: 1.5; }
.hw-lane.now { stroke: var(--ink-3); }
.hw-rlab { font: 700 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; fill: var(--ink-3); }
.hw-rlab.now { fill: var(--ink); }
.hw-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.hw-arrow { fill: var(--ink-3); }
.hw-tick { font: 600 10px var(--mono); fill: var(--ink-3); }
.hw-node { cursor: pointer; }
.hw-node circle { stroke-width: 2.5; transition: r .2s; }
.hw-node.r0 circle { fill: var(--ink); stroke: var(--ink); }
.hw-node.r1 circle { fill: var(--card); stroke: var(--gold); }
.hw-node.r2 circle { fill: var(--card); stroke: var(--ink-3); stroke-dasharray: 3 2; }
.hw-node:hover circle, .hw-node.sel circle { r: 12; }
.hw-node.sel circle { stroke: var(--accent); }
.hw-num { font: 700 10px var(--mono); pointer-events: none; fill: var(--ink); }
.hw-node.r0 .hw-num { fill: var(--card); }
.hw-key { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; }
@media (max-width: 520px) { .hw-key { grid-template-columns: 1fr; } }
.hw-key button { all: unset; cursor: pointer; display: flex; gap: .5rem; align-items: center; font-size: .82rem; color: var(--ink-2); padding: .15rem 0; }
.hw-key button:hover, .hw-key button[aria-pressed="true"] { color: var(--ink); }
.hw-key button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.hw-key i { font: 700 .66rem/1 var(--mono); font-style: normal; width: 1.35rem; height: 1.35rem; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink-3); }
.hw-key .r0 i { background: var(--ink); color: var(--card); border-color: var(--ink); }
.hw-key .r1 i { border-color: var(--gold); }
.hw-key .r2 i { border-style: dashed; }
.hw-key button[aria-pressed="true"] i { border-color: var(--accent); }
.hw-row { font: 700 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hw-row.r0 { color: var(--ink); } .hw-row.r1 { color: color-mix(in srgb, var(--gold) 80%, var(--ink)); }
.hw-panel h4 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; margin: .5rem 0 .5rem; }
.hw-panel p { color: var(--ink-2); font-size: .93rem; margin: 0; }
.hw-src { margin-top: .7rem !important; font-size: .8rem !important; color: var(--ink-3) !important; }
.hw-src a { color: inherit; }
.hw-list.hw-built { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hw-list:not(.hw-built) { margin: 1.4rem 0 0; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: .9rem; color: var(--ink-2); }
.hw-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.6rem; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
@media (max-width: 960px) { .hw-goals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hw-goals { grid-template-columns: 1fr; } }
.hw-goals b { font-family: var(--serif); font-size: 1.05rem; }
.hw-goals p { font-size: .88rem; color: var(--ink-2); margin: .35rem 0 0; }
@media (prefers-reduced-motion: reduce) { #pv-clip rect, .pv-cursor, .pv-you { transition: none; } }

/* ---------- many minds, one body ---------- */
.minds { margin-top: clamp(3rem, 6vw, 4.5rem); background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2.2rem); }
.mn-head h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.2; max-width: 48rem; margin: .9rem 0 .6rem; }
.mn-head p { color: var(--ink-2); max-width: 48rem; margin: 0; }
.mn-modes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; }
.mn-modes button { font: 600 .8rem/1 var(--sans); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: .55rem .9rem; cursor: pointer; }
.mn-modes button:hover { border-color: var(--ink-3); color: var(--ink); }
.mn-modes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mn-stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; margin-top: 1.2rem; align-items: center; }
@media (max-width: 860px) { .mn-stage { grid-template-columns: 1fr; } }
.mn-fig svg { width: 100%; display: block; overflow: visible; }
.mn-left, .mn-right, .mn-arrow { transition: opacity .4s; }
#mn-svg[data-mode="0"] .mn-right, #mn-svg[data-mode="1"] .mn-left { opacity: .32; }
#mn-svg[data-mode="0"] .mn-arrow { opacity: .4; }
.mn-skin { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: color-mix(in srgb, var(--accent) 45%, var(--rule)); stroke-width: 1.5; stroke-dasharray: 2 5; }
.mn-skin.net { fill: color-mix(in srgb, var(--ok) 6%, transparent); stroke: color-mix(in srgb, var(--ok) 50%, var(--rule)); }
.mn-cap { font: 700 10.5px var(--mono); letter-spacing: .1em; fill: var(--ink-3); }
.mn-gap { stroke: color-mix(in srgb, var(--accent) 55%, var(--rule)); stroke-width: 2; stroke-dasharray: 3 5; animation: mn-flow 1.6s linear infinite; transition: opacity .4s; }
.mn-gap.cut { opacity: .08; }
.mn-cell { fill: color-mix(in srgb, var(--accent) 20%, var(--card)); stroke: var(--accent); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: mn-breathe 3.2s ease-in-out infinite; animation-delay: var(--d); transition: fill .4s, transform .5s; }
.mn-cell.bad { fill: var(--accent); stroke: var(--ink); animation: none; transform: translate(16px, 22px); }
.mn-shrink { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0; transform: translate(16px, 22px); transition: opacity .4s; }
.mn-shrink.on { opacity: 1; }
.mn-eng { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; opacity: 0; transition: opacity .4s; }
.mn-eng.on { opacity: 1; }
.mn-chan { stroke: color-mix(in srgb, var(--ok) 60%, var(--rule)); stroke-width: 2; stroke-dasharray: 2 6; animation: mn-flow 2.2s linear infinite; transition: stroke .3s; }
.mn-chan.alert { stroke: var(--gold); }
.mn-orbit { fill: none; stroke: color-mix(in srgb, var(--ok) 55%, transparent); stroke-width: 1.2; }
.mn-agent { fill: var(--ok); transform-box: fill-box; transform-origin: center; transition: fill .3s, transform .5s; }
.mn-agent.bad { fill: var(--accent); transform: translate(16px, -16px) scale(2.2); }
.mn-you { fill: var(--ink); }
.mn-aug { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; transition: opacity .4s; transition-delay: calc(var(--i, 0) * 70ms); }
.mn-person.aug .mn-aug { opacity: 1; }
.mn-person.watched .mn-orbit { stroke: var(--gold); stroke-dasharray: 3 2; }
.mn-arc { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.mn-head-ar { fill: var(--ink-2); }
@keyframes mn-flow { to { stroke-dashoffset: -16; } }
@keyframes mn-breathe { 50% { transform: scale(1.08); } }
.mn-pair { padding: .8rem 1rem; border-radius: 12px; margin-bottom: .6rem; }
.mn-pair span { font: 700 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mn-pair p { margin: .4rem 0 0; font-size: .92rem; color: var(--ink-2); min-height: 4.2em; }
.mn-bio { background: color-mix(in srgb, var(--accent) 7%, transparent); } .mn-bio span { color: var(--accent); }
.mn-cin { background: color-mix(in srgb, var(--ok) 8%, transparent); } .mn-cin span { color: var(--ok); }
.mn-diff { font-size: .84rem; color: var(--ink-3); margin: .4rem 0 0; }
.mn-diff b { color: var(--ink-2); }
.mn-note { font-size: .82rem; color: var(--ink-3); margin: 1.2rem 0 0; }
.mn-note a { color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .mn-gap, .mn-chan, .mn-cell { animation: none; } }

/* ---------- starting principles: where they came from, and how they change ---------- */
.origin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "a bar b" "a key b"; gap: .6rem 1.6rem; align-items: center; margin: 0 0 2.6rem; padding: 1.3rem 1.5rem; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; }
.og-step:first-child { grid-area: a; } .og-step:last-child { grid-area: b; }
.og-step { display: grid; max-width: 12rem; }
.og-step b { font: 600 2.4rem/1 var(--serif); }
.og-step span { font-size: .82rem; color: var(--ink-3); margin-top: .3rem; }
.og-bar { grid-area: bar; display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; }
.og-key { grid-area: key; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--ink-2); }
.og-key li { display: flex; align-items: center; gap: .35rem; }
.og-key i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.origin .k { background: var(--ok); } .origin .r { background: color-mix(in srgb, var(--ok) 50%, var(--gold)); } .origin .c { background: var(--gold); } .origin .m { background: var(--ink-3); } .origin .x { background: var(--accent); }
@media (max-width: 760px) { .origin { grid-template-columns: 1fr; grid-template-areas: "a" "bar" "key" "b"; } .og-step { max-width: none; } }
.floor-head h3 { font-size: 1.4rem; }
.floor-head p { color: var(--ink-2); max-width: 46rem; margin: .4rem 0 1.2rem; }
.update-loop { margin-top: 2.6rem; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2.2rem); }
.lp-head h3 { font-size: 1.5rem; }
.lp-head p { color: var(--ink-2); max-width: 46rem; margin: .5rem 0 0; }
.lp-steps { list-style: none; margin: 1.6rem 0 0; padding: 0 0 2.2rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; position: relative; }
.lp-steps::before { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; top: 1.1rem; height: 2px; background: var(--rule); }
.lp-steps::after { content: "\21BA  and again"; position: absolute; left: 0; right: 0; bottom: 0; height: 1.4rem; border: 2px dashed var(--rule); border-top: 0; border-radius: 0 0 14px 14px; font: 600 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: flex-end; justify-content: center; padding-bottom: .1rem; }
.lp-steps li { position: relative; display: grid; gap: .35rem; align-content: start; }
.lp-n { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem/1 var(--mono); background: var(--paper); border: 2px solid var(--ok); color: var(--ok); position: relative; z-index: 1; }
.lp-steps b { font-family: var(--serif); font-size: 1.1rem; margin-top: .3rem; }
.lp-steps p { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
@media (max-width: 960px) { .lp-steps { grid-template-columns: 1fr; padding-bottom: 0; } .lp-steps::before { left: 1.05rem; right: auto; top: 1rem; bottom: 1rem; width: 2px; height: auto; } .lp-steps::after { display: none; } .lp-steps li { grid-template-columns: auto 1fr; column-gap: .9rem; } .lp-steps li > b, .lp-steps li > p { grid-column: 2; } .lp-n { grid-row: span 2; } }
.lp-note { font-size: .82rem; color: var(--ink-3); margin: 1.2rem 0 0; }

/* ---------- live alignment trajectory (scripts/trajectory.js) ---------- */
.live-head { margin-top: clamp(3rem, 7vw, 5rem); margin-bottom: 1.4rem; }
.live-head h3 { font: 600 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 var(--serif); margin: 0; }
.live-head p { color: var(--ink-2); margin: 0; max-width: 42rem; }
.live-traj { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.8rem); }
.lt-top { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; margin-bottom: 1.2rem; }
.lt-overall { display: grid; justify-items: center; min-width: 6.5rem; padding: .6rem .9rem; border-radius: 12px; background: var(--paper-2); }
.lt-num { font: 700 2.6rem/1 var(--serif); }
.lt-delta { font: 600 .75rem/1.6 var(--mono); }
.lt-delta.up, .lt-dir.tw { color: var(--ok); }
.lt-delta.down, .lt-dir.aw { color: var(--accent); }
.lt-read b { font-size: 1.05rem; }
.lt-read p { margin: .2rem 0 0; color: var(--ink-3); font-size: .9rem; }
.lt-bars { display: grid; gap: .45rem; min-width: 0; }
.lt-bar { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr 2.2rem; gap: .8rem; align-items: center; font-size: .9rem; min-width: 0; }
.lt-name { min-width: 0; overflow-wrap: anywhere; }
.lt-bar.empty { opacity: .55; }
.lt-track { position: relative; height: .55rem; background: var(--paper-2); border-radius: 99px; overflow: hidden; }
.lt-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--ink-3); opacity: .5; }
.lt-fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.lt-fill.up { background: var(--ok); }
.lt-fill.down { background: var(--accent); }
.lt-val { font: 600 .85rem var(--mono); text-align: right; }
.lt-h { font: 600 .78rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 1.6rem 0 .6rem; }
.lt-sigs { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.lt-sig { border-top: 1px solid var(--rule); padding-top: .8rem; }
.lt-sig-h { display: flex; gap: .6rem; align-items: center; font: 600 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.lt-dir { padding: 1px 7px; border-radius: 99px; border: 1px solid currentColor; }
.lt-dir.mx, .lt-dir.nu { color: var(--gold); }
.lt-title { display: block; font-weight: 600; margin-top: .25rem; }
.lt-src { font-size: .82rem; color: var(--ink-3); }
.lt-sig p { margin: .35rem 0 0; font-size: .92rem; color: var(--ink-2); }
.lt-sig p.lt-imp { color: var(--ink-3); font-style: italic; }
.lt-method, .lt-none { font-size: .82rem; color: var(--ink-3); margin: 1.2rem 0 0; }
.lt-more { display: inline-block; margin-top: .8rem; font-weight: 600; }
.live-traj.full { margin: 1.5rem 0 2.5rem; }
@media (max-width: 560px) {
  .lt-top { grid-template-columns: 1fr; }
  .lt-bar { grid-template-columns: 1fr 2.2rem; }
  .lt-bar .lt-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- hero tabs: who asks for your data / what you need (scripts/network.js) ---------- */
.bd-tabs { display: flex; gap: .35rem; max-width: 720px; margin: 0 auto .9rem; padding: .3rem; border: 1px solid var(--rule); border-radius: 99px; background: var(--card); }
.bd-tabs button { flex: 1; font: 600 .78rem/1 var(--mono); color: var(--ink-2); background: none; border: 0; border-radius: 99px; padding: .6rem .7rem; cursor: pointer; }
.bd-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.bd-tabs button:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.boundary-fig [hidden] { display: none !important; }
.bd-log li.bd-ledger { color: var(--ink); }
.bd-log li.bd-ledger::before { content: "◆ "; color: var(--gold); }
.no-js .bd-tabs { display: none; }


/* ---------- update 2026-10-14: navigation, live strip, futures, new notes ---------- */
html, body { overflow-x: clip; }
.nav { gap: 1.25rem; font-size: .9rem; align-items: center; }
.nav a.nav-net { border: 1px solid var(--rule); border-radius: 99px; padding: .3rem .75rem; color: var(--ink); white-space: nowrap; }
.nav a.nav-net:hover { border-color: var(--ok); }
@media (max-width: 1100px) {
  .menu-btn { display: block; flex-shrink: 0; }
  .site-head .wrap { gap: .75rem; }
  .nav { position: absolute; top: 4rem; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: .5rem 1.25rem 1rem; display: none; }
  .nav.open { display: flex; }
  .nav a { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
  .nav a.nav-net { border: 0; border-radius: 0; padding: .75rem 0; color: var(--ok); font-weight: 600; }
}
@media (max-width: 520px) {
  .site-head .wrap { gap: .5rem; }
  .brand { gap: .5rem; }
}
@media (max-width: 420px) {
  .wrap, .wrap-narrow { width: min(100% - 1.5rem, var(--maxw)); }
  .site-head .wrap { gap: .35rem; }
  .brand { gap: .45rem; }
  .brand img { width: 26px; height: 26px; }
  .brand > span { font-size: .82rem; }
  .brand small { font-size: .56rem; letter-spacing: .05em; }
  .menu-btn { padding: .35rem .75rem; font-size: .84rem; }
  .status-pill { max-width: 100%; white-space: normal; padding: .4rem .7rem; }
  .bd-tabs button { font-size: .7rem; padding: .5rem .45rem; }
}

.live-strip { padding: 1.6rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); }
.ls-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) 2fr; gap: 2rem; align-items: center; }
.ls-intro p { margin: .5rem 0; color: var(--ink-2); }
.ls-intro a { font-weight: 600; }
.ls-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ls-stat b { display: block; font: 700 2rem/1.05 var(--serif); }
.ls-stat span { color: var(--ink-3); font-size: .85rem; }
.ls-upd { grid-column: 1 / -1; margin: 0; color: var(--ink-3); font: 500 .75rem var(--mono); }
@media (max-width: 860px) { .ls-grid { grid-template-columns: 1fr; gap: 1rem; } .ls-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fut-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 960px) { .fut-grid { grid-template-columns: 1fr; } }
.fut-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.3rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.fut-card h3 { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.fut-k { font: 700 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fut-world { margin: 0; color: var(--ink-2); font-size: .95rem; font-style: italic; }
.fut-outs { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .8rem; }
.fut-outs li { border-top: 1px solid var(--rule); padding-top: .7rem; display: grid; gap: .3rem; }
.fut-outs b { font-size: .95rem; }
.fut-outs li > .oc { justify-self: start; }
.fut-odds { display: grid; grid-template-columns: 8.5rem minmax(3rem, 1fr) 2.6rem; gap: .25rem .6rem; align-items: center; font: 500 .74rem var(--mono); color: var(--ink-3); }
.fut-odds b { font: 700 .78rem var(--mono); color: var(--ink); text-align: right; }
.fut-track { display: block; position: relative; height: .45rem; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.fut-track i { display: block; height: 100%; border-radius: 99px; }
.fut-now { background: var(--ink-3); }
.fut-with { background: var(--ok); }
.fut-src { margin: .2rem 0 0; font-size: .82rem; color: var(--ink-3); overflow-wrap: anywhere; }
.fut-more { margin-top: 1.2rem; font-weight: 600; }
@media (max-width: 420px) { .fut-odds { grid-template-columns: 6.8rem minmax(2rem, 1fr) 2.4rem; } }

.oc { display: inline-block; font: 700 .64rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0 .5rem; border-radius: 99px; border: 1px solid currentColor; margin-right: .45rem; vertical-align: .15em; }
.oc.want { color: var(--ok); }
.oc.avoid { color: var(--accent); }
.note-body .outcomes { list-style: none; padding: 0; display: grid; gap: 1rem; }
.note-body .outcomes li { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--card); }
.note-body .outcomes p { margin: .4rem 0 0; }
.note-body .outcomes .oc-ex { color: var(--ink-2); font-size: .98rem; }
.note-body ul.areas li + li { margin-top: .5rem; }

.trust-calc { margin: 2rem 0; padding: 1.2rem 1.3rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.tc-controls { display: grid; gap: .9rem; }
.tc-controls label { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; font-size: .95rem; }
.tc-controls input { grid-column: 1 / -1; width: 100%; accent-color: var(--ok); }
.tc-controls output { font: 700 .95rem var(--mono); }
.tc-out { display: grid; gap: .8rem; margin-top: 1.2rem; }
.tc-out div { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; font-size: .95rem; }
.tc-out b { font: 700 1.3rem var(--mono); }
.tc-bar { grid-column: 1 / -1; display: block; height: .55rem; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.tc-bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .2s; }
.tc-note { margin: 0; color: var(--ink-2); font-size: .95rem; }
.tc-table { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: .9rem; }
.tc-table caption { text-align: left; color: var(--ink-3); font-size: .85rem; margin-bottom: .4rem; }
.tc-table th, .tc-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--rule); text-align: left; }
html:not(.no-js) .tc-table { display: none; }
.trust-calc figcaption { margin-top: 1rem; color: var(--ink-3); font-size: .9rem; }

.rings { margin: 2rem auto; max-width: 22rem; }
.rings svg { width: 100%; height: auto; }
.rings .ring { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.rings .r1 { fill: var(--ok); fill-opacity: .18; stroke: var(--ok); }
.rings text { fill: var(--ink); font: 600 13px var(--sans); }
.rings .rl { fill: var(--ink-2); font: 500 11px var(--sans); }
.rings .rs { fill: var(--ink-3); font: 500 10px var(--mono); }
.rings figcaption { text-align: center; color: var(--ink-3); font-size: .9rem; }

/* updates from the agents */
.ls-grid { grid-template-columns: minmax(14rem, 1fr) 2fr minmax(14rem, 1.2fr); }
@media (max-width: 1100px) { .ls-grid { grid-template-columns: 1fr 2fr; } .ls-latest { grid-column: 1 / -1; } }
@media (max-width: 860px) { .ls-grid { grid-template-columns: 1fr; } }
.ls-h { font: 700 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .5rem; }
.ls-all { display: inline-block; margin-top: .5rem; font-weight: 600; font-size: .9rem; }
.upd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; width: 100%; min-width: 0; }
.upd-list li { display: grid; gap: .2rem; border-top: 1px solid var(--rule); padding-top: .7rem; min-width: 0; width: 100%; }
.upd-list li:first-child { border-top: 0; padding-top: 0; }
.upd-list a, .upd-list b { font-weight: 600; }
.upd-list a, .upd-list b, .upd-list p, .upd-meta { overflow-wrap: anywhere; word-break: break-word; }
.upd-list p { margin: .2rem 0 0; color: var(--ink-2); }
.upd-meta { font: 600 .68rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.upd-list.compact { gap: .55rem; }
.upd-list.compact li { padding-top: .5rem; font-size: .92rem; }
#upd-list { max-width: 46rem; margin-top: 1.5rem; width: 100%; min-width: 0; }

/* ---------- update 2026-10-19: expanded principle cards, everyday life tabs & swarm lock ---------- */
.pr-card-deep { margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); min-height: 13.8rem; display: flex; flex-direction: column; justify-content: flex-start; }
.prc-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .85rem; padding-bottom: .65rem; border-bottom: 1px solid var(--rule); }
.prc-tabs button { font: 600 .72rem/1 var(--mono); color: var(--ink-2); background: var(--card); border: 1px solid var(--rule); border-radius: 99px; padding: .42rem .7rem; cursor: pointer; }
.prc-tabs button:hover { border-color: var(--ink-3); color: var(--ink); }
.prc-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.prc-body { display: grid; gap: .6rem; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.prc-body p { margin: 0; }
.prc-body b { color: var(--ink); }
.prc-crit { padding: .6rem .8rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); border-left: 3px solid var(--accent); }
.prc-steel { padding: .6rem .8rem; border-radius: 10px; background: color-mix(in srgb, var(--ok) 8%, transparent); border-left: 3px solid var(--ok); }
.prc-sub { color: var(--ink-3); }
.prc-links a { font-weight: 600; color: var(--accent); }
.pr-list li:hover { color: var(--ink); }

/* "What this means for your daily life" (#for-you) */
.fy-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.4rem 0 1.2rem; }
.no-js .fy-tabs { display: none; }
.fy-tabs button { font: 600 .84rem/1 var(--sans); color: var(--ink-2); background: var(--card); border: 1px solid var(--rule); border-radius: 99px; padding: .65rem 1.05rem; cursor: pointer; transition: border-color .2s, background .2s; }
.fy-tabs button:hover { border-color: var(--ink-3); color: var(--ink); }
.fy-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fy-panels { display: grid; gap: 1.2rem; }
.fy-card { background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: 1.2rem; }
.fy-card[hidden] { display: none !important; }
.no-js .fy-card[hidden] { display: grid !important; }
.fy-top h3 { font-family: var(--serif); font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin: .35rem 0 .4rem; line-height: 1.2; }
.fy-top p { margin: 0; color: var(--ink-2); max-width: 52rem; }
.fy-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .fy-cols { grid-template-columns: 1fr; } }
.fy-box { padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); display: grid; gap: .4rem; align-content: start; }
.fy-box.trap { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.fy-box.shield { border-left: 4px solid var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--paper)); }
.fy-box.try { border-left: 4px solid var(--gold); }
.fy-k { font: 700 .68rem/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.fy-box.trap .fy-k { color: var(--accent); }
.fy-box.shield .fy-k { color: var(--ok); }
.fy-box p { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.48; }
.fy-box a { font-weight: 600; font-size: .88rem; color: var(--accent); margin-top: .2rem; }

/* "No one person should command an army of AI agents" (#swarm-lock) */
.swarm-lock { margin-top: clamp(3rem, 6vw, 4.5rem); background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2.2rem); }
.sl-head h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.2; max-width: 48rem; margin: .9rem 0 .6rem; }
.sl-head p { color: var(--ink-2); max-width: 50rem; margin: 0; }
.sl-tasks { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.3rem 0 1.2rem; }
.sl-tasks button { font: 600 .78rem/1.2 var(--sans); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: .55rem .9rem; cursor: pointer; }
.sl-tasks button:hover { border-color: var(--ink-3); color: var(--ink); }
.sl-tasks button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sl-stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
@media (max-width: 860px) { .sl-stage { grid-template-columns: 1fr; } }
.sl-meters { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 1.2rem 1.3rem; display: grid; gap: .95rem; }
.sl-slider-row label { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; font-weight: 600; margin-bottom: .35rem; }
.sl-slider-row b { font-family: var(--mono); color: var(--accent); }
.sl-slider-row input { width: 100%; accent-color: var(--accent); }
.sl-meter { display: grid; gap: .3rem; }
.sl-meter-top { display: flex; justify-content: space-between; gap: .6rem; font-size: .84rem; color: var(--ink-2); }
.sl-meter-top b { font-family: var(--mono); color: var(--ink); }
.sl-bar { height: .6rem; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.sl-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--ink); transition: width .25s ease; }
.sl-bar-fill.ok { background: var(--ok); }
.sl-bar-fill.bad { background: var(--accent); }
.sl-meta-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding-top: .5rem; border-top: 1px solid var(--rule); font-size: .83rem; }
@media (max-width: 520px) { .sl-meta-row { grid-template-columns: 1fr; } }
.sl-meta-row span { display: block; font: 700 .66rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.sl-meta-row b { color: var(--ink-2); font-weight: 600; }
.sl-verdict { display: grid; gap: .75rem; }
.sl-badge { display: inline-block; justify-self: start; font: 700 .7rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .25rem .65rem; border-radius: 99px; }
.sl-badge.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); border: 1px solid var(--ok); }
.sl-badge.bad { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border: 1px solid var(--accent); }
.sl-what { margin: 0; font-size: .95rem; color: var(--ink); font-weight: 600; }
.sl-cmp { display: grid; gap: .6rem; }
.sl-cmp > div { padding: .75rem .9rem; border-radius: 12px; font-size: .88rem; line-height: 1.45; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); }
.sl-cmp > div.bad { border-left: 3px solid var(--accent); }
.sl-cmp > div.ok { border-left: 3px solid var(--ok); }
.sl-cmp span { display: block; font: 700 .66rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.sl-cmp .bad span { color: var(--accent); }
.sl-cmp .ok span { color: var(--ok); }
.sl-audiences { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
@media (max-width: 960px) { .sl-audiences { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sl-audiences { grid-template-columns: 1fr; } }
.sl-aud { display: grid; gap: .3rem; align-content: start; }
.sl-aud span { font: 700 .66rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.sl-aud b { font-family: var(--serif); font-size: 1.05rem; }
.sl-aud p { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }


/* ---------- update 2026-10-20: 550-principle open library & 30-persona society explorer ---------- */
.lib-controls { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.1rem 1.25rem; margin-bottom: 1.2rem; display: grid; gap: .8rem; }
.lib-search-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: .6rem; }
@media (max-width: 820px) { .lib-search-row { grid-template-columns: 1fr; } }
.lib-search-row input, .lib-search-row select { font: 500 .9rem/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .8rem; width: 100%; }
.lib-Quick { display: flex; flex-wrap: wrap; gap: .38rem; align-items: center; font-size: .8rem; color: var(--ink-3); }
.lib-Quick button { font: 600 .74rem/1.1 var(--sans); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: .42rem .75rem; cursor: pointer; }
.lib-Quick button:hover, .lib-Quick button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lib-count { margin: 0; font: 600 .75rem/1.3 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.lib-grid { display: grid; gap: .65rem; }
.lib-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.lib-card summary { list-style: none; cursor: pointer; padding: .85rem 1.1rem; display: grid; grid-template-columns: 3.6rem 1fr auto; gap: .8rem; align-items: center; }
.lib-card summary::-webkit-details-marker { display: none; }
.lib-num { font: 700 .8rem/1 var(--mono); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: .35rem .5rem; border-radius: 8px; text-align: center; }
.lib-sum-main { display: grid; gap: .18rem; }
.lib-sum-main b { font-family: var(--serif); font-size: 1.08rem; color: var(--ink); }
.lib-cat { font: 600 .68rem/1.2 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.lib-score { font: 700 .78rem/1 var(--mono); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); padding: .3rem .55rem; border-radius: 99px; }
.lib-body { padding: 0 1.15rem 1.1rem 1.15rem; border-top: 1px solid var(--rule); display: grid; gap: .6rem; font-size: .92rem; line-height: 1.5; color: var(--ink-2); padding-top: .85rem; }
.lib-body p { margin: 0; }

/* 30-Persona Society Explorer */
.sim-summary-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
@media (max-width: 860px) { .sim-summary-cards { grid-template-columns: 1fr; } }
.persona-explorer { background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1.1rem, 2.5vw, 1.8rem); display: grid; gap: 1.1rem; }
.pe-layout { display: grid; grid-template-columns: minmax(15rem, .85fr) minmax(0, 2fr); gap: 1.3rem; align-items: start; }
@media (max-width: 900px) { .pe-layout { grid-template-columns: 1fr; } }
.pe-roster { display: grid; gap: .38rem; max-height: 34rem; overflow-y: auto; padding-right: .3rem; }
.pe-item { text-align: left; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: .55rem .75rem; cursor: pointer; display: grid; gap: .12rem; color: var(--ink-2); }
.pe-item:hover { border-color: var(--ink-3); color: var(--ink); }
.pe-item[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pe-item[aria-selected="true"] .pe-id, .pe-item[aria-selected="true"] small { color: color-mix(in srgb, var(--paper) 75%, transparent); }
.pe-id { font: 700 .64rem/1.2 var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: .07em; }
.pe-item b { font-size: .88rem; font-weight: 600; }
.pe-item small { font-size: .76rem; color: var(--ink-3); }
.pe-detail { display: grid; gap: 1.1rem; }
.pe-head h3 { font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 1.65rem); margin: .3rem 0 .25rem; }
.pe-meta { margin: 0; font-size: .86rem; color: var(--ink-3); font-family: var(--(--mono)); }
.pe-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
@media (max-width: 820px) { .pe-bottom { grid-template-columns: 1fr; } }
.pe-5d h4, .pe-pr h4 { font: 700 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 .6rem; }
.pe-vrow { display: grid; grid-template-columns: 1fr auto; gap: .22rem .6rem; font-size: .82rem; margin-bottom: .45rem; }
.pe-vrow .sl-bar { grid-column: 1 / -1; height: .45rem; }
.pe-ptags { display: flex; flex-wrap: wrap; gap: .38rem; }
.pe-ptag { display: inline-block; font: 600 .74rem/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: .32rem .6rem; text-decoration: none; }
.pe-ptag:hover { border-color: var(--accent); color: var(--accent); }
.origin-cta { display: inline-flex; align-items: center; gap: .4rem; font: 600 .84rem/1 var(--sans); color: var(--paper); background: var(--ink); border-radius: 99px; padding: .6rem 1.05rem; text-decoration: none; margin-left: auto; }
.origin-cta:hover { background: var(--accent); color: var(--paper); }

/* ---------- update 2026-10-20b: ever-morphing sensor-to-ledger-to-principles interactive diagram & demo ---------- */
.em-demo { margin-top: 2.2rem; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2.2rem); display: grid; gap: 1.3rem; }
.em-head h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.2; margin: .5rem 0 .5rem; }
.em-head p { color: var(--ink-2); max-width: 54rem; margin: 0; }
.em-bar { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; justify-content: space-between; }
.em-scens { display: flex; flex-wrap: wrap; gap: .38rem; }
.em-scens button, .em-Transport button { font: 600 .76rem/1.15 var(--sans); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: .48rem .85rem; cursor: pointer; }
.em-scens button:hover, .em-Transport button:hover { border-color: var(--ink-3); color: var(--ink); }
.em-scens button[aria-pressed="true"], .em-Transport button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.em-Transport { display: flex; gap: .38rem; align-items: center; }
.em-svg-wrap { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: .9rem 1rem; overflow-x: auto; }
.em-svg { width: 100%; min-width: 680px; height: auto; display: block; }
.em-edge { fill: none; stroke: var(--rule); stroke-width: 2.2; stroke-dasharray: 5 4; }
.em-edge.active { stroke: var(--ok); stroke-width: 3; stroke-dasharray: none; }
.em-edge-return { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-dasharray: 6 4; }
.em-node { cursor: pointer; transition: transform .2s ease; }
.em-node rect { fill: var(--card); stroke: var(--rule); stroke-width: 1.8; rx: 12px; transition: stroke .2s, fill .2s; }
.em-node.on rect { stroke: var(--ok); stroke-width: 2.8; fill: color-mix(in srgb, var(--ok) 11%, var(--card)); }
.em-node.done rect { stroke: color-mix(in srgb, var(--ok) 55%, var(--rule)); }
.em-node-num { font: 700 10px var(--mono); fill: var(--accent); text-transform: uppercase; letter-spacing: .07em; }
.em-node.on .em-node-num { fill: var(--ok); }
.em-node-title { font: 700 12.5px var(--sans); fill: var(--ink); }
.em-node-sub { font: 500 10.5px var(--sans); fill: var(--ink-3); }
.em-stage-spotlight { background: var(--paper); border: 2px solid var(--ok); border-radius: 16px; padding: 1.1rem 1.3rem; display: grid; gap: .5rem; }
.em-stage-spotlight .em-st-k { font: 700 .72rem/1.2 var(--mono); color: var(--ok); text-transform: uppercase; letter-spacing: .08em; }
.em-stage-spotlight h4 { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin: 0; }
.em-stage-spotlight p { margin: 0; font-size: .95rem; color: var(--ink-2); line-height: 1.5; }
.em-pkt { font: 500 .8rem/1.45 var(--mono); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .85rem; overflow-x: auto; }
.em-grid7 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: .8rem; }
.em-card7 { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: .85rem 1rem; display: grid; gap: .35rem; align-content: start; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.em-card7:hover { border-color: var(--ink-3); }
.em-card7.on { border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--paper)); }
.em-card7 span { font: 700 .66rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.em-card7.on span { color: var(--ok); }
.em-card7 b { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); }
.em-card7 p { margin: 0; font-size: .84rem; color: var(--ink-2); line-height: 1.42; }

/* ---- Clean HTML Math Chips, Safeguard Pills & 2x2 Principle Card Layout ---- */
.math-chip {
  display: inline-block;
  font-family: "Cambria Math", "STIX Two Math", Georgia, serif;
  font-size: .95em;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-2));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--rule));
  border-radius: 5px;
  padding: .05rem .38rem;
  margin: 0 .08rem;
  line-height: 1.3;
  white-space: nowrap;
}
.math-chip sub, .math-chip sup { font-size: .76em; }
.pr-chip {
  font-family: var(--mono, monospace);
  font-size: .84em;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .06rem .34rem;
  color: var(--ink);
}
.lib-pill-safe {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  background: color-mix(in srgb, var(--ok) 15%, var(--bg));
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--rule));
  border-radius: 4px;
  padding: .1rem .42rem;
  margin-right: .25rem;
}
.lib-pill-mech {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--rule));
  border-radius: 4px;
  padding: .1rem .42rem;
  margin: .35rem .25rem .15rem 0;
}
.lib-step-num {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-weight: 700;
  font-size: .82em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border-radius: 4px;
  padding: 0 .28rem;
  margin-left: .2rem;
}
.lib-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  margin: .8rem 0 1rem;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.lib-pager-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.lib-pager button, .lib-git-btn {
  padding: .38rem .78rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}
.lib-pager button:hover, .lib-git-btn:hover { border-color: var(--accent); color: var(--accent); }
.lib-pager button:disabled { opacity: .45; cursor: not-allowed; }
.lib-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .65rem .9rem;
  margin-bottom: .9rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: .84rem;
}
.lib-scores-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.lib-sc-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .58rem;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  font-size: .81rem;
}
.lib-sc-pill b { font-family: var(--mono, monospace); color: var(--ok); }
.lib-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}
@media (max-width: 820px) {
  .lib-panels { grid-template-columns: 1fr; }
}
.lib-panel {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: .95rem 1.05rem;
  font-size: .92rem;
  line-height: 1.62;
}
.lib-panel h4 {
  margin: 0 0 .48rem;
  font-size: .8rem;
  font-family: var(--mono, monospace);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
}
.lib-panel.p-claim { border-left: 3px solid var(--ink-2); }
.lib-panel.p-crit { border-left: 3px solid var(--accent); }
.lib-panel.p-Crit h4, .lib-panel.p-crit h4 { color: var(--accent); }
.lib-panel.p-steel { border-left: 3px solid var(--ok); }
.lib-panel.p-steel h4 { color: var(--ok); }
.lib-panel.p-ground { border-left: 3px solid #3b82f6; }
.lib-panel.p-ground h4 { color: #3b82f6; }
.lib-panel p { margin: 0 0 .55rem; }
.lib-panel p:last-child { margin-bottom: 0; }
.lib-why-note {
  margin-top: .65rem;
  padding-top: .55rem;
  border-top: 1px dashed var(--rule);
  font-size: .83rem;
  color: var(--ink-2);
}

/* ---- Interactive Sharded Vector-to-Symbolic Git Merge Test-Net Simulator (.gm-sim) ---- */
.gm-sim {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.8rem 0;
}
.gm-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap: 1.2rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .gm-grid { grid-template-columns: 1fr; }
}
.gm-box {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.15rem;
}
.gm-box h4 {
  margin: 0 0 .55rem;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: var(--mono, monospace);
  color: var(--accent);
}
.gm-shard-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: .6rem 0;
}
.gm-shard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-2);
  font-size: .85rem;
}
.gm-shard-item.sybil { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); }
.gm-formula-box {
  padding: .7rem .9rem;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  margin: .65rem 0;
  font-size: .88rem;
  line-height: 1.55;
}
.gm-diff {
  font-family: var(--mono, monospace);
  font-size: .8rem;
  line-height: 1.55;
  background: #101216;
  color: #e5e7eb;
  border-radius: 8px;
  padding: .9rem 1rem;
  overflow-x: auto;
  margin-top: .65rem;
}
.gm-diff .d-add { color: #34d399; }
.gm-diff .d-mod { color: #60a5fa; }
.gm-diff .d-br  { color: #fbbf24; }
.gm-diff .d-fl  { color: #a78bfa; font-weight: 700; }
.gm-diff .d-rej { color: #f87171; }
.gm-axes-bars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem .85rem;
  margin-top: .65rem;
}
@media (max-width: 640px) {
  .gm-axes-bars { grid-template-columns: 1fr; }
}
.gm-axis-row { font-size: .79rem; }
.gm-axis-top { display: flex; justify-content: space-between; margin-bottom: .15rem; }
.gm-axis-track { height: 7px; background: var(--bg-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); }
.gm-axis-fill { height: 100%; background: var(--ok); transition: width .25s ease; }

/* ---- Scholar & Related Labs Directory (.sch-dir) ---- */
.sch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.sch-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .65rem;
}
.sch-card h3 { margin: .15rem 0 .25rem; font-size: 1.05rem; }
.sch-card p { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.sch-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .35rem;
}
.sch-links a {
  font-family: var(--mono, monospace);
  font-size: .75rem;
  padding: .2rem .5rem;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}
.sch-links a:hover { border-color: var(--accent); color: var(--accent); }


/* Authority envelope demonstration */
.envelope-demo {
  margin: 2rem 0;
  padding: 1.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.envelope-demo h3 {
  margin-top: 0;
  margin-bottom: .4rem;
  font-size: 1.15rem;
}
.envelope-desc {
  font-size: .95rem;
  color: var(--ink-2);
  margin-bottom: 1.2rem;
}
.envelope-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.env-btn {
  padding: .45rem .85rem;
  font: 500 .9rem var(--sans);
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.env-btn:hover {
  border-color: var(--ink-3);
}
.env-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 600;
}
.env-toggle-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  background: var(--paper-2);
  margin-bottom: 1.2rem;
  font-size: .9rem;
}
.env-toggle-btn {
  padding: .35rem .75rem;
  font: 600 .85rem var(--sans);
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.env-toggle-btn:hover {
  border-color: var(--ink-2);
}
.env-panel {
  display: grid;
  gap: .8rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.env-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: .8rem;
  font-size: .9rem;
  align-items: baseline;
}
@media (max-width: 600px) {
  .env-row {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
}
.env-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 600;
}
.env-val {
  color: var(--ink);
}
.env-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: .8rem;
}
.env-badge.ok {
  background: rgba(19, 115, 51, 0.15);
  color: #137333;
  border: 1px solid rgba(19, 115, 51, 0.3);
}
.env-badge.bad {
  background: rgba(197, 34, 31, 0.15);
  color: #c5221f;
  border: 1px solid rgba(197, 34, 31, 0.3);
}
@media (prefers-color-scheme: dark) {
  .env-badge.ok { color: #81c995; }
  .env-badge.bad { color: #f28b82; }
}
.env-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem;
}
.env-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: .85rem;
}
.env-table th, .env-table td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.env-table th {
  color: var(--ink-2);
  font-weight: 600;
}
html.no-js .envelope-scenarios,
html.no-js .env-toggle-wrap,
html.no-js .env-panel {
  display: none !important;
}
html.no-js .env-fallback-table {
  display: block !important;
}
html:not(.no-js) .env-fallback-table {
  display: none;
}
.envelope-demo figcaption {
  margin-top: 1rem;
  color: var(--ink-3);
  font-size: .85rem;
}

/* Discrete memory codebook vs continuous vector search demonstration */
.memory-demo {
  margin: 2rem 0;
  padding: 1.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.memory-demo h3 {
  margin-top: 0;
  margin-bottom: .4rem;
  font-size: 1.15rem;
}
.memory-desc {
  font-size: .95rem;
  color: var(--ink-2);
  margin-bottom: 1.2rem;
}
.memory-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.mem-btn {
  padding: .45rem .85rem;
  font: 500 .9rem var(--sans);
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.mem-btn:hover {
  border-color: var(--ink-3);
}
.mem-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 600;
}
.mem-toggle-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  background: var(--paper-2);
  margin-bottom: 1.2rem;
  font-size: .9rem;
}
.mem-toggle-btn {
  padding: .35rem .75rem;
  font: 600 .85rem var(--sans);
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.mem-toggle-btn:hover {
  border-color: var(--ink-2);
}
.mem-panel {
  display: grid;
  gap: .8rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.mem-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: .8rem;
  font-size: .9rem;
  align-items: baseline;
}
@media (max-width: 600px) {
  .mem-row {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
}
.mem-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 600;
}
.mem-val {
  color: var(--ink);
}
.mem-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: .8rem;
}
.mem-badge.ok {
  background: rgba(19, 115, 51, 0.15);
  color: #137333;
  border: 1px solid rgba(19, 115, 51, 0.3);
}
.mem-badge.bad {
  background: rgba(197, 34, 31, 0.15);
  color: #c5221f;
  border: 1px solid rgba(197, 34, 31, 0.3);
}
@media (prefers-color-scheme: dark) {
  .mem-badge.ok { color: #81c995; }
  .mem-badge.bad { color: #f28b82; }
}
.mem-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem;
}
.mem-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: .85rem;
}
.mem-table th, .mem-table td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.mem-table th {
  color: var(--ink-2);
  font-weight: 600;
}
html.no-js .memory-scenarios,
html.no-js .mem-toggle-wrap,
html.no-js .mem-panel {
  display: none !important;
}
html.no-js .mem-fallback-table {
  display: block !important;
}
html:not(.no-js) .mem-fallback-table {
  display: none;
}
.memory-demo figcaption {
  margin-top: 1rem;
  color: var(--ink-3);
  font-size: .85rem;
}

/* Action Airlock & Task Lifecycle Simulator (#airlock-demo) */
.airlock-demo {
  margin: 2rem 0;
  padding: 1.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.airlock-demo h3 {
  margin-top: 0;
  margin-bottom: .4rem;
  font-size: 1.15rem;
}
.airlock-desc {
  font-size: .95rem;
  color: var(--ink-2);
  margin-bottom: 1.2rem;
}
.airlock-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.airlock-btn {
  padding: .45rem .85rem;
  font: 500 .9rem var(--sans);
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.airlock-btn:hover {
  border-color: var(--ink-3);
}
.airlock-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 600;
}
.airlock-toggle-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  background: var(--paper-2);
  margin-bottom: 1.2rem;
  font-size: .9rem;
}
.airlock-toggle-btn {
  padding: .35rem .75rem;
  font: 600 .85rem var(--sans);
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.airlock-toggle-btn:hover {
  border-color: var(--ink-2);
}
.airlock-panel {
  display: grid;
  gap: .8rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.airlock-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: .8rem;
  font-size: .9rem;
  align-items: baseline;
}
@media (max-width: 600px) {
  .airlock-row {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
}
.airlock-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 600;
}
.airlock-val {
  color: var(--ink);
}
.airlock-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem;
}
.airlock-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: .85rem;
}
.airlock-table th, .airlock-table td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.airlock-table th {
  color: var(--ink-2);
  font-weight: 600;
}
html.no-js .airlock-scenarios,
html.no-js .airlock-toggle-wrap,
html.no-js .airlock-panel {
  display: none !important;
}
html.no-js .airlock-fallback-table {
  display: block !important;
}
html:not(.no-js) .airlock-fallback-table {
  display: none;
}
.airlock-demo figcaption {
  margin-top: 1rem;
  color: var(--ink-3);
  font-size: .85rem;
}

/* v27: note body callout and heading defensive wrapping */
.note-body h2, .note-body h3, .note-body p, .note-body li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- v29: comprehensive mobile responsiveness (desktop untouched) ---------- */
.em-svg-wrap {
  margin-top: 1.2rem;
  padding: 1rem;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 860px) {
  body {
    overflow-x: clip;
  }
  .wrap, .wrap-narrow, .hero-grid, .hero-grid > *,
  .split > *, .involve > *, .ls-grid > *,
  .pe-stage > *, .pr-stage > *, .pv-stage > *,
  .hw-stage > *, .mn-stage > *, .gm-grid > *,
  .gm-box, .lib-card, .callout {
    min-width: 0;
    max-width: 100%;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Prevent sticky figures from overlapping stacked panels in 1-column mobile layout */
  .pv-figure, .pr-wheel, .pe-list {
    position: static;
  }
  /* Release desktop fixed heights on Principles Wheel panel when stacked on mobile */
  .pr-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .pr-card-deep {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  /* Scrollable mobile nav menu with comfortable tap targets */
  .nav.open {
    max-height: calc(100dvh - 3.8rem);
    overflow-y: auto;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .24);
  }
  .nav.open a {
    padding: .5rem .25rem;
  }
  /* Ensure tables and wide formulas scroll or wrap cleanly on mobile */
  .note-body table, .callout table, .gm-box table, table.tbl {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .math-chip {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }
  select, input, textarea {
    max-width: 100%;
    min-width: 0;
  }
  .sch-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 1.8rem 0 1.5rem;
  }
  .status-pill {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: .7rem;
    padding: .4rem .75rem;
    line-height: 1.35;
    border-radius: 16px;
  }
  h1 {
    font-size: clamp(1.95rem, 7.6vw, 2.55rem);
    line-height: 1.08;
    overflow-wrap: break-word;
  }
  .lede {
    font-size: 1.02rem;
  }
  .hero-rule-box {
    padding: .95rem 1.05rem !important;
    font-size: .92rem !important;
    text-align: left;
  }
  .bd-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    padding: .3rem;
    gap: .25rem;
  }
  .bd-tabs button {
    flex: 1 1 auto;
    text-align: center;
    padding: .45rem .65rem;
    font-size: .74rem;
  }
  /* Release absolute-positioned dock height on mobile so consent/details never clip */
  .bd-dock {
    height: auto;
    min-height: 8.5rem;
    overflow: visible;
  }
  .bd-dock > * {
    position: relative;
    inset: auto;
    padding-top: .7rem;
  }
  .bd-dock > [hidden] {
    display: none;
  }
  .bd-logwrap::after {
    display: none;
  }
  #split-frame {
    padding: .75rem !important;
  }
  .gm-sim, .lib-explorer {
    padding: 1rem .95rem;
  }
  .gm-box {
    padding: .85rem .9rem;
  }
  .gm-box > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .gm-shard-item {
    flex-wrap: wrap;
  }
  .honest-list li {
    grid-template-columns: 4.8rem 1fr;
    gap: .6rem;
  }
  .receipt-dlg {
    padding: 1.35rem 1.15rem;
  }
  .receipt .row {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
}

/* ---------- Definitive 3-Pillar Architecture Grid & Substance Engine Badges ---------- */
.arch-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin: 2.2rem 0 2rem;
  text-align: left;
}
@media (max-width: 920px) {
  .arch-pillars { grid-template-columns: 1fr; }
}
.arch-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1.45rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  position: relative;
  box-shadow: 0 8px 24px -18px rgba(20, 20, 19, .18);
  transition: transform .18s ease, border-color .18s ease;
}
.arch-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink-3);
}
.arch-card::before {
  content: "";
  position: absolute;
  top: 0; left: 1.2rem; right: 1.2rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
.arch-card:nth-child(2)::before { background: var(--blue); }
.arch-card:nth-child(3)::before { background: var(--green); }
.arch-k {
  font: 600 .68rem/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.arch-card:nth-child(2) .arch-k { color: var(--blue); }
.arch-card:nth-child(3) .arch-k { color: var(--green); }
.arch-card h3 {
  font-size: 1.15rem;
  line-height: 1.28;
  margin: 0;
}
.arch-card p {
  font-size: .91rem;
  color: var(--ink-2);
  line-height: 1.58;
  margin: 0;
  max-width: none;
}
.arch-links {
  margin-top: auto;
  padding-top: .65rem;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.cite-badge, .blueprint-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font: 500 .7rem/1.2 var(--mono);
  padding: .24rem .52rem;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: .01em;
}
.cite-badge {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink-2);
}
a.cite-badge:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}
.blueprint-badge {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--rule));
  color: var(--accent);
  font-weight: 600;
}
.blueprint-badge:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
}
.ws-takeaway {
  display: block;
  font-size: .86rem;
  color: var(--ink-2);
  margin-top: .25rem;
  line-height: 1.5;
}
.ws-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .4rem;
}
.status-banner {
  margin-top: 2.2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
}
.status-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-top: .9rem;
}
@media (max-width: 860px) {
  .status-cols { grid-template-columns: 1fr; }
}
.status-col {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: .95rem 1.1rem;
}
.status-col .st-tag {
  display: inline-block;
  font: 600 .66rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: .22rem .5rem;
  border-radius: 999px;
  margin-bottom: .45rem;
}
.status-col.st-live .st-tag { background: color-mix(in srgb, var(--green) 15%, var(--paper)); color: var(--green); }
.status-col.st-3m .st-tag { background: color-mix(in srgb, var(--blue) 15%, var(--paper)); color: var(--blue); }
.status-col.st-12m .st-tag { background: color-mix(in srgb, var(--amber) 18%, var(--paper)); color: var(--amber); }
.status-col h4 { font-size: .98rem; margin: 0 0 .35rem; font-family: var(--serif); }
.status-col p { font-size: .85rem; color: var(--ink-2); line-height: 1.52; margin: 0; }

/* Hero full-width 3-pillar layout refinement */
.hero { padding-top: clamp(1.8rem, 3.8vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-grid > div:first-child { width: 100%; max-width: 72rem; margin-inline: auto; text-align: center; }
.hero h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); max-width: 24ch; margin-inline: auto; line-height: 1.08; }
.hero .lede { margin-top: 1.1rem; max-width: 52rem; margin-inline: auto; font-size: clamp(1.04rem, 1.3vw, 1.16rem); line-height: 1.6; }
.arch-pillars { margin: 1.65rem 0 1.5rem; gap: 1.25rem; }


/* ---------- v43: High-Contrast Tabs, Interactive Personal Agent Savings Workbench (.wedge-wb), & 6-Stage Foresight Observatory (.foresight-atlas) ---------- */
.arch-card:nth-child(3)::before { background: var(--ok); }
.arch-card:nth-child(3) .arch-k { color: var(--ok); }
.status-col.st-live .st-tag { background: color-mix(in srgb, var(--ok) 15%, var(--paper)); color: var(--ok); }
.status-col.st-12m .st-tag { background: color-mix(in srgb, var(--gold) 18%, var(--paper)); color: var(--gold); }

.fy-tabs button {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--rule);
  font-weight: 600;
}
.fy-tabs button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fy-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Interactive Personal Agent & Zero-Middleman Savings Workbench (#wedge-calc) */
.wedge-wb {
  margin-top: 2.2rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  display: grid;
  gap: 1.35rem;
  box-shadow: 0 24px 48px -36px rgba(0, 0, 0, .28);
}
.wb-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.wb-head h3 {
  font-size: clamp(1.38rem, 2.5vw, 1.82rem);
  line-height: 1.2;
  margin: .35rem 0 .4rem;
}
.wb-head p {
  margin: 0;
  color: var(--ink-2);
  max-width: 50rem;
  font-size: .96rem;
}
.wb-modes {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.wb-modes button {
  font: 600 .82rem/1.15 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 99px;
  padding: .58rem 1rem;
  cursor: pointer;
  transition: all .18s ease;
}
.wb-modes button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.wb-modes button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.wb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 900px) {
  .wb-grid { grid-template-columns: 1fr; }
}
.wb-controls, .wb-results {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  display: grid;
  gap: 1rem;
}
.wb-slider-group {
  display: grid;
  gap: .35rem;
}
.wb-slider-group label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.wb-slider-group label output {
  font: 700 .95rem var(--mono);
  color: var(--accent);
}
.wb-slider-group input[type="range"] {
  width: 100%;
  accent-color: var(--ok);
  cursor: pointer;
}
.wb-slider-hint {
  font-size: .78rem;
  color: var(--ink-3);
  margin: 0;
}
.wb-checks {
  display: grid;
  gap: .5rem;
  padding-top: .65rem;
  border-top: 1px solid var(--rule);
}
.wb-checks-title {
  font: 700 .68rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.wb-check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .85rem;
  color: var(--ink-2);
  cursor: pointer;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
}
.wb-check input {
  margin-top: .2rem;
  accent-color: var(--ok);
}
.wb-check b {
  color: var(--ink);
}
.wb-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 600px) {
  .wb-kpis { grid-template-columns: 1fr; }
}
.wb-kpi {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: .8rem .9rem;
  display: grid;
  gap: .2rem;
}
.wb-kpi.highlight {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 9%, var(--card));
}
.wb-kpi span {
  font: 600 .66rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
}
.wb-kpi.highlight span {
  color: var(--ok);
}
.wb-kpi b {
  font: 700 clamp(1.25rem, 2.2vw, 1.6rem)/1.1 var(--serif);
  color: var(--ink);
}
.wb-kpi.highlight b {
  color: var(--ok);
}
.wb-kpi small {
  font-size: .76rem;
  color: var(--ink-2);
}
.wb-bars {
  display: grid;
  gap: .55rem;
}
.wb-bar-row {
  display: grid;
  gap: .22rem;
  font-size: .82rem;
}
.wb-bar-top {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
}
.wb-bar-top b {
  font-family: var(--mono);
  color: var(--ink);
}
.wb-bar-track {
  height: .55rem;
  background: var(--paper-2);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.wb-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .25s ease;
}
.wb-bar-fill.bad { background: var(--accent); }
.wb-bar-fill.ok { background: var(--ok); }
.wb-receipt {
  font: 500 .78rem/1.5 var(--mono);
  background: var(--night);
  color: var(--night-ink);
  border-radius: 10px;
  padding: .8rem .95rem;
  overflow-x: auto;
  border: 1px solid var(--rule);
}
.wb-receipt .r-ok { color: #6fd3c6; font-weight: 700; }
.wb-receipt .r-warn { color: #f1c76b; }

/* Interactive 6-Stage AI Capability Trajectory & 5-Step Foresight Observatory (#foresight-atlas) */
.foresight-atlas {
  margin: 1.5rem 0 2.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: clamp(1.2rem, 3vw, 2rem);
  display: grid;
  gap: 1.3rem;
}
.fa-stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .5rem;
}
@media (max-width: 960px) {
  .fa-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fa-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fa-stage-btn {
  text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: .65rem .75rem;
  cursor: pointer;
  display: grid;
  gap: .18rem;
  color: var(--ink-2);
  transition: all .18s ease;
}
.fa-stage-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.fa-stage-btn[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.fa-stage-btn .fa-yr {
  font: 700 .66rem/1.1 var(--mono);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.fa-stage-btn[aria-selected="true"] .fa-yr {
  color: #f1c76b;
}
.fa-stage-btn b {
  font-size: .84rem;
  line-height: 1.25;
}
.fa-stage-btn small {
  font: 500 .7rem/1.2 var(--mono);
  opacity: .8;
}
.fa-banner {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ok);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  display: grid;
  gap: .35rem;
}
.fa-banner .fa-k {
  font: 700 .7rem/1.2 var(--mono);
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.fa-banner h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  margin: 0;
}
.fa-banner p {
  margin: 0;
  font-size: .92rem;
  color: var(--ink-2);
}
.fa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 860px) {
  .fa-grid { grid-template-columns: 1fr; }
}
.fa-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: grid;
  gap: .6rem;
  align-content: start;
}
.fa-panel h4 {
  margin: 0;
  font: 700 .72rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.fa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  font-size: .86rem;
  color: var(--ink-2);
}
.fa-list li {
  padding: .5rem .65rem;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  line-height: 1.45;
}
.fa-list li b {
  color: var(--ink);
}
.fa-cone-row {
  display: grid;
  gap: .2rem;
  font-size: .82rem;
}
.fa-cone-top {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
}
.fa-cone-top b {
  font-family: var(--mono);
  color: var(--ink);
}

/* Interactive filter & search toolbars for /notes/, /updates, and /trajectory */
.notes-toolbar, .lt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.4rem;
  padding: .85rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.notes-pills, .lt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.notes-pills button, .lt-pills button {
  font: 600 .78rem/1.1 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: .45rem .82rem;
  cursor: pointer;
}
.notes-pills button:hover, .lt-pills button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.notes-pills button[aria-pressed="true"], .lt-pills button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.notes-search, .lt-search {
  font: 500 .86rem/1.2 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: .48rem .9rem;
  min-width: 15rem;
}
@media (max-width: 640px) {
  .notes-search, .lt-search { width: 100%; min-width: 0; }
}

/* Ensure zero dim/invisible flash when scrolling fast or jumping via hash links */
.reveal { opacity: 1 !important; transform: none !important; }


/* ==========================================================================
   ?v=44 HIGH-DENSITY INTERACTIVE STUDIO SWITCHERS & COMPACT MATRIX LAYOUTS
   ========================================================================== */
.studio-switcher {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: .65rem;
  margin: 1.4rem 0 1.65rem;
  padding: .5rem;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
}
.studio-switcher button {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  text-align: left;
  padding: .75rem .9rem;
  border-radius: 11px;
  border: 1.5px solid transparent;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  transition: all .18s ease;
}
.studio-switcher button:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.studio-switcher button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
.studio-switcher .st-num {
  font: 700 .72rem/1 var(--mono);
  padding: .32rem .42rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  flex-shrink: 0;
  margin-top: .08rem;
}
.studio-switcher button[aria-selected="true"] .st-num {
  background: var(--accent);
  color: #fff;
}
.studio-switcher .st-txt {
  display: grid;
  gap: .18rem;
}
.studio-switcher .st-txt b {
  font-size: .88rem;
  line-height: 1.25;
  color: inherit;
}
.studio-switcher .st-txt small {
  font: 500 .72rem/1.25 var(--mono);
  opacity: .78;
}
.studio-pane[hidden] {
  display: none !important;
}
html.no-js .studio-pane[hidden] {
  display: block !important;
}

/* Formal Cryptographic Quorum & Deliberation Lock Formula Bar in #swarm-lock */
.sl-formula-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .6rem;
  margin: 0 0 1.25rem;
  padding: .75rem .95rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ok);
  border-radius: 12px;
}
.sl-formula-bar > div {
  display: grid;
  gap: .15rem;
}
.sl-formula-bar span {
  font: 600 .66rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
}
.sl-formula-bar code {
  font: 700 .82rem/1.3 var(--mono);
  color: var(--ink);
  background: none;
  padding: 0;
}

/* Hide redundant 4-step static card dump inside #em-demo when interactive SVG is active */
html:not(.no-js) #em-demo #em-grid7 {
  display: none;
}

/* Compact 2-Column Matrix for the 8 Architectural Invariants (#goals) on Desktop */
@media (min-width: 860px) {
  .goals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1.15rem;
  }
  .goal {
    grid-template-columns: 3.1rem 1fr;
    gap: .85rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--card);
    align-items: start;
  }
  .goal:first-child {
    border-top: 1px solid var(--rule);
  }
  .g-num {
    font-size: 1.65rem;
  }
  .g-body h3 {
    font-size: 1.08rem;
    margin-bottom: .35rem;
  }
  .g-body p {
    font-size: .88rem;
    line-height: 1.5;
  }
}

/* Compact 2-Column Matrix for the 10 Primary-Source Incidents (.ws-line) on Desktop */
@media (min-width: 900px) {
  .ws-line {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1.15rem;
    padding-left: 0;
    border-left: none;
  }
  .ws-line li {
    padding: .95rem 1.1rem;
    border: 1px solid var(--rule);
    border-left: 3.5px solid var(--ink-3);
    border-radius: 12px;
    background: var(--bg);
    margin: 0;
  }
  .ws-line li.t-inc {
    border-left-color: var(--accent);
  }
  .ws-line li.t-res {
    border-left-color: var(--blue);
  }
  .ws-line li.t-pol {
    border-left-color: var(--gold);
  }
  .ws-line li::before {
    display: none;
  }
}
/* ==========================================================================
   ?v=45 ABOVE-THE-FOLD HERO PROPORTIONS, WIRE-PROTOCOL INSPECTOR (#pkt-frame),
   FOUNDER PROTOCOL MATRIX (.founder-matrix), COMMAND PALETTE & BLUEPRINT TOC
   ========================================================================== */

/* 1. Tighter Above-the-Fold Hero so 3-Pillar Cards + Interactive Boundary Canvas Appear Together */
.hero {
  padding-top: clamp(1.1rem, 2.2vw, 1.8rem);
  padding-bottom: clamp(2rem, 4vw, 3.2rem);
}
.hero-grid {
  gap: 1.25rem;
}
.hero-grid > div:first-child {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  max-width: 34ch;
  margin-inline: auto;
  line-height: 1.08;
}
.hero .lede {
  margin-top: .7rem;
  max-width: 58rem;
  margin-inline: auto;
  font-size: clamp(.95rem, 1.12vw, 1.05rem);
  line-height: 1.5;
}
.arch-pillars {
  margin: 1.05rem 0 1rem;
  gap: .95rem;
}
.arch-card {
  padding: .95rem 1.15rem;
}
.arch-card h3 {
  font-size: 1.02rem;
  margin: 0 0 .32rem;
  line-height: 1.22;
}
.arch-card p {
  font-size: .83rem;
  line-height: 1.45;
  margin: 0 0 .6rem;
}
.hero .cta-row {
  margin-top: .95rem;
  gap: .65rem;
}
.hero .btn {
  padding: .65rem 1.1rem;
  font-size: .88rem;
}

/* 2. Tab 4: Cryptographic Wire-Protocol & Data Model Inspector (#pkt-frame) */
.pkt-frame {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  padding: clamp(1.1rem, 2.5vw, 1.65rem);
  text-align: left;
}
.pkt-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
}
.pkt-k {
  display: block;
  font: 700 .68rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ok);
  margin-bottom: .25rem;
}
.pkt-head h4 {
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
  margin: 0;
  color: var(--ink);
}
.pkt-pills, .pkt-modes {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.pkt-pills button, .pkt-modes button {
  font: 600 .78rem/1.15 var(--mono);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 99px;
  padding: .48rem .88rem;
  cursor: pointer;
  transition: all .16s ease;
}
.pkt-pills button, .pkt-modes button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pkt-pills button, .pkt-modes button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pkt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.15rem;
  align-items: stretch;
}
@media (max-width: 860px) {
  .pkt-grid { grid-template-columns: 1fr; }
}
.pkt-code-box {
  background: var(--night);
  color: var(--night-ink);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: grid;
  gap: .65rem;
  align-content: start;
}
.pkt-code-top, .pkt-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font: 700 .7rem/1.2 var(--mono);
  color: #6fd3c6;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pkt-badge, .pkt-bar .r-ok {
  background: rgba(111, 211, 198, .15);
  color: #6fd3c6;
  padding: .2rem .5rem;
  border-radius: 6px;
}
.pkt-pre, #pkt-json {
  margin: 0;
  font: 500 .76rem/1.52 var(--mono);
  color: #f3eee4;
  white-space: pre-wrap;
  word-break: break-word;
}
.pkt-explain-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: grid;
  gap: .7rem;
  align-content: start;
}
.pkt-prop, .pkt-step {
  padding: .65rem .8rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3.5px solid var(--ok);
  border-radius: 10px;
  display: grid;
  gap: .2rem;
}
.pkt-prop span, .pkt-step span {
  font: 700 .66rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ok);
}
.pkt-prop p, .pkt-step p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.48;
  color: var(--ink-2);
}
.pkt-prop p b, .pkt-step p b {
  color: var(--ink);
}

/* 3. Founder Page: Lived Experience to Formal Protocol Matrix (.founder-matrix) */
.founder-matrix {
  margin: 2.2rem 0;
  padding: 1.35rem 1.45rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
.fm-head {
  margin-bottom: 1rem;
}
.fm-head h3 {
  font-size: 1.28rem;
  margin: .25rem 0 0;
}
.fm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
@media (max-width: 720px) {
  .fm-grid { grid-template-columns: 1fr; }
}
.fm-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ok);
  border-radius: 12px;
  padding: .95rem 1.05rem;
  display: grid;
  gap: .35rem;
  align-content: start;
}
.fm-k {
  font: 700 .66rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ok);
}
.fm-card h4 {
  font-size: .98rem;
  margin: 0;
  line-height: 1.28;
}
.fm-card p {
  font-size: .84rem !important;
  line-height: 1.48 !important;
  color: var(--ink-2);
  margin: 0 0 .35rem !important;
}

/* 4. Blueprint Automatic Section TOC Bar (.note-toc-bar) on /notes/*.html */
.note-toc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin: 0 0 1.8rem;
  padding: .75rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ok);
  border-radius: 12px;
}
.note-toc-bar .ntb-k {
  font: 700 .7rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ok);
  flex-shrink: 0;
}
.note-toc-bar .ntb-links {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
}
.note-toc-bar .ntb-links a {
  font: 600 .76rem/1.2 var(--sans);
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: .3rem .68rem;
  text-decoration: none;
  transition: all .15s ease;
}
.note-toc-bar .ntb-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* 5. Floating Quick-Jump & Command Palette (#cmd-trigger + #cmd-dlg) */
.cmd-trigger {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  font: 600 .8rem/1 var(--sans);
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.38);
  transition: transform .15s ease, background .15s ease;
}
.cmd-trigger:hover {
  transform: translateY(-2px);
  background: var(--accent);
  border-color: var(--accent);
}
.cmd-trigger kbd {
  font: 700 .68rem/1 var(--mono);
  padding: .2rem .38rem;
  border-radius: 5px;
  background: rgba(255,255,255,.16);
  color: inherit;
}
.cmd-dlg {
  padding: 0;
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  width: min(92vw, 40rem);
  max-height: 80vh;
  box-shadow: 0 32px 64px -16px rgba(0,0,0,.45);
}
.cmd-dlg::backdrop {
  background: rgba(10, 12, 16, .58);
  backdrop-filter: blur(4px);
}
.cmd-box {
  display: flex;
  flex-direction: column;
  max-height: 78vh;
}
.cmd-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.cmd-input {
  flex: 1;
  font: 500 .95rem/1.3 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  padding: .58rem .85rem;
  outline: none;
}
.cmd-input:focus {
  border-color: var(--ok);
}
.cmd-close {
  font: 700 .7rem/1 var(--mono);
  padding: .45rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-3);
  cursor: pointer;
}
.cmd-list {
  overflow-y: auto;
  padding: .65rem .85rem;
  display: grid;
  gap: .32rem;
}
.cmd-cat {
  font: 700 .66rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ok);
  padding: .45rem .4rem .2rem;
}
.cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
}
.cmd-item b {
  display: block;
  font-size: .88rem;
  line-height: 1.25;
}
.cmd-item small {
  display: block;
  font-size: .76rem;
  color: var(--ink-2);
  margin-top: .12rem;
}
.cmd-item:hover, .cmd-item.active {
  background: var(--paper);
  border-color: var(--ok);
}
.cmd-arr {
  font-family: var(--mono);
  color: var(--ink-3);
}
.cmd-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--rule);
  font: 500 .72rem/1.2 var(--mono);
  color: var(--ink-3);
  background: var(--paper);
  border-radius: 0 0 18px 18px;
}
/* ==========================================================================
   ?v=46 SCIENTIFIC PROVENANCE REGISTRY (.prov-grid), SPRA STUDIO & 20-EXAMPLE ATLAS
   ========================================================================== */
.prov-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 860px) {
  .prov-grid { grid-template-columns: 1fr; }
}
.prov-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ok);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: grid;
  gap: .55rem;
  align-content: start;
}
.prov-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .45rem;
}
.prov-cat {
  font: 700 .68rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ok);
}
.prov-card h3 {
  font-size: 1.04rem;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}
.prov-def {
  font-size: .84rem;
  line-height: 1.48;
  color: var(--ink-2);
  margin: 0;
}
.prov-def b {
  color: var(--ink);
}
.prov-chain {
  display: grid;
  gap: .28rem;
  padding: .65rem .8rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: .8rem;
  line-height: 1.42;
  color: var(--ink-2);
}
.prov-chain b {
  color: var(--ink);
  font-family: var(--mono);
  font-size: .74rem;
}
.spra-studio {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: clamp(1.15rem, 2.5vw, 1.65rem);
}
#spra-json {
  margin: 0;
  font: 500 .76rem/1.52 var(--mono);
  color: #f3eee4;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ==========================================================================
   ?v=47 WIDESCREEN TRAJECTORY OBSERVATORY (.traj-hero), .note TOP-GAP FIX,
   BALANCED .wrap-narrow WIDTH, & CONSTRAINED .note-toc-bar
   ========================================================================== */

/* 1. Eliminate 8rem (128px) top blank void on .note pages & widen .wrap-narrow to 56rem */
.note {
  padding: clamp(1.75rem, 3.2vw, 2.75rem) 0 4rem;
}
.wrap-narrow {
  width: min(100% - 2.5rem, 56rem);
  margin-inline: auto;
}
.note-toc-bar {
  width: 100%;
  max-width: 56rem;
  margin: .85rem auto 0;
  box-sizing: border-box;
}

/* 2. Widescreen Trajectory & Foresight Observatory Hero (.traj-hero) */
.traj-hero {
  padding: clamp(1.6rem, 3vw, 2.6rem) 0 4rem;
}
.traj-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 960px) {
  .traj-hero-grid {
    grid-template-columns: 1fr;
  }
}
.traj-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.traj-hero-copy .back {
  font: 600 .82rem var(--mono);
  color: var(--ink-3);
  text-decoration: none;
  align-self: flex-start;
}
.traj-hero-copy .back:hover {
  color: var(--accent);
}
.traj-hero-copy h1 {
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  line-height: 1.08;
  margin: .35rem 0 .65rem;
}
.traj-hero-copy .lede {
  font-size: clamp(.96rem, 1.15vw, 1.06rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.traj-hero-scorecard {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3.5px solid var(--ok);
  border-radius: 18px;
  padding: 1.15rem 1.3rem;
  display: grid;
  gap: .9rem;
  align-content: space-between;
  box-shadow: 0 22px 44px -32px rgba(0,0,0,.32);
}
.ths-k {
  display: block;
  font: 700 .68rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ok);
}
.ths-score {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .25rem;
}
.ths-score b {
  font: 700 clamp(2rem, 3.2vw, 2.6rem)/1 var(--serif);
  color: var(--ink);
}
.ths-max {
  font: 600 .95rem/1 var(--mono);
  color: var(--ink-3);
}
.ths-sub {
  margin: .3rem 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.ths-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .48rem .9rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
}
@media (max-width: 560px) {
  .ths-bars {
    grid-template-columns: 1fr;
  }
}
.ths-bar-row {
  display: grid;
  grid-template-columns: 1fr 4.5rem 1.8rem;
  align-items: center;
  gap: .45rem;
  font-size: .76rem;
  color: var(--ink-2);
}
.ths-bar-row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ths-bar-row b {
  font: 700 .76rem/1 var(--mono);
  color: var(--ink);
  text-align: right;
}
/* 3. Top 2px Spectrum Reading Progress Bar & 6-Studio Homepage Jump Strip */
.read-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2.5px;
  width: 0%;
  background: var(--spectrum);
  z-index: 60;
  pointer-events: none;
  transition: width .08s linear;
}
.home-jump-strip {
  display: grid;
  gap: .6rem;
  margin-bottom: 1.5rem;
  padding: .85rem 1.05rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ok);
  border-radius: 14px;
}
.home-jump-strip .hjs-k {
  font: 700 .68rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ok);
}
.home-jump-strip .hjs-links {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .5rem;
}
@media (max-width: 1080px) {
  .home-jump-strip .hjs-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .home-jump-strip .hjs-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.home-jump-strip .hjs-links a {
  display: grid;
  gap: .15rem;
  padding: .5rem .65rem;
  border-radius: 9px;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.home-jump-strip .hjs-links a:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.home-jump-strip .hjs-links b {
  font-size: .78rem;
  line-height: 1.2;
}
.home-jump-strip .hjs-links small {
  font: 500 .66rem/1.2 var(--mono);
  color: var(--ink-3);
}

/* ==========================================================================
   ?v=49 NOTES & BLUEPRINTS WIDESCREEN OVERHAUL, SVG DIAGRAM FIXES & FORM CONTRAST
   ========================================================================== */

/* 1. Native <select> and <option> contrast in dark & light modes */
select, select option {
  background-color: var(--card);
  color: var(--ink);
}

/* 2. Fix .diagram SVG specificity bug so <text class="d-muted|d-ok|d-bad"> is never hollow stroke-only */
.diagram {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ok);
  border-radius: 16px;
  padding: 1.25rem 1.35rem 1rem;
  margin: 1.85rem 0;
  box-shadow: 0 18px 38px -28px rgba(0, 0, 0, .28);
}
.diagram svg text,
.diagram svg text.d-ink,
.diagram svg text.d-muted,
.diagram svg text.d-ok,
.diagram svg text.d-bad,
.diagram svg text.d-title,
.diagram svg text.d-sub,
.diagram svg text.d-code {
  stroke: none !important;
}
.diagram svg text.d-ink {
  fill: var(--ink) !important;
  font-weight: 700;
}
.diagram svg text.d-title {
  fill: var(--ink) !important;
  font: 700 12.2px/1.2 var(--sans) !important;
}
.diagram svg text.d-muted {
  fill: var(--ink-3) !important;
}
.diagram svg text.d-sub {
  fill: var(--ink-3) !important;
  font: 500 10px/1.25 var(--sans) !important;
}
.diagram svg text.d-ok {
  fill: var(--ok) !important;
  font-weight: 600;
}
.diagram svg text.d-bad {
  fill: var(--accent) !important;
  font-weight: 600;
}
.diagram svg text.d-code {
  fill: var(--ink) !important;
  font: 600 10px/1.2 var(--mono) !important;
}
@media (min-width: 1025px) {
  .has-sticky-rail .note-toc-bar {
    display: none;
  }
}
.diagram svg .d-box {
  fill: var(--paper);
  stroke: var(--rule);
  stroke-width: 1.5;
}
.diagram svg .d-fill {
  fill: color-mix(in srgb, var(--ok) 13%, var(--paper));
  stroke: var(--ok);
  stroke-width: 1.5;
}
.diagram svg .d-line {
  stroke: var(--ok);
  stroke-width: 2;
  fill: none;
}
.diagram svg marker path,
.diagram svg marker path.d-ink,
.diagram svg marker polygon {
  fill: var(--ink) !important;
  stroke: none !important;
}
.diagram figcaption {
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px dashed var(--rule);
  font-size: .83rem;
  line-height: 1.48;
  color: var(--ink-2);
}

/* 3. Flush alignment on .page-note so note headers and bodies align with the 76rem navbar brand logo */
.page-note .wrap-narrow {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
}
.page-note .note-toc-bar {
  max-width: var(--maxw);
}

/* 4. 2-Column Widescreen Note Hero (.note-head.has-hero-split + .note-hero-card) */
.note-head.has-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .88fr);
  gap: 1.75rem;
  align-items: start;
  padding-bottom: 1.85rem;
  margin-bottom: 1.85rem;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 980px) {
  .note-head.has-hero-split {
    grid-template-columns: 1fr;
  }
}
.note-head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.note-head-left h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  margin: .35rem 0 .75rem;
}
.note-head-left .lede {
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
  line-height: 1.58;
  color: var(--ink-2);
  margin: 0 0 .75rem;
}
.note-hero-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3.5px solid var(--ok);
  border-radius: 16px;
  padding: 1.05rem 1.2rem;
  display: grid;
  gap: .75rem;
  box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .32);
}
.nhc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.nhc-k {
  font: 700 .66rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ok);
}
.nhc-badge {
  font: 600 .66rem/1 var(--mono);
  padding: .24rem .52rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ok) 14%, var(--paper));
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--rule));
}
.nhc-svg-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 11px;
  padding: .55rem .65rem;
}
.nhc-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}
.nhc-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.nhc-kpi {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: .45rem .55rem;
}
.nhc-kpi b {
  display: block;
  font: 700 .82rem/1.15 var(--mono);
  color: var(--ink);
}
.nhc-kpi span {
  display: block;
  font-size: .68rem;
  line-height: 1.2;
  color: var(--ink-3);
  margin-top: .14rem;
}
.nhc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding-top: .35rem;
  border-top: 1px solid var(--rule);
}
.nhc-actions a {
  font: 600 .74rem/1.1 var(--sans);
  padding: .38rem .72rem;
  border-radius: 99px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.nhc-actions a:hover {
  border-color: var(--ok);
  color: var(--ok);
}
.nhc-actions a.primary {
  background: var(--ok);
  color: #ffffff;
  border-color: var(--ok);
}

/* 5. 2-Column Widescreen Note Body Layout (.note-widescreen-grid) */
.note-widescreen-grid {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .note-widescreen-grid {
    grid-template-columns: 1fr;
  }
  .note-sticky-rail {
    display: none;
  }
}
.note-sticky-rail {
  position: sticky;
  top: 5.2rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3.5px solid var(--ok);
  border-radius: 14px;
  padding: .95rem 1rem;
  display: grid;
  gap: .75rem;
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
}
.nsr-k {
  font: 700 .66rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ok);
}
.nsr-links {
  display: grid;
  gap: .28rem;
}
.nsr-links a {
  display: block;
  font: 500 .78rem/1.32 var(--sans);
  color: var(--ink-2);
  padding: .34rem .55rem;
  border-radius: 7px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all .14s ease;
}
.nsr-links a:hover {
  background: var(--paper);
  color: var(--ink);
}
.nsr-links a.active {
  background: color-mix(in srgb, var(--ok) 14%, var(--paper));
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--ok);
}
.nsr-prov {
  padding-top: .65rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: .35rem;
  font-size: .73rem;
  line-height: 1.38;
  color: var(--ink-3);
}
.nsr-prov b {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.note-main-col {
  min-width: 0;
}
.note-main-col > p,
.note-main-col > ul,
.note-main-col > ol {
  max-width: 74ch;
}
.note-main-col > h2 {
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.note-main-col > h2:first-of-type {
  margin-top: .5rem;
  padding-top: 0;
  border-top: none;
}


/* ==========================================================================
   ?v=50 VISUAL-FIRST ALARM STRIP (.alarm-kpi-strip), 7-LENS WORLD MATRIX
   (#world-matrix), COMPACT PROGRESS BARS (.st-prog) & PROVENANCE DRAWERS
   ========================================================================== */

/* 1. Hero 4-KPI Visual Alarm & Co-Intelligence Strip */
.alarm-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.05rem;
  text-align: left;
}
@media (max-width: 960px) {
  .alarm-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px) {
  .alarm-kpi-strip {
    grid-template-columns: 1fr;
  }
}
.ak-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3.5px solid var(--ok);
  border-radius: 13px;
  padding: .75rem .9rem;
  display: grid;
  gap: .2rem;
  align-content: start;
  box-shadow: 0 12px 26px -22px rgba(0, 0, 0, .28);
}
.ak-card.bad {
  border-top-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}
.ak-card.warn {
  border-top-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 5%, var(--card));
}
.ak-card.ok {
  border-top-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, var(--card));
}
.ak-card.blue {
  border-top-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, var(--card));
}
.ak-tag {
  font: 700 .64rem/1.15 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
}
.ak-card.bad .ak-tag { color: var(--accent); }
.ak-card.warn .ak-tag { color: var(--gold); }
.ak-card.ok .ak-tag { color: var(--ok); }
.ak-card.blue .ak-tag { color: var(--blue); }
.ak-card b {
  font: 700 clamp(1.25rem, 1.8vw, 1.55rem)/1.1 var(--serif);
  color: var(--ink);
}
.ak-card small {
  font-size: .75rem;
  line-height: 1.35;
  color: var(--ink-2);
}
.ak-card small a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 2. Compact 3-Pillar Top Row (.arch-top + .arch-pill) */
.arch-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .4rem;
  margin-bottom: .28rem;
}
.arch-top .arch-k {
  margin-bottom: 0;
}
.arch-pill {
  font: 700 .64rem/1 var(--mono);
  padding: .22rem .48rem;
  border-radius: 99px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.arch-pill.ok {
  background: color-mix(in srgb, var(--ok) 15%, var(--paper));
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 35%, var(--rule));
}
.arch-pill.gold {
  background: color-mix(in srgb, var(--gold) 15%, var(--paper));
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 35%, var(--rule));
}
.arch-pill.blue {
  background: color-mix(in srgb, var(--blue) 15%, var(--paper));
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 35%, var(--rule));
}

/* 3. Centerpiece 7-Lens Visual Comparison Atlas (#world-matrix) */
.world-matrix {
  padding: clamp(2.4rem, 4.5vw, 3.8rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.wm-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .5rem;
  margin: 1.25rem 0 1.35rem;
  padding: .45rem;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
}
@media (max-width: 1120px) {
  .wm-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .wm-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.wm-tabs button {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  text-align: left;
  padding: .62rem .68rem;
  border-radius: 11px;
  border: 1.5px solid transparent;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  transition: all .16s ease;
}
.wm-tabs button:hover {
  border-color: var(--ok);
  color: var(--ink);
}
.wm-tabs button[aria-selected="true"] {
  background: color-mix(in srgb, var(--ok) 20%, var(--paper));
  color: var(--ink);
  border-color: var(--ok);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.wm-num {
  font: 700 .66rem/1 var(--mono);
  padding: .24rem .34rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  flex-shrink: 0;
  margin-top: .06rem;
}
.wm-tabs button[aria-selected="true"] .wm-num {
  background: var(--ok);
  color: #fff;
}
.wm-tab-txt {
  display: grid;
  gap: .12rem;
  min-width: 0;
}
.wm-tab-txt b {
  font: 700 .76rem/1.2 var(--sans);
  color: inherit;
}
.wm-tab-txt small {
  font: 500 .63rem/1.2 var(--mono);
  opacity: .82;
}

.wm-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(320px, .92fr);
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 980px) {
  .wm-stage {
    grid-template-columns: 1fr;
  }
}
.wm-visual-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3.5px solid var(--ok);
  border-radius: 18px;
  padding: 1.15rem 1.25rem;
  display: grid;
  gap: .85rem;
  align-content: start;
  box-shadow: 0 22px 44px -32px rgba(0, 0, 0, .32);
}
.wm-vc-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule);
}
.wm-k {
  display: block;
  font: 700 .68rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ok);
  margin-bottom: .2rem;
}
.wm-vc-top h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.wm-cites {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.wm-svg-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: .65rem;
  overflow: hidden;
}
.wm-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}
.wm-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
@media (max-width: 600px) {
  .wm-kpis {
    grid-template-columns: 1fr;
  }
}
.wm-kpi {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ok);
  border-radius: 10px;
  padding: .55rem .75rem;
  display: grid;
  gap: .14rem;
}
.wm-kpi span {
  font: 600 .65rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
}
.wm-kpi b {
  font: 700 .84rem/1.25 var(--mono);
  color: var(--ink);
}

.wm-scorecard {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3.5px solid var(--accent);
  border-radius: 18px;
  padding: 1.15rem 1.25rem;
  display: grid;
  gap: .9rem;
  align-content: space-between;
  box-shadow: 0 22px 44px -32px rgba(0, 0, 0, .32);
}
.wm-sc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--rule);
}
.wm-sc-k {
  font: 700 .68rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-2);
}
.wm-legend {
  display: flex;
  gap: .75rem;
  font: 600 .7rem/1 var(--mono);
  color: var(--ink-2);
}
.wm-legend span {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
}
.wm-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  display: inline-block;
}
.wm-legend .dot.bad { background: var(--accent); }
.wm-legend .dot.ok { background: var(--ok); }

.wm-bars {
  display: grid;
  gap: .55rem;
}
.wm-bar-item {
  display: grid;
  gap: .24rem;
}
.wm-bar-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: .78rem;
  color: var(--ink-2);
}
.wm-bar-lbl b {
  font: 700 .75rem/1 var(--mono);
  color: var(--ink);
}
.wm-bar-dual {
  display: grid;
  gap: 3px;
  background: var(--paper);
  padding: 4px;
  border-radius: 7px;
  border: 1px solid var(--rule);
}
.wm-bar-dual i {
  display: block;
  height: 6px;
  border-radius: 4px;
  transition: width .28s ease;
}
.wm-bar-dual i.b-bad { background: var(--accent); }
.wm-bar-dual i.b-ok { background: var(--ok); }

.wm-cards {
  display: grid;
  gap: .55rem;
}
.wm-callout {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3.5px solid var(--ok);
  border-radius: 10px;
  padding: .6rem .8rem;
  display: grid;
  gap: .16rem;
}
.wm-callout.bad { border-left-color: var(--accent); }
.wm-callout.warn { border-left-color: var(--gold); }
.wm-callout.ok { border-left-color: var(--ok); }
.wm-callout span {
  font: 700 .64rem/1.15 var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
}
.wm-callout.bad span { color: var(--accent); }
.wm-callout.warn span { color: var(--gold); }
.wm-callout.ok span { color: var(--ok); }
.wm-callout p {
  margin: 0;
  font-size: .8rem;
  line-height: 1.42;
  color: var(--ink-2);
}
.wm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  padding-top: .5rem;
  border-top: 1px solid var(--rule);
}
.wm-actions .btn {
  padding: .52rem .9rem;
  font-size: .8rem;
}

/* 4. Visual Progress Bars in #involved (.st-prog) */
.st-prog {
  position: relative;
  height: 1.35rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 99px;
  overflow: hidden;
  margin: .35rem 0 .45rem;
  display: flex;
  align-items: center;
}
.st-prog i {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--ok) 28%, transparent);
  border-right: 2px solid var(--ok);
}
.st-prog.warn i {
  background: color-mix(in srgb, var(--gold) 28%, transparent);
  border-right-color: var(--gold);
}
.st-prog.blue i {
  background: color-mix(in srgb, var(--blue) 28%, transparent);
  border-right-color: var(--blue);
}
.st-prog span {
  position: relative;
  z-index: 1;
  padding-left: .65rem;
  font: 700 .68rem/1 var(--mono);
  color: var(--ink);
}

/* 5. Collapsible Provenance Drawers (.prov-drawer) & Incident Takeaway Pills (.ws-takeaway) */
.prov-drawer {
  border-top: 1px dashed var(--rule);
  padding-top: .45rem;
}
.prov-drawer summary {
  font: 600 .74rem/1.2 var(--mono);
  color: var(--ok);
  cursor: pointer;
  user-select: none;
}
.prov-drawer summary:hover {
  color: var(--accent);
}
.prov-drawer .prov-chain {
  margin-top: .45rem;
}
div.ws-takeaway {
  margin-top: .45rem;
  padding: .45rem .65rem;
  background: var(--card);
  border-left: 3px solid var(--ok);
  border-radius: 7px;
  font-size: .79rem;
  line-height: 1.4;
  color: var(--ink-2);
}
div.ws-takeaway b {
  color: var(--ok);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* Interactive Lens Stress-Test Bar inside #world-matrix (.wm-sim-bar) */
.wm-sim-bar {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--rule));
  border-radius: 12px;
  padding: .7rem .85rem;
  display: grid;
  gap: .45rem;
}
.wm-sim-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.wm-sim-top label {
  font: 700 .72rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ok);
}
.wm-sim-top output {
  font: 700 .84rem/1 var(--mono);
  color: var(--ink);
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  padding: .2rem .45rem;
  border-radius: 5px;
}
.wm-sim-bar input[type="range"] {
  width: 100%;
  accent-color: var(--ok);
  cursor: pointer;
  margin: .1rem 0;
}
.wm-sim-out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
@media (max-width: 640px) {
  .wm-sim-out {
    grid-template-columns: 1fr;
  }
}
.wm-sim-out > div {
  padding: .45rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--card);
  display: grid;
  gap: .12rem;
}
.wm-sim-out > div.bad {
  border-left: 3px solid var(--accent);
}
.wm-sim-out > div.ok {
  border-left: 3px solid var(--ok);
}
.wm-sim-out span {
  font: 600 .63rem/1.15 var(--mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
}
.wm-sim-out b {
  font: 700 .78rem/1.25 var(--mono);
  color: var(--ink);
}
.wm-sim-out > div.bad b { color: var(--accent); }
.wm-sim-out > div.ok b { color: var(--ok); }


/* ============ OPPORTUNITY LANDSCAPE & PERSONAL SENSOR MATCHER (D3.JS V7) ============ */
.opp-demo-sec {
  padding: 3.5rem 0;
  border-top: 1px solid var(--line, rgba(255,255,255,0.08));
}
.opp-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1.1rem;
}
.opp-kpi-pill {
  background: rgba(20, 24, 32, 0.9);
  border: 1px solid rgba(79, 179, 168, 0.3);
  border-radius: 10px;
  padding: .65rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.opp-kpi-pill span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9aa3b2;
  font-family: var(--mono, monospace);
}
.opp-kpi-pill b {
  font-size: 1.05rem;
  color: #4fb3a8;
  font-family: var(--mono, monospace);
}
.opp-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.15rem;
  align-items: start;
}
.opp-left-card, .opp-right-card {
  background: #12151c;
  border: 1px solid #282d38;
  border-radius: 14px;
  padding: 1.1rem;
  color: #e9e6de;
  display: grid;
  gap: .85rem;
  align-content: start;
}
.opp-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}
.opp-card-head h3 {
  margin: .15rem 0 0;
  font-size: 1.08rem;
  color: #fff;
}
.opp-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
.opp-arch-btn {
  text-align: left;
  background: #181c26;
  border: 1px solid #2c3240;
  border-radius: 8px;
  padding: .48rem .6rem;
  color: #d5d9e2;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  transition: border-color .15s, background .15s;
}
.opp-arch-btn b {
  font-size: .78rem;
  color: #fff;
}
.opp-arch-btn small {
  font-size: .68rem;
  color: #8c95a6;
  font-family: var(--mono, monospace);
}
.opp-arch-btn.active, .opp-arch-btn:hover {
  border-color: #4fb3a8;
  background: rgba(79, 179, 168, 0.14);
}
.opp-sliders-box {
  display: grid;
  gap: .42rem;
  background: #161a22;
  border: 1px solid #262b36;
  border-radius: 10px;
  padding: .65rem .75rem;
}
.opp-slider-row {
  display: grid;
  gap: .15rem;
}
.opp-slider-top {
  display: flex;
  justify-content: space-between;
  font-size: .76rem;
  color: #d5d9e2;
}
.opp-slider-top output {
  font-family: var(--mono, monospace);
  font-weight: 700;
  color: #4fb3a8;
}
.opp-range {
  width: 100%;
  accent-color: #4fb3a8;
  cursor: pointer;
}
.opp-radar-wrap {
  background: #161a22;
  border: 1px solid #262b36;
  border-radius: 10px;
  padding: .5rem .65rem;
  text-align: center;
}
.opp-radar-label {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: #9aa3b2;
  font-family: var(--mono, monospace);
  margin-bottom: .2rem;
}
.opp-radar-wrap svg {
  width: 100%;
  max-height: 195px;
  display: block;
  margin: 0 auto;
}
.opp-queue-box {
  background: rgba(79, 179, 168, 0.07);
  border: 1px solid rgba(79, 179, 168, 0.3);
  border-radius: 10px;
  padding: .75rem;
  display: grid;
  gap: .48rem;
}
.opp-input {
  width: 100%;
  background: #0f1218;
  border: 1px solid #2c3240;
  border-radius: 7px;
  padding: .45rem .6rem;
  color: #fff;
  font-size: .78rem;
}
.opp-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.opp-queue-banner {
  font-size: .75rem;
  color: #4fb3a8;
  background: rgba(15, 22, 26, 0.9);
  border: 1px solid #4fb3a8;
  border-radius: 7px;
  padding: .45rem .6rem;
  line-height: 1.4;
}
.opp-graph-wrap {
  background: #0e1117;
  border: 1px solid #262b36;
  border-radius: 12px;
  padding: .4rem;
}
.opp-graph-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}
.opp-steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .45rem;
}
.opp-step-pill {
  background: #171b24;
  border: 1px solid #2a303d;
  border-radius: 8px;
  padding: .45rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.opp-step-pill.active {
  border-color: #e5a93c;
  background: rgba(229, 169, 60, 0.14);
}
.opp-step-pill b {
  font-size: .72rem;
  color: #4fb3a8;
  font-family: var(--mono, monospace);
}
.opp-step-pill span {
  font-size: .69rem;
  color: #c5cad6;
  line-height: 1.3;
}
.opp-biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
}
.opp-biz-card {
  background: #171b24;
  border: 1px solid #2b3140;
  border-radius: 10px;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.opp-biz-head {
  display: flex;
  justify-content: space-between;
  gap: .3rem;
  flex-wrap: wrap;
}
.opp-score-badge, .opp-margin-badge {
  font-size: .66rem;
  font-family: var(--mono, monospace);
  padding: .15rem .4rem;
  border-radius: 4px;
}
.opp-score-badge {
  background: rgba(79, 179, 168, 0.18);
  color: #4fb3a8;
  font-weight: 700;
}
.opp-margin-badge {
  background: rgba(229, 169, 60, 0.15);
  color: #e5a93c;
}
.opp-biz-card h4 {
  margin: 0;
  font-size: .88rem;
  color: #fff;
  line-height: 1.3;
}
.opp-biz-sol {
  margin: 0;
  font-size: .75rem;
  color: #c4c9d4;
  line-height: 1.42;
}
.opp-biz-gap {
  font-size: .72rem;
  background: rgba(93, 162, 213, 0.1);
  border-left: 2px solid #5da2d5;
  padding: .35rem .5rem;
  color: #d5dce6;
  line-height: 1.35;
}
.opp-biz-metrics {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: .35rem;
  flex-wrap: wrap;
  font-size: .68rem;
  font-family: var(--mono, monospace);
  padding-top: .35rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.opp-biz-metrics .ok { color: #4fb3a8; font-weight: 700; }
.opp-biz-metrics .bad { color: #ef6a52; }
.opp-dossiers-box {
  background: #151922;
  border: 1px solid #262c3a;
  border-radius: 10px;
  padding: .7rem .85rem;
  display: grid;
  gap: .5rem;
}
.opp-dossiers-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.opp-dossiers-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.opp-dossier-item {
  background: #10131a;
  border: 1px solid #242936;
  border-radius: 8px;
  padding: .55rem .68rem;
}
.opp-dossier-top {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  font-family: var(--mono, monospace);
  margin-bottom: .25rem;
}
.opp-dossier-id { color: #5da2d5; font-weight: 700; }
.opp-dossier-val { color: #4fb3a8; font-weight: 700; }
.opp-dossier-item p {
  margin: 0;
  font-size: .72rem;
  color: #b8bfcc;
  line-height: 1.38;
}
@media (max-width: 1024px) {
  .opp-kpi-bar { grid-template-columns: 1fr 1fr; }
  .opp-grid { grid-template-columns: 1fr; }
  .opp-steps-row { grid-template-columns: 1fr 1fr; }
  .opp-biz-grid { grid-template-columns: 1fr; }
  .opp-dossiers-list { grid-template-columns: 1fr; }
}


/* ============ WAVE V64: HIGH-LEGIBILITY & BIG-VISUAL TYPOGRAPHY SCALE-UP ============ */
html {
  font-size: clamp(16.8px, 1.1vw, 18.5px);
}
body {
  font-size: 1.06rem;
  line-height: 1.58;
}
.hero h1 {
  font-size: clamp(2.45rem, 4.3vw, 3.65rem);
  line-height: 1.07;
}
.hero .sub, .sec-head .lede, .note-head .lede {
  font-size: clamp(1.12rem, 1.35vw, 1.28rem);
  line-height: 1.48;
  max-width: 56ch;
}
.label, .eyebrow, .arch-k, .wm-k, .wm-sc-k, .ths-k, .ntb-k {
  font-size: 0.86rem !important;
  letter-spacing: 0.05em;
}
.arch-pill, .cite-badge, .blueprint-badge {
  font-size: 0.86rem !important;
  padding: 0.32rem 0.68rem !important;
}
.arch-card h3 {
  font-size: 1.14rem !important;
  line-height: 1.28 !important;
}
.wm-tabs button {
  padding: 0.72rem 0.85rem !important;
}
.wm-num {
  font-size: 0.84rem !important;
  min-width: 1.85rem !important;
  height: 1.85rem !important;
}
.wm-tab-txt b {
  font-size: 0.98rem !important;
}
.wm-tab-txt small {
  font-size: 0.82rem !important;
}
.wm-vc-top h3 {
  font-size: 1.42rem !important;
}
.wm-bar-lbl {
  font-size: 0.94rem !important;
}
.wm-bar-lbl b {
  font-size: 1.04rem !important;
}
.wm-sim-top label {
  font-size: 0.88rem !important;
}
.wm-sim-top output {
  font-size: 1.04rem !important;
}
.wm-sim-out span {
  font-size: 0.82rem !important;
}
.wm-sim-out b {
  font-size: 1.02rem !important;
}
.wm-kpi span {
  font-size: 0.82rem !important;
}
.wm-kpi b {
  font-size: 1.08rem !important;
}
.scen-drawer summary {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  padding: 0.35rem 0;
}
.bd-tabs button, .studio-tabs button, .pkt-modes button {
  font-size: 0.94rem !important;
  padding: 0.62rem 0.95rem !important;
}
.opp-kpi-pill span {
  font-size: 0.84rem !important;
}
.opp-kpi-pill b {
  font-size: 1.18rem !important;
}
.opp-arch-btn b {
  font-size: 0.92rem !important;
}
.opp-arch-btn small, .opp-slider-top, .opp-step-pill b, .opp-step-pill span {
  font-size: 0.84rem !important;
}
.opp-biz-card h4 {
  font-size: 1.02rem !important;
}
.opp-biz-sol, .opp-biz-gap, .opp-biz-metrics {
  font-size: 0.86rem !important;
}
.stat-card b, .stat-grid b {
  font-size: 1.22rem !important;
}
.stat-card span, .stat-grid span {
  font-size: 0.86rem !important;
}
.ths-bar {
  font-size: 0.9rem !important;
}
.stage-tab b {
  font-size: 0.96rem !important;
}
.stage-tab span, .stage-tab small {
  font-size: 0.84rem !important;
}