/* Repair · The One Book's stylesheet, copied by line range (build script: scratchpad build_onebook_css.py).
   Content-free sections only. Adaptations are selector-level and named in each header:
   dark is the default (the book follows the system), and its duplicate dark blocks are folded in.
   Fonts: Geist (OFL 1.1, Vercel) and Bebas Neue (OFL 1.1), self-hosted from /repair/assets/fonts/, never a CDN; notices in LICENSES/.
   Tracking (owner's direction, 2026-11-08): headlines -0.02em with kerning on, body 0.015em. */
@font-face{font-family:'Geist';src:url(/repair/assets/fonts/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url(/repair/assets/fonts/Geist-Italic-Variable.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url(/repair/assets/fonts/BebasNeue-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ---- The One Book styles.css 4–32 · tokens (adapted: dark is the default, light is opt-in) ---- */
/* Layout: a quiet field guide. One reading column (~66ch) on cream; photographs and diagrams break wide;
   "deep water" bands (the timeline, the loop, the ripples) sit on a dark green ground in both themes. */
:root{
  --bg:#FAF6EE; --bg-2:#F2EBDB; --bg-sage:#E5EEE4; --card:#FFFDF8;
  --fg:#1E2B23; --fg-soft:#56625A; --fg-faint:#869087; --line:rgba(30,43,35,.13);
  --accent:#2C8A61; --accent-soft:#84C7A4; --gold:#9E7F33; --gold-lt:#E7D39A; --rose:#A95C74; --lav:#7E6CB8;
  --holo-a:#2FA57A; --holo-b:#C49F45; --holo-c:#8E7CC3;
  --deep:#17271E; --deep-2:#1F3328; --on-deep:#F5F0E4; --on-deep-soft:rgba(245,240,228,.68); --deep-line:rgba(245,240,228,.13);
  --l0:#84C7A4; --l1:#E7D39A; --l2:#D98CA3; --l3:#B9A6E8;
  --shadow:0 24px 60px -32px rgba(23,39,30,.35);
  --f-disp:'Bebas Neue','Oswald','Arial Narrow',Impact,sans-serif;
  --f-body:'Geist',system-ui,-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --col:46rem; --wide:min(1360px,100%);
  --nav-h:64px;
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-base:18px; --fs-lg:20px;
}
:root:not([data-theme="light"]){
  --bg:#0F1813; --bg-2:#141F18; --bg-sage:#15231B; --card:#17241C;
  --fg:#ECE6D8; --fg-soft:#AAB2A8; --fg-faint:#7C867E; --line:rgba(236,230,216,.13);
  --accent:#6FC49A; --accent-soft:#84C7A4; --gold:#D9BD72; --gold-lt:#E7D39A; --rose:#D98CA3; --lav:#B9A6E8;
  --holo-a:#4FD3A0; --holo-b:#EAD39A; --holo-c:#B9A6E8;
  --deep:#0A120D; --deep-2:#111C15; --shadow:0 24px 60px -32px rgba(0,0,0,.7); color-scheme:dark}


/* ---- The One Book styles.css 34–52 · base (the holographic title fill left out) ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:var(--fs-base);line-height:1.68;letter-spacing:0.015em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
::selection{background:var(--accent-soft);color:#10201A}
h1,h2,h3,h4{font-weight:500;text-wrap:balance;margin:0;letter-spacing:-0.02em;font-kerning:normal}
h1{line-height:1.08}
.headline-geist-as-montreal { font-family: 'Geist', sans-serif; letter-spacing: -0.02em; font-kerning: normal; } .body-geist-as-montreal { font-family: 'Geist', sans-serif; letter-spacing: 0.015em; }
p{margin:0 0 1.05em;letter-spacing:0.015em}
b,strong{font-weight:500;color:var(--fg)}
em{font-style:italic}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.col{max-width:var(--col)}
.eyebrow{font-size:var(--fs-xs);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}

/* ---- The One Book styles.css 56–59 · reveal ---- */
/* reveal: visible at rest; JS arms only elements below the fold */
.armed .rv:not(.in){opacity:0;transform:translateY(18px)}
.rv{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* ---- The One Book styles.css 61–70 · nav surface, tabs, nav buttons ---- */
/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.nav .in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:14px}
.nav .bm{font-family:var(--f-disp);font-size:var(--fs-lg);letter-spacing:.16em;text-decoration:none;white-space:nowrap}
.tabs{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:100px;padding:4px}
.tabs a{text-decoration:none;font-size:var(--fs-sm);font-weight:500;padding:7px 16px;border-radius:100px;color:var(--fg-soft);transition:background .4s var(--ease),color .4s var(--ease);white-space:nowrap}
.tabs a[aria-current="page"]{background:var(--deep);color:var(--on-deep)}
.navbtn{border:1px solid var(--line);background:transparent;border-radius:100px;padding:8px 16px;font-size:var(--fs-sm);font-weight:500;cursor:pointer;white-space:nowrap}
.navbtn:hover{background:var(--bg-2)}
@media(max-width:640px){.nav .bm{display:none}.nav .in{justify-content:center}.tabs a{padding:7px 12px}}

/* ---- The One Book styles.css 104–140 · sections, section header, brief, label, statement ---- */
/* ===== SECTIONS ===== */
.sec{padding-block:clamp(64px,11vh,130px);position:relative}
.sec.tint{background:var(--bg-2)}
.sec.sage{background:var(--bg-sage)}
.sec.deep{background:var(--deep);color:var(--on-deep)}
.sec.deep b,.sec.deep strong{color:var(--on-deep)}
.sh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,36px);align-items:end;margin-bottom:clamp(30px,5vh,52px)}
.sh .no{font-family:var(--f-disp);font-size:var(--t-num);line-height:.78;color:var(--accent);opacity:.26}
.deep .sh .no{color:var(--l0);opacity:.35}
.sh h2{font-size:var(--t-title);letter-spacing:-0.02em;font-kerning:normal;line-height:1.02}
.sh .sub{display:block;font-size:var(--t-lead);letter-spacing:-0.02em;font-kerning:normal;color:var(--fg-soft);margin-top:10px;line-height:1.2}
.deep .sh .sub{color:var(--on-deep-soft)}
.brief{display:flex;gap:14px;align-items:baseline;max-width:var(--col);margin:-12px 0 36px;padding:14px 18px;border-left:2px solid var(--gold);background:color-mix(in srgb,var(--gold-lt) 16%,transparent);border-radius:0 12px 12px 0;font-size:var(--fs-md);line-height:1.5;color:var(--fg-soft)}
.brief .t{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500;white-space:nowrap}
.deep .brief{color:var(--on-deep-soft);background:rgba(231,211,154,.08)}
.deep .brief .t{color:var(--gold-lt)}
.body{max-width:var(--col)}
.body p{color:var(--fg-soft)}
.body p b{color:var(--fg)}
.deep .body p{color:var(--on-deep-soft)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);align-items:start}
.split.r{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){.split,.split.r{grid-template-columns:1fr}}
.sticky-fig{position:sticky;top:calc(var(--nav-h) + 28px)}
.h3{font-size:var(--t-sub);letter-spacing:-0.02em;font-kerning:normal;margin:40px 0 14px}
.h3:first-child{margin-top:0}
.label{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--fg-faint);margin-bottom:10px}

.pq{font-size:var(--t-stm);font-weight:500;letter-spacing:-0.02em;font-kerning:normal;line-height:1.12;margin:36px 0;max-width:26ch}
.pq .qt{color:var(--accent)}
.pq cite{display:block;font-style:normal;font-size:var(--fs-sm);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);margin-top:14px;font-weight:500}
.deep .pq cite{color:var(--on-deep-soft)}

.band{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/6;margin-bottom:clamp(36px,6vh,60px);max-width:100%;background:var(--deep)}
.band img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.band{aspect-ratio:16/9;border-radius:18px}}


/* ---- The One Book styles.css 141–145 · orbit figure ---- */
/* ===== ORBIT ===== */
.orbit-fig{aspect-ratio:1/1;border-radius:26px;overflow:hidden;background:radial-gradient(60% 60% at 50% 50%,#1F3328,#101A14);position:relative;box-shadow:var(--shadow);max-width:100%}
.orbit-fig canvas{width:100%;height:100%;display:block}
.orbit-fig .cap{position:absolute;left:18px;right:18px;bottom:16px;font-size:var(--fs-sm);color:rgba(245,240,228,.72);display:flex;justify-content:space-between;gap:12px}
.orbit-fig .cap b{color:#F5F0E4;font-weight:500}

/* ---- The One Book styles.css 412–425 · TOC drawer ---- */
/* ===== TOC drawer ===== */
.toc{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;pointer-events:none}
.toc .scrim{position:absolute;inset:0;background:rgba(10,18,13,.4);opacity:0;transition:opacity .4s var(--ease)}
.toc .panel{position:relative;width:min(440px,100%);height:100%;background:var(--bg);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .5s var(--ease);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 24px) 26px calc(env(safe-area-inset-bottom,0px) + 30px)}
.toc.open{pointer-events:auto}.toc.open .scrim{opacity:1}.toc.open .panel{transform:none}
.toc .ph2{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.toc ol{list-style:none;margin:0;padding:0}
.toc li a{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.toc li a .nn{font-family:var(--f-disp);font-size:var(--fs-num);color:var(--accent);line-height:1}
.toc li a b{display:block;font-size:var(--fs-md);line-height:1.3}
.toc li a span.s{display:block;font-size:var(--fs-sm);color:var(--fg-faint);line-height:1.4;margin-top:3px}
.toc li a:hover b{color:var(--accent)}
.xbtn{border:1px solid var(--line);background:none;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:var(--fs-base);line-height:1}


/* ---- The One Book styles.css 353–360 · loop capsules ---- */
/* ===== LOOP ===== */
.loopfig{position:relative;max-width:644px;margin-inline:auto;aspect-ratio:1/1;width:100%}
.loopfig svg{width:100%;height:100%;overflow:visible}
.loopfig svg text{font-family:var(--f-body)}
.loop-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;counter-reset:ls}
.loop-steps li{counter-increment:ls;display:flex;gap:14px;align-items:baseline;padding:12px 16px;border-radius:14px;border:1px solid var(--deep-line);color:var(--on-deep-soft);transition:all .5s var(--ease);font-size:var(--fs-md);line-height:1.45}
.loop-steps li::before{content:counter(ls);font-family:var(--f-disp);font-size:var(--fs-num);line-height:1;color:var(--c,var(--l1));opacity:.8;min-width:18px}
.loop-steps li.on{background:rgba(245,240,228,.07);color:var(--on-deep);border-color:var(--c,var(--l1))}

/* ---- The One Book styles.css 457–468 · session bar, clock, buttons ---- */
/* session bar */
.session{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.session .in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:12px}
.clock{font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;min-width:5.2ch}
.clock small{font-size:var(--fs-xs);color:var(--fg-faint);letter-spacing:.1em;text-transform:uppercase;margin-left:6px;font-weight:500}
.sbtn{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:100px;padding:8px 16px;font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.sbtn:hover{background:var(--bg-2)}
.sbtn.primary{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.sbtn.pause{background:var(--bg-sage);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
.session .spacer{flex:1}
.session .prog{font-size:var(--fs-sm);color:var(--fg-faint);white-space:nowrap}


/* ---- The One Book styles.css 499–521 · card, checks, script ---- */
.card{border-radius:26px;background:var(--card);border:1px solid var(--line);padding:clamp(22px,3.5vw,40px);box-shadow:var(--shadow);min-width:0}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.card h2{font-size:var(--t-sub);letter-spacing:-0.02em;font-kerning:normal;line-height:1.02}
.card .dur{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-top:10px}
.ring{width:84px;height:84px;flex:none;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .lbl{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:var(--fs-sm);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1}
.ring .lbl small{display:block;font-size:var(--fs-xs);color:var(--fg-faint);letter-spacing:.08em;font-weight:500}
.card .intro{color:var(--fg-soft);margin-top:18px;max-width:40rem}
.checks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.checks li label{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);transition:background .4s var(--ease),border-color .4s var(--ease)}
.checks li label:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.checks input{position:absolute;opacity:0;width:1px;height:1px}
.checks .box{width:24px;height:24px;border-radius:8px;border:2px solid var(--fg-faint);display:grid;place-items:center;transition:all .35s var(--ease);margin-top:1px}
.checks .box svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:all .3s var(--ease)}
.checks input:checked+label .box{background:var(--accent);border-color:var(--accent)}
.checks input:checked+label .box svg{opacity:1;transform:none}
.checks input:checked+label{background:color-mix(in srgb,var(--accent-soft) 14%,var(--bg));border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.checks input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.checks .tx{font-size:var(--fs-md);line-height:1.5;color:var(--fg)}
.checks .tx small{display:block;color:var(--fg-soft);font-size:var(--fs-sm);margin-top:3px}
.script{margin-top:18px;border-radius:18px;padding:18px 22px;background:var(--bg-sage);font-size:var(--t-lead);font-weight:500;line-height:1.45;letter-spacing:-0.02em;font-kerning:normal}
.script .label{color:var(--accent)}

/* ---- The One Book styles.css 531–536 · questions ---- */
.q{border-top:1px solid var(--line);padding-top:24px;margin-top:26px}
.q .qn{display:flex;align-items:baseline;gap:12px}
.q .qn .num{font-family:var(--f-disp);font-size:var(--fs-num-l);line-height:.9;color:var(--accent);opacity:.6;min-width:1.2ch}
.q .qn h3{font-size:var(--fs-lg);letter-spacing:-0.02em;font-kerning:normal}
.q blockquote{margin:12px 0 0;font-size:var(--t-lead);line-height:1.5;font-weight:500;letter-spacing:0.015em;color:var(--fg);max-width:40rem}
.q.done .qn .num{opacity:1}

/* ---- The One Book styles.css 547–551 · fields ---- */
.fld{margin-top:14px}
.fld label{display:block;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);font-weight:500;margin-bottom:6px}
.fld textarea,.fld input[type=text],.fld input[type=date],.fld input[type=time]{width:100%;font:inherit;font-size:var(--fs-md);line-height:1.5;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;resize:vertical;min-height:48px}
.fld textarea{min-height:76px}
.fld textarea:focus,.fld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

/* ---- The One Book styles.css 578–598 · pause overlay + reduced motion ---- */
/* pause overlay */
.pauseov{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(10,18,13,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .6s var(--ease);padding:20px}
.pauseov.open{opacity:1;pointer-events:auto}
.pauseov .pc{width:min(520px,100%);text-align:center;color:#F5F0E4;max-height:100%;overflow-y:auto}
.pauseov .orb{width:190px;height:190px;margin:10px auto 18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#B9E3CB,#2C8A61 70%);box-shadow:0 0 80px rgba(132,199,164,.45);transform:scale(.72);transition:transform 4s ease-in-out}
.pauseov .orb.inh{transform:scale(1)}
.pauseov .br{font-size:var(--fs-md);letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,228,.7);min-height:1.4em}
.pauseov .cd{font-variant-numeric:tabular-nums;font-size:var(--fs-num-xl);font-weight:500;letter-spacing:-0.02em;font-kerning:normal;margin:6px 0}
.pauseov .opts{display:flex;justify-content:center;gap:8px;margin:14px 0}
.pauseov .opts button{cursor:pointer;border:1px solid rgba(245,240,228,.3);background:none;color:#F5F0E4;border-radius:100px;padding:8px 16px;font-size:var(--fs-sm)}
.pauseov .opts button.on{background:#F5F0E4;color:#17271E}
.pauseov .rule{font-size:var(--fs-sm);line-height:1.55;color:rgba(245,240,228,.78);margin:14px auto 0;max-width:40ch}
.pauseov .end{margin-top:20px}
.pauseov .end button{cursor:pointer;border:none;border-radius:100px;background:#F5F0E4;color:#17271E;padding:12px 26px;font-size:var(--fs-md);font-weight:500}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .armed .rv:not(.in){opacity:1;transform:none}
}

/* ---- The One Book styles.css 612–622 · V2 scroll system ---- */
/* =================== V2 · SCROLL SYSTEM =================== */
.sprog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--sp,0));background:var(--accent);z-index:2}
/* scroll-wiped text: revealed line-by-line as it crosses the reveal edge, fades as it exits the top */
.sx{--r:1;--o:1;--ty:0px;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--r)*100%),rgba(0,0,0,.05) calc(var(--r)*100% + 2.6em));mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--r)*100%),rgba(0,0,0,.05) calc(var(--r)*100% + 2.6em));opacity:var(--o);transform:translateY(var(--ty));will-change:transform,opacity}
.ic{transition:opacity .08s linear}
[data-par]{transform:translateY(var(--py,0px)) scale(1.14);will-change:transform}
.film img[data-par]{transition:none}
.sh .no{transform:translateY(var(--ny,0px));will-change:transform}
/* toggled entrance/exit for components */
[data-anim]{--on:0}
[data-anim].on{--on:1}

/* ---- The One Book styles.css 887–890 · step entrance ---- */
.step.enter{animation:stepIn .7s var(--ease) both}
.step.enter-back{animation:stepBack .7s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}

/* ---- The One Book styles.css 897–913 · flow rail, note cards ---- */
ol.flow{list-style:none;margin:0;padding:0;counter-reset:fl;position:relative}
ol.flow::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--line)}
ol.flow::after{content:"";position:absolute;left:19px;top:20px;width:2px;height:calc(100% - 40px);background:var(--accent);transform:scaleY(calc(var(--on)));transform-origin:top;transition:transform 2.4s var(--ease)}
ol.flow li{counter-increment:fl;position:relative;padding:8px 0 18px 58px;opacity:.2;transform:translateX(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
ol.flow.on li{opacity:1;transform:none}
ol.flow li:nth-child(2){transition-delay:.45s}ol.flow li:nth-child(3){transition-delay:.9s}ol.flow li:nth-child(4){transition-delay:1.35s}ol.flow li:nth-child(5){transition-delay:1.8s}
ol.flow li::before{content:counter(fl);position:absolute;left:0;top:2px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--accent);color:var(--accent);font-family:var(--f-disp);font-size:var(--fs-lg);z-index:1}
ol.flow li:nth-child(3)::before{background:var(--accent);color:#fff}
ol.flow b{display:block;font-size:var(--fs-base)}ol.flow span{font-size:var(--fs-sm);color:var(--fg-soft)}
.needs{margin-top:44px}
.ng{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.nt{border-radius:18px;padding:16px 18px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(16px);transition:all .8s var(--ease)}
.needs.on .nt{opacity:1;transform:none}
.nt:nth-child(2){transition-delay:.1s}.nt:nth-child(3){transition-delay:.2s}.nt:nth-child(4){transition-delay:.3s}.nt:nth-child(5){transition-delay:.4s}.nt:nth-child(6){transition-delay:.5s}
.nt b{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500}
.nt span{font-size:var(--fs-md);line-height:1.4;font-weight:500}
.nt em{font-style:normal;font-size:var(--fs-sm);color:var(--fg-soft)}

/* ---- The One Book styles.css 919–920 · qnote ---- */
.qnote{margin-top:20px;border-radius:16px;padding:14px 18px;background:color-mix(in srgb,var(--gold-lt) 18%,transparent);border-left:3px solid var(--gold);font-size:var(--fs-md);line-height:1.5;color:var(--fg-soft)}
.qnote.soft{background:var(--bg-2);border-left-color:var(--fg-faint)}

/* ---- The One Book styles.css 927–928 · cert pills ---- */
.cert{cursor:pointer;font-size:var(--fs-sm);padding:6px 11px;border-radius:100px;border:1px dashed var(--line);background:none;color:var(--fg-faint)}
.cert[aria-pressed="true"]{border-style:solid;border-color:var(--gold);background:color-mix(in srgb,var(--gold-lt) 30%,transparent);color:var(--fg)}

/* ---- The One Book styles.css 933–946 · V4 justified text, box entrance ---- */
/* ================= V4 ================= */
/* justified body text */
main p{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
.tick .detail p,.net p,.sky-cap span,.dq,.cap2{text-align:left;-webkit-hyphens:manual;hyphens:manual}
.st.spot{transform:none;translate:0 -4px}

/* box entrance and exit */
.bx{opacity:0;transform:translateY(34px) scale(.965);clip-path:inset(0 0 35% 0 round 18px);transition:opacity .9s var(--ease),transform 1.15s var(--ease),clip-path 1.25s var(--ease)}
.bx.on{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 18px)}
.seq[data-anim] .s.bx{opacity:0;transform:translateY(34px) scale(.965)}
.seq[data-anim] .s.bx.on{opacity:1;transform:none}
.bx.d1{transition-delay:.12s}.bx.d2{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.bx,.seq[data-anim] .s.bx{opacity:1;transform:none;clip-path:none}}


/* ---- The One Book styles.css 1046–1052 · V5 panel tokens (adapted: dark by default) ---- */
:root{--g:clamp(28px,5vw,80px);
  --pn:rgba(238,245,240,.74);--pn-line:rgba(30,43,35,.09);--pn-in:rgba(255,255,255,.6);
  --pn-sh:0 1px 2px rgba(23,39,30,.04),0 14px 30px -24px rgba(23,39,30,.30);
  --t-sub:clamp(28px,3.4vw,44px);--t-stm:clamp(22px,2.4vw,32px)}
:root:not([data-theme="light"]){--pn:rgba(132,199,164,.075);--pn-line:rgba(236,230,216,.12);--pn-in:rgba(236,230,216,.05);--pn-sh:0 16px 34px -24px rgba(0,0,0,.65)}
.sec.deep{--pn:rgba(132,199,164,.075);--pn-line:rgba(245,240,228,.12);--pn-in:rgba(245,240,228,.05);--pn-sh:0 16px 34px -24px rgba(0,0,0,.65)}

/* ---- The One Book styles.css 1063–1072 · V5 type ---- */
/* type */
.h3,.purpose h2{font-size:var(--t-sub);font-weight:500;letter-spacing:-0.02em;font-kerning:normal;line-height:1.05;margin:56px 0 18px}
.body>.h3:first-child,.body>.rv:first-child.h3{margin-top:0}
.star .ns,.morph .to,.pq,.rres,.zeros .zf,.confirm .cft,.nq,.lbar{font-size:var(--t-stm);font-weight:500;letter-spacing:-0.02em;font-kerning:normal;line-height:1.18}
.pq{max-width:none;margin:40px 0}
.label,.peb,.brief .t,.mlab,.morph .mlab,.whyhow .lbl,.whyhow .wh .k,.st .sl,.pipe .stg .s .k,.dg .dh,.np .to,.zeros .zl,.star .k,.two .c b,.gg b,.matrix .mh,.spectrum .ends,.residue .label,.four .label{font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.35}
.peb{display:block;color:var(--fg-faint);margin:0 0 10px}
.peb.g{color:var(--accent)}.peb.r{color:var(--rose)}
.deep .peb{color:var(--on-deep-soft)}
.gg b{color:var(--fg-faint);margin-bottom:4px}

/* ---- The One Book styles.css 1074–1080 · V5 panels: one flat translucent surface ---- */
/* panels: one flat translucent surface */
.star,.whyhow,.layer,.layer.below,.layer.above,.confirm,.two .c,.matrix,.morph,.bind,.gg,.seq .s,.pipe .stg .s,.zeros,.key,.scale,.danger,.fears .f,.inout1,.st,.stfig,.losses,.sym,.residue,.four,.plank,.bridgefig,.spectrum{
  background:var(--pn);border:1px solid var(--pn-line);box-shadow:var(--pn-sh);border-radius:18px;
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);padding:22px 24px;color:inherit}
.layer,.seq .s,.st,.plank,.pipe .stg .s,.fears .f{margin:0 0 14px}
.confirm{border-radius:0 0 18px 18px;margin-top:-15px;border-top:1px dashed var(--pn-line);padding-top:16px}
.layer.below+.confirm{margin-top:-15px}

/* ---- The One Book styles.css 1117–1117 · net figure ground ---- */
.net{position:relative;border-radius:22px;background:radial-gradient(80% 70% at 10% 10%,#16291E,#0B1610 75%);box-shadow:var(--shadow);padding:22px 22px 20px;color:#F5F0E4;overflow:hidden}

/* ---- The One Book styles.css 1153–1186 · V5 protocol on the same system ---- */
/* ================= V5 · PROTOCOL ON THE SAME SYSTEM ================= */
.p-hero .lead{max-width:calc((100% - var(--g))/2)}
@media(max-width:900px){.p-hero .lead{max-width:none}}
.pref .fig-col>*+*{margin-top:16px}
.flowp,.needs,.map,.q,.script,.gate{background:var(--pn);border:1px solid var(--pn-line);box-shadow:var(--pn-sh);border-radius:18px;-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);padding:22px 24px}
.flowp .label{margin-bottom:16px}
.needs{margin-top:0}.needs .ng{grid-template-columns:1fr 1fr;gap:10px}
.nt{background:var(--pn-in);border:1px solid var(--pn-line);box-shadow:none;border-radius:14px}
.ses-head{padding-top:clamp(64px,11vh,130px)}
.ses-head .brief{margin-bottom:0}
.stepper.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);margin-top:36px}
.card{background:none;border:none;box-shadow:none;border-radius:0;padding:0}
.card h2{font-size:var(--t-sub);letter-spacing:-0.02em;font-kerning:normal;line-height:1.05}
.card .peb{margin-bottom:12px}
.card .intro{max-width:none;margin-top:16px}
.q{margin-top:16px;padding-top:20px;border-top:1px solid var(--pn-line)}
.q .qn{display:block;margin:0 0 10px}
.q blockquote{margin:0;font-size:var(--fs-base);line-height:1.5;font-weight:500;max-width:none}
.q.done{border-color:color-mix(in srgb,var(--accent) 35%,var(--pn-line))}
.checks li label{background:var(--pn);border-color:var(--pn-line);box-shadow:var(--pn-sh)}
.script{margin-top:18px;font-size:var(--t-stm);line-height:1.2;letter-spacing:-0.02em;font-kerning:normal}
.gate{background:var(--pn)}.gate.ok{background:color-mix(in srgb,var(--accent-soft) 24%,var(--pn))}
.record{background:var(--pn-in);border-color:var(--pn-line)}
.map .series{margin:6px 0 18px}
.map .series .bar{gap:3px}
.map .series .seg{height:12px;min-width:0;padding:0;border-radius:6px}
.map .series .seg .tt,.map .series .seg .dd{display:none}
.map .series .axis{margin-top:6px}
.map .rail{position:static}
.ref.tt{max-width:none}
.ref.tt>details{max-width:calc((100% - var(--g))/2)}
@media(max-width:900px){.stepper.split{grid-template-columns:1fr}.stepper .sticky-fig{order:-1;position:static}.ref.tt>details{max-width:none}}
.stepper .sticky-fig{top:calc(var(--nav-h) + 92px)}


/* ---- The One Book styles.css 1187–1195 · audit ink tokens and contrast (adapted: dark by default) ---- */
/* ================= AUDIT PASS (Claude · 2026-10-02) =================
   Additive overrides only. Rules here sit on top of V1–V5. Delete this block and the AUDIT
   script at the end of app.js to return to the original behaviour.          */
:root{--fg-faint:#646E66;--ink-acc:#22704E;--ink-gold:#7D6428;--ink-rose:#94485F;--dawn:#D9A441}
:root:not([data-theme="light"]){--fg-faint:#8A948C;--ink-acc:#6FC49A;--ink-gold:#D9BD72;--ink-rose:#D98CA3;--dawn:#F2D48A}

/* A1 · small coloured text clears 4.5:1 (was 2.8–4.0:1) */
.eyebrow,.peb.g,.two .c b,.st .sl,.nt b,.script .label,.whyhow .yes .k,.rail li.cur .rt{color:var(--ink-acc)}

/* ---- The One Book styles.css 1308–1339 · type scale, justification, quiet reveal ---- */
/* ---------- TYPE SCALE (T2) · every size on the page resolves to one of these ---------- */
:root{
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-base:18px;
  --t-lead:clamp(19px,1.8vw,22px); --fs-lg:var(--t-lead);
  --t-stm:clamp(22px,2.4vw,32px); --t-sub:clamp(26px,3.2vw,40px); --t-title:clamp(32px,4.4vw,56px);
  --t-disp:clamp(56px,8vw,112px); --t-num:clamp(64px,10vw,140px); --t-hero:clamp(80px,14vw,210px);
  --fs-num:32px; --fs-num-l:44px; --fs-num-xl:60px;
}
/* SVG text keeps viewBox units: it scales with its figure, so it is exempt from the page scale. */

/* ---------- JUSTIFICATION · one rule for reading text, one for everything short ---------- */
main p, .body li, .letter li, .fb p, .tl-vert .vm p{
  text-align:justify;text-justify:inter-word;
  -webkit-hyphens:auto;hyphens:auto;
  hyphenate-limit-chars:7 3 3;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;
  hyphenate-limit-lines:2;-webkit-hyphenate-limit-lines:2;hyphenate-limit-last:always;
  text-wrap:pretty;overflow-wrap:break-word;font-kerning:normal;
  text-align-last:left}
/* Short measures and statements: justification here only opens gaps, so they set flush-left, unhyphenated */
.pq,.pq *, .fog .ov p, .p-film .goal p, .tick .detail p, .net p, .np p, .nq, .dq, .cap2, .sky-cap span, .handoff .ho-s,
.zeros .zf, .rres, .lbar, .cft, .morph .to, .morph .from, .star .ns, .fx2 .cap3, .two .c, .nt span, .nt em,
.checks .tx, .q blockquote, .fx2 li, .fx2 li *, .script, .status, .key p, .ioc span, .io-lab span, .mside span, .gg .gl, .pauseov p, .ref li, .privacy, .fixnote{
  text-align:left;text-align-last:auto;-webkit-hyphens:manual;hyphens:manual}
/* the In-short line is reading text: justified like the body */
.brief>span:last-child{text-align:justify;-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty;text-align-last:left}
h1,h2,h3,h4,.pq,.morph .to,.star .ns,.rres,.fog .ov p,.p-film .goal p{text-wrap:balance}
/* Phones: the column is ~40 characters; a slightly looser word-space tolerance keeps justified lines even */
@media(max-width:600px){main p,.body li,.fb p{word-spacing:-.02em;hyphenate-limit-chars:6 3 2}}

/* ---------- BODY-TEXT REVEAL · kept, made quieter: text waits at 22% (was 5%), never fades below 50% ---------- */
.sx{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--r)*100%),rgba(0,0,0,.22) calc(var(--r)*100% + 2em));mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--r)*100%),rgba(0,0,0,.22) calc(var(--r)*100% + 2em))}
@media(prefers-reduced-motion:reduce){.sx{-webkit-mask-image:none;mask-image:none}}

/* ---- The One Book styles.css 1341–1361 · movements, segmented progress, status line ---- */
/* ---------- MOVEMENTS ---------- */
.mvt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 clamp(18px,3vh,28px);padding-bottom:12px;border-bottom:1px solid var(--line)}
.mvt .mr{font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-acc)}
.mvt .mn::before{content:"·";margin-right:12px;color:var(--fg-faint)}
.mvt .mn{font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
.mvt .mq{font-size:var(--fs-sm);color:var(--fg-faint)}
.deep .mvt{border-color:var(--deep-line)}.deep .mvt .mr{color:var(--l0)}.deep .mvt .mn{color:var(--on-deep)}.deep .mvt .mq{color:var(--on-deep-soft)}

/* the hero chain is the movement map: each link underlines as its movement is read */
.chain a.lk{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:0 100%;background-size:calc(var(--f,0)*100%) 2px;padding-bottom:3px;border-bottom:none;transition:color .8s var(--ease)}
.chain a.lk:hover,.chain a.lk:focus-visible{color:var(--accent)}
/* nav progress: four segments, one per movement; a single accent, no gradient */
.sprog{background:var(--accent)}
.sprog.mv{transform:none;background:none;display:flex;gap:3px}
.sprog.mv i{display:block;height:100%;flex:var(--w,1) 1 0;background:var(--line);position:relative;overflow:hidden}
.sprog.mv i b{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--f,0))}

/* status line under the title */
.status{display:inline-flex;align-items:flex-start;gap:10px;flex-wrap:nowrap;margin-top:22px;font-size:var(--fs-sm);line-height:1.45;color:var(--fg-soft);padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);max-width:100%}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;margin-top:.45em}
.status b{font-weight:500;color:var(--fg)}

/* ---- The One Book styles.css 1389–1415 · sr-only, composites, the standard text box (adapted: dark by default) ---- */
/* ================= PASS 2 (2026-10-02) ================= */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- composite elements: the box enters (opens upward), then its parts in sequence ---------- */
.bx.on{clip-path:inset(-80px -80px -80px -80px round 18px)}
.bx .pc{opacity:0;translate:0 14px;transition:opacity .6s var(--ease) calc(.4s + var(--pi,0)*.12s),translate .7s var(--ease) calc(.4s + var(--pi,0)*.12s)}
.bx.on .pc{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.bx .pc{opacity:1;translate:none}}

/* ---------- the standard text box: one surface, a coloured header, a rail that fills as it is read ---------- */
:root{--tb-bg:rgba(255,253,248,.82)}
:root:not([data-theme="light"]){--tb-bg:rgba(236,230,216,.045)}
.deep{--tb-bg:rgba(245,240,228,.05)}
.tb{--tc:var(--ink-acc);position:relative;background:var(--tb-bg)!important;border:1px solid var(--pn-line)!important;border-radius:16px!important;box-shadow:var(--pn-sh)!important;padding:20px 22px 20px 36px!important;-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.tb[data-tone="r"]{--tc:var(--ink-rose)}.tb[data-tone="k"]{--tc:var(--ink-gold)}.tb[data-tone="j"]{--tc:var(--ink-acc)}
.deep .tb{--tc:var(--l0)}.deep .tb[data-tone="k"]{--tc:var(--l1)}.deep .tb[data-tone="r"]{--tc:var(--l2)}
.tb.tb::before{content:"";display:block;position:absolute;left:16px;top:20px;bottom:20px;width:3px;height:auto;border-radius:3px;transform:none;opacity:1;
  background:linear-gradient(var(--tc),var(--tc)) 0 0/100% calc(var(--tp,0)*100%) no-repeat,color-mix(in srgb,var(--fg) 10%,transparent);transition:none}
.deep .tb.tb::before{background:linear-gradient(var(--tc),var(--tc)) 0 0/100% calc(var(--tp,0)*100%) no-repeat,rgba(245,240,228,.12)}
.tb .peb{color:var(--tc)!important;margin-bottom:8px}
.tb p{margin:0}
.pipe .stg .s.tb{border-left:1px solid var(--pn-line)!important}
.st.tb.spot{border-color:color-mix(in srgb,var(--tc) 50%,var(--pn-line))!important;box-shadow:0 22px 44px -30px rgba(23,39,30,.45)!important}
.layer.tb,.seq .s.tb,.st.tb,.plank.tb,.pipe .stg .s.tb,.fears .f.tb,.key.tb{margin:0 0 14px}
.layer.below.tb+.confirm{margin-top:-15px}


/* ---- The One Book styles.css 1416–1418 · night sky ground ---- */
/* ---------- §01 night sky: the frame itself darkens via the canvas ---------- */
.orbit-fig{background:radial-gradient(60% 60% at 50% 50%,#1F3328,#0B140F)}


/* ---- The One Book styles.css 1421–1435 · lens glyph line ---- */
.lens2{position:relative;margin:clamp(28px,5vh,52px) 0;padding:clamp(20px,3vw,36px);border-radius:24px;background:var(--deep);color:var(--on-deep);overflow:hidden;box-shadow:var(--shadow)}
.l2-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.l2-head .peb{color:var(--l0);margin:0}
.l2-tog{border:1px solid rgba(245,240,228,.2);background:transparent;color:var(--on-deep-soft);border-radius:100px;padding:9px 16px;font-size:var(--fs-sm);cursor:pointer;min-height:40px}
.l2-tog:hover{border-color:var(--l0);color:var(--on-deep)}
.l2-tog[aria-pressed="true"]{background:rgba(132,199,164,.14);color:var(--on-deep)}
.l2-field{position:relative;display:block;margin-top:18px;padding:8px 0 4px;cursor:crosshair;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.l2-line{display:block;font-size:var(--t-stm);font-weight:500;letter-spacing:-0.02em;font-kerning:normal;line-height:1.3;margin:4px 0;color:rgba(245,240,228,.3);text-align:left}
.l2-line.sm{font-size:var(--t-lead);display:inline;margin:0}
.l2-line .wd{display:inline-block;white-space:nowrap}
.l2-line .ch{display:inline-block;text-align:center;transition:color .25s ease}
.l2-line .ch.in{color:var(--on-deep)}
.lens2.settled .l2-line .ch{color:var(--on-deep)}
.l2-sub{display:block;margin:26px 0 8px;font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--on-deep-soft)}
.l2-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:baseline;padding:8px 0;border-top:1px solid rgba(245,240,228,.08)}

/* ---- The One Book styles.css 1597–1611 · loop capsules, compressed ---- */
/* §05 the loop: the pin fits its content; capsules wipe in from the right and compress */
.loopstage{height:auto}
.loopstage .ls-pin{height:auto;justify-content:flex-start;padding-block:clamp(6px,1.2vh,14px);gap:clamp(8px,1.6vh,18px)}
.loopstage:not(.static) ol.ls-steps{display:block;position:relative;width:min(1240px,100%)}
.loopstage:not(.static) ol.ls-steps li{position:absolute;top:0;bottom:0;margin:0;box-sizing:border-box;overflow:hidden;
  clip-path:inset(0 0 0 100% round 14px);opacity:1;translate:none;font-size:var(--fs-sm);
  transition:clip-path .8s var(--ease),width .8s var(--ease),left .8s var(--ease),font-size .6s var(--ease),background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.loopstage:not(.static) ol.ls-steps li.in{clip-path:inset(0 0 0 0 round 14px)}
.loopstage:not(.static) ol.ls-steps li.wide{font-size:var(--t-lead);align-items:center}
.loopstage:not(.static) ol.ls-steps li.measure{transition:none;font-size:var(--fs-sm);bottom:auto}
ol.ls-steps li .lst{opacity:0;translate:14px 0;transition:opacity .5s var(--ease) .38s,translate .6s var(--ease) .38s}
ol.ls-steps li.in .lst,.loopstage.static ol.ls-steps li .lst{opacity:1;translate:0 0}
.loopstage:not(.static) ol.ls-steps li.measure .lst{transition:none}
.ls-out{padding-top:clamp(14px,2.4vh,28px)}


/* ---- The One Book styles.css 1509–1513 · bridge head and step ticks ---- */
.br-head{display:flex;justify-content:space-between;align-items:center;gap:12px;width:min(1180px,100%);margin:0 auto}
.br-head .label{margin:0}
.br-ticks{display:flex;gap:6px}
.br-ticks i{width:26px;height:4px;border-radius:4px;background:var(--line);transition:background .5s var(--ease)}
.br-ticks i.on{background:color-mix(in srgb,var(--accent) 55%,var(--line))}.br-ticks i.done{background:var(--accent)}

/* ---- The One Book styles.css 1560–1561 · phones: the brief label sits above its line ---- */
/* phones: the In-short label sits above its line, so the justified text gets a full measure */
@media(max-width:600px){.brief{flex-direction:column;gap:6px;align-items:flex-start}}

/* ---- The One Book styles.css 1021–1035 · the bridge ---- */
/* 11 · the bridge */
.bridge-svg{margin-top:4px}
.bridge-svg .water{fill:color-mix(in srgb,var(--accent-soft) 26%,transparent)}
.bridge-svg .ripl path{stroke:color-mix(in srgb,var(--accent) 40%,transparent);stroke-width:2;stroke-linecap:round;animation:ripl 6s ease-in-out infinite}
.bridge-svg .ripl path:nth-child(2n){animation-delay:-3s}
@keyframes ripl{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(14px);opacity:1}}
.bridge-svg .bank{fill:color-mix(in srgb,var(--fg) 14%,var(--bg-sage))}
.bridge-svg .arch{fill:none;stroke:var(--fg-soft);stroke-width:5;stroke-linecap:round}
.bridge-svg .deck{fill:none;stroke:var(--fg);stroke-width:7;stroke-linecap:round}
.bridge-svg .rail{fill:none;stroke:var(--fg-soft);stroke-width:3;stroke-linecap:round}
.bridge-svg #bridgeHangers line{stroke:var(--fg-faint);stroke-width:1.6}
.bridge-svg #bridgePosts line{stroke:var(--fg-soft);stroke-width:2}
.bridge-svg #bridgePosts .pier{stroke-width:5;transition:stroke .8s var(--ease)}
.bridge-svg #bridgePosts .pier.lit{stroke:var(--accent)}
.bridge-svg #bridgePosts text{font-family:var(--f-disp);font-size:22px;fill:var(--fg-faint);transition:fill .8s var(--ease)}

/* ---- The One Book styles.css 1630–1691 · bridge works drawing ---- */
/* bridge works drawing */
.bridge-svg .bw-ghost path{fill:none;stroke:var(--fg-faint);stroke-width:1.4;stroke-dasharray:3 6;opacity:.45}
.bridge-svg .arch{stroke-width:6}
.bridge-svg .bw-hang line{stroke:var(--fg-faint);stroke-width:1.8;opacity:0;transition:opacity .6s var(--ease)}
.bridge-svg .bw-hang line.on{opacity:1}
.bridge-svg .bw-planks rect{fill:var(--accent);opacity:0;transform:translateY(-14px);transform-box:fill-box;transition:opacity .35s ease,transform .5s var(--ease)}
.bridge-svg .bw-planks rect.on{opacity:1;transform:none}
.bridge-svg .bw-posts line{stroke:var(--fg-soft);stroke-width:2;opacity:0;transition:opacity .5s var(--ease)}
.bridge-svg .bw-posts line.on{opacity:1}
.bridge-svg .pier{opacity:0;transition:opacity .6s var(--ease)}
.bridge-svg .pier.on{opacity:1}
.bridge-svg .pier line{stroke:var(--fg-soft);stroke-width:5;opacity:1;transition:stroke .8s var(--ease)}
.bridge-svg .pier.lit line{stroke:var(--accent)}
.bridge-svg .pier text{font-family:var(--f-disp);font-size:22px;fill:var(--fg-faint);transition:fill .8s var(--ease)}
.bridge-svg .pier.lit text{fill:var(--accent)}
.bridge-svg .pier .lamp{fill:var(--line);transition:fill .8s var(--ease),filter .8s var(--ease)}
.bridge-svg .pier.lit .lamp{fill:var(--gold-lt);filter:drop-shadow(0 0 5px var(--gold-lt))}
.bridge-svg .bw-false path{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.8}
.bridge-svg .lat,.bridge-svg .boom{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.bridge-svg .boom{stroke-width:3.4}
.bridge-svg .cable{fill:none;stroke:var(--fg-soft);stroke-width:1}
.bridge-svg .cab{fill:var(--gold)}
.bridge-svg .cw{fill:var(--fg-soft)}
.bridge-svg .hull{fill:var(--fg-soft)}
.bridge-svg .stock{fill:var(--accent);transition:opacity .5s ease}
.bridge-svg .funnel{stroke:var(--rose);stroke-width:3;stroke-linecap:round}
.bridge-svg .puff circle{fill:var(--fg-faint);opacity:0;animation:bwPuff 3.3s ease-out infinite}
.bridge-svg .beacon{fill:#E5484D;animation:bwBlink 1.6s steps(1) infinite}
.bridge-svg .bw-p path{fill:none;stroke:var(--fg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bridge-svg .bw-p .hd{fill:var(--fg)}
.bridge-svg .bw-p .hat{fill:var(--gold-lt)!important;stroke:none!important}
.bridge-svg .bw-p .flag{fill:var(--rose)!important;stroke:none!important}
.bridge-svg .bw-p .load{fill:var(--accent)}
.bridge-svg .bw-p .tool{stroke:var(--fg-soft)!important}
.bridge-svg .bw-p.hammer .arm{animation:bwHammer .55s ease-in-out infinite alternate;transform-origin:0 -12.5px;transform-box:view-box}
.bridge-svg .bw-p.signal .arm{animation:bwWave 1.4s ease-in-out infinite alternate;transform-origin:0 -12.5px;transform-box:view-box}
.bridge-svg .bw-p.carry{animation:bwStep .5s ease-in-out infinite alternate}
.bridge-svg .bw-trolley{animation:bwTrolley 11s ease-in-out infinite alternate}
.bridge-svg .sway{animation:bwSway 3.2s ease-in-out infinite alternate;transform-origin:50% 0;transform-box:fill-box}
.bridge-svg .bw-tug{animation:bwSailL 52s linear infinite}
.bridge-svg .bw-skiff{animation:bwSailR 37s linear infinite;animation-delay:-14s}
.bridge-svg .bob{animation:bwBob 2.6s ease-in-out infinite alternate}
.bridge-svg .bob.b2{animation-duration:1.9s}
.bridge-svg .bw-sparks circle{fill:var(--gold-lt);opacity:0;animation:bwSpark .7s ease-out infinite}
.bridge-svg .bw-cb,.bridge-svg .bw-crew,.bridge-svg .bw-sparks,.bridge-svg .bw-false,.bridge-svg .bw-tower{transition:opacity 1.2s var(--ease)}
.bridge-svg.done .bw-cb,.bridge-svg.done .bw-crew,.bridge-svg.done .bw-sparks,.bridge-svg.done .bw-false{opacity:0}
.bridge-svg.done .bw-tower{opacity:.35}
.bridge-svg.idle .bw-crew,.bridge-svg.idle .bw-sparks{opacity:0}
.bridge-svg.done .deck{stroke:var(--fg)}
@keyframes bwPuff{0%{opacity:.7;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-10px,-16px) scale(1.6)}}
@keyframes bwBlink{0%{opacity:1}50%{opacity:.15}}
@keyframes bwHammer{from{transform:rotate(-38deg)}to{transform:rotate(26deg)}}
@keyframes bwWave{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes bwStep{from{transform:translateY(0)}to{transform:translateY(-1px)}}
@keyframes bwTrolley{from{transform:translateX(96px)}to{transform:translateX(262px)}}
@keyframes bwSway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes bwSailL{0%{transform:translate(830px,254px);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translate(170px,254px);opacity:0}}
@keyframes bwSailR{0%{transform:translate(190px,258px);opacity:0}7%{opacity:1}93%{opacity:1}100%{transform:translate(810px,258px);opacity:0}}
@keyframes bwBob{from{transform:translateY(-1px) rotate(-.8deg)}to{transform:translateY(1.4px) rotate(.8deg)}}
@keyframes bwSpark{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--sx,3px),5px)}}
.bridge-svg .bw-sparks circle:nth-child(2n){--sx:-4px}
@media(prefers-reduced-motion:reduce){.bridge-svg *{animation:none!important}.bridge-svg .bw-tug{transform:translate(620px,254px)}.bridge-svg .bw-skiff{transform:translate(300px,258px)}}

/* ---- The One Book styles.css 1693–1713 · scene panel ---- */
/* ================= PASS 4 (2026-10-02) ================= */
/* §03 states: one state at a time; boxes enter, then the panel, then its scene */
.stfig{display:flex!important;flex-direction:column;gap:6px;padding:18px 20px 16px!important}
.stfig.bx{transition-delay:.5s}
.stfig.bx.on{transition-delay:.5s}
.sx-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sx-n{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink-acc)}
.sx-t{font-size:var(--t-lead);font-weight:500;letter-spacing:-0.02em;font-kerning:normal}
.sx-s{font-size:var(--fs-sm);color:var(--fg-soft)}
.sx-stage{position:relative;flex:1;min-height:0}
.scn{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s var(--ease);overflow:visible}
.stfig.ready .scn.on{opacity:1}
.sx-head,.sx-cap{opacity:0;transition:opacity .6s var(--ease)}
.stfig.ready .sx-head,.stfig.ready .sx-cap{opacity:1}
.sx-cap{min-height:1.5em;font-size:var(--fs-sm);color:var(--fg-soft);text-align:center}
.sx-cap.in{animation:sxCap .6s var(--ease)}
@keyframes sxCap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scn .lab{font-size:14px;fill:var(--fg-faint);letter-spacing:.06em;font-family:inherit}
.scn .ring{fill:var(--accent);fill-opacity:calc(var(--k,0)*.16);stroke:var(--accent);stroke-width:2.5;stroke-opacity:calc(.35 + var(--k,0)*.65);stroke-linejoin:round}
.scn .bar{fill:var(--fg-soft)}
.scn .core{fill:var(--accent)}