:root {
  /* warm paper + warm ink, one committed signal-vermilion accent */
  --paper:        oklch(0.985 0.008 70);
  --paper-sunk:   oklch(0.962 0.011 68);
  --ink:          oklch(0.235 0.018 55);
  --ink-soft:     oklch(0.445 0.020 55);
  --ink-faint:    oklch(0.620 0.018 58);
  --line:         oklch(0.885 0.013 65);
  --line-strong:  oklch(0.800 0.016 60);

  --signal:       oklch(0.585 0.205 33);   /* vermilion, for fills + marks  */
  --signal-ink:   oklch(0.520 0.200 33);   /* darker, for link text on paper */
  --signal-glow:  oklch(0.660 0.210 38);   /* brighter, large active states  */
  --signal-wash:  color-mix(in oklab, var(--signal) 7%, var(--paper));

  /* the "machine" register: a dark warm panel for commands + code */
  --machine:      oklch(0.245 0.016 60);
  --machine-2:    oklch(0.300 0.018 60);
  --machine-ink:  oklch(0.905 0.012 80);
  --machine-soft: oklch(0.680 0.018 75);
  --machine-amber:oklch(0.820 0.135 75);

  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.18vw, 1.14rem);
  --step-1:  clamp(1.20rem, 1.08rem + 0.55vw, 1.50rem);
  --step-2:  clamp(1.55rem, 1.25rem + 1.40vw, 2.35rem);
  --step-3:  clamp(2.10rem, 1.55rem + 2.60vw, 3.50rem);
  --step-4:  clamp(2.55rem, 1.60rem + 4.20vw, 4.55rem);

  --measure: 64ch;
  --edge: clamp(1.15rem, 4vw, 3rem);
  --bay: clamp(4rem, 9vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--signal-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; color: var(--ink); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(72rem, 100%); margin-inline: auto; padding-inline: var(--edge); }
.narrow { max-width: var(--measure); }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--edge); top: 0.5rem; z-index: 50; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; border-radius: 6px; text-decoration: none; }

.kicker {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.kicker::before {
  content: ""; width: 1.6em; height: 2px; background: var(--signal); border-radius: 2px;
}

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.1) blur(8px);
}
@supports not (backdrop-filter: blur(1px)) { .top { background: var(--paper); } }
.top__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.85rem; }
.mark { display: inline-flex; align-items: baseline; gap: 0.5ch; font-family: var(--display); font-weight: 800; font-size: 1.06rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.mark__ring { font-family: var(--mono); color: var(--signal); font-weight: 600; }
.nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.7rem); }
.nav__links { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.7rem); }
.nav__links > a:not(.btn) { font-size: 0.92rem; color: var(--ink-soft); text-decoration: none; }
.nav__links > a:not(.btn):hover { color: var(--ink); }

/* hamburger toggle (hidden until mobile) */
.nav__toggle {
  display: none; width: 2.55rem; height: 2.55rem; flex: none;
  align-items: center; justify-content: center; padding: 0;
  background: none; border: 1px solid var(--line-strong); border-radius: 8px;
  color: var(--ink); cursor: pointer; transition: border-color 0.18s, background-color 0.18s;
}
.nav__toggle:hover { border-color: var(--ink); }
.nav__bars { position: relative; }
.nav__bars, .nav__bars::before, .nav__bars::after {
  content: ""; display: block; width: 19px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.24s cubic-bezier(0.22,1,0.36,1), opacity 0.18s, background-color 0.18s;
}
.nav__bars::before { position: absolute; left: 0; top: -6px; }
.nav__bars::after  { position: absolute; left: 0; top:  6px; }
.nav[data-open="1"] .nav__bars { background: transparent; }
.nav[data-open="1"] .nav__bars::before { transform: translateY(6px) rotate(45deg); }
.nav[data-open="1"] .nav__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; top: calc(100% + 0.55rem); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 24px 40px -26px oklch(0.3 0.05 50 / 0.55);
    padding: 0.35rem 0.95rem 0.95rem;
    opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22,1,0.36,1), visibility 0.2s;
  }
  .nav[data-open="1"] .nav__links { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  .nav__links > a:not(.btn) { font-size: 1.02rem; padding: 0.9rem 0.35rem; border-top: 1px solid var(--line); }
  .nav__links > a:not(.btn):first-child { border-top: none; }
  .nav__links .btn.gh { margin-top: 0.85rem; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__links, .nav__bars, .nav__bars::before, .nav__bars::after { transition: none; }
}

.btn {
  display: inline-flex; align-items: center; gap: 0.5ch;
  font-family: var(--body); font-weight: 600; font-size: 0.92rem;
  padding: 0.5rem 0.95rem; border-radius: 7px; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), background-color 0.18s, color 0.18s, border-color 0.18s;
}
.btn--solid { background: var(--signal); color: var(--paper); }
.btn--solid:hover { background: var(--signal-ink); transform: translateY(-1px); }
.btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-1px); }

/* github button + live stars */
.gh { gap: 0.55ch; }
.gh svg { width: 16px; height: 16px; flex: none; }
.gh-stars { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; padding-left: 0.6ch; margin-left: 0.5ch; border-left: 1px solid var(--line-strong); opacity: 0; max-width: 0; overflow: hidden; transition: opacity 0.35s ease, max-width 0.35s ease; }
.gh-stars[data-show="1"] { opacity: 1; max-width: 6ch; }
.gh-stars .s { color: var(--signal-ink); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(1.5rem, 2.6vw, 2.6rem); padding-bottom: var(--bay); }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.hero h1 { font-size: var(--step-4); margin-top: 0.65rem; line-height: 1.04; text-wrap: balance; }
.hero h1 .em { color: var(--signal); }

/* two-tier headline: a quiet setup line over the large payoff */
.hero-title { display: flex; flex-direction: column; gap: clamp(0.45rem, 0.9vw, 0.8rem); margin-top: 0.7rem; }
.hero-title__lead {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.0rem + 1.45vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  text-wrap: balance;
}
.hero-title__main {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.85rem, 1.6rem + 5.3vw, 5.05rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); margin-top: 1.1rem; max-width: 46ch; text-wrap: pretty; }
.lede strong { color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.cta-row .btn { font-size: 1rem; padding: 0.72rem 1.25rem; }
@media (max-width: 540px) {
  .cta-row { flex-direction: column; align-items: stretch; gap: 0.65rem; }
  .cta-row .btn { width: 100%; justify-content: center; padding: 0.85rem 1.2rem; }
}

/* ---------- loop diagram ---------- */
.loop { display: grid; place-items: center; }
.loop svg { width: min(100%, 27rem); height: auto; overflow: visible; }
.ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.progress {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 942.48;
  stroke-dashoffset: 942.48;
  transform: rotate(-90deg);
  transform-box: view-box;
  transform-origin: 220px 220px;
  filter: drop-shadow(0 0 5px var(--signal-glow));
  animation: trace 16s linear infinite;
}
@keyframes trace {
  from { stroke-dashoffset: 942.48; }
  to   { stroke-dashoffset: 0; }
}
.node-core { fill: var(--paper); stroke: var(--signal); stroke-width: 2; }
.node-num { font-family: var(--mono); font-size: 9px; font-weight: 600; fill: var(--ink-soft); }
.node-label { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; fill: var(--ink-faint); }
.hub-word { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; fill: var(--ink); }
.hub-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; fill: var(--ink-faint); }
.hub-glyph { font-family: var(--mono); font-size: 15px; fill: var(--signal); }

.pulse { fill: var(--signal); opacity: 0; transform-box: fill-box; transform-origin: center; }
.token-halo { fill: var(--signal-glow); opacity: 0.18; }
.token-core { fill: var(--signal-glow); }

.orbit { transform-box: view-box; transform-origin: 220px 220px; animation: orbit 16s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

.pulse { animation: blip 16s linear infinite; }
@keyframes blip {
  0%, 100% { opacity: 0.6;  transform: scale(1); }
  9%       { opacity: 0;    transform: scale(1.8); }
  98%      { opacity: 0;    transform: scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit { animation: none; }
  .pulse { animation: none; opacity: 0; }
  .progress { animation: none; stroke-dashoffset: 314.16; }
}

/* ---------- founding quotes ---------- */
.quotes { margin-top: clamp(2.75rem, 5.5vw, 4.5rem); border-top: 1px solid var(--line); padding-top: clamp(1.9rem, 3.8vw, 2.75rem); }
.quotes__label { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.quotes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 760px) { .quotes__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (min-width: 761px) {
  .quotes__grid > .q + .q { padding-left: clamp(2rem, 5vw, 4.5rem); border-left: 1px solid var(--line); }
}

.q { position: relative; }
.q::before {
  content: "\201C";
  position: absolute; top: -0.42em; left: -0.04em;
  font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: 1;
  color: var(--signal); opacity: 0.18; pointer-events: none;
}
.q blockquote {
  margin: 0; position: relative;
  font-family: var(--display); font-weight: 600;
  font-size: var(--step-2); line-height: 1.24; letter-spacing: -0.015em;
  color: var(--ink); text-wrap: pretty;
}
.q figcaption { margin-top: 1.35rem; display: flex; flex-direction: column; gap: 0.2rem; }
.q__name { font-family: var(--display); font-style: normal; font-weight: 700; font-size: var(--step-0); letter-spacing: -0.01em; color: var(--ink); }
.q__role { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); display: inline-flex; align-items: baseline; gap: 0.6ch; }
.q__role::before { content: "//"; color: var(--signal); }

/* ---------- sections ---------- */
section { padding-block: var(--bay); }
.sec-head { max-width: 52ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head h2 { font-size: var(--step-3); margin-top: 0.8rem; }
.sec-head p { margin-top: 1rem; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.45; }
.alt { background: var(--paper-sunk); border-block: 1px solid var(--line); }

/* ---------- lineage stack ---------- */
.stack { display: grid; gap: 0.6rem; }
.floor {
  display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.3rem;
  align-items: baseline; padding: 1.15rem 1.4rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper);
}
@media (min-width: 720px) { .floor { grid-template-columns: 11rem 1fr auto; } }
.floor__name { font-family: var(--mono); font-weight: 600; letter-spacing: 0.06em; font-size: var(--step-0); }
.floor__what { color: var(--ink-soft); }
.floor__q { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); grid-column: 1 / -1; }
@media (min-width: 720px) { .floor__q { grid-column: auto; text-align: right; max-width: 26ch; justify-self: end; } }
.floor--top { border-color: var(--signal); background: var(--signal-wash); box-shadow: 0 0 0 1px var(--signal); }
.floor--top .floor__name { color: var(--signal-ink); }

/* ---------- lifecycle ---------- */
.life { display: grid; gap: 0; max-width: 46rem; }
.step { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.1rem; padding: 1.05rem 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { font-family: var(--mono); font-weight: 600; color: var(--signal); font-size: 1.05rem; padding-top: 0.1rem; }
.step__t { font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.01em; }
.step__d { color: var(--ink-soft); margin-top: 0.2rem; }
.branch { margin-top: 0.7rem; display: grid; gap: 0.35rem; font-family: var(--mono); font-size: var(--step--1); }
.branch span { display: inline-flex; gap: 0.6ch; }
.branch .fail b { color: var(--signal-ink); font-weight: 600; }
.branch .pass b { color: var(--ink); font-weight: 600; }

.callout { margin-top: 2.5rem; padding: 1.3rem 1.5rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.01em; max-width: 46rem; }
.callout .em { color: var(--signal); }

/* ---------- tables ---------- */
.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); scrollbar-width: none; }
.tbl-scroll::-webkit-scrollbar { display: none; }
table { border-collapse: collapse; width: 100%; }
.tbl-scroll table { min-width: 34rem; }
caption { text-align: left; padding: 0 0 0.9rem; color: var(--ink-faint); font-family: var(--mono); font-size: var(--step--1); }
th, td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--mono); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
tbody tr:last-child td { border-bottom: none; }
td:first-child, th:first-child { font-weight: 600; }
td .mono, .mono { font-family: var(--mono); font-size: 0.92em; }
.row-accent td:first-child { color: var(--signal-ink); }

/* ---------- machine panel ---------- */
.machine-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(1.4rem, 3vw, 2.5rem); align-items: start; }
.machine-grid > * { min-width: 0; }
@media (max-width: 880px) { .machine-grid { grid-template-columns: 1fr; } }
.pill-pair { display: grid; gap: 1rem; }
.pill { border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.25rem; background: var(--paper); }
.pill h3 { font-family: var(--mono); font-weight: 600; font-size: var(--step-0); letter-spacing: 0.02em; }
.pill h3 .tag { color: var(--signal-ink); }
.pill p { margin-top: 0.45rem; color: var(--ink-soft); font-size: 0.97rem; }

.term {
  background: var(--machine); color: var(--machine-ink);
  border-radius: 12px; padding: 1.2rem 1.35rem; overflow-x: auto;
  box-shadow: 0 18px 40px -28px oklch(0.3 0.05 50 / 0.55);
  scrollbar-width: none;
}
.term::-webkit-scrollbar { display: none; }
.term__bar { display: flex; gap: 0.45rem; margin-bottom: 1rem; }
.term__bar i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--machine-2); display: block; }
.term pre { margin: 0; font-family: var(--mono); font-size: clamp(0.78rem, 0.7rem + 0.4vw, 0.92rem); line-height: 1.75; white-space: pre-wrap; overflow-wrap: break-word; }
.term .c { color: var(--machine-soft); }
.term .f { color: var(--machine-amber); }
.term .a { color: var(--signal-glow); }
.term .p { color: var(--machine-ink); }
.machine-note { margin-top: 1.2rem; color: var(--ink-soft); }
.machine-note .mono { color: var(--ink); }

/* ---------- honesty grid ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.2rem); }
.two > * { min-width: 0; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; gap: 2.4rem; } }
.block-title { font-family: var(--display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.01em; }
.list-clean { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.9rem; counter-reset: g; }
.list-clean li { position: relative; padding-left: 2rem; }
.list-clean li::before { content: counter(g, decimal-leading-zero); counter-increment: g; position: absolute; left: 0; top: 0.18rem; font-family: var(--mono); font-size: 0.82em; color: var(--signal); }
.stops { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.stops li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.stops li:last-child { border-bottom: none; }
.stops .name { font-family: var(--mono); font-weight: 600; color: var(--signal-ink); }
.stops .desc { color: var(--ink-soft); }

.ceilings p + p { margin-top: 1rem; }
.ceilings .lead-mono { font-family: var(--mono); color: var(--ink); font-weight: 600; }

/* ---------- closing ---------- */
.closing .big { font-family: var(--display); font-weight: 800; font-size: var(--step-3); line-height: 1.06; letter-spacing: -0.025em; max-width: 18ch; }
.closing .big .em { color: var(--signal); }
.closing p { margin-top: 1.4rem; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.45; max-width: 54ch; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); background: var(--paper-sunk); }
.repo { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); padding-block: var(--bay) clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 760px) { .repo { grid-template-columns: 1fr; gap: 2.2rem; } }
.col__n { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); }
.col h3 { font-family: var(--display); font-weight: 700; font-size: var(--step-1); margin-top: 0.5rem; padding-top: 0.8rem; border-top: 2px solid var(--ink); }
.col p { color: var(--ink-soft); margin-top: 0.6rem; font-size: 0.95rem; }
.col ul { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.col a { color: var(--ink); text-decoration: none; font-weight: 500; }
.col a:hover { color: var(--signal-ink); text-decoration: underline; }
.col a .arr { color: var(--ink-faint); }

.foot-base { border-top: 1px solid var(--line); padding-block: 1.6rem 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }
.foot-base p { font-size: 0.9rem; color: var(--ink-soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: var(--mono); font-size: 0.82rem; }
.foot-links a { color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--signal-ink); }

/* reader footer (read.html): a small star CTA + links */
.reader-foot { display: flex; flex-wrap: wrap; gap: 1.2rem 1.5rem; align-items: center; justify-content: space-between; padding-block: clamp(1.8rem, 4vw, 2.6rem); }
.reader-foot__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.reader-foot__line { font-family: var(--display); font-weight: 700; font-size: var(--step-0); color: var(--ink); }
.btn.star { display: inline-flex; align-items: center; gap: 0.5ch; font-size: 0.9rem; }
.btn.star svg { margin-top: -1px; }

/* ===================================================================
   LEARN INDEX  (learn.html)
   =================================================================== */
.learn-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.learn-head h1 { font-size: var(--step-3); margin-top: 0.9rem; max-width: 18ch; }
.learn-head p { margin-top: 1.1rem; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.45; max-width: 56ch; }

.toc-group { padding-bottom: var(--bay); }
.toc-group h2 { font-family: var(--mono); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.4rem 2rem; }
.toc-item { position: relative; display: grid; grid-template-columns: 2.8rem 1fr; gap: 0.2rem 0.9rem; align-items: baseline; padding: 1.1rem 1rem; margin-inline: -1rem; text-decoration: none; border-radius: 12px; transition: background-color 0.18s ease, box-shadow 0.18s ease; }
.toc-item:hover { background: var(--signal-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--signal) 14%, transparent); }
.toc-item:hover .toc-item__t { color: var(--signal-ink); }
.toc-item__n { font-family: var(--mono); font-weight: 600; color: var(--signal); font-size: 0.95rem; transition: color 0.18s ease; }
.toc-item__t { font-family: var(--display); font-weight: 700; font-size: var(--step-1); color: var(--ink); letter-spacing: -0.01em; transition: color 0.18s ease; }
.toc-item__d { grid-column: 2; color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.15rem; }

/* ===================================================================
   READER  (read.html) - rendered markdown
   =================================================================== */
.reader { padding-top: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.reader__bar { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; justify-content: space-between; padding-bottom: 1.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--line); }
.crumb { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-soft); text-decoration: none; display: inline-flex; gap: 0.55ch; }
.crumb:hover { color: var(--signal-ink); }
.src-link { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); text-decoration: none; }
.src-link:hover { color: var(--signal-ink); }

.state { padding: 4rem 0; text-align: center; color: var(--ink-faint); font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.04em; }
.state .pulse-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--signal); margin-right: 0.6ch; animation: throb 1.1s ease-in-out infinite; vertical-align: middle; }
@keyframes throb { 0%,100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .state .pulse-dot { animation: none; } }

/* Wider shell so wide ASCII tables and diagrams fit; text stays a comfortable
   measure, left-aligned inside it. Code, tables, headings and rules run full
   width so section dividers line up with the dark blocks. */
.prose { max-width: 58rem; margin-inline: auto; }
.prose :is(p, ul, ol, blockquote, .footnotes) { max-width: 74ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h1 { font-size: var(--step-3); line-height: 1.05; margin-top: 0; }
.prose h2 { font-size: var(--step-2); line-height: 1.1; margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; }
.prose h4 { font-family: var(--mono); font-weight: 600; font-size: var(--step-0); letter-spacing: 0.02em; margin-top: 1.7rem; }
.prose p, .prose li { line-height: 1.72; }
.prose ul, .prose ol { padding-left: 1.4rem; display: grid; gap: 0.5rem; }
.prose li::marker { color: var(--signal); }

/* task-list checkboxes (built by enhanceTaskLists in read.html) */
.prose li.task-item { list-style: none; position: relative; margin-left: -1.4rem; padding-left: 2rem; }
.prose li.task-item::marker { content: ""; }
.prose .task-box {
  position: absolute; left: 0; top: 0.28rem;
  width: 1.15rem; height: 1.15rem; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: 5px;
  background: var(--paper); display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.8rem; line-height: 1;
  color: var(--paper); font-weight: 700;
}
.prose .task-box.is-checked { background: var(--signal); border-color: var(--signal); }
.prose li > ul, .prose li > ol { margin-top: 0.5rem; }
.prose a { color: var(--signal-ink); overflow-wrap: anywhere; }
.prose :not(pre) > code { overflow-wrap: anywhere; }
.prose strong { color: var(--ink); }
.prose hr { border: none; border-top: 1px solid var(--line); margin-block: 2.4rem; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }

.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--paper-sunk); border: 1px solid var(--line); padding: 0.1em 0.4em; border-radius: 5px; }
.prose pre {
  background: var(--machine); color: var(--machine-ink);
  border-radius: 12px; padding: 1.2rem 1.35rem;
  box-shadow: 0 18px 40px -28px oklch(0.3 0.05 50 / 0.55);
  white-space: pre-wrap; overflow-wrap: break-word;
  overflow-x: auto; scrollbar-width: none;
}
.prose pre::-webkit-scrollbar { display: none; }
.prose pre code { background: none; border: none; padding: 0; font-size: clamp(0.76rem, 0.7rem + 0.32vw, 0.875rem); line-height: 1.6; color: inherit; white-space: inherit; }

/* code-block copy button (added to each .prose pre by the reader) */
.codewrap { position: relative; }
.codewrap > pre { margin: 0; }
.code-copy {
  position: absolute; top: 0.5rem; right: 0.6rem; z-index: 2;
  cursor: pointer; border: 1px solid oklch(1 0 0 / 0.12);
  background: var(--machine-2); color: var(--machine-ink);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  padding: 0.32rem 0.7rem; border-radius: 7px;
  opacity: 0; transform: translateY(-2px);
  transition: opacity 0.18s, transform 0.18s, background-color 0.18s, color 0.18s;
}
.codewrap:hover .code-copy,
.codewrap:focus-within .code-copy { opacity: 1; transform: none; }
.code-copy:focus-visible { opacity: 1; transform: none; }
.code-copy:hover { background: var(--signal); color: var(--paper); border-color: transparent; }
.code-copy.is-copied { background: var(--signal-glow); color: #1a1714; border-color: transparent; }
.code-copy .copy-done { display: none; }
.code-copy.is-copied .copy-default { display: none; }
.code-copy.is-copied .copy-done { display: inline; }
@media (hover: none) { .code-copy { opacity: 1; transform: none; } }

/* hover-to-copy heading anchors */
.prose :is(h2, h3) .anchor {
  display: inline-block; margin-left: 0.5ch;
  font-family: var(--mono); font-weight: 500;
  font-size: 0.5em; line-height: 1; vertical-align: middle;
  color: var(--ink-faint); text-decoration: none;
  opacity: 0; transform: translateX(-0.25rem);
  transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
}
.prose :is(h2, h3):hover .anchor,
.prose .anchor:focus-visible { opacity: 1; transform: none; }
.prose .anchor:hover { color: var(--signal-ink); }
.prose .anchor.is-copied { opacity: 1; color: var(--signal); }
@media (prefers-reduced-motion: reduce) { .prose .anchor { transition: opacity 0.16s ease; transform: none; } }

/* reading-progress bar (reader only) */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 30; background: var(--signal);
  box-shadow: 0 0 8px var(--signal-glow);
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) { .read-progress { transition: none; } }

/* editorial pull-quote with a hanging vermilion quote mark */
.prose blockquote {
  position: relative; margin: 2.1rem 0;
  padding-left: clamp(2.1rem, 5vw, 3.2rem);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.5; color: var(--ink); text-wrap: pretty;
}
.prose blockquote::before {
  content: "\201C"; position: absolute; left: -0.04em; top: -0.12em;
  font-family: var(--display); font-weight: 800; font-size: 3.4em; line-height: 1;
  color: var(--signal); opacity: 0.2; pointer-events: none;
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: 0.7rem; }
.prose blockquote em { font-style: italic; }

.prose table { min-width: 0; }
.prose :is(table) { display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; scrollbar-width: none; }
.prose :is(table)::-webkit-scrollbar { display: none; }
.prose tbody tr { transition: background-color 0.14s ease; }
.prose tbody tr:hover { background: var(--signal-wash); }
@media (prefers-reduced-motion: reduce) { .prose tbody tr { transition: none; } }

/* mermaid: framed as a figure so diagrams carry visual weight */
.prose .mermaid {
  position: relative;
  margin-block: 2rem; padding: clamp(1.1rem, 3vw, 2rem) 1rem;
  text-align: center; background: var(--paper-sunk);
  border: 1px solid var(--line); border-radius: 14px;
  overflow-x: auto; scrollbar-width: none;
}
.prose .mermaid::-webkit-scrollbar { display: none; }
.prose .mermaid svg { max-width: 100%; height: auto; }
/* mermaid renders an invisible pre-paint copy as raw text; keep it from flashing */
.prose .mermaid:not([data-processed="true"]) { color: transparent; min-height: 6rem; }

/* expand affordance on each diagram */
.diagram-expand {
  position: absolute; top: 0.7rem; right: 0.7rem;
  display: inline-flex; align-items: center; gap: 0.4ch; cursor: pointer;
  padding: 0.32rem 0.6rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.02em; line-height: 1;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  color: var(--ink-soft); opacity: 0.62;
  transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.diagram-expand svg { display: block; }
.prose .mermaid:hover .diagram-expand { opacity: 1; }
.diagram-expand:hover, .diagram-expand:focus-visible {
  opacity: 1; color: var(--signal-ink);
  border-color: color-mix(in oklab, var(--signal) 40%, var(--line));
  background: var(--paper);
}
@media (hover: none) { .diagram-expand { opacity: 1; } }

/* diagram lightbox */
.diagram-modal {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in oklab, var(--ink) 95%, transparent);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 0.2s ease;
}
.diagram-modal.is-open { opacity: 1; }
.diagram-modal__bar {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  padding: 0.9rem 1rem;
}
.dm-btn {
  min-width: 2.4rem; height: 2.4rem; padding: 0 0.8rem; cursor: pointer;
  font-family: var(--mono); font-size: 1rem; font-weight: 600;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 9px;
  transition: background-color 0.15s, color 0.15s;
}
.dm-btn:hover { background: var(--signal); color: var(--paper); border-color: transparent; }
.dm-close { font-size: 1.3rem; }
.diagram-modal__stage {
  flex: 1; min-height: 0; overflow: hidden; cursor: grab;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  touch-action: none;
}
.diagram-modal__stage:active { cursor: grabbing; }
.diagram-modal__zoom {
  display: flex; align-items: center; justify-content: center;
  transform-origin: center center; transition: transform 0.05s linear; will-change: transform;
}
.diagram-modal__zoom svg { width: auto; height: auto; max-width: 90vw; max-height: 80vh; }
@media (prefers-reduced-motion: reduce) { .diagram-modal, .diagram-modal__zoom { transition: none; } }

/* footnotes (markdown-it-footnote) */
.prose hr.footnotes-sep { border: none; border-top: 1px solid var(--line); margin: 2.6rem 0 0; }
/* cancel the global section{padding-block:var(--bay)} this <section> inherits */
.prose .footnotes { margin-top: 1.4rem; padding-block: 0; font-size: 0.9rem; color: var(--ink-soft); }
.prose .footnotes-list { padding-left: 1.4rem; display: grid; gap: 0.7rem; }
.prose .footnotes-list li { line-height: 1.6; }
.prose .footnotes-list li::marker { color: var(--signal); font-family: var(--mono); }
.prose .footnote-ref a { font-family: var(--mono); font-size: 0.82em; text-decoration: none; }

.reader-nav { max-width: 58rem; margin: 3rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; }
.reader-nav a { text-decoration: none; max-width: 48%; }
.reader-nav .dir { display: block; font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); }
.reader-nav .ttl { font-family: var(--display); font-weight: 700; color: var(--ink); }
.reader-nav a:hover .ttl { color: var(--signal-ink); }
.reader-nav .next { margin-left: auto; text-align: right; }

/* ===================================================================
   SKILL PAGE  (skill.html)
   =================================================================== */
.skill-h1 { max-width: 17ch; }
.skill-lede { max-width: 56ch; }

.install { margin-top: clamp(2rem, 4vw, 3.2rem); max-width: 48rem; }
.cmd-label { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.7rem; }

.cmd {
  display: flex; align-items: stretch;
  background: var(--machine); border-radius: 11px; overflow: hidden;
  box-shadow: 0 18px 40px -28px oklch(0.3 0.05 50 / 0.55);
}
.cmd__text {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--mono); color: var(--machine-ink);
  font-size: clamp(0.8rem, 0.66rem + 0.6vw, 1rem);
  padding: 1rem 1.15rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: break-word;
  background: none; border: none;
}
.cmd__text::before { content: "$ "; color: var(--machine-soft); }
.cmd__copy {
  flex: none; cursor: pointer; border: none;
  border-left: 1px solid oklch(1 0 0 / 0.09);
  background: var(--machine-2); color: var(--machine-ink);
  font-family: var(--mono); font-size: 0.82rem; font-weight: 500;
  padding: 0 1.15rem; transition: background-color 0.18s, color 0.18s;
}
.cmd__copy:hover { background: var(--signal); color: var(--paper); }
.cmd__copy.is-copied { background: var(--signal-glow); color: #1a1714; }
.cmd__copy .copy-done { display: none; }
.cmd__copy.is-copied .copy-default { display: none; }
.cmd__copy.is-copied .copy-done { display: inline; }
.cmd-note { margin-top: 0.95rem; color: var(--ink-soft); font-size: 0.96rem; max-width: 52ch; }
.cmd--slim { margin-top: 0.4rem; }

.tool-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.5rem 0 0; padding: 0; }
.tool-row li { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.32rem 0.8rem; }
.tool-row li.tool-row__more { border-color: transparent; color: var(--ink-faint); padding-left: 0.2rem; }

.where-note { margin-top: 1.9rem; margin-bottom: 0.65rem; color: var(--ink-soft); }
.manual-grid { display: grid; gap: clamp(2rem, 4vw, 2.8rem); max-width: 52rem; }

/* download + read-the-source actions under the install command */
.install-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin-top: 1.25rem; }
.btn.dl svg { width: 15px; height: 15px; flex: none; }
.lnk-arrow { font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.02em; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.5ch; transition: color 0.18s; }
.lnk-arrow:hover { color: var(--signal-ink); }
.lnk-arrow span { color: var(--signal); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1); }
.lnk-arrow:hover span { transform: translateX(3px); }

/* ===================================================================
   ON-PAGE RAIL  (right-edge table of contents, all pages)
   =================================================================== */
:is([data-sec], .prose h2, .prose h3) { scroll-margin-top: 5.5rem; }

.rail {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 15; display: none;
  padding: 0.55rem 0.7rem;
}
/* Only where the side gutter is wide enough to sit clear of the content. */
@media (min-width: 1240px) and (min-height: 600px) {
  .rail { display: block; }
}

.rail__panel {
  position: absolute; inset: 0; z-index: 0;
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  border: 1px solid var(--line); border-right: none;
  border-radius: 13px 0 0 13px;
  box-shadow: -26px 0 48px -34px oklch(0.3 0.05 50 / 0.6);
  -webkit-backdrop-filter: saturate(1.1) blur(7px);
  backdrop-filter: saturate(1.1) blur(7px);
  opacity: 0; transform: translateX(0.7rem); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.rail:hover .rail__panel, .rail:focus-within .rail__panel { opacity: 1; transform: none; }

.rail ul { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.05rem; }
.rail__link {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem;
  padding: 0.3rem 0; text-decoration: none; color: var(--ink-faint);
}
.rail__label {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em;
  color: var(--ink-soft);
  transition: max-width 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease, color 0.2s;
}
.rail__tick {
  flex: none; width: 16px; height: 2px; border-radius: 2px;
  background: var(--line-strong);
  transition: width 0.32s cubic-bezier(0.22,1,0.36,1), background-color 0.25s;
}

.rail__link:hover .rail__tick { background: var(--signal-ink); width: 22px; }
.rail__link.is-active .rail__tick { width: 30px; background: var(--signal); }
.rail__link.is-active .rail__label { color: var(--ink); }

.rail:hover .rail__label, .rail:focus-within .rail__label { max-width: 18rem; opacity: 1; }
.rail__link:hover .rail__label { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .rail__panel, .rail__label, .rail__tick { transition: none; }
}