
:root{--ground:#E6EBEF;--surface:#F8FAFB;--ink:#16202E;--ink2:#4B5667;--line:#AEB8C4;--rail:#DCE2E8;--fable:#B7791F;--fable-ink:#7E520C;--fable-wash:rgba(183,121,31,.10);--opus:#2E4FD6;--opus-ink:#2440B8;--sonnet:#0B8578;--sonnet-ink:#086A60;--haiku:#C2416B;--haiku-ink:#A3325A;--do-wash:rgba(46,79,214,.06);--guard:#5E6878;--pulse:#B7791F;--think-halo:#E1E0DA;--do-halo:#DBE2EE;--display:"Bricolage Grotesque","Avenir Next",ui-sans-serif,sans-serif;--text:"IBM Plex Sans","Helvetica Neue",ui-sans-serif,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ground:#0E1420;--surface:#172031;--ink:#E8ECF2;--ink2:#A6B0C0;--line:#3A475C;--rail:#141C2A;--fable:#F0B642;--fable-ink:#F4C566;--fable-wash:rgba(240,182,66,.09);--opus:#8299FF;--opus-ink:#9DAFFF;--sonnet:#38C3B1;--sonnet-ink:#5ED3C3;--haiku:#F27A9C;--haiku-ink:#F59AB4;--do-wash:rgba(130,153,255,.06);--guard:#8E99AB;--pulse:#F0B642;--think-halo:#222323;--do-halo:#151C2D;color-scheme:dark}}
:root[data-theme=dark]{--ground:#0E1420;--surface:#172031;--ink:#E8ECF2;--ink2:#A6B0C0;--line:#3A475C;--rail:#141C2A;--fable:#F0B642;--fable-ink:#F4C566;--fable-wash:rgba(240,182,66,.09);--opus:#8299FF;--opus-ink:#9DAFFF;--sonnet:#38C3B1;--sonnet-ink:#5ED3C3;--haiku:#F27A9C;--haiku-ink:#F59AB4;--do-wash:rgba(130,153,255,.06);--guard:#8E99AB;--pulse:#F0B642;--think-halo:#222323;--do-halo:#151C2D;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.5 var(--text);-webkit-font-smoothing:antialiased}
.wrap{padding-inline:max(16px,3vw);padding-block:28px 48px}
a{color:var(--opus-ink);text-underline-offset:2px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
code{font:500 .9em var(--mono)}
.top{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between}
h1{font:800 clamp(30px,4.4vw,58px)/1.02 var(--display);letter-spacing:-.025em;margin:0;max-width:22ch;text-wrap:balance}
h1 .f{color:var(--fable-ink)}
.lede{margin:12px 0 0;color:var(--ink-2);max-width:62ch;font-size:16.5px}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;font:600 15px var(--text);text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:background-color .15s,color .15s}
.btn.primary{background:var(--ink);color:var(--ground)}
.btn:hover{background:var(--ink);color:var(--ground)}
.btn small{font:500 12px var(--mono);opacity:.75}
.alt{font-size:13px;color:var(--ink-2);flex-basis:100%}
.theme{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 13px var(--text);cursor:pointer}
.hero{position:relative;margin:22px 0 0;background:var(--ground)}
.hero-svg{display:block;width:100%;height:auto}
.hero-phone{display:none}
@media (max-width:720px){.hero-desktop{display:none}.hero-phone{display:block}}

.title{font:800 34px/1 "Bricolage Grotesque","Avenir Next",ui-sans-serif,sans-serif;fill:var(--ink);letter-spacing:-.02em}
.band-label{font:700 22px "Bricolage Grotesque","Avenir Next",ui-sans-serif,sans-serif;fill:var(--ink)}
.band-models{font:500 12px "IBM Plex Mono",ui-monospace,Menlo,monospace;fill:var(--ink2)}
.think-halo{paint-order:stroke;stroke:var(--think-halo);stroke-width:6px;stroke-linejoin:round}
.do-halo{paint-order:stroke;stroke:var(--do-halo);stroke-width:6px;stroke-linejoin:round}
.card{fill:var(--surface)}
.label{font:600 15px "IBM Plex Sans","Helvetica Neue",ui-sans-serif,sans-serif;fill:var(--ink)}
.node.fable .label{font:700 18px "Bricolage Grotesque","Avenir Next",ui-sans-serif,sans-serif}
.label.mono{font:500 14px "IBM Plex Mono",ui-monospace,Menlo,monospace}
.sub{font:400 12px "IBM Plex Sans","Helvetica Neue",ui-sans-serif,sans-serif;fill:var(--ink2)}
.group{fill:none;stroke:var(--line);stroke-dasharray:4 4;stroke-width:1}
.group-label{font:600 11px "IBM Plex Mono",ui-monospace,Menlo,monospace;fill:var(--ink2);letter-spacing:.06em;text-transform:uppercase}
.edge{fill:none;stroke:var(--line);stroke-width:1.5}
.edge.spawn{stroke-dasharray:5 4}
.edge.guard{stroke:var(--guard);stroke-dasharray:1.5 4;stroke-linecap:round;opacity:.8}
.edge.return{stroke:var(--fable);stroke-dasharray:2 5;stroke-linecap:round}
.pulse-track{fill:none;stroke:var(--pulse);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 6;opacity:.55}
.rail{fill:var(--rail);stroke:var(--line);stroke-width:1}
.rail-label{font:600 12px "IBM Plex Mono",ui-monospace,Menlo,monospace;fill:var(--ink2);letter-spacing:.08em;text-transform:uppercase}
.legend{font:500 12px "IBM Plex Sans","Helvetica Neue",ui-sans-serif,sans-serif;fill:var(--ink2)}

@keyframes run-desktop{from{stroke-dashoffset:46}to{stroke-dashoffset:-3053.9}}@keyframes run-phone{from{stroke-dashoffset:46}to{stroke-dashoffset:-2429}}
.pulse{fill:none;stroke:var(--pulse);stroke-width:3.5;stroke-linecap:round;animation-duration:6s;animation-timing-function:cubic-bezier(.45,.05,.4,1);animation-iteration-count:infinite}
.paused .pulse{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.pulse{animation:none!important;display:none}.pulse-track{opacity:.8}}
.node{cursor:pointer;outline:none}
.node .hit{fill:transparent}
.node .ring{fill:none;stroke:var(--ink);stroke-width:2;opacity:0}
.node:focus-visible .ring,.node.on .ring{opacity:1}
.node:hover .card{fill:var(--rail)}
.legend-row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:10px;font:500 13px var(--text);color:var(--ink-2)}
.legend-row .hint{font-style:italic}
.dot{display:inline-block;border-radius:50%;vertical-align:middle;background:var(--line);width:10px;height:10px;margin-right:8px;flex:none}
.dot.fable{background:var(--fable);width:20px;height:20px}.dot.opus{background:var(--opus);width:14px;height:14px}
.dot.sonnet{background:var(--sonnet);width:10px;height:10px}.dot.haiku{background:var(--haiku);width:7px;height:7px}
.legend-row .pulse-key{display:inline-block;width:28px;border-top:3px dotted var(--pulse);vertical-align:middle;margin-right:6px}
.pp{min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 13px var(--text);cursor:pointer}
.card-pop{position:absolute;z-index:5;width:min(300px,calc(100% - 16px));background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.45;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;pointer-events:none}
.card-pop.show{opacity:1;transform:none;pointer-events:auto}
.card-pop h4{margin:0 0 4px;font:700 16px var(--display);display:flex;align-items:center;gap:0}
.card-pop .m{font:500 11px var(--mono);color:var(--ink-2);margin-left:auto;padding-left:8px}
.card-pop p{margin:0 0 6px}
.card-pop blockquote{margin:0;padding-left:10px;border-left:2px solid var(--fable);color:var(--ink)}
main section{margin-top:64px}
h2{font:700 clamp(22px,2.4vw,30px)/1.15 var(--display);letter-spacing:-.015em;margin:0 0 18px;max-width:40ch;display:flex;align-items:center}
h3{font:700 18px/1.25 var(--display);margin:0 0 8px}
.kicker{margin:0 0 6px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center}
.muted{color:var(--ink-2)}
.note{color:var(--ink-2);font-size:13.5px;margin:14px 0 0;max-width:80ch}
dl{margin:0 0 8px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}dt{font-weight:600;color:var(--ink-2)}dd{margin:0}
blockquote.q{margin:10px 0 0;padding:2px 0 2px 12px;border-left:2px solid var(--line);font-size:13.5px;max-width:70ch;color:var(--ink-2)}
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:120ch}
.rung{display:grid;grid-template-columns:72px 1fr;gap:4px 18px;align-items:start;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:18px 20px}
.rung.fable{border-left-color:var(--fable);padding-block:26px}.rung.opus{border-left-color:var(--opus);padding-block:22px}.rung.sonnet{border-left-color:var(--sonnet)}.rung.haiku{border-left-color:var(--haiku);padding-block:14px}
.mark{justify-self:center;border-radius:50%;margin-top:4px}
.mark.fable{width:56px;height:56px;background:var(--fable)}.mark.opus{width:40px;height:40px;background:var(--opus)}
.mark.sonnet{width:28px;height:28px;background:var(--sonnet)}.mark.haiku{width:20px;height:20px;background:var(--haiku)}
.rung h3{font-size:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.rung.fable h3{font-size:28px;color:var(--fable-ink)}
.tier{font:600 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.rung .one{margin:0 0 8px;font-weight:500}
.rung-body{min-width:0;max-width:80ch}
.seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.seat,.guard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.seat-dialogue,.seat-judgment{border-top:4px solid var(--fable)}.seat-execution{border-top:4px solid var(--opus)}
.cases{padding-left:24px;max-width:80ch;margin:0}.cases li{margin:0 0 14px;font-size:16px}
.cases blockquote.q{margin-top:4px}
.plain{padding-left:0;list-style:none;max-width:80ch;margin:8px 0 0}.plain li{margin:7px 0}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--rail);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
thead th{font:600 12px var(--mono);letter-spacing:.04em;color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
th.num{text-align:right}
td .dot{transform:translateY(-1px)}
code.wname{font-weight:600;white-space:nowrap}
code.wname.fable{color:var(--fable-ink)}code.wname.opus{color:var(--opus-ink)}code.wname.sonnet{color:var(--sonnet-ink)}code.wname.haiku{color:var(--haiku-ink)}
.workers td:nth-child(2){white-space:nowrap}
.guards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.guard{background:var(--rail)}
.chart{margin:0 0 16px;max-width:640px}
.chart figcaption{font-size:14px;color:var(--ink-2);margin-bottom:8px}
.chart figcaption strong{color:var(--ink)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bar{display:grid;grid-template-columns:88px minmax(0,1fr) 56px;align-items:center;gap:10px;padding:4px 6px;border-radius:6px;outline:none}
.bar:hover,.bar:focus-visible{background:var(--rail)}
.c-label{font:500 14px var(--text);text-align:right}
.c-val{font:600 14px var(--mono);font-variant-numeric:tabular-nums}
.track{display:block;height:22px;border-left:1px solid var(--line);padding-left:0}
.fill{display:block;height:100%;min-width:4px;border-radius:0 4px 4px 0}
.fill.fable{background:var(--fable)}.fill.opus{background:var(--opus)}.fill.sonnet{background:var(--sonnet)}.fill.haiku{background:var(--haiku)}
.turns-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px 28px;align-items:start;max-width:110ch}
.counts .muted-row td{color:var(--ink-2)}.counts .total td{font-weight:600;border-top:1px solid var(--line)}
.facts{margin:0}.facts li{margin:0 0 10px}
.flow{list-style:none;counter-reset:s;padding:0;margin:0;max-width:90ch;display:grid;gap:0}
.step{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"n who" "n h" "n what";column-gap:14px;padding:12px 0;border-bottom:1px solid var(--rail)}
.step::before{content:counter(s);grid-area:n;font:800 22px/1 var(--display);color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:4px}
.step.fable::before{color:var(--fable-ink)}
.step .who{grid-area:who;font:600 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center}
.step .who .dot{transform:scale(.8)}
.step strong{grid-area:h;font:700 17px/1.3 var(--display)}
.step .what{grid-area:what;color:var(--ink-2)}
footer{margin-top:64px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-2);font-size:13.5px}
footer p{margin:0}
@media (max-width:600px){.workers thead{display:none}.workers tbody,.workers tr,.workers td{display:block}
.workers tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 14px;border-bottom:1px solid var(--rail)}
.workers td{padding:0;border:0}.workers td:nth-child(1){grid-column:1}.workers td:nth-child(2){grid-column:2;grid-row:1;text-align:right}
.workers td:nth-child(3){grid-column:1 / -1}.workers .tbl-wrap,.tbl-wrap:has(.workers){overflow-x:visible}}
@media (max-width:520px){.rung{grid-template-columns:44px 1fr;padding-inline:14px}.mark.fable{width:40px;height:40px}.mark.opus{width:30px;height:30px}.rung.fable h3{font-size:24px}}
