/* ════════════════════════════════════════════════════════
   Stoic — /stoic/
   Page-scoped, loaded via `extra_css`. Colour comes only
   from the tokens in styles.css, so both themes work.
   Same architecture as principles.css and high-agency.css.
   ════════════════════════════════════════════════════════ */

.page-header .subtitle { max-width: none; }

/* Long-form reading page: shadow the compact UI type scale. */
.stoic {
  --fs-2xs: 0.8rem;
  --fs-xs: 0.88rem;
  --fs-sm: 0.97rem;
  --fs-md: 1.04rem;
  --fs-base: 1.09rem;
  --fs-title: 1.28rem;
  --fs-heading: clamp(1.55rem, 2.8vw, 2rem);
}
/* Keep the visual lesson continuous instead of isolating it in a narrow column. */
body:has(.stoic) #pointcloud-bg,body:has(.stoic) .shape-toggle-btn{display:none!important}
.stoic .page-content{max-width:62rem!important}.stoic .st-part{margin-bottom:2.25rem!important}.stoic .st-part+.st-part{padding-top:2.25rem!important}
.stoic .page-content { max-width: 52rem; }

/* Narrative opening and spine */
.st-kicker { margin: 0 0 0.6rem !important; color: var(--accent) !important; font: 700 var(--fs-xs)/1.2 "Space Grotesk",sans-serif !important; letter-spacing: .11em; text-transform: uppercase; }
.st-lead { max-width: 17ch; margin: 0 0 1.4rem !important; color: var(--text) !important; font: 650 clamp(2rem,5.8vw,4rem)/1.02 "Space Grotesk",sans-serif !important; letter-spacing: -.04em; }
.st-story-map { display: grid; grid-template-columns: repeat(9,auto); align-items: center; justify-content: space-between; gap: .45rem; margin: 1.8rem 0 1.1rem; padding: 1.2rem; border: 1px solid var(--border-ui); border-radius: var(--radius-lg); background: linear-gradient(110deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface),color-mix(in srgb,var(--cta) 7%,var(--surface))); }
.st-story-node { display: grid; place-items: center; gap: .35rem; min-width: 5.4rem; color: var(--muted); font: 650 var(--fs-xs)/1.15 "Space Grotesk",sans-serif; text-align: center; }
.st-story-node .st-i { font-size: 1.55rem; color: var(--accent); }
.st-story-node small { color: var(--cta); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.st-story-node.is-gate { position: relative; padding: .75rem .55rem; border: 1px solid var(--cta); border-radius: var(--radius-md); background: color-mix(in srgb,var(--cta) 10%,var(--surface)); color: var(--text); }
.st-story-node.is-gate::before { content: "choice"; position: absolute; top: -.55rem; padding: .1rem .4rem; border-radius: 999px; background: var(--surface); color: var(--cta); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.st-story-arrow { color: var(--line-strong); font-size: 1.2rem; }
.st-story-rail { position: sticky; top: 4.4rem; z-index: 8; display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; margin: 0 0 2.2rem; border: 1px solid var(--border-ui); border-radius: var(--radius-md); background: var(--line); overflow: hidden; box-shadow: 0 8px 24px color-mix(in srgb,var(--bg) 85%,transparent); }
.st-story-rail a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .4rem; min-width: 0; padding: .55rem .6rem; background: color-mix(in srgb,var(--surface) 94%,transparent); color: var(--muted); text-decoration: none; font-size: .7rem; line-height: 1.25; }
.st-story-rail a:hover { color: var(--text); background: var(--surface); }
.st-story-rail a.is-current { color: var(--text); box-shadow: inset 0 -2px var(--cta); }
.st-story-rail span { color: var(--accent); font: 700 .62rem/1 "Space Grotesk",sans-serif; }

/* Diagrams are scenes; bordered cards remain tools and archives. */
#judgement .st-lab,#disciplines .st-lab,#above .st-lab,#death .st-lab { width: min(64rem,calc(100vw - 2rem)); margin-inline: 50%; transform: translateX(-50%); border: 0; border-radius: 1.5rem; padding: clamp(1.2rem,4vw,2.4rem); background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--surface-soft)),color-mix(in srgb,var(--cta) 4%,var(--surface))); }
#judgement .st-lab { width: min(76rem,calc(100vw - 2rem)); }
#judgement .st-machine { position: relative; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(18rem,1.45fr) auto minmax(0,1fr); align-items: stretch; gap: .7rem; }
#judgement .st-stage { grid-template-columns: 2.2rem minmax(0,1fr); min-width: 0; height: 100%; padding: 1rem; }
#judgement .st-stage > span:last-child { min-width: 0; }
#judgement .st-stage.is-lever { box-shadow: 0 0 0 1px color-mix(in srgb,var(--cta) 35%,transparent),0 14px 30px color-mix(in srgb,var(--cta) 9%,transparent); }
#judgement .st-judges { grid-template-columns: 1fr; }
#judgement .st-arrow { transform: rotate(-90deg); }
#above .st-zoom-svg,#death .st-fame-svg { filter: drop-shadow(0 18px 32px color-mix(in srgb,var(--accent) 12%,transparent)); }
.st-practice-grid { position: relative; }
.st-practice-grid::before { content:""; position:absolute; left: 1.5rem; right: 1.5rem; top: 2.05rem; height: 1px; background: linear-gradient(90deg,var(--accent),var(--line-strong),var(--cta)); }
.st-practice { position: relative; background: color-mix(in srgb,var(--surface) 94%,transparent); }

@media(max-width:820px){
  .st-story-map{grid-template-columns:1fr;justify-items:center}.st-story-arrow{transform:rotate(90deg)}
  .st-story-rail{position:relative;top:auto;grid-template-columns:1fr 1fr}.st-story-rail a:last-child{grid-column:1/-1}
  #judgement .st-machine{grid-template-columns:1fr}#judgement .st-arrow{transform:none}.st-practice-grid::before{display:none}
}
@media(max-width:1050px){
  #judgement .st-machine{grid-template-columns:1fr;gap:.5rem}
  #judgement .st-arrow{transform:none;min-height:1.1rem}
  #judgement .st-stage{height:auto}
}

/* ── Reading progress ─────────────────────────────────── */
.st-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; pointer-events: none; }
.st-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--cta));
  transition: width 0.1s linear;
}

/* ── Prose ────────────────────────────────────────────── */
.st-prose p, .st-prose li { color: var(--muted); line-height: 1.78; font-size: var(--fs-base); }
.st-prose p { margin: 0 0 0.95rem; }
.st-prose ul, .st-prose ol { padding-left: 1.3rem; margin: 0 0 0.95rem; }
.st-prose li { margin: 0.4rem 0; }
.st-prose b, .st-prose strong { color: var(--text); font-weight: 600; }
.st-prose a {
  color: var(--text); text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 3px;
}
.st-prose a:hover { color: var(--accent); }

.st-part { margin: 0 0 var(--gap-4); scroll-margin-top: 92px; }
.st-part + .st-part { padding-top: var(--gap-4); border-top: 1px solid var(--line); }
.st-part h2 {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--fs-heading); color: var(--text);
  margin: 0 0 0.4rem; line-height: 1.25;
}
.st-part h2 .n { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
.st-part h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--fs-title); color: var(--text);
  margin: 1.9rem 0 0.7rem; scroll-margin-top: 92px;
}
.st-deck { margin: 0 0 1.4rem; color: var(--muted); font-size: var(--fs-md); line-height: 1.6; max-width: 62ch; }
.st-part > p, .st-part > .st-deck { max-width: 68ch; }

/* ── Icons ────────────────────────────────────────────── */
.st-i {
  width: 1em; height: 1em; display: block; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.st-i .st-i-fill { fill: currentColor; stroke: none; }

/* ── Shared lab shell ─────────────────────────────────── */
.st-lab {
  border: 1px solid var(--border-ui);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  padding: var(--card-pad-lg);
  margin: 0 0 var(--gap-4);
  scroll-margin-top: 92px;
}
.st-lab-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gap-2); flex-wrap: wrap; margin-bottom: 0.9rem;
}
.st-lab-head .t-eyebrow { margin: 0; }
.st-lab-head h5 { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-title); color: var(--text); margin: 0.15rem 0 0; }
.st-hint { font-size: var(--fs-xs); color: var(--muted); }

/* ── Buttons ──────────────────────────────────────────── */
.st-btn {
  font-family: inherit; font-size: var(--fs-xs); font-weight: 700;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--border-ui); border-radius: var(--radius-md);
  padding: 0.42rem 0.8rem; cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.st-btn:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.st-btn.is-primary { background: var(--cta); color: var(--cta-text); border-color: var(--cta); }
.st-btn.is-primary:hover { color: var(--cta-text); opacity: 0.9; }
.st-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.st-btn-row { display: flex; flex-wrap: wrap; gap: var(--gap-1); margin-top: var(--gap-2); align-items: center; }

.st-input {
  width: 100%; font-family: inherit; font-size: var(--fs-base); color: var(--text);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid var(--border-ui); border-radius: var(--radius-md);
  padding: 0.7rem 0.85rem; line-height: 1.5;
}
.st-input::placeholder { color: var(--muted); opacity: 0.7; }
.st-label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--text); margin: 0 0 0.35rem; }

.st-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── The two men ──────────────────────────────────────── */
.st-two { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--gap-2); align-items: stretch; }
@media (max-width: 700px) { .st-two { grid-template-columns: 1fr; } }
.st-man {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--card-pad-sm); min-width: 0;
}
.st-man .ico {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius-md); font-size: 1.5rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); margin-bottom: 0.7rem;
}
.st-man h5 { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-title); color: var(--text); margin: 0 0 0.2rem; }
.st-man .role { font-size: var(--fs-2xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.7rem; }
.st-man dl { margin: 0; display: grid; gap: 0.45rem; }
.st-man .row { display: grid; grid-template-columns: 5.6rem 1fr; gap: 0.6rem; align-items: baseline; }
.st-man dt { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.st-man dd { margin: 0; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.st-vs {
  display: grid; place-items: center; align-self: center;
  font-family: "Space Grotesk", sans-serif; font-size: var(--fs-2xs);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.st-two-note {
  margin-top: var(--gap-2); border-top: 1px solid var(--line); padding-top: var(--gap-2);
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.75;
}
.st-two-note b { color: var(--text); }

/* ── Dichotomy sorter ─────────────────────────────────── */
.st-sort-item {
  min-height: 4.6rem; display: grid; place-items: center; text-align: center;
  border: 1px solid var(--border-ui); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 45%, var(--surface));
  padding: 0.9rem 1rem; font-size: var(--fs-md); color: var(--text); line-height: 1.5;
}
.st-bins { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2); margin-top: var(--gap-2); }
@media (max-width: 520px) { .st-bins { grid-template-columns: 1fr; } }
.st-bin {
  display: grid; gap: 0.3rem; place-items: center;
  font-family: inherit; cursor: pointer;
  border: 1px dashed var(--border-ui); border-radius: var(--radius-md);
  background: var(--surface); padding: 0.9rem 0.8rem;
  transition: all 0.16s ease;
}
.st-bin:hover { border-style: solid; border-color: var(--accent); transform: translateY(-2px); }
.st-bin .bt { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.st-bin .bs { font-size: var(--fs-2xs); color: var(--muted); }
.st-bin .st-i { font-size: 1.4rem; color: var(--accent); }
.st-bin.mine:hover { border-color: var(--cta); }
.st-sort-fb {
  display: none; margin-top: var(--gap-2);
  border: 1px solid var(--accent); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); padding: var(--card-pad-sm);
}
.st-sort-fb.is-on { display: block; animation: st-rise 0.3s ease both; }
.st-sort-fb .v { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-md); font-weight: 700; color: var(--text); margin: 0 0 0.35rem; }
.st-sort-fb p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }
.st-sort-meta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--gap-2);
  flex-wrap: wrap; margin-top: var(--gap-2); padding-top: var(--gap-2);
  border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted);
}
.st-pips { display: flex; gap: 0.28rem; flex-wrap: wrap; }
.st-pip { width: 20px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 25%, transparent); transition: background 0.3s ease; }
.st-pip.ok { background: var(--cta); }
.st-pip.no { background: var(--accent); }
.st-pip.current { background: var(--text); }
@keyframes st-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.st-tally { margin-top: var(--gap-2); font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }
.st-tally b { color: var(--accent); font-family: "Space Grotesk", sans-serif; }

/* ── The judgement machine ────────────────────────────── */
.st-machine { display: grid; gap: 0.5rem; }
.st-stage {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); padding: 0.85rem 0.95rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.st-stage.is-lever { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.st-stage .sico {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: var(--radius-md); font-size: 1.25rem; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.st-stage.is-lever .sico { color: var(--cta); background: color-mix(in srgb, var(--cta) 16%, transparent); }
.st-stage .sk {
  font-family: "Space Grotesk", sans-serif; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 0.2rem;
}
.st-stage .sv { font-size: var(--fs-md); color: var(--text); line-height: 1.55; }
.st-stage .sn { display: block; margin-top: 0.3rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.st-arrow { display: grid; place-items: center; color: var(--muted); font-size: var(--fs-sm); }
.st-judges { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.4rem; margin-top: 0.6rem; }
.st-judge {
  font-family: inherit; text-align: left; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.6rem 0.7rem; cursor: pointer; transition: all 0.15s ease;
}
.st-judge:hover { border-color: var(--accent); color: var(--text); }
.st-judge.is-on { border-color: var(--cta); background: color-mix(in srgb, var(--cta) 12%, var(--surface)); color: var(--text); }

/* ── Three disciplines triad ──────────────────────────── */
.st-triad-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-3); align-items: center;
}
@media (max-width: 720px) { .st-triad-wrap { grid-template-columns: 1fr; } }
.st-triad { width: 100%; height: auto; display: block; max-width: 380px; margin: 0 auto; }
.st-triad .edge { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.st-triad .node { cursor: pointer; color: var(--accent); transition: color 0.22s ease, opacity 0.22s ease; }
.st-triad .bub { fill: var(--surface); stroke: var(--border-ui); stroke-width: 1.6; transition: fill 0.22s ease, stroke 0.22s ease; }
.st-triad .node:hover .bub, .st-triad .node.is-on .bub { fill: color-mix(in srgb, var(--cta) 20%, var(--surface)); stroke: var(--cta); }
.st-triad .node:hover, .st-triad .node.is-on { color: var(--cta); }
.st-triad.has-focus .node:not(.is-on) { opacity: 0.35; }
.st-triad .node:focus-visible { outline: none; }
.st-triad .node:focus-visible .bub { stroke: var(--cta); stroke-width: 3; }
.st-triad .tlab {
  font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 700;
  fill: var(--muted); text-anchor: middle; transition: fill 0.2s ease;
}
.st-triad .tlab.is-on { fill: var(--text); }
.st-triad-read {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
  padding: var(--card-pad-sm); min-height: 10rem;
}
.st-triad-read .t { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-md); font-weight: 700; color: var(--text); margin: 0 0 0.4rem; }
.st-triad-read p { margin: 0 0 0.55rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }
.st-triad-read p:last-child { margin-bottom: 0; }
.st-triad-read .who { font-size: var(--fs-2xs); color: var(--accent); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; }

/* ── Passage console ──────────────────────────────────── */
.st-results { margin-top: var(--gap-2); display: grid; gap: var(--gap-1); }
.st-result {
  display: block; width: 100%; text-align: left; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); padding: 0.7rem 0.85rem; cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.st-result:hover, .st-result:focus-visible { border-color: var(--accent); transform: translateX(3px); }
.st-result .rt { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-sm); font-weight: 700; color: var(--text); display: block; margin-bottom: 0.2rem; }
.st-result .rq { font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; display: block; }
.st-result mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); border-radius: 2px; padding: 0 1px; }
.st-empty { font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; margin: var(--gap-2) 0 0; }

.st-filters { display: flex; flex-wrap: wrap; gap: var(--gap-1); margin: 0 0 var(--gap-2); }
.st-count { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--gap-2); }

.st-cards { display: grid; gap: var(--gap-2); }
.st-card {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); background: var(--surface);
  overflow: hidden; scroll-margin-top: 92px;
}
.st-card[hidden] { display: none; }
.st-card.is-hit { border-color: var(--cta); border-left-color: var(--cta); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cta) 25%, transparent); }
.st-card > button {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: start;
  width: 100%; text-align: left; font-family: inherit;
  background: none; border: 0; color: inherit; padding: 0.95rem 1.05rem; cursor: pointer;
}
.st-card > button:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.st-card .cico {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem;
  border-radius: var(--radius-md); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent); font-size: 1.35rem; margin-top: 0.1rem;
  transition: color 0.2s ease, background 0.2s ease;
}
.st-card:hover .cico, .st-card.is-open .cico { color: var(--cta); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.st-card .sit { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-title); font-weight: 700; color: var(--text); line-height: 1.45; margin-right: 0.15rem; }
.st-card .who { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.st-card .chev { color: var(--muted); font-size: var(--fs-sm); transition: transform 0.25s ease; margin-top: 0.25rem; }
.st-card.is-open .chev { transform: rotate(90deg); }

.st-card-body { display: none; padding: 0 1.05rem 1.05rem; }
.st-card.is-open .st-card-body { display: block; animation: st-rise 0.3s ease both; }
.st-quote {
  margin: 0 0 0.9rem; padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 2px solid var(--accent);
}
.st-quote p { margin: 0 0 0.45rem; font-size: 1.1rem; line-height: 1.7; color: var(--text); }
.st-quote cite { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.st-take { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.75; }
.st-take b { color: var(--text); }
.st-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; }
.st-tag {
  font-family: "Space Grotesk", sans-serif; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.06em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.18rem 0.55rem;
}

/* ── View from above ──────────────────────────────────── */
.st-zoom-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-3); align-items: center;
}
@media (max-width: 720px) { .st-zoom-wrap { grid-template-columns: 1fr; } }
.st-zoom { width: 100%; height: auto; display: block; max-width: 340px; margin: 0 auto; background: transparent; }
.st-zoom .ring { fill: none; stroke: var(--line); stroke-width: 1.2; transition: opacity 0.35s ease, stroke 0.35s ease; }
.st-zoom .ring.is-on { stroke: var(--accent); }
.st-zoom .dot { fill: var(--cta); transition: r 0.35s ease; }
.st-zoom .zlab {
  font-family: "Space Grotesk", sans-serif; font-size: 11px; font-weight: 700;
  fill: var(--muted); text-anchor: middle; transition: fill 0.3s ease, opacity 0.3s ease;
}
.st-zoom .zlab.is-on { fill: var(--text); }
.st-zoom-read {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
  padding: var(--card-pad-sm); min-height: 9rem;
}
.st-zoom-read .t { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-md); font-weight: 700; color: var(--text); margin: 0 0 0.4rem; }
.st-zoom-read p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }
.st-range { width: 100%; accent-color: var(--accent); height: 1.6rem; cursor: pointer; margin-top: var(--gap-2); }

/* ── Practice cards ───────────────────────────────────── */
.st-practices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-2); }
.st-practice {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--card-pad-sm);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.st-practice .pico {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: var(--radius-md); font-size: 1.4rem; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.st-practice h5 { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-md); color: var(--text); margin: 0; }
.st-practice .when { font-size: var(--fs-2xs); color: var(--accent); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; }
.st-practice p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; }
.st-practice .src { margin-top: auto; padding-top: 0.55rem; border-top: 1px solid var(--line); font-size: var(--fs-2xs); color: var(--muted); }

/* ── Premeditation ────────────────────────────────────── */
.st-pm-steps { display: grid; gap: var(--gap-1); margin-top: var(--gap-2); }
.st-pm-step {
  display: none;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 50%, var(--surface)); padding: var(--card-pad-sm);
}
.st-pm-step.is-on { display: block; animation: st-rise 0.35s ease both; }
.st-pm-step .q { font-family: "Space Grotesk", sans-serif; font-size: var(--fs-md); color: var(--text); margin: 0 0 0.5rem; }
.st-pm-step .a { font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; margin: 0; }
.st-echo { font-family: "Space Grotesk", sans-serif; color: var(--accent); font-weight: 700; }

/* ── Fame decay ───────────────────────────────────────── */
.st-fame { width: 100%; height: auto; display: block; }
.st-fame .grid { stroke: var(--line); stroke-width: 1; }
.st-fame .ax { stroke: var(--line-strong); stroke-width: 1.4; }
.st-fame .curve { fill: none; stroke: var(--cta); stroke-width: 2.5; }
.st-fame .area { fill: color-mix(in srgb, var(--cta) 14%, transparent); stroke: none; }
.st-fame .tick { font-size: 10.5px; fill: var(--muted); }
.st-fame .scrub { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.st-fame .head { fill: var(--cta); }
.st-fame-read {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-1); margin-top: var(--gap-2);
}
.st-fame-read div {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.7rem 0.8rem; background: var(--surface);
}
.st-fame-read .k { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.st-fame-read .v { font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--text); margin-top: 0.15rem; }

/* ── Closing ──────────────────────────────────────────── */
.st-final {
  border: 1px solid var(--border-ui); border-radius: var(--radius-lg);
  background: var(--surface-soft); padding: var(--card-pad-lg); margin-top: var(--gap-3);
}
.st-final p { margin: 0 0 0.8rem; font-size: var(--fs-base); color: var(--muted); line-height: 1.8; }
.st-final p:last-child { margin-bottom: 0; }
.st-final b { color: var(--text); }

.st-note {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--card-pad-lg); margin-top: var(--gap-4);
}
.st-note p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.75; margin: 0 0 0.7rem; }
.st-note p:last-child { margin-bottom: 0; }
.st-note b { color: var(--text); }
.st-note a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.st-note a:hover { color: var(--accent); }

/* ── Small screens ────────────────────────────────────── */
@media (max-width: 560px) {
  .st-lab, .st-final, .st-note { padding: var(--card-pad-sm); }
  .st-part h3 { margin-top: 1.5rem; }
  .st-quote p { font-size: 1.02rem; }
  .st-man .row { grid-template-columns: 4.8rem 1fr; }
  .st-stage { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ── Corpus charts ────────────────────────────────────────
   All three are counted from _data/stoic.yml at run time, so they cannot
   disagree with the passages listed underneath them. */
.st-corpus{margin:0 0 var(--gap-3);padding:1.15rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.st-viz-k{margin:0 0 .9rem!important;font:700 .72rem "Space Grotesk",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--st-accent,var(--accent))!important}
.st-split-wrap{margin-bottom:1.2rem}
.st-split{display:flex;gap:3px;height:2.6rem;border-radius:var(--radius-sm);overflow:hidden}
.st-split span{display:grid;place-content:center;gap:.05rem;text-align:center;font-size:.68rem;color:var(--bg);line-height:1.2}
.st-split b{font:700 1rem "Space Grotesk",sans-serif}
.st-split .med{background:color-mix(in srgb,var(--accent) 78%,var(--bg))}
.st-split .enc{background:color-mix(in srgb,var(--accent-2) 74%,var(--bg))}
.st-cap{margin:.45rem 0 0!important;font-size:.76rem!important;color:var(--muted)!important;line-height:1.5}
.st-charts{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
.st-chart h4{margin:0 0 .5rem;font:700 .8rem "Space Grotesk",sans-serif;color:var(--text)}
.st-chart svg{display:block;width:100%;height:auto}
.st-ax{stroke:var(--line-strong);stroke-width:1.2}
.st-bar{fill:color-mix(in srgb,var(--accent) 62%,transparent)}
.st-bar.is-empty{fill:color-mix(in srgb,var(--muted) 16%,transparent)}
.st-barn{font:700 10px "Space Grotesk",sans-serif;fill:var(--text)}
.st-tick{font-size:9.5px;fill:var(--muted)}
.st-chap{fill:color-mix(in srgb,var(--muted) 16%,transparent)}
.st-chap.is-on{fill:color-mix(in srgb,var(--accent-2) 72%,transparent)}
.st-themes{display:grid;gap:.28rem}
.st-theme{display:grid;grid-template-columns:9.5rem 1fr 2rem;gap:.6rem;align-items:center;width:100%;padding:.3rem .45rem;border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--muted);font:inherit;font-size:.8rem;text-align:left;cursor:pointer}
.st-theme:hover{border-color:var(--accent);color:var(--text)}
.st-theme .track{height:.55rem;border-radius:999px;background:color-mix(in srgb,var(--muted) 14%,transparent);overflow:hidden}
.st-theme .track i{display:block;height:100%;background:color-mix(in srgb,var(--accent) 62%,transparent)}
.st-theme .n{font:700 .82rem "Space Grotesk",sans-serif;color:var(--text);text-align:right}

/* ── The shape of a day ───────────────────────────────── */
.st-day{display:block;width:100%;height:auto;max-width:34rem;margin:0 auto}
.st-day-arc{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-dasharray:6 6;opacity:.75}
.st-day-ground{stroke:var(--line-strong);stroke-width:1.2}
.st-day-node{cursor:pointer}
.st-day-node circle{fill:var(--surface);stroke:var(--border-ui);stroke-width:2;transition:fill .18s ease,stroke .18s ease}
.st-day-node text{font:700 11px "Space Grotesk",sans-serif;fill:var(--muted)}
.st-day-node:hover circle,.st-day-node.is-on circle{fill:var(--accent);stroke:var(--accent)}
.st-day-node:hover text,.st-day-node.is-on text{fill:var(--text)}
.st-day-read{margin-top:var(--gap-2);padding:.85rem 1rem;border-left:3px solid var(--accent);background:var(--surface-soft);min-height:4.5rem}
.st-day-read .t{margin:0 0 .3rem!important;font:700 .95rem "Space Grotesk",sans-serif;color:var(--text)!important}
.st-day-read p{margin:0;font-size:.9rem;line-height:1.6}

@media(max-width:720px){
  .st-charts{grid-template-columns:1fr}
  .st-theme{grid-template-columns:7.5rem 1fr 1.8rem;font-size:.76rem}
  .st-corpus{padding:.9rem}
}

/* ── A diagram inside every passage ───────────────────────
   Eleven shapes. Labels come from each passage's own situation and take, so a
   reader who reaches for the picture first gets the same claim as the prose. */
.st-viz{margin:0 0 1rem;padding:.85rem .95rem;border:1px solid var(--line);border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.st-viz>.k{display:block;margin-bottom:.6rem;font:700 .66rem "Space Grotesk",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.st-viz-cap{margin:.6rem 0 0!important;font-size:.78rem!important;color:var(--muted)!important;line-height:1.55}
.sv b{font:600 .92rem "Space Grotesk",sans-serif;color:var(--text);line-height:1.3}

/* yours / not yours */
.sv-dich{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.sv-dich>div{padding:.65rem .7rem;border-radius:var(--radius-sm);border:1px solid var(--line)}
.sv-dich .k{display:block;margin-bottom:.2rem;font:700 .6rem "Space Grotesk",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.sv-dich .mine{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.sv-dich .mine .k{color:var(--accent)}
.sv-dich .theirs{opacity:.72}
.sv-dich .theirs .k{color:var(--muted)}

/* the pause between */
.sv-gate{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center;text-align:center;font-size:.85rem;color:var(--muted)}
.sv-gate .a,.sv-gate .b{padding:.55rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.sv-gate .b{border-color:var(--accent);color:var(--text)}
.sv-gate .pause{display:grid;gap:.2rem;justify-items:center;font:700 .68rem "Space Grotesk",sans-serif;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.sv-gate .pause i{display:block;width:2px;height:1.5rem;background:var(--accent)}

/* weighed */
.sv-scale{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center}
.sv-scale .pan{padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);text-align:center;opacity:.7}
.sv-scale .pan.is-heavy{opacity:1;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);transform:translateY(4px)}
.sv-scale .fulcrum{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:12px solid var(--muted)}

/* relabelled */
.sv-swap{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.88rem}
.sv-swap .from{padding:.5rem .65rem;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.sv-swap i{color:var(--accent);font-style:normal;font-size:1.1rem}
.sv-swap .to{padding:.5rem .65rem;border:1px solid var(--accent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text);font-weight:600}

/* one in, several readings */
.sv-split .in{margin:0 0 .45rem!important;font:600 .9rem "Space Grotesk",sans-serif;color:var(--text)!important}
.sv-split ul{list-style:none;margin:0;padding:0 0 0 1rem;display:grid;gap:.3rem}
.sv-split li{position:relative;padding:.45rem .6rem;border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:var(--radius-sm);font-size:.85rem;color:var(--muted)}
.sv-split li:before{content:"";position:absolute;left:-1rem;top:-.3rem;bottom:50%;width:.7rem;border-left:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);border-bottom-left-radius:5px}
.sv-split li.is-on{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}

/* in order */
.sv-order{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.sv-order li{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.83rem;color:var(--text)}
.sv-order li b{font:700 .62rem "Space Grotesk",sans-serif;color:var(--cta-text);background:var(--accent);border-radius:3px;padding:.1rem .32rem}
.sv-order li.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}

/* rungs */
.sv-ladder{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sv-ladder li{position:relative;padding:.5rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.85rem;color:var(--muted);background:var(--surface)}
.sv-ladder li.is-on{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.sv-ladder em{float:right;font-style:normal;font:700 .62rem "Space Grotesk",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}

/* large beside small */
.sv-shrink{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}
.sv-shrink .big{padding:1.1rem .8rem;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);text-align:center;font-size:.85rem;color:var(--muted)}
.sv-shrink .small{padding:.5rem .7rem;border:1px solid var(--accent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:.85rem;font-weight:600;color:var(--text)}

/* a limit, and past it */
.sv-measure{display:grid;gap:.35rem}
.sv-measure .lim{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border:1px solid var(--accent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:.85rem;color:var(--text)}
.sv-measure .lim i{flex:none;width:3px;height:1.1rem;background:var(--accent)}
.sv-measure .beyond{padding:.5rem .7rem;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);font-size:.83rem;color:var(--muted)}

/* a core inside */
.sv-rings{position:relative;display:grid;place-items:center;gap:.4rem;padding:1rem;border:1px dashed var(--line-strong);border-radius:var(--radius-md);text-align:center}
.sv-rings .outer{font-size:.78rem;color:var(--muted)}
.sv-rings .core{padding:.5rem .8rem;border:1px solid var(--accent);border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);font-size:.85rem;font-weight:600;color:var(--text)}

/* a cycle */
.sv-loop{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center}
.sv-loop svg{width:5.4rem;height:auto}
.sv-loop .ring{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:5 5}
.sv-loop .node{fill:var(--accent)}
.sv-loop ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.sv-loop li{font-size:.83rem;color:var(--muted)}

@media(max-width:560px){
  .sv-dich,.sv-gate,.sv-scale,.sv-shrink,.sv-loop{grid-template-columns:1fr}
  .sv-gate .pause i{height:1rem}
  .sv-scale .fulcrum{justify-self:center}
}
.st-verdict-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.st-verdict-grid button{padding:.8rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--muted);text-align:left;cursor:pointer}.st-verdict-grid button b{display:block;margin-bottom:.25rem;color:var(--text);font:700 .86rem "Space Grotesk",sans-serif}.st-verdict-grid button span{font-size:.78rem;line-height:1.5}.st-verdict-grid button.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}.st-verdict-read{min-height:2.8rem;margin:.7rem 0 0!important;padding:.65rem;border-left:3px solid var(--accent);color:var(--muted)!important;font-size:.8rem!important}@media(max-width:560px){.st-verdict-grid{grid-template-columns:1fr}}

/* ── What your peace is resting on ────────────────────────
   The split is the doctrine, so it is movable. Shift the footing onto things
   outside your control, then let the news go badly and read what is left. */
.st-fig{margin:1.4rem 0;border:1px solid var(--border-ui);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--accent) 4%,var(--surface));overflow:hidden}
.st-fig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem .8rem;padding:.7rem .95rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.st-fig figcaption .n{font:700 .64rem "Space Grotesk",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.st-fig figcaption b{font:700 1.02rem "Space Grotesk",sans-serif;color:var(--text)}
.st-fig figcaption em{font-style:normal;font-size:.78rem;color:var(--muted)}
.st-fig-body{padding:.95rem}
.st-fig-ctl{display:grid;gap:.25rem;margin:.6rem 0}
.st-fig-ctl span{font:700 .7rem "Space Grotesk",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.st-fig-ctl input[type=range]{width:100%;height:1.5rem;accent-color:var(--accent);cursor:pointer}
.st-fig-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.5rem 0}
.st-fig-btn{padding:.5rem .8rem;border:1px solid var(--border-ui);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:600 .84rem "Space Grotesk",sans-serif;cursor:pointer}
.st-fig-btn:hover{border-color:var(--accent)}
.sy-bar{display:flex;height:2.2rem;border-radius:var(--radius-sm);overflow:hidden}
.sy-bar i{display:block;transition:width .18s ease}
.sy-out{background:color-mix(in srgb,var(--cta) 45%,transparent)}
.sy-in{background:var(--accent)}
.sy-key{display:flex;justify-content:space-between;margin-top:.3rem;font-size:.72rem;color:var(--muted)}
.sy-key .in{color:var(--accent);font-weight:700}
.sy-gauge{position:relative;flex:1 1 12rem;height:1.6rem;border-radius:999px;background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden}
.sy-gauge i{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width .3s ease}
.sy-gauge span{position:absolute;inset:0;display:grid;place-items:center;font:700 .74rem "Space Grotesk",sans-serif;color:var(--text)}
#sy-say{margin:.5rem 0 0!important;font-size:.9rem!important;line-height:1.55;color:var(--text)!important}