/* Cloak landing: shared styles. The hero block is carried over from variant 4 unchanged in look. */
:root{
  --bg:#070708; --bg-2:#0b0b0c; --ink:#efebe0; --ink-2:#a9a69b; --ink-3:#8b8a82; --fog:#8995a6; --fog-2:#55606e; --rule:#232326; --rule-2:#2b2b2f;
  --gold:#c9a85c; --gold-2:#8d7846; --gold-3:#5f4d26; --green:#58c9a0; --cyan:#9fd8e2; --crit:#e07a5f; --amber:#d8a24a;
  --accent:var(--gold);
  --display:"Cinzel",Georgia,serif; --black:"UnifrakturCook",serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(28px,6vw,112px);
  --sec-y:clamp(88px,9vw,136px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow-x:clip}
pre,code,.out,.decode-out{font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0}
a{color:inherit}
::selection{background:#3a2f17;color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- hero (from variant 4) ---------- */
.fog-layer{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
main,.foot{position:relative;z-index:1}
.hero{position:relative;z-index:2;min-height:100svh;overflow:hidden;background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}
.hero canvas{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);display:block;will-change:transform}
.veil{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(90deg, rgba(7,7,8,.97) 0%, rgba(7,7,8,.92) 30%, rgba(7,7,8,.55) 46%, rgba(7,7,8,0) 62%),
    radial-gradient(120% 100% at 70% 50%, transparent 55%, rgba(0,0,0,.7) 100%),
    linear-gradient(to bottom, rgba(7,7,8,.92) 0%, rgba(7,7,8,.4) 5%, rgba(7,7,8,0) 9%, rgba(7,7,8,0) 86%, rgba(7,7,8,1) 100%)}
.lines{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.16;background:repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px 3px)}
.grain{position:absolute;inset:-20%;pointer-events:none;z-index:2;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.bar,.main{position:relative;z-index:3;padding-left:var(--gutter);padding-right:var(--gutter)}
.bar{display:flex;align-items:baseline;justify-content:space-between;padding-top:26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#d6d0c2}
.bar span+span::before{content:"·";margin:0 .8em;color:var(--ink-3)}
.ver i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3fa34d;margin-right:8px;vertical-align:1px;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,125,58,.55)}70%{box-shadow:0 0 0 9px rgba(47,125,58,0)}100%{box-shadow:0 0 0 0 rgba(47,125,58,0)}}
.bar .meta{display:flex;align-items:baseline}
.bar .meta a{color:inherit;text-decoration:none;transition:color .18s}
.bar .meta a:hover{color:#fff}
.bar .meta a+a::before{content:"·";margin:0 .8em;color:var(--ink-3)}
.main{display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:40px}
.mark{font-family:var(--black);font-weight:700;font-size:clamp(69px,11.25vw,156px);line-height:.84;letter-spacing:-.01em;color:var(--ink);margin-left:-.04em;text-decoration:none;align-self:flex-start}
.mark .k,.wm .k{display:inline-block;height:.78em;width:auto;margin-left:.015em;overflow:visible;vertical-align:baseline}
h1{font-family:var(--display);font-weight:600;font-size:clamp(22px,2vw,30px);line-height:1.25;letter-spacing:.005em;color:var(--ink);margin-top:40px}
@media (min-width:861px){h1 .l{display:block;white-space:nowrap}}
.sub{margin-top:16px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:60ch}
.cta{margin-top:40px;display:flex;flex-wrap:nowrap;align-items:center;gap:14px 18px;width:max-content;max-width:100%}
.cta .sep{display:inline-flex;width:10px;height:33px;color:var(--gold);flex:none}
.cta .sep svg{width:100%;height:100%}
.trust{margin-top:16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.trust span+span::before{content:"·";margin:0 .7em;color:var(--gold-2)}
.term{display:inline-flex;align-items:stretch;border:1px solid var(--rule-2);background:rgba(7,7,8,.9)}
.term code{padding:13px 18px;font-family:var(--mono);font-size:14px;color:var(--ink);white-space:nowrap}
.term code b{color:var(--accent);font-weight:500;margin-right:.6em}
.term button{white-space:nowrap;cursor:pointer;border:0;border-left:1px solid var(--rule-2);background:var(--ink);color:#070708;font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;padding:0 18px;min-height:46px;transition:background .18s,color .18s}
.term button:hover{background:#fff}
.term button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.term button[data-done="1"]{background:#2a2416;color:var(--accent)}
.term button .sm{display:none}
.gh{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:13px;letter-spacing:.01em;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color .18s}
.gh svg{width:16px;height:16px;flex:none}
.gh .label{border-bottom:1px solid var(--gold-2);padding-bottom:3px}
.gh .stars{display:none;align-items:center;gap:5px;border:1px solid var(--rule-2);padding:3px 8px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.gh .stars.on{display:inline-flex}
.gh .stars i{font-style:normal;color:var(--gold)}
.gh:hover{color:var(--ink)}.gh:hover .label{border-color:var(--ink)}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.scroll-cue svg{width:10px;height:34px;color:var(--gold-2);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
.anim .in{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim.ready .in{opacity:1;transform:none}
.in.d1{transition-delay:.15s}.in.d2{transition-delay:.55s}.in.d3{transition-delay:.8s}.in.d4{transition-delay:1.05s}

/* ---------- sticky bar: appears once the hero has scrolled away ---------- */
.sticky{position:fixed;z-index:40;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px var(--gutter);background:rgba(7,7,8,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);transform:translateY(-102%);transition:transform .45s var(--ease)}
.sticky.on{transform:none}
.wm{font-family:var(--black);font-weight:700;font-size:30px;line-height:1;color:var(--ink);text-decoration:none;flex:none}
.sticky nav{display:flex;gap:28px;font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.sticky nav a{text-decoration:none;padding:12px 0;transition:color .18s;position:relative}
.sticky nav a:hover,.sticky nav a[aria-current="true"]{color:var(--ink)}
.sticky nav a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--gold)}
.sticky .term code{padding:8px 12px;font-size:12.5px}
.sticky .term button{min-height:36px;padding:0 12px;font-size:12px}
.sticky .right{display:flex;align-items:center;gap:18px}
.sticky .gh{min-height:36px}

/* ---------- section system ---------- */
.sec{position:relative;padding:var(--sec-y) var(--gutter)}
.wrap{max-width:1320px;margin:0 auto}
.rule-top{border-top:0}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fog)}
.eyebrow .n{display:none}
.h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.1vw,30px);line-height:1.22;letter-spacing:.005em;color:var(--ink);margin-top:16px;max-width:28ch;text-wrap:balance}
.lead{margin-top:16px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:60ch}
.lead strong{color:var(--ink);font-weight:500}
.head-row{display:block}
.head-row .lead{margin-top:16px}
.ornament{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--gold-3);padding:0 var(--gutter)}
.ornament::before,.ornament::after{content:"";flex:1;max-width:520px;height:1px;background:linear-gradient(90deg,transparent,var(--rule-2))}
.ornament::after{background:linear-gradient(90deg,var(--rule-2),transparent)}
.ornament svg{width:44px;height:12px;color:var(--gold-2)}

/* panels carry two manuscript corner marks, top-left and bottom-right */
.panel{position:relative;border:1px solid var(--rule-2);background:var(--bg-2)}
.panel.corners::before,.panel.corners::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--fog-2);pointer-events:none;z-index:2}
.panel.corners::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.panel.corners::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

/* terminal window */
.win{display:flex;flex-direction:column;min-width:0}
.win .tbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 16px;border-bottom:1px solid var(--rule);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.win .tbar .dots{display:inline-flex;gap:7px;margin-right:14px;vertical-align:-1px}
.win .tbar .dots i{width:8px;height:8px;border:1px solid #4a4a46;display:block}
.out{margin:0;padding:22px 24px;font-family:var(--mono);font-size:13.5px;line-height:1.85;color:var(--ink-2);white-space:pre;overflow:hidden;min-height:0}
.out .l{display:block;min-height:1.85em}
.out .l.off{visibility:hidden}
.p{color:var(--gold)}.c{color:var(--ink)}.dim{color:var(--ink-3)}.crit{color:var(--crit);font-weight:600}.hi{color:var(--amber);font-weight:600}.info{color:var(--cyan)}.ok{color:var(--green);font-weight:600}.gd{color:var(--gold);font-weight:600}.w{color:var(--ink);font-weight:600}
.caret{display:inline-block;width:.62em;height:1.15em;background:var(--ink-2);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.note{margin-top:16px;font-size:13.5px;line-height:1.7;color:var(--ink-3)}
.note a{color:var(--ink-2);text-underline-offset:3px;text-decoration-color:var(--gold-3)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat{padding:28px 28px 28px 0}
.stat+.stat{padding-left:28px;border-left:1px solid var(--rule)}
.stat b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(36px,4.2vw,64px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stat b small{font-size:.5em;margin-left:.15em;color:var(--ink-2)}
.stat>span{display:block;margin-top:12px;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:24ch}

/* steps (how it works) */
.steps{list-style:none;display:flex;flex-direction:column}
.step{position:relative;padding:22px 0 22px 28px;border-top:1px solid var(--rule);transition:opacity .4s var(--ease)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:1px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.step .k{font-family:var(--display);font-size:13px;letter-spacing:.14em;color:var(--ink-3)}
.step h3{margin-top:6px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.2;color:var(--ink)}
.step p{margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--ink-2);max-width:44ch}
.step code{font-family:var(--mono);font-size:.95em;color:var(--ink)}
.steps.live .step{opacity:.36}
.steps.live .step.on{opacity:1}
.steps.live .step.on::before{transform:none}

/* score */
.score-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:64px}
.scorecard{padding:32px}
.scorecard .top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.big{font-family:var(--display);font-weight:600;font-size:clamp(88px,9vw,136px);line-height:.82;color:var(--ink);font-variant-numeric:tabular-nums}
.big small{font-family:var(--mono);font-size:15px;font-weight:400;color:var(--ink-3);margin-left:10px;letter-spacing:.02em}
.shield{position:relative;width:76px;height:88px;flex:none;color:var(--gold)}
.shield svg{position:absolute;inset:0;width:100%;height:100%}
.shield b{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:10px;font-family:var(--display);font-weight:600;font-size:38px;color:var(--ink)}
.shield em{position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.bars{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.bar-row{display:grid;grid-template-columns:150px minmax(0,1fr) 64px;gap:16px;align-items:baseline;font-size:13px}
.bar-row .lbl{color:var(--ink-2)}
.bar-row .lbl b{color:var(--gold);font-weight:500;margin-right:8px}
.bar-row .meter{font-family:var(--mono);letter-spacing:-.02em;white-space:pre;overflow:hidden;color:var(--gold);font-size:14px;line-height:1}
.bar-row .meter i{font-style:normal;color:#2e2a22}
.bar-row .val{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.bar-row .val small{color:var(--ink-3)}
.scale{margin-top:30px;padding-top:22px;border-top:1px solid var(--rule)}
.scale .track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.scale .seg{padding:8px 0 0;border-top:2px solid #2d2a24;font-size:12px;color:var(--ink-3);letter-spacing:.06em}
.scale .seg b{font-family:var(--display);font-weight:600;color:var(--ink-2);margin-right:6px;font-size:13px}
.scale .seg.on{border-color:var(--gold);color:var(--ink-2)}
.scale .seg.on b{color:var(--gold)}
.scale .mk{position:absolute;top:-7px;width:2px;height:12px;background:var(--ink);transition:left .9s var(--ease)}
.viz-score .scale .seg,.mini-score .scale .seg{font-size:12px;letter-spacing:.02em}
.viz-score .scale .seg b{display:block;margin:0 0 2px}
.cost{display:flex;justify-content:space-between;gap:16px;margin-top:22px;font-size:13px;color:var(--ink-3)}
.cost b{color:var(--ink);font-weight:500}
.seg-ctl{display:inline-flex;border:1px solid var(--rule-2);margin-top:32px}
.seg-ctl button{cursor:pointer;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;padding:0 18px;min-height:44px;transition:background .2s,color .2s}
.seg-ctl button+button{border-left:1px solid var(--rule-2)}
.seg-ctl button[aria-pressed="true"]{background:var(--ink);color:#070708;font-weight:600}
.legend{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:18px}
.legend li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.legend li b{grid-row:span 2;font-family:var(--display);font-weight:600;font-size:15px;color:var(--fog);padding-top:2px}
.legend li strong{color:var(--ink);font-weight:500}

/* install tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-top:48px;overflow-x:auto;scrollbar-width:none}
.tabs button{cursor:pointer;border:0;background:transparent;color:var(--ink-3);font:inherit;font-size:14px;padding:14px 18px 16px;min-height:48px;position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;transition:color .2s}
.tabs button svg{width:18px;height:18px}
.tabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{transform:none}
.tabs button:hover{color:var(--ink-2)}
.tabpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:start;padding-top:40px}
.tabpanel[hidden]{display:none}
.tabpanel h3{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.2;color:var(--ink)}
.tabpanel p{margin-top:14px;font-size:15px;line-height:1.75;color:var(--ink-2);max-width:46ch}
.tabpanel ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-2)}
.tabpanel ul li{display:flex;gap:12px}
.tabpanel ul li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;background:var(--fog-2);transform:rotate(45deg)}
.tabpanel code{color:var(--ink)}
.code{margin:0;padding:22px 24px;font-family:var(--mono);font-size:13.5px;line-height:1.85;color:var(--ink-2);white-space:pre;overflow-x:auto}
.code .k{color:var(--gold)}.code .s{color:var(--green)}.code .cm{color:var(--ink-3)}
.copy-sm{cursor:pointer;border:1px solid var(--rule-2);background:transparent;color:var(--ink-2);font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;min-height:32px;transition:color .2s,border-color .2s}
.copy-sm:hover{color:var(--ink);border-color:var(--ink-3)}
.copy-sm[data-done="1"]{color:var(--gold);border-color:var(--gold-2)}
.cadence{margin-top:64px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--rule)}
.cadence>div{padding:22px 24px 22px 0;font-size:13.5px;line-height:1.65;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.cadence>div:not(:nth-child(3n+1)){padding-left:24px}
.cadence .hd{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.cadence .rowh{color:var(--ink);font-family:var(--display);font-size:15px}
.cadence .yes{color:var(--ink)}.cadence .yes::before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);transform:rotate(45deg);margin-right:10px;vertical-align:1px}
.cadence .no{color:var(--ink-3)}.cadence .no::before{content:"";display:inline-block;width:6px;height:1px;background:var(--ink-3);margin-right:10px;vertical-align:3px}

/* principles */
.tenets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:64px;border-top:1px solid var(--rule)}
.tenet{padding:36px 36px 40px 0;border-bottom:1px solid var(--rule)}
.tenet:not(:nth-child(3n+1)){padding-left:36px;border-left:1px solid var(--rule)}
.tenet svg{width:36px;height:36px;color:var(--ink-2)}
.tenet h3{margin-top:22px;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink)}
.tenet p{margin-top:10px;font-size:14px;line-height:1.7;color:var(--ink-2);max-width:36ch}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px 80px;align-items:start}
.faq-grid .aside{position:sticky;top:120px}
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;font-size:15px;line-height:1.5;color:var(--ink);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .x{position:relative;width:14px;height:14px;flex:none;transition:transform .35s var(--ease)}
.faq summary .x::before,.faq summary .x::after{content:"";position:absolute;background:var(--ink-2);left:50%;top:50%;transform:translate(-50%,-50%)}
.faq summary .x::before{width:14px;height:1px}
.faq summary .x::after{width:1px;height:14px}
.faq details[open] summary .x{transform:rotate(45deg)}
.faq summary:hover{color:#fff}
.faq .a{padding:0 48px 26px 0;font-size:14.5px;line-height:1.75;color:var(--ink-2);max-width:62ch}
.faq .a code{color:var(--ink)}
.faq details[open] .a{animation:fadeup .45s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* final call to action */
.final{position:relative;overflow:hidden}
.final .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;min-height:min(780px,92svh)}
.final .h2{font-size:clamp(28px,2.6vw,38px);max-width:18ch}
.final .art{position:relative;height:min(720px,82svh)}
.final .art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.final .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 45% at 72% 52%, rgba(201,168,92,.10), transparent 70%)}
.final .lines{z-index:1}
.final .cta{margin-top:40px;flex-wrap:wrap;width:auto}
@media (max-width:1280px){.final .term button .lg{display:none}.final .term button .sm{display:inline}}
.final .fine{margin-top:18px;font-size:12px;line-height:1.7;color:var(--ink-3)}

/* footer */
.foot{border-top:1px solid var(--rule);padding:56px var(--gutter) 40px;background:var(--bg)}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
.foot .wm{font-size:44px}
.foot .tag{margin-top:16px;font-size:13px;line-height:1.7;color:var(--ink-3);max-width:34ch}
.foot h4{font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.foot ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:2px}
.foot ul a{display:inline-block;padding:6px 0;font-size:13.5px;color:var(--ink-2);text-decoration:none;transition:color .18s}
.foot ul a:hover{color:var(--ink)}
.foot .base{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:24px;padding-top:24px;border-top:1px solid var(--rule);font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.foot .base .dagger{color:var(--ink-2)}

/* reveal on scroll (only once scripts are running) */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="2"]{transition-delay:.12s}.js [data-reveal="3"]{transition-delay:.24s}

/* review switcher (mockup only) */
.review{position:fixed;z-index:50;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:2px;padding:4px;background:rgba(7,7,8,.86);border:1px solid var(--rule-2);font-size:12px;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.review a{padding:6px 10px;color:var(--ink-3);text-decoration:none}
.review a:hover{color:var(--ink)}
.review a[aria-current="page"]{color:#070708;background:var(--ink)}

/* ---------- section pieces ---------- */
.ic{width:20px;height:20px;flex:none}
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}

/* the leak */
.leak-body{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:56px;align-items:start;margin-top:72px}
.leak-body .stats{grid-template-columns:1fr;border-bottom:0}
.leak-body .stat{padding:26px 0;border-bottom:1px solid var(--rule)}
.leak-body .stat+.stat{padding-left:0;border-left:0}
.decode{margin:0;min-width:0}
.decode-out{margin:0;padding:24px;font-family:var(--mono);font-size:13px;line-height:1.85;white-space:pre;overflow-x:auto;color:var(--ink-3);min-height:calc(14 * 1.85em + 48px)}
.decode-out .mn{color:#5d5b54}
.decode-out .sc{color:var(--gold)}
.decode-out .w{color:var(--ink);font-weight:400}
.decode-out .kw{color:#b9a06a}
.decode-out .str{color:var(--green)}
.decode-out .cm{color:#8f8a7c;font-style:italic}
.decode .pct{color:var(--ink);font-variant-numeric:tabular-nums}
.decode.done .decode-panel{border-color:#3a3220}
.decode .decode-panel .tbar span[data-decode-label]{text-transform:none;letter-spacing:.04em;font-size:12px;color:var(--ink-2)}

/* how it works (pinned) */
.how-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center}
.how-copy .steps{margin-top:40px}
.how-term{align-self:center}
.how-term .out{position:relative;overflow:hidden}
.out-inner{transition:transform .35s var(--ease);will-change:transform}

/* bento (version B) */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:64px}
.card{display:flex;flex-direction:column;gap:24px;padding:28px;min-width:0;transition:border-color .3s}
.card:hover{border-color:#3a3528}
.card header .k{font-family:var(--display);font-size:13px;letter-spacing:.14em;color:var(--ink-3)}
.card header h3{margin-top:4px;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.25;color:var(--ink)}
.card header p{margin-top:8px;font-size:14px;line-height:1.7;color:var(--ink-2);max-width:46ch}
.card header code{color:var(--ink)}
.c-audit{grid-column:span 4}.c-score{grid-column:span 2}
.c-fix{grid-column:span 2}.c-where{grid-column:span 2}.c-hook{grid-column:span 2}
.c-tenets{grid-column:span 6}
.win.mini{border:1px solid var(--rule);background:#08080a;flex:1}
.win.mini .out{font-size:12.5px;padding:18px 20px}
.out .l.off{visibility:hidden}
.mini-score .top{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.mini-score .big{font-size:76px}
.mini-score .shield{width:54px;height:62px}
.mini-score .shield b{font-size:26px;padding-bottom:6px}
.mini-score .bars{margin-top:18px;gap:10px}
.mini-score .bar-row{grid-template-columns:86px minmax(0,1fr);font-size:12px}
.mini-score .bar-row .meter{font-size:12px}
.code.diff{padding:0;font-size:12.5px;background:none}
.code .del{color:#c9806b}.code .add{color:var(--green)}
.where{list-style:none;display:flex;flex-direction:column}
.where li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--rule);scroll-margin-top:120px}
.where li:last-child{border-bottom:1px solid var(--rule)}
.where .ic{color:var(--ink-2);margin-top:2px}
.where b{display:block;font-weight:500;font-size:14px;color:var(--ink)}
.where code{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.c-hook .code{padding:0;font-size:12.5px}
.mini-tenets{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px}
.mini-tenets li{display:flex;gap:16px;align-items:flex-start}
.mini-tenets .ic{width:30px;height:30px;color:var(--ink-2)}
.mini-tenets b{display:block;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.mini-tenets span{display:block;margin-top:6px;font-size:13.5px;line-height:1.65;color:var(--ink-2)}

/* the stat strip (version C) */
.strip{padding-top:72px;padding-bottom:40px}
.strip .note{margin-top:14px}

/* siege (version C) */
.siege .pin{min-height:100svh;display:flex;align-items:center;padding:72px 0 24px}
.siege .h2{font-size:clamp(28px,2.9vw,44px);max-width:22ch}
.siege .lead{margin-top:16px}
.siege .fixes{margin-top:28px}
.siege .fix{padding:13px 0}
.siege .wrap{width:100%}
.siege-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.fixes{list-style:none;margin-top:36px;border-top:1px solid var(--rule)}
.fix{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule);opacity:.42;transition:opacity .4s var(--ease)}
.fix b{display:block;font-weight:500;font-size:15px;color:var(--ink)}
.fix span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.fix em{font-style:normal;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.fix .tick{width:10px;height:10px;border:1px solid var(--ink-3);transform:rotate(45deg);margin-left:4px;transition:background .3s,border-color .3s}
.fix.now,.fix.done{opacity:1}
.fix.done .tick{background:var(--green);border-color:var(--green)}
.fix.done em{color:var(--green)}
.fix.now .tick{border-color:var(--gold)}
.log{margin-top:22px;min-height:1.6em;font-size:13px;color:var(--ink-2)}
.siege-viz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:520px}
.viz-fig{position:relative;border-right:1px solid var(--rule);min-height:420px;background:#000}
.viz-fig canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.viz-fig .tag{position:absolute;left:16px;top:14px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.viz-score{padding:28px;display:flex;flex-direction:column}
.viz-score .top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.viz-score .big{font-size:clamp(72px,7vw,108px)}
.viz-score .bars{margin-top:22px}
.bars.compact .bar-row{grid-template-columns:112px minmax(0,1fr);font-size:12.5px}
.bars.compact .bar-row .lbl b{display:none}
.viz-score .scale{margin-top:auto}

/* three steps (version C) */
.three-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:64px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.three-grid article{padding:36px 36px 36px 0;display:flex;flex-direction:column}
.three-grid article+article{padding-left:36px;border-left:1px solid var(--rule)}
.three-grid .ic{width:34px;height:34px;color:var(--ink-2)}
.three-grid .k{margin-top:24px;font-family:var(--display);font-size:13px;letter-spacing:.14em;color:var(--ink-3)}
.three-grid h3{margin-top:4px;font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink)}
.three-grid p{margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--ink-2);flex:1}
.three-grid code{margin-top:20px;align-self:flex-start;padding:7px 12px;border:1px solid var(--rule-2);font-size:12.5px;color:var(--ink)}
.wide-term{margin-top:40px}
.wide-term .out{min-height:calc(11 * 1.85em + 44px)}

/* install extras */
.cadence-wrap{margin-top:72px}
.cadence-wrap .cadence{margin-top:0}

/* the face-on figure: two embers under the hood */
.eyes{position:absolute;inset:0;pointer-events:none;transition:opacity .4s}
.eyes i{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#ffe7a6;box-shadow:0 0 6px 2px rgba(255,214,120,.75),0 0 18px 6px rgba(201,168,92,.35);animation:blinkeye 7s infinite}
@keyframes blinkeye{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
.final .art .eyes{z-index:2}


/* ---------- v2: leak, principles ledger, ASCII footer, section library ---------- */
.leak-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0 0;padding-top:22px;border-top:1px solid var(--rule)}
.figs dt{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.3vw,34px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.figs dt small{font-size:.5em;margin-left:.2em;color:var(--ink-2)}
.figs dd{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:26ch}
.strip-line{font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,28px);line-height:1.5;color:var(--ink-2);max-width:44ch;text-wrap:balance}
.strip-line b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tenets{display:block;margin-top:40px;border-top:1px solid var(--rule)}
.tenets .tenet,.tenets .tenet:not(:nth-child(3n+1)),.tenets .tenet:nth-child(2n){display:grid;grid-template-columns:40px minmax(0,.9fr) minmax(0,1.5fr);gap:20px;align-items:center;padding:20px 0;border-left:0;border-bottom:1px solid var(--rule)}
.tenets .tenet svg{width:26px;height:26px}
.tenets .tenet h3{margin:0;font-size:16px}
.tenets .tenet p{margin:0;max-width:56ch}
.foot{padding:0 0 28px;border-top:0;background:transparent}
.foot .ascii{position:relative;height:clamp(160px,26vw,440px);margin:24px 0 8px}
.foot .ascii canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.foot .row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 32px;padding:20px var(--gutter) 0;border-top:1px solid var(--rule);font-size:12px;line-height:1.7;color:var(--ink-3)}
.foot .row nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot .row nav a{color:var(--ink-2);text-decoration:none;padding:6px 0;transition:color .18s}
.foot .row nav a:hover{color:var(--ink)}
.foot .row .dagger{color:var(--ink-2)}
/* section library */
.lib-nav{position:sticky;top:0;z-index:45;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px var(--gutter);background:rgba(7,7,8,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);font-size:12px}
.lib-nav b{font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.lib-nav a{display:inline-flex;align-items:center;min-height:30px;padding:0 9px;border:1px solid var(--rule-2);color:var(--ink-2);text-decoration:none;font-variant-numeric:tabular-nums}
.lib-nav a:hover{color:var(--ink);border-color:var(--fog-2)}
.lib-nav .grp{display:inline-flex;align-items:center;gap:4px}
.lib-nav .grp span{margin-right:4px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.lib{position:relative}
.lib-head{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:14px var(--gutter);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule);background:rgba(7,7,8,.92);font-size:12px;color:var(--ink-2);scroll-margin-top:52px}
.lib-head .code{display:inline-grid;place-items:center;min-width:38px;height:26px;padding:0 6px;background:var(--ink);color:#070708;font-weight:600;letter-spacing:.04em}
.lib-head .name{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.lib-head .used{color:var(--ink-3)}
.lib-head .note{margin:0;flex-basis:100%;font-size:12px;color:var(--ink-3)}
.lib-intro{position:relative;z-index:1;padding:56px var(--gutter) 40px}
.lib-intro .wrap>p{max-width:70ch}
.review-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;margin-top:32px}
.review-grid h3{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.review-grid ol,.review-grid ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.review-grid li b{color:var(--ink);font-weight:500}
.scorebox{margin-top:12px;font-size:13px;line-height:1.9;color:var(--ink-2);white-space:pre;overflow-x:auto}
@media (max-width:1100px){.leak-grid{grid-template-columns:1fr;gap:40px}.review-grid{grid-template-columns:1fr}}
@media (max-width:860px){
  .figs{grid-template-columns:1fr 1fr}
  .tenets .tenet,.tenets .tenet:not(:nth-child(3n+1)),.tenets .tenet:nth-child(2n){grid-template-columns:30px minmax(0,1fr);gap:6px 14px;padding:18px 0}
  .tenets .tenet p{grid-column:2}
  .foot .ascii{height:34vw;min-height:130px}
  .lib-nav{gap:6px}.lib-nav b{display:none}
}


/* ---------- v3: site-wide hero texture, navigation bar, footer ---------- */
.site-lines{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px 3px)}
.site-grain{position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}

/* the bar: wordmark and version left, sections centred, star and install right, reading progress underneath */
.sticky{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:60px;padding:0 var(--gutter);background:rgba(7,7,8,.78);border-bottom:1px solid rgba(255,255,255,.06)}
.sticky .sl{display:flex;align-items:baseline;gap:12px}
.sticky .wm{font-size:28px}
.vtag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);padding:3px 7px;border:1px solid var(--rule-2);line-height:1}
.sticky .sn{display:flex;gap:4px;font-size:13px;letter-spacing:.01em}
.sticky .sn a{position:relative;padding:8px 12px;color:var(--ink-2);text-decoration:none;transition:color .2s}
.sticky .sn a:hover{color:var(--ink)}
.sticky .sn a[aria-current="true"]{color:var(--ink)}
.sticky .sn a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.sticky .sn a:hover::after{transform:scaleX(1);background:var(--ink-3)}
.sticky .sn a[aria-current="true"]::after{transform:scaleX(1);background:var(--gold)}
.sticky .right{justify-self:end;display:flex;align-items:center;gap:16px}
.sticky .star{font-size:12.5px;gap:8px;color:var(--ink-2)}
.sticky .star .label{border:0;padding:0}
.sticky .star:hover{color:var(--ink)}
.menu-btn{display:none;cursor:pointer;border:1px solid var(--rule-2);background:transparent;color:var(--ink);font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 12px;min-height:36px}
.menu-btn[aria-expanded="true"]{background:var(--ink);color:#070708}
.sticky .progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none}
.sticky .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--fog-2),var(--gold));transform:scaleX(0);transform-origin:left;will-change:transform}
.sticky .menu{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;padding:8px var(--gutter) 16px;background:rgba(7,7,8,.96);border-bottom:1px solid var(--rule)}
.sticky .menu[hidden]{display:none}
.sticky .menu a{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font-size:15px}
.sticky .menu a:last-child{border-bottom:0}

/* the footer: every link once, then the wordmark across the page, then the legal line */
.foot{padding:0 0 24px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px;padding:72px var(--gutter) 0;max-width:calc(1320px + 2 * var(--gutter));margin:0 auto}
.foot-brand p{font-size:13.5px;line-height:1.7;color:var(--ink-2);max-width:34ch}
.foot-brand .term{margin-top:20px}
.foot-brand .term code{padding:10px 14px;font-size:13px}
.foot-brand .term button{min-height:40px;padding:0 14px;font-size:12px}
.foot h4{margin:0;font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}
.foot ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.foot ul a{display:inline-block;padding:6px 0;font-size:13.5px;color:var(--ink-2);text-decoration:none;transition:color .18s}
.foot ul a:hover{color:var(--ink)}
.foot .ascii{margin:40px 0 0}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding:18px var(--gutter) 0;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-3)}
.foot-legal a{color:var(--ink-2);text-decoration:none}
.foot-legal a:hover{color:var(--ink)}
@media (max-width:1100px){
  .sticky{grid-template-columns:auto 1fr}
  .sticky .sn{display:none}
  .sticky .star .label{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .sticky{height:54px;gap:12px}
  .sticky .wm{font-size:24px}.vtag{display:none}
  .sticky .star{display:none}
  .sticky .term{display:none}
  .foot-grid{gap:28px 20px;padding-top:56px}
  .foot-legal{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.site-grain{display:none}.sticky .progress{display:none}}


/* ---------- version D: the story, told in acts ---------- */
:root{--rubric:#c8775a;--art-h:min(86vh,880px)}
.rubric{display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.rubric span{color:var(--rubric)}
/* the chapter numeral plays its chapter again */
.rubric span.replay{cursor:pointer;padding:6px 4px;margin:-6px -4px;transition:color .2s}
.rubric span.replay:hover{color:var(--ink)}
.rubric span.replay:focus-visible{outline:1px solid var(--rubric);outline-offset:2px}

/* an act: one screen, the artwork on one side and the text at the middle of the other; sides alternate.
   On wide screens the act holds (pinned) while the scroll plays its story; on phones the art stays at the top and the text passes under it */
.act{position:relative;z-index:1;min-height:100vh}
.act-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:100vh;align-items:center}
.act-right .act-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.act-right .act-art{order:2}
.act-art{position:relative;height:var(--art-h)}
.act-sticky{position:relative;height:100%}
.act-sticky canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .3s linear}
.act-copy{display:flex;flex-direction:column;justify-content:center;min-height:0;padding:6vh 0}
.act-left .act-copy{padding-right:var(--gutter);padding-left:16px}
.act-right .act-copy{padding-left:var(--gutter);padding-right:16px}
.pin-spacer{z-index:1}
/* the text sits on its own dark ground, feathered into the fog, with room around it */
.copy-panel{position:relative;max-width:580px;padding:44px 48px 48px;background:rgba(7,7,8,.9);box-shadow:0 0 0 1px rgba(255,255,255,.035),0 0 120px 70px rgba(7,7,8,.86)}
.act-left .copy-panel{margin-left:auto;margin-right:auto}
.act-right .copy-panel{margin-left:auto;margin-right:auto}
.copy-panel.wide{max-width:760px}
/* the long chapters (VI, VII, VIII) take more of the width from their art, so their text has room instead of being shrunk to fit */
@media (min-width:1101px){
  .act-wide.act-left .act-grid{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
  .act-wide.act-right .act-grid{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
  .act-wide .copy-panel .tabpanel>div:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:32px;align-items:start}
  .act-wide .copy-panel .tabpanel>div:first-child>ul{grid-column:2;grid-row:1 / span 2;margin:0}
  .act-wide .copy-panel .tenets{column-gap:36px}
}
.copy-panel .h2{max-width:22ch}
.copy-panel .tabpanel{grid-template-columns:1fr;gap:24px}
.copy-panel .tabs{margin-top:22px}
.copy-panel .tabpanel{gap:14px;margin-top:14px}
.copy-panel .tabpanel h3{font-size:15px;margin:0 0 6px}
.copy-panel .tabpanel p,.copy-panel .tabpanel li{font-size:13.5px;line-height:1.55}
.copy-panel .tabpanel ul{margin:8px 0 0}
.copy-panel .tabpanel pre{font-size:12.5px;line-height:1.6;padding:12px 16px}
.copy-panel .tenets{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.copy-panel .tenets .tenet,.copy-panel .tenets .tenet:not(:nth-child(3n+1)),.copy-panel .tenets .tenet:nth-child(2n){grid-template-columns:30px minmax(0,1fr);gap:4px 12px;padding:12px 0}
.copy-panel .tenets .tenet p{font-size:13px;line-height:1.5}
.copy-panel .tenets .tenet h3{font-size:15px;margin:0}
.copy-panel .tenets .tenet p{grid-column:2}
.copy-panel .faq{margin-top:22px}
.copy-panel .faq summary{padding:13px 0;font-size:14.5px}
.copy-panel .faq .a{font-size:13.5px;line-height:1.6;padding-bottom:12px}
.copy-panel .cta{margin-top:32px;flex-wrap:wrap;width:auto}
.term-d{margin-top:28px}
.term-d .out{min-height:calc(10 * 1.85em + 44px);font-size:12px}
.readout{display:flex;align-items:flex-end;gap:28px;margin-top:32px}
.readout .big{font-size:clamp(72px,6.5vw,104px)}
.milestones{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:13.5px;color:var(--ink-2)}
.milestones li{counter-increment:m;display:flex;gap:10px}
.milestones li::before{content:counter(m,upper-roman);font-family:var(--display);font-size:12px;color:var(--ink-3);min-width:22px}
.milestones b{color:var(--ink);font-weight:500}
.copy-panel .fixes{margin-top:28px}
.copy-panel .fix{opacity:.45}
.copy-panel .fix.now,.copy-panel .fix.done{opacity:1}
.keep-score{margin-top:20px;font-size:14px;color:var(--ink-2)}
.keep-score b{font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}

/* the prologue: the statement, one line per screen, large */
.prologue{max-width:680px;margin:0 auto;padding:0 8px}
.prologue>.rubric{margin-bottom:5vh}
.beat{position:relative;display:flex;align-items:center;margin:0 0 4vh}
.beat::before{content:"";position:absolute;inset:6% -10%;z-index:-1;background:radial-gradient(closest-side,rgba(7,7,8,.92),rgba(7,7,8,.7) 55%,transparent)}
.big-line{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.1vw,50px);line-height:1.14;letter-spacing:.004em;color:var(--ink);text-wrap:balance}
.ov-w{transition:color .4s var(--ease)}
.ov-w.off{color:#2a2b30}
.ov-w.mid{color:var(--gold)}
.ov-w.on{color:var(--ink)}
.ov-w.num{color:var(--gold);font-variant-numeric:tabular-nums}
.beat-note{position:relative;margin-top:2vh;padding:26px 32px;background:rgba(7,7,8,.9);box-shadow:0 0 100px 60px rgba(7,7,8,.85)}
.beat-note p{font-size:15.5px;line-height:1.75;color:var(--ink-2);max-width:52ch}
.beat-note .note{margin-top:10px;font-size:12.5px}

/* the running head: set like the head of a manuscript page, not a nav bar. The wordmark, the chapter you are in, and the contents */
.rh{position:fixed;z-index:40;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:56px;padding:0 var(--gutter);background:linear-gradient(rgba(7,7,8,.94),rgba(7,7,8,.82));transform:translateY(-102%);transition:transform .45s var(--ease)}
.rh.past{transform:none}
.rh.past.tuck{transform:translateY(-102%)}
.rh .wm{font-size:26px;justify-self:start}
.rh-ch{display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.rh-ch b{color:var(--rubric);font-weight:600}
.rh-ch b::after{content:"\00b7";margin-left:12px;color:var(--ink-3)}
.rh-btn{justify-self:end;min-height:44px;padding:0 2px;background:none;border:0;color:var(--ink-2);font:600 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.rh-btn:hover{color:var(--ink)}
.rh-btn:focus-visible,.contents a:focus-visible,.contents-x:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.rh .progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:var(--rule);pointer-events:none}
.rh .progress i{display:block;height:100%;background:var(--gold-2);transform:scaleX(0);transform-origin:left;will-change:transform}

.act:focus{outline:none}   /* a chapter takes the focus when the contents leads to it */

/* the contents leaf */
.contents{margin:auto;width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:36px 40px 28px;background:var(--bg-2);color:var(--ink);border:1px solid var(--rule-2)}
.contents::backdrop{background:rgba(3,3,4,.78)}
.contents[open]{animation:leaf .35s var(--ease)}
@keyframes leaf{from{opacity:0;transform:translateY(10px)}}
.contents-head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid var(--rule-2)}
.contents h2{font:600 13px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.contents-x{min-height:44px;margin:-12px 0;background:none;border:0;color:var(--ink-3);font:12px/1 var(--mono);letter-spacing:.06em;cursor:pointer}
.contents-x:hover{color:var(--ink)}
.contents ol{list-style:none}
.contents li+li{border-top:1px solid var(--rule)}
.contents ol a{display:grid;grid-template-columns:52px 1fr;column-gap:16px;row-gap:4px;padding:14px 0;text-decoration:none;color:inherit}
.contents ol b{grid-row:span 2;font:600 13px/1.5 var(--display);letter-spacing:.08em;color:var(--rubric);text-align:right}
.contents .t{font:500 17px/1.3 var(--display);letter-spacing:.04em;color:var(--ink);transition:color .2s}
.contents .s{font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.contents ol a:hover .t{color:var(--gold)}
.contents ol a[aria-current="true"] .t::after{content:"";display:inline-block;width:5px;height:5px;margin-left:12px;background:var(--rubric);transform:rotate(45deg) translateY(-3px)}
.colophon{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:14px;padding-top:18px;border-top:1px solid var(--rule-2);font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.colophon>*+*::before{content:"\00b7";margin:0 .8em;color:var(--ink-3)}
.colophon a{color:var(--ink-2);text-decoration:none;padding:10px 0;margin:-10px 0}
.colophon a:hover{color:var(--ink)}
@media (max-width:600px){
  .rh{grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;height:52px;padding:0 16px}.rh .wm{font-size:22px}.rh .progress{left:16px;right:16px}
  .rh-ch{justify-content:center;min-width:0;gap:8px;letter-spacing:.12em}.rh-ch b::after{margin-left:8px}.rh-ch span{overflow:hidden;text-overflow:ellipsis}
  .rh-btn{letter-spacing:.12em}
  .contents{padding:24px 20px 18px}.contents ol a{grid-template-columns:40px 1fr;column-gap:12px}
}
@media (max-width:374px){.rh-ch span{display:none}.rh-ch b::after{content:none}}
@media (prefers-reduced-motion:reduce){.rh,.contents[open]{transition:none;animation:none}}
@media (max-width:1100px){
  .act-grid,.act-right .act-grid{grid-template-columns:minmax(0,1fr)}
  .copy-panel,.copy-panel.wide{width:100%;max-width:100%;min-width:0}
  .copy-panel .panel{max-width:100%;min-width:0;overflow:hidden}
  .copy-panel pre{max-width:100%;overflow-x:auto}
  .copy-panel li,.copy-panel .tabpanel>*{min-width:0}
  .act{min-height:0}
  .act-grid{min-height:0;align-items:start}
  .act-right .act-art{order:0}
  /* the art stays pinned at the top in front, on the page's own ground, and the text scrolls up underneath it, fading as it goes */
  .act-art{position:sticky;top:54px;height:min(48vh,440px);z-index:2;background:var(--bg)}
  .act-art::after{content:"";position:absolute;left:0;right:0;bottom:-28px;height:28px;background:linear-gradient(var(--bg),rgba(7,7,8,0));pointer-events:none}
  .act-copy,.act-left .act-copy,.act-right .act-copy{position:relative;z-index:1;min-height:0;padding:4vh var(--gutter) 34vh}   /* room for the act to finish once the text has gone under the art */
  .copy-panel{padding:36px 28px 40px;box-shadow:0 0 60px 30px rgba(7,7,8,.86)}
  .beat{margin-bottom:3vh}
}
@media (max-width:600px){.copy-panel .tenets{grid-template-columns:1fr}}   /* one promise to a row on a phone */
@media (max-width:860px){
  .big-line{font-size:clamp(28px,8vw,40px)}
  .copy-panel{padding:28px 20px 32px}
  .milestones{grid-template-columns:1fr}
  .readout{gap:18px}
  .beat-note{padding:24px 20px}
}

/* ---------- phones and small tablets ---------- */
@media (max-width:1100px){
  .score-grid{grid-template-columns:1fr;gap:40px}
  .tabpanel{grid-template-columns:1fr;gap:28px}
  .tenets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tenet:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .tenet:nth-child(2n){padding-left:32px;border-left:1px solid var(--rule)}
  .faq-grid{grid-template-columns:1fr;gap:32px}.faq-grid .aside{position:static}
  .sticky nav{display:none}
}
@media (max-width:860px){
  :root{--gutter:18px;--sec-y:80px}
  .bar{padding-top:18px}.bar .meta{display:none}.bar .os{display:none}.bar .os+.ver::before{content:none}
  .veil{background:linear-gradient(to top, rgba(7,7,8,1) 0%, rgba(7,7,8,.9) 46%, rgba(7,7,8,.4) 70%, rgba(7,7,8,.1) 100%),linear-gradient(to bottom, rgba(7,7,8,.95) 0%, rgba(7,7,8,0) 14%)}
  .main{justify-content:flex-end;padding-top:44svh;padding-bottom:28px}
  .mark{font-size:clamp(63px,18vw,90px)}h1{font-size:22px;margin-top:24px}.cta{margin-top:32px}
  .term code{font-size:13px;padding:12px 14px}.term button{padding:0 14px}
  .cta{flex-wrap:wrap;width:auto}.cta .sep{display:none}
  .term button .lg{display:none}.term button .sm{display:inline}
  .trust{font-size:12px;letter-spacing:.12em}
  .scroll-cue{display:none}
  .sticky{padding:8px 18px}.sticky .gh{display:none}.wm{font-size:26px}
  .sticky .term code{display:none}.sticky .term button{border-left:0}
  .h2{font-size:30px}.lead{font-size:15px}
  .head-row{grid-template-columns:1fr;gap:20px}.head-row .lead{justify-self:start}
  .stats{grid-template-columns:1fr}
  .stat{padding:22px 0}.stat+.stat{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .out,.code{font-size:12px;padding:16px;line-height:1.75}
  .out{font-size:12px}.out .opt{display:none}
  .win .tbar{font-size:12px;letter-spacing:.1em;padding:10px 12px;white-space:nowrap;overflow:hidden}
  .win .tbar>span:first-child{min-width:0}
  .win .tbar>span{overflow:hidden;text-overflow:ellipsis}
  .how-term .tbar>span+span,.wide-term .tbar>span+span,.win.mini .tbar>span+span{display:none}
  .review{white-space:nowrap}.review a{padding:6px 9px}.review .nm{display:none}
  .scorecard{padding:22px 18px}
  .bar-row{grid-template-columns:96px minmax(0,1fr) 48px;gap:10px;font-size:12px}
  .bar-row .lbl b{display:none}
  .scale .seg{font-size:0}.scale .seg b{font-size:13px;margin:0}
  .cadence{grid-template-columns:1fr 1fr 1fr;font-size:12px}
  .cadence>div{padding:16px 10px 16px 0;font-size:12px}.cadence>div:not(:nth-child(3n+1)){padding-left:10px}
  .tenets{grid-template-columns:1fr}
  .tenet,.tenet:nth-child(2n){padding:28px 0;border-left:0}
  .final .grid{grid-template-columns:1fr;min-height:0;gap:8px}
  .final .art{height:56svh;order:-1;margin:0 -18px}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .foot .brand{grid-column:1/-1}
  .review{bottom:auto;top:auto;bottom:10px;font-size:12px}
}
@media (max-width:1100px){
  .leak-body{grid-template-columns:1fr;gap:40px}
  .leak-body .stats{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule)}
  .leak-body .stat{border-bottom:0;padding:24px 20px 24px 0}
  .leak-body .stat+.stat{padding-left:20px;border-left:1px solid var(--rule)}
  .how-grid{grid-template-columns:1fr;gap:40px}
  .c-audit,.c-score,.c-fix,.c-where,.c-hook{grid-column:span 3}
  .c-audit{grid-column:span 6}
  .mini-tenets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .siege-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:860px){
  .leak-body{margin-top:40px}
  .leak-body .stats{grid-template-columns:1fr}
  .leak-body .stat,.leak-body .stat+.stat{padding:20px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .decode-out{font-size:12px;padding:16px;min-height:calc(14 * 1.85em + 32px)}
  .decode .decode-panel .tbar span[data-decode-label]{font-size:12px}
  .bento{grid-template-columns:1fr;margin-top:40px}
  .c-audit,.c-score,.c-fix,.c-where,.c-hook,.c-tenets{grid-column:auto}
  .card{padding:22px 18px}
  .win.mini .out{font-size:12px;padding:14px}
  .mini-tenets{grid-template-columns:1fr}
  .siege .pin{min-height:0;display:block}
  .siege-viz{grid-template-columns:1fr;min-height:0}
  .viz-fig{min-height:340px;border-right:0;border-bottom:1px solid var(--rule)}
  .viz-score{padding:22px 18px}
  .fix{grid-template-columns:18px minmax(0,1fr);}
  .fix em{grid-column:2}
  .three-grid{grid-template-columns:1fr}
  .three-grid article,.three-grid article+article{padding:28px 0;border-left:0}
  .three-grid article+article{border-top:1px solid var(--rule)}
  .wide-term .out{min-height:calc(11 * 1.75em + 32px)}
}
@media (prefers-reduced-motion:reduce){
  .grain,.lines{display:none}
  .in,.js [data-reveal]{opacity:1;transform:none;transition:none}
  .caret,.ver i,.scroll-cue svg{animation:none}
}

/* ---------- landing D: one type scale ----------
   Every text style below the hero takes a step of one modular scale: a major second (x1.125) up from 12px.
   The faces are the hero's own: Cinzel for headings and the chapter numerals, mono for everything else;
   the night rules at the foot of this file set them. The hero keeps its own type. */
.v-d{
  --fs-0:12px; --fs-1:13.5px; --fs-2:15px; --fs-3:17px; --fs-4:19px; --fs-5:21.5px; --fs-7:27.4px; --fs-8:30.75px; --fs-10:39px; --fs-11:44px; --fs-15:71px; --fs-17:90px;
}
/* running text */
.v-d main .lead{font-size:var(--fs-4);line-height:1.5}
.v-d .beat-note p,.v-d .copy-panel .tabpanel p,.v-d .copy-panel .faq .a,.v-d .foot-brand p{font-size:var(--fs-3);line-height:1.55}
.v-d .copy-panel .tabpanel li,.v-d .copy-panel .tenets .tenet p,.v-d .milestones,.v-d .contents .s{font-size:var(--fs-2);line-height:1.5}
.v-d .copy-panel .faq summary{font-size:var(--fs-3);font-weight:500;color:var(--ink)}
.v-d .milestones b{font-weight:600}
/* code and commands inside running text, two steps down */
.v-d main .lead code,.v-d .copy-panel .tabpanel li code,.v-d .copy-panel .tabpanel p code,.v-d .copy-panel .faq .a code{font-family:var(--mono);font-variant-numeric:normal}
.v-d main .lead code,.v-d .copy-panel .tabpanel p code,.v-d .copy-panel .faq .a code{font-size:var(--fs-2)}
.v-d .copy-panel .tabpanel li code{font-size:var(--fs-1)}
/* code, terminals and their chrome */
.v-d .copy-panel .tabpanel pre,.v-d .term-d .out{font-size:var(--fs-0)}
.v-d .note,.v-d .beat-note .note,.v-d .keep-score,.v-d .foot ul a{font-size:var(--fs-1)}
/* headings, labels and figures */
.v-d .copy-panel .tabpanel h3,.v-d .copy-panel .tenets .tenet h3{font-size:var(--fs-2)}
.v-d .contents h2,.v-d .contents ol b{font-size:var(--fs-1)}
.v-d .contents .t{font-size:var(--fs-3)}
.v-d .keep-score b{font-size:var(--fs-5)}
.v-d .readout .shield b{font-size:var(--fs-10)}
.v-d .copy-panel .h2{font-size:var(--fs-8)}
.v-d .big-line{font-size:var(--fs-11)}
.v-d .readout .big{font-size:var(--fs-17)}
@media (max-width:860px){
  .v-d main .lead{font-size:var(--fs-3)}
  .v-d .big-line{font-size:var(--fs-8)}
  .v-d .readout .big{font-size:var(--fs-15)}
}
/* the quieter text takes the second ink rather than the third */
.v-d .copy-panel .tenets .tenet p,.v-d .contents .s,.v-d .milestones{color:var(--ink-2)}
/* the last strays: a finding's detail line, the tab buttons, the epilogue's install line, the running head's wordmark */
.v-d .fix div span,.v-d .fix em{font-size:var(--fs-0)}
.v-d .copy-panel .tabs button{font-size:var(--fs-1)}
.v-d main .cta .term code,.v-d main .cta .term button,.v-d main .cta .gh,.v-d main .cta .gh *,.v-d .foot .term code,.v-d .foot .term button{font-size:var(--fs-1)}
.v-d .rh .wm{font-size:var(--fs-7)}
@media (max-width:600px){.v-d .rh .wm{font-size:var(--fs-5)}}

/* ---------- landing D: the blocks ---------- */
/* a quieter panel: a hairline frame with a gilt corner at either end, in place of the wide glow */
.v-d .copy-panel{background:rgba(9,9,10,.95);box-shadow:0 0 0 1px var(--rule)}
.v-d .copy-panel::before,.v-d .copy-panel::after{content:"";position:absolute;width:16px;height:16px;border:1px solid var(--gold-2);pointer-events:none}
.v-d .copy-panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.v-d .copy-panel::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
/* Chapter IV: the ledger of ratings */
.ledger{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule-2)}
.ledger li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--rule)}
.ledger .hd{padding:12px 0 10px;font:600 var(--fs-0,12px)/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.ledger .hd span:last-child{text-align:right}
.ledger .row{opacity:.3;transition:opacity .4s var(--ease)}
.ledger .row.in{opacity:1}
.ledger code{font-family:var(--mono);font-size:var(--fs-1,13.5px);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger em{font-style:normal;font-family:var(--mono);font-size:var(--fs-0,12px);letter-spacing:.04em;color:var(--ink-3);text-align:right;white-space:nowrap}
.ledger [data-r="5"] em,.ledger [data-r="4"] em{color:var(--crit)}
.ledger [data-r="3"] em{color:var(--gold)}
.pips{display:flex;gap:8px;padding-left:3px}
.pips i{width:8px;height:8px;border:1px solid var(--gold-3);transform:rotate(45deg);transition:background .25s,border-color .25s}
.pips i.on{background:var(--gold);border-color:var(--gold)}
.ledger [data-r="5"] .pips i.on,.ledger [data-r="4"] .pips i.on{background:var(--crit);border-color:var(--crit)}
.ledger + .note{margin-top:18px}
/* code inside a promise keeps the mono */
.v-d .copy-panel .tenets .tenet p code{font-family:var(--mono);font-size:var(--fs-1);color:var(--ink)}
.v-d .keep-score b{font-variant-numeric:tabular-nums}
@media (max-width:600px){.ledger li{grid-template-columns:72px minmax(0,1fr);row-gap:4px}.ledger em{grid-column:2;text-align:left}.ledger .hd span:last-child{display:none}.pips{gap:6px}}
/* landing D on a phone: the wordmark heads the page, above the cloaked figure, rather than sitting under it with the headline */
@media (max-width:860px){
  .v-d .hero .mark{position:absolute;top:22px;left:var(--gutter);margin-left:-.04em}
  .v-d .hero h1{margin-top:0}
}

/* ---------- landing D: the chapters in the hero's own language ----------
   The hero sets the rules and everything below follows them: bone on near-black and nothing warmer; no boxes, the words sit
   on the dark with only a feather of shadow behind them; Cinzel for headlines and the chapter numerals, the blackletter only
   for the wordmark as in the hero, mono for everything else; colour only as the hero uses it: its gold and green
   misregistration behind a figure for a moment, its gold for a warning, and otherwise bone, brighter where something matters.
   Its glitch (slices, sparks, a field of noise, text that resolves out of glyphs) carries down the page in story.js.
   These rules come last and win over the block rules above them. */
.v-d{
  --ink:#efebe0; --ink-2:#b4b0a4; --ink-3:#8b8a82; --label:#d6d0c2;
  --glint-a:rgba(201,168,92,.55); --glint-b:rgba(88,201,160,.5);   /* the hero's chroma pair, gold and green */
  --rubric:var(--label);
}

/* ---------- no boxes: the text sits on the dark, feathered into the fog, over a faint field of glyphs ---------- */
.v-d .copy-panel{background:transparent;box-shadow:none;isolation:isolate;padding:24px 8px 28px}
.v-d .copy-panel::before{content:"";position:absolute;inset:-70px -90px;width:auto;height:auto;border:0;z-index:-2;
  background:radial-gradient(closest-side,rgba(7,7,8,.94),rgba(7,7,8,.82) 62%,rgba(7,7,8,0))}
.v-d .copy-panel::after{content:none}
.v-d .prologue{position:relative;isolation:isolate}
.v-d .nfield{position:absolute;inset:-70px -90px;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.v-d .nfield canvas{width:100%;height:100%;display:block}

/* ---------- the chapter head: the numeral large in Roman capitals, a cursor, the name as the hero labels its bar ---------- */
.v-d .rubric{align-items:center;gap:16px;font:400 var(--fs-1)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--label);flex-wrap:nowrap}
.v-d .rubric span:not(.nm){order:0;font:600 var(--fs-10)/.8 var(--display);letter-spacing:0;text-transform:none;color:var(--ink);padding:0;margin:0}
.v-d .rubric span.word{font-size:var(--fs-7);letter-spacing:.02em}
.v-d .rubric span.replay:hover{color:#fff;text-shadow:-1px 0 var(--glint-a),1px 0 var(--glint-b)}
.v-d .rubric::before{content:"";order:1;width:7px;height:13px;background:var(--ink);animation:cursor 1.1s steps(2,start) infinite}
.v-d .rubric .nm{order:2;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.v-d .rubric::after{content:"";order:3;flex:1;height:1px;min-width:24px;background:linear-gradient(90deg,var(--rule-2),transparent)}
@keyframes cursor{to{visibility:hidden}}

/* ---------- headlines: bigger, in bone; they resolve out of glyphs and split gold and green for the moment they land ---------- */
.v-d .copy-panel .h2{position:relative;font-size:var(--fs-10);line-height:1.1;letter-spacing:.004em;max-width:24ch;margin-top:22px;color:var(--ink);text-wrap:balance}
.v-d .copy-panel .h2.split,.v-d .rubric .split{text-shadow:-2px 0 var(--glint-a),2px 0 var(--glint-b)}

/* ---------- running text: the hero's mono, at the hero's measure ---------- */
.v-d main .lead,.v-d .beat-note p,.v-d .copy-panel .tabpanel p,.v-d .copy-panel .tabpanel li,.v-d .copy-panel .tenets .tenet p,
.v-d .copy-panel .faq summary,.v-d .copy-panel .faq .a,.v-d .milestones,.v-d .contents .s,.v-d .foot-brand p{font-family:var(--mono);font-variant-numeric:normal}
.v-d main .lead{font-size:var(--fs-2);line-height:1.75;color:var(--ink-2);max-width:52ch;margin-top:20px}
.v-d .beat-note p,.v-d .copy-panel .tabpanel p,.v-d .copy-panel .faq .a,.v-d .foot-brand p{font-size:var(--fs-1);line-height:1.75}
.v-d .copy-panel .tabpanel li,.v-d .copy-panel .tenets .tenet p{font-size:var(--fs-1);line-height:1.65}
.v-d .copy-panel .faq summary{font-size:var(--fs-2);font-weight:400;color:var(--ink)}
.v-d main .lead code,.v-d .copy-panel .tabpanel p code,.v-d .copy-panel .faq .a code,.v-d .copy-panel .tabpanel li code{font-size:inherit;color:var(--ink)}
.v-d main .lead a{color:var(--ink);text-decoration-color:var(--rule-2);text-underline-offset:4px}
.v-d .note,.v-d .beat-note .note{font-size:var(--fs-1);color:var(--ink-3)}

/* ---------- every label reads like the hero's top bar: mono capitals, a step larger and brighter than before ---------- */
.v-d .ledger .hd,.v-d .win .tbar,.v-d .trust,.v-d .foot h4,.v-d .contents h2,.v-d .rh-ch,.v-d .rh-btn,.v-d .copy-panel .tabs button{
  font-family:var(--mono);font-weight:400;font-size:var(--fs-1);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.v-d .rh-ch b{color:var(--ink)}
.v-d .contents ol b{font:600 var(--fs-3)/1.3 var(--display);letter-spacing:0;color:var(--ink)}
/* the running head's progress is a row of bits that fill as you read */
.v-d .rh .progress{height:auto;background:none;overflow:hidden;line-height:1}
.v-d .rh .progress i{display:none}
.v-d .rh-bits{display:block;font:10px/1 var(--mono);letter-spacing:.1em;color:#2a2b30;white-space:nowrap;transform:translateY(-4px)}
.v-d .rh-bits b{font-weight:400;color:var(--ink-3)}

/* ---------- Chapter I: the statement as the hero sets its headline, the figures as readouts, a stream of bits under it ---------- */
.v-d .prologue{max-width:720px}
.v-d .big-line{font-size:var(--fs-11);line-height:1.12}
.v-d .ov-w.mid{color:#5c5d63}
.v-d .ov-w.off{color:#1d1e22}
.v-d .ov-w[data-count],.v-d .ov-w[data-unit]{font-family:var(--mono);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.v-d .ov-w.num,.v-d .ov-w.on[data-unit]{color:#fff;text-shadow:-2px 0 var(--glint-a),2px 0 var(--glint-b)}
.v-d .bits{width:0;min-width:100%;margin:1vh 0 3vh;font:var(--fs-1)/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.v-d .bits b{font-weight:400;color:var(--ink)}
.v-d .beat-note{background:transparent;padding:4px 0 4px 20px;border-left:1px solid var(--ink-3);box-shadow:none;margin-top:1vh}
.v-d .beat-note p{color:var(--ink-2);max-width:48ch}
.v-d .beat-note .note,.v-d .beat-note .note a{font-size:var(--fs-0);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.v-d .beat-note .note a:hover{color:var(--ink)}

/* ---------- Chapter III: the terminal as the hero draws its command, one hairline and no window chrome.
   Danger is bright, not red: critical in white at weight, high in the hero's gold ---------- */
.v-d .panel{background:rgba(7,7,8,.9);border-color:var(--rule-2)}
.v-d .win .tbar .dots{display:none}
.v-d .win .tbar{padding:10px 16px;color:var(--ink-3)}
.v-d .out .crit,.v-d .code .crit{color:#fff;font-weight:600}
.v-d .out .hi{color:var(--gold)}
.v-d .out .info{color:var(--ink-3)}
.v-d .code .s,.v-d .code .ok{color:var(--ink)}
.v-d .code .w{color:#fff}

/* ---------- Chapter IV: the ledger in bone, the heaviest rows brightest ---------- */
.v-d .ledger{border-top-color:var(--rule-2)}
.v-d .pips i{border-color:#4a4a4e}
.v-d .pips i.on{background:var(--ink-2);border-color:var(--ink-2)}
.v-d .ledger [data-r="5"] .pips i.on,.v-d .ledger [data-r="4"] .pips i.on{background:#fff;border-color:#fff;box-shadow:0 0 6px rgba(239,235,224,.45)}
.v-d .ledger em{font-size:var(--fs-1);letter-spacing:.02em;color:var(--ink-3)}
.v-d .ledger [data-r="5"] em,.v-d .ledger [data-r="4"] em{color:#fff;font-weight:600}
.v-d .ledger [data-r="3"] em{color:var(--gold)}

/* ---------- Chapter V: ticks in bone, the tally as a readout ---------- */
.v-d .fix .tick{border-color:var(--ink-3)}
.v-d .fix.now .tick{border-color:var(--ink);box-shadow:0 0 8px rgba(239,235,224,.4)}
.v-d .fix.done .tick{background:var(--ink);border-color:var(--ink)}
.v-d .fix.done em{color:var(--ink)}
.v-d .fix b{font-weight:500}
.v-d .fix div span{font-size:var(--fs-0)}
.v-d .fix em{font-size:var(--fs-1);color:var(--ink-3)}
.v-d .copy-panel .fix{padding:12px 0}
.v-d .keep-score{display:flex;align-items:baseline;gap:14px;margin-top:26px;font:var(--fs-1)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.v-d .keep-score b{font:600 var(--fs-10)/1 var(--mono);letter-spacing:-.02em;color:#fff;text-shadow:-2px 0 var(--glint-a),2px 0 var(--glint-b);margin-right:10px}

/* ---------- Chapter VI: tabs in the bar's capitals, no icons ---------- */
.v-d .copy-panel .tabs button svg{display:none}
.v-d .copy-panel .tabs button{color:var(--ink-3);padding:14px 16px 16px}
.v-d .copy-panel .tabs button[aria-selected="true"]{color:var(--ink)}
.v-d .tabs button::after{background:var(--ink);height:1px}
.v-d .copy-panel .tabpanel h3{font:600 var(--fs-3)/1.3 var(--display);color:var(--ink)}

/* ---------- Chapter VII: six articles numbered I to VI, in place of the icon grid ---------- */
.v-d .copy-panel .tenets{counter-reset:art}
.v-d .copy-panel .tenets .tenet{counter-increment:art;align-content:start}
.v-d .copy-panel .tenets .tenet svg{display:none}
.v-d .copy-panel .tenets .tenet::before{content:counter(art,upper-roman);grid-row:span 2;align-self:start;font:600 var(--fs-5)/1.2 var(--display);color:var(--ink)}
.v-d .copy-panel .tenets .tenet,.v-d .copy-panel .tenets .tenet:not(:nth-child(3n+1)),.v-d .copy-panel .tenets .tenet:nth-child(2n){grid-template-columns:40px minmax(0,1fr);border-bottom-color:var(--rule)}
.v-d .copy-panel .tenets .tenet h3{font:600 var(--fs-3)/1.3 var(--display);color:var(--ink)}

/* ---------- Chapter VIII: the open question is brightest ---------- */
.v-d .faq summary .x::before,.v-d .faq summary .x::after{background:var(--ink-3)}
.v-d .faq details[open] summary{color:#fff}
.v-d .faq details[open] summary .x::before,.v-d .faq details[open] summary .x::after{background:#fff}

/* ---------- the epilogue: a reprise of the hero's own call to action ---------- */
.v-d .trust{font-size:var(--fs-0);letter-spacing:.16em;color:var(--ink-3)}
.v-d .trust span+span::before{color:var(--ink-3)}

/* ---------- the footer: the bar's capitals, and the wordmark, which decloaks as the hero's figure does ---------- */
.v-d .foot ul a{font-size:var(--fs-1);color:var(--ink-2)}
/* the wordmark in the hero's own ASCII (CloakSite.footerMark), as large as the page allows */
.v-d .foot .ascii{display:block;height:clamp(220px,34vw,640px);margin:80px 0 24px}

/* the running head gets room, and the contents leaf is a full screen of chapters */
.v-d .rh{height:72px;padding:0 calc(var(--gutter) + 12px)}
.v-d .rh .progress{left:calc(var(--gutter) + 12px);right:calc(var(--gutter) + 12px)}
.v-d .contents{inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgba(7,7,8,.97)}
.v-d .contents[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.v-d .contents-head{height:72px;align-items:center;margin:0;padding:0 calc(var(--gutter) + 12px);border-bottom:1px solid var(--rule)}
.v-d .contents ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px;align-content:start;padding:28px calc(var(--gutter) + 12px);overflow:auto}
.v-d .contents li,.v-d .contents li+li{border-top:0;border-bottom:1px solid var(--rule)}
.v-d .contents ol a{grid-template-columns:84px minmax(0,1fr);column-gap:20px;row-gap:6px;padding:26px 0 24px}
.v-d .contents ol b{font:600 var(--fs-10)/.9 var(--display);letter-spacing:0;text-align:left;color:var(--ink-3);transition:color .2s}
.v-d .contents .t{font:600 var(--fs-5)/1.2 var(--display);letter-spacing:.01em;color:var(--ink)}
.v-d .contents .s{font-size:var(--fs-1);line-height:1.6;color:var(--ink-3)}
.v-d .contents ol a:hover .t,.v-d .contents ol a:focus-visible .t{color:#fff;text-shadow:-1px 0 var(--glint-a),1px 0 var(--glint-b)}
.v-d .contents ol a:hover b{color:var(--ink)}
.v-d .contents ol a[aria-current="true"] b{color:#fff}
.v-d .contents ol a[aria-current="true"] .t::after{content:none}
.v-d .contents .colophon{margin:0;padding:22px calc(var(--gutter) + 12px);border-top:1px solid var(--rule)}

/* ---------- the glitch over each illustration: a canvas laid over the scene, drawn by story.js ---------- */
.v-d .nglitch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

@media (max-width:1100px){
  .v-d .copy-panel{padding:20px 0 28px}
  .v-d .copy-panel::before,.v-d .nfield{inset:-40px -24px}
}
@media (max-width:860px){
  .v-d .copy-panel .h2{font-size:var(--fs-7)}
  .v-d .big-line{font-size:var(--fs-7)}
  .v-d .rubric span:not(.nm){font-size:var(--fs-8)}
  .v-d .keep-score b{font-size:var(--fs-8)}
}
@media (max-width:860px){
  .v-d .rh{height:56px;padding:0 16px}
  .v-d .contents-head{height:56px;padding:0 16px}
  .v-d .contents ol{grid-template-columns:minmax(0,1fr);column-gap:0;padding:12px 16px}
  .v-d .contents ol a{grid-template-columns:56px minmax(0,1fr);column-gap:14px;padding:18px 0 16px}
  .v-d .contents ol b{font-size:var(--fs-7)}
  .v-d .contents .t{font-size:var(--fs-3)}
  .v-d .contents .colophon{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .v-d .rubric::before{animation:none}
}

/* ---------- Chapter II: three readouts under the argument, each with its source; none is Cloak's own measurement ---------- */
.v-d .tally{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin:30px 0 0;border-top:1px solid var(--rule-2)}
.v-d .tally .t{padding:18px 0 0;opacity:.28;transition:opacity .4s var(--ease)}
.v-d .tally .t.in{opacity:1}
.v-d .tally dt{display:flex;align-items:baseline;gap:2px;white-space:nowrap}
.v-d .tally dt b{font:600 var(--fs-10)/1 var(--mono);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.v-d .tally dt b.w{font-size:var(--fs-8)}
.v-d .tally dt i{font:600 var(--fs-5)/1 var(--mono);font-style:normal;color:var(--ink)}
.v-d .tally .t.in dt b{text-shadow:-2px 0 var(--glint-a),2px 0 var(--glint-b)}
.v-d .tally dd{margin:12px 0 0;font:var(--fs-1)/1.55 var(--mono);color:var(--ink-2)}
.v-d .tally dd small{display:block;margin-top:8px;font-size:var(--fs-0);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.v-d .turn{margin-top:26px;padding-left:18px;border-left:1px solid var(--ink-3);font:var(--fs-2)/1.65 var(--mono);color:var(--ink);max-width:52ch}

/* ---------- the reckoning: a full-width band between II and III; the scroll applies the map ---------- */
.v-d .reckon{position:relative;z-index:1;min-height:100vh;display:grid;align-items:center;padding:14vh calc(var(--gutter) + 12px);
  background:rgba(5,5,6,.94);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.v-d .reckon-in{width:100%;max-width:1320px;margin:0 auto}
.v-d .reckon-k{font:var(--fs-1)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.v-d .reckon-h{margin-top:22px;font:600 var(--fs-11)/1.1 var(--display);letter-spacing:.004em;color:var(--ink);max-width:22ch;text-wrap:balance}
.v-d .reckon-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:52px}
.v-d .reckon .decode-out{font-size:var(--fs-1);color:var(--ink-3)}
.v-d .reckon .decode-out .mn{color:#4a4b50}
.v-d .reckon .decode-out .sc{color:var(--gold)}
.v-d .reckon .decode-out .w{color:var(--ink)}
.v-d .reckon .decode-out .kw{color:var(--ink-2)}
.v-d .reckon .decode-out .cm{color:#fff;font-style:normal;font-weight:600}
.v-d .reckon .decode.done .decode-panel{border-color:var(--rule-2)}
.v-d .reckon .decode .note{margin-top:14px}
.v-d .reckon-n{margin:0;display:grid;gap:34px}
.v-d .reckon-n div{opacity:.25;transition:opacity .4s var(--ease)}
.v-d .reckon-n div.in{opacity:1}
.v-d .reckon-n dt{font:600 var(--fs-15)/.95 var(--mono);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.v-d .reckon-n div.done dt{text-shadow:-2px 0 var(--glint-a),2px 0 var(--glint-b)}
.v-d .reckon-n dd{margin:10px 0 0;font:var(--fs-1)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
@media (max-width:1100px){
  .v-d .reckon-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .v-d .reckon-n{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media (max-width:860px){
  .v-d .tally{grid-template-columns:minmax(0,1fr);gap:0}
  .v-d .tally .t{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
  .v-d .tally dt b{font-size:var(--fs-8)}
  .v-d .tally dt b.w{font-size:var(--fs-4)}
  .v-d .tally dd{margin:0}
  .v-d .reckon{min-height:0;padding:10vh 16px}
  .v-d .reckon-h{font-size:var(--fs-7)}
  .v-d .reckon .decode-out{font-size:var(--fs-0)}
  .v-d .reckon-n dt{font-size:var(--fs-8)}
  .v-d .reckon-n dd{font-size:var(--fs-0);letter-spacing:.1em}
}
.v-d .reckon .tbar>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-d .reckon .tbar>span:last-child{flex:none}

/* ---------- Chapters VI and VII: still terminals, set like Chapter III's ---------- */
.v-d .term-s{margin-top:26px}
.v-d .term-s .tbar>span:last-child{color:var(--ink-3)}
.v-d .term-s .code{margin:0;padding:16px 18px 18px;font:var(--fs-0)/1.75 var(--mono);color:var(--ink-2);white-space:pre;overflow-x:auto}
.v-d .term-s .code .p{color:var(--ink-3)}
.v-d .term-s .code .cm{color:var(--ink-3)}
.v-d .term-s .code .hi{color:var(--gold);font-weight:600}
.v-d .term-s .code .crit{color:#fff;font-weight:600}
.v-d .term-s .code .ok{color:var(--green)}
.v-d .term-s .tbar>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-d .term-s .tbar>span:last-child{flex:none}

/* ---------- step E: the wind out of the hero, the cue, the command interlude and the seams between chapters ---------- */
.nwind,.nseam{position:fixed;inset:0;pointer-events:none}
.nwind{z-index:6}
.nseam{z-index:2}
.v-d .rh{z-index:30}
.ncue{position:fixed;left:50%;bottom:26px;z-index:7;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 16px;min-height:44px;
  background:none;border:0;cursor:pointer;font:400 var(--fs-0,12px)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--label,#d6d0c2);transition:opacity .4s,visibility .4s}
.ncue i{display:block;width:1px;height:28px;background:linear-gradient(var(--ink,#efebe0),transparent);animation:ncue 1.8s ease-in-out infinite}
.ncue:hover span,.ncue:focus-visible span{color:#fff;text-shadow:-1px 0 var(--glint-a,#c9a85c),1px 0 var(--glint-b,#58c9a0)}
.ncue.off{opacity:0;visibility:hidden}
@keyframes ncue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.v-d .command .cmd{margin-top:46px}
.v-d .command .cmd-out{margin:0;padding:22px 24px 26px;min-height:calc(10 * 1.8em + 48px);font:var(--fs-2)/1.8 var(--mono);color:var(--ink-2);white-space:pre;overflow-x:auto}
.v-d .command .cmd-out .p{color:var(--ink-3)}
.v-d .command .cmd-out .w{color:var(--ink)}
.v-d .command .cmd-out .dim{color:var(--ink-3)}
.v-d .command .cmd-out .ok{color:#fff;font-weight:600}
.v-d .command .cmd-out .sc{color:var(--gold)}
.v-d .command .cmd-out .cur{color:var(--ink);animation:cursor 1.1s steps(2,start) infinite}
.v-d .command.done .cmd-out .ok{text-shadow:-1px 0 var(--glint-a),1px 0 var(--glint-b)}
.v-d .command .tbar>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-d .command .tbar>span:last-child{flex:none}
.v-d .command.done [data-cmd-pct]{color:#fff}
@media (max-width:860px){
  .v-d .command .cmd-out{font-size:var(--fs-0);padding:16px;min-height:calc(10 * 1.8em + 32px)}
  .ncue{bottom:16px}
}
@media (prefers-reduced-motion:reduce){ .ncue i{animation:none} .v-d .command .cmd-out .cur{animation:none} }

/* ---------- landing E: the ASCII transitions between sections (transitions.js), one canvas over the page ---------- */
.ascii-tx{position:fixed;inset:0;z-index:55;pointer-events:none}
/* landing E: the demo bar that replays one transition on the page (#tx=N) */
.tx-demo{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 10px;background:rgba(7,7,8,.94);border:1px solid var(--rule-2);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.tx-demo b{font-weight:600;color:#fff;white-space:nowrap}
.tx-demo span{color:var(--ink-3);letter-spacing:.04em;text-transform:none;max-width:44ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-demo button{min-height:36px;min-width:36px;padding:0 10px;border:1px solid var(--rule-2);background:none;color:var(--ink);cursor:pointer;font:inherit}
.tx-demo button:hover{border-color:var(--ink)}
@media (max-width:700px){.tx-demo span{display:none}}

/* landing E, round twelve: the interludes' single column may not grow past the screen (a long terminal line scrolls inside its panel instead) */
.v-d .reckon{grid-template-columns:minmax(0,1fr)}
.v-d .reckon-in,.v-d .reckon .panel,.v-d .command .cmd{min-width:0;max-width:100%}
/* the page holds still while a transition plays, a phone's momentum included */
html.tx-hold{overflow:hidden}
/* the replay on each chapter's drawing: quiet until the pointer finds it */
.art-replay{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;background:rgba(7,7,8,.62);border:1px solid var(--rule-2);color:var(--ink-3);font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;opacity:.5;transition:opacity .2s,color .2s,border-color .2s}
.art-replay svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.art-replay:hover,.art-replay:focus-visible{opacity:1;color:var(--ink);border-color:var(--ink-3)}
.art-replay:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
@media (hover:none){.art-replay{opacity:.75;min-height:44px}}
@media (max-width:860px){.art-replay{right:10px;bottom:10px}}
/* nothing may widen the page on a phone: the noise fields behind the copy bleed past the gutter, so the main column clips them sideways
   (clip, not hidden, so the sticky drawings still stick) */
.v-d main{overflow-x:clip}
/* landing E: the line at the foot of the screen that fills as you push past a section's end */
.tx-cue{position:fixed;left:50%;bottom:22px;z-index:56;width:180px;height:2px;background:linear-gradient(90deg,rgba(201,168,92,0),var(--gold) 20%,var(--gold) 80%,rgba(201,168,92,0));transform:translateX(-50%) scaleX(0);opacity:0;pointer-events:none;transition:opacity .25s linear,transform .12s linear}
@media (max-width:700px){.tx-cue{bottom:16px;width:140px}}
/* landing E on a phone: the chapter's drawing comes after its copy and scrolls with the page, rather than pinned above it */
html.tx-page:not(.pinned-acts) .v-d .act-art{position:relative;top:auto;order:2;z-index:auto}
html.tx-page:not(.pinned-acts) .v-d .act-art::after{display:none}
html.tx-page:not(.pinned-acts) .v-d .act-copy{padding-bottom:3vh}
/* landing E: the quiet "Continue" that shows at a section's end when the next transition is ready */
.tx-next{position:fixed;left:50%;bottom:30px;z-index:56;display:flex;align-items:center;gap:6px;transform:translate(-50%,6px);opacity:0;pointer-events:none;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);transition:opacity .4s ease,transform .4s ease}
.tx-next svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tx-next.on{opacity:.75;transform:translate(-50%,0)}
.tx-next.on svg{animation:tx-nudge 1.8s ease-in-out infinite}
@keyframes tx-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (max-width:700px){.tx-next{bottom:24px}}
@media (prefers-reduced-motion:reduce){.tx-next.on svg{animation:none}}
/* landing E on a phone: running text at 16px and its notes no smaller than 13, and every control a full 44px to tap */
html.tx-page:not(.pinned-acts) .v-d{--fs-0:13px;--fs-1:14.5px;--fs-2:16px}
html.tx-page:not(.pinned-acts) .v-d .rubric span.replay{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:-10px -8px;padding:0 8px}
html.tx-page:not(.pinned-acts) .v-d .contents ol a{min-height:44px}
html.tx-page:not(.pinned-acts) .v-d .foot a,html.tx-page:not(.pinned-acts) .v-d .note a{display:inline-flex;align-items:center;min-height:44px}
html.tx-page:not(.pinned-acts) .v-d main button,html.tx-page:not(.pinned-acts) .v-d .hero button{min-height:44px}
/* the scrolling pages scroll without CSS smoothing: ScrollTrigger measures by jumping the page to the top and back, and smoothing (even restored
   inline by ScrollTrigger itself) turns that jump into a glide and corrupts every start point. Their links glide by script instead (story.js) */
html.st-instant,html.tx-page{scroll-behavior:auto!important}
/* the review switcher, on landing E: at the foot of the opening screen, scrolling away with it, so it never sits over the chapters or the cues */
html.tx-page .review{position:absolute;top:calc(100svh - 52px);bottom:auto}
/* landing E on a phone: 50px of page under each chapter's drawing, so the next transition waits until you have scrolled a little past it */
html.tx-page:not(.pinned-acts) .v-d main > .act{padding-bottom:50px}
/* landing E on a phone, the hero: a small wordmark top left with the version beside it, so the headline leads; the copy clears the
   "Continue" cue at the foot of the screen (the hero's own "Read the story" cue stands down, one cue is enough); the trust line breaks
   between its items, never inside one; the review switcher moves up under the wordmark, off the copy */
@media (max-width:860px){
  html.tx-page .v-d .hero .mark{top:-30px;padding:5px 0;font-size:40px}   /* .main starts under the 40px bar: this centres it on the version line; the padding makes it a 44px target */
  html.tx-page .v-d .hero .bar{justify-content:flex-end;padding-top:24px}
  html.tx-page .v-d .hero .main{padding-top:38svh;padding-bottom:64px}
  html.tx-page .v-d .hero h1{font-size:25px;line-height:1.22;text-wrap:balance}
  html.tx-page .v-d .hero .sub{margin-top:14px}
  html.tx-page .v-d .hero .cta{margin-top:26px}
  html.tx-page .v-d .hero .trust{display:flex;flex-wrap:wrap;row-gap:4px}
  html.tx-page .v-d .hero .trust span{white-space:nowrap}
  html.tx-page .v-d .hero .trust span+span::before{content:none}
  html.tx-page .v-d .hero .trust span:not(:last-child)::after{content:"·";margin:0 .7em;color:var(--ink-3)}   /* the dot ends a line, never starts one */
  html.tx-page .ncue{display:none}
  html.tx-page .review{top:64px}
}
/* landing E: on the first screen the hero's "Read the story" is the cue, so the "Continue" under it waits until you are past the hero */
html.tx-page .ncue:not(.off) ~ .tx-next{opacity:0!important}
@media (max-width:860px){html.tx-page .ncue:not(.off) ~ .tx-next.on{opacity:.75!important}}   /* on a phone the hero has no cue of its own */
/* the final landing (D, built as E), laptop screens up to 1440px (larger screens keep the full-bleed layout): each chapter sits inside the page's margins rather than running to its edge. The drawing
   and the copy have a clear gap between them; the drawing stays clear of the running head and of the "Continue" cue below it and fades out
   at its edges rather than ending in a hard box; the replay sits on the drawing's outer side, away from the cue at the centre */
@media (min-width:1101px) and (max-width:1480px){
  html.tx-page.pinned-acts .v-d .act-grid{max-width:1440px;margin:0 auto;box-sizing:border-box;min-height:100vh;padding:72px clamp(28px,4.5vw,80px) 24px;column-gap:clamp(36px,5vw,96px);grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  html.tx-page.pinned-acts .v-d .act-right .act-grid{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
  html.tx-page.pinned-acts .v-d .act-wide.act-left .act-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  html.tx-page.pinned-acts .v-d .act-wide.act-right .act-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  html.tx-page.pinned-acts .v-d .act-art{height:min(calc(100vh - 200px),760px)}
  html.tx-page.pinned-acts .v-d .act-sticky canvas{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
  html.tx-page.pinned-acts .v-d .act-copy,html.tx-page.pinned-acts .v-d .act-left .act-copy,html.tx-page.pinned-acts .v-d .act-right .act-copy{padding:0}
  html.tx-page.pinned-acts .v-d .copy-panel{max-width:580px;margin:0}
  html.tx-page.pinned-acts .v-d .copy-panel.wide{max-width:640px}
  html.tx-page.pinned-acts .v-d .act-left .art-replay{right:auto;left:12px}
}
/* short laptop screens: the type and the spacing between rows come down a step, so a chapter fits without shrinking */
@media (min-width:1101px) and (max-width:1480px) and (max-height:860px){
  html.tx-page.pinned-acts .v-d .copy-panel .h2{font-size:clamp(26px,3.6vh,34px)}
  html.tx-page.pinned-acts .v-d .copy-panel .fix{padding:12px 0}
  html.tx-page.pinned-acts .v-d .copy-panel .fixes{margin-top:22px}
}
@media (min-width:1101px) and (max-width:1480px) and (max-height:760px){
  html.tx-page.pinned-acts .v-d .copy-panel .out,html.tx-page.pinned-acts .v-d .copy-panel .code{line-height:1.6}
  html.tx-page.pinned-acts .v-d .copy-panel .lead{margin-top:12px}
  html.tx-page.pinned-acts .v-d .act-grid{padding-bottom:16px}
}
/* the final landing, one column between a phone and a laptop (701–1100px): the copy keeps a readable measure in the middle, and the drawing
   under it keeps to the same column with feathered edges, rather than both running the full width */
@media (min-width:701px) and (max-width:1100px){
  html.tx-page:not(.pinned-acts) .v-d .act-copy{max-width:720px;margin:0 auto;width:100%;box-sizing:border-box}
  html.tx-page:not(.pinned-acts) .v-d .act-art{max-width:760px;width:100%;margin:0 auto}
  html.tx-page:not(.pinned-acts) .v-d .act-sticky canvas{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
}
/* the command in the contents leaf is for a phone, where the page is long and the hero far away; wider screens keep the leaf as it was */
.v-d .contents-cta{display:none}
/* the final landing on a phone, after the mobile review: a steadier rhythm (shorter drawings, interludes padded like the chapters), every
   control a full 44px to tap with text no smaller than 13px, a contents leaf that fits on one screen and carries the command, and a footer
   that drops the chapter list the contents already gives */
@media (max-width:700px){
  html.tx-page .v-d .act-art{height:min(300px,80vw)}
  html.tx-page .v-d main > .reckon{padding-top:56px;padding-bottom:56px}
  html.tx-page .v-d .rh .wm{display:inline-flex;align-items:center;min-height:44px}
  html.tx-page .v-d .art-replay{opacity:1;min-height:44px}
  html.tx-page .v-d .art-replay span{font-size:12px}
  html.tx-page .v-d .hero .ver{font-size:13px}
  html.tx-page .v-d .copy-sm,html.tx-page .v-d .term button{min-height:44px;font-size:13px}
  html.tx-page .v-d .contents ol{padding:0 16px}
  html.tx-page .v-d .contents ol a{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:10px 0 9px}
  html.tx-page .v-d .contents ol b{font-size:var(--fs-5);line-height:1.1}
  html.tx-page .v-d .contents ol .s{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-3)}
  html.tx-page .v-d .contents-x{min-width:44px;min-height:44px}
  html.tx-page .v-d .contents .colophon{padding:4px 16px 8px}
  html.tx-page .v-d .contents .colophon a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
  html.tx-page .v-d .contents-cta{display:flex;margin:8px 16px 0;width:auto}
  html.tx-page .v-d .foot-grid > :nth-child(2){display:none}
  html.tx-page .v-d .foot-grid{gap:28px 20px;padding-top:48px}
  html.tx-page .v-d .foot-brand{grid-column:1 / -1}
  html.tx-page .v-d .foot .ascii{margin:40px 0 16px}
  html.tx-page .v-d .foot-legal,html.tx-page .v-d .foot-legal a{font-size:13px}
  html.tx-page .v-d .foot-legal a,html.tx-page .v-d .foot .wm,html.tx-page .v-d .foot-grid a{display:inline-flex;align-items:center;min-height:44px}
}
/* the navigation by section (the final landing): on a wide screen the top bar carries the sections and a copy-the-command button; narrower,
   it names the section you are in and opens a Menu with the same sections, the parts of "How it works" and the command */
.v-d .rh-nav,.v-d .rh-copy{display:none}
.v-d .rh .rh-ch,.v-d .rh .rh-nav{grid-column:2;grid-row:1}
.v-d .rh .rh-btn,.v-d .rh .rh-copy{grid-column:3;grid-row:1}
.v-d .rh-ch b{display:none}
@media (min-width:1101px){
  .v-d .rh-ch,.v-d .rh-btn{display:none}
  .v-d .rh-nav{display:flex;justify-self:center;gap:clamp(18px,2.2vw,36px)}
  .v-d .rh-nav a{display:inline-flex;align-items:center;min-height:44px;font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .2s}
  .v-d .rh-nav a:hover{color:var(--ink)}
  .v-d .rh-nav a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-2);text-underline-offset:9px;text-decoration-thickness:1px}
  .v-d .rh-copy{display:inline-flex;justify-self:end;align-items:center;gap:12px;min-height:40px;padding:0 4px 0 14px;background:rgba(7,7,8,.6);border:1px solid var(--rule-2);color:var(--ink);font:500 12px/1 var(--mono);cursor:pointer;transition:border-color .2s}
  .v-d .rh-copy:hover{border-color:var(--ink-3)}
  .v-d .rh-copy code{font:inherit;color:var(--ink)}
  .v-d .rh-copy code::before{content:"$ ";color:var(--gold)}
  .v-d .rh-copy span{padding:8px 10px;background:var(--ink);color:#070708;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
  .v-d .rh-copy[data-done="1"]{padding:0 14px;color:var(--gold)}
  .v-d .rh-nav a:focus-visible,.v-d .rh-copy:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
}
@media (min-width:1101px) and (max-width:1280px){.v-d .rh-copy code{display:none}.v-d .rh-copy{padding-left:4px}.v-d .rh-copy span::before{content:"Copy command"}.v-d .rh-copy span{font-size:0}.v-d .rh-copy span::before{font-size:11px}}
/* the menu: plain entries, no numerals; "How it works" lists its parts under it */
.v-d .contents ol a{grid-template-columns:minmax(0,1fr)}
.v-d .contents ol a[aria-current="true"] .t{color:#fff}
.v-d .contents ol a[aria-current="true"] .t::before{content:"";display:inline-block;width:6px;height:6px;margin:0 12px 3px 0;background:var(--gold);transform:rotate(45deg)}
html.tx-page .v-d .contents ol .sub{display:flex;flex-wrap:wrap;gap:0 20px;margin:-10px 0 4px}
html.tx-page .v-d .contents ol .sub a{display:inline-flex;align-items:center;min-height:44px;padding:0;font:500 var(--fs-1)/1 var(--mono);color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:5px}
html.tx-page .v-d .contents ol .sub a:hover{color:var(--ink)}