/* world-text.css: the words as text mock F (x 10-31: 'D but B fonts'; mocks/text-mods/v/splitreader.css), over world.css.
   From the apple-design skill (dickwu/apple-design-skill): Liquid Glass only on the functional layer (the capsules, the pill of
   the page's sections, ‹ ▶ ›), the words on a thick sheet; hierarchy by weight, size and label colour; the accent only on
   the button and the section being read. B's type: Source Serif 4 in New York's role for titles and reading, Hanken Grotesk
   around the words. The open faces lead the stacks (Chrome on Linux maps the Apple names to a stock font).
   A narrow screen is the same page with the scene's box on top (see the end); the chrome (capsules, ⋯, ‹ ▶ ›, the sections' pill)
   is one set at every width. Home keeps its own stage layout (no sheet, no pill) and takes the type. */
:root{--scene:.64 .05 .98 .95;--scene-home:.36 .08 .96 .78;   /* where world.js frames the scene: right of the sheet */
  --open:'Hanken Grotesk';--ny:'Source Serif 4',ui-serif,Georgia,serif;--body:var(--open),-apple-system,BlinkMacSystemFont,sans-serif;
  --l1:rgba(255,248,240,.95);--l2:rgba(235,235,245,.64);--sheet-solid:#151517;--l3:rgba(235,235,245,.36);--l-back:rgba(235,235,245,.46);--sep:rgba(120,120,128,.38);--fill:rgba(120,120,128,.24);
  --tint:#ffb547;--on-tint:#1a0b00;--thick:rgba(20,20,22,.86);--opaque1:#141416;--opaque2:#1f1f22;--mat:saturate(150%) blur(30px);
  /* motion (design-motion-principles, portfolio weighting: polish first, play second): arrivals ease out, nothing bounces */
  --out:cubic-bezier(.22,1,.36,1);--in:cubic-bezier(.4,0,1,1);--spring:cubic-bezier(.34,1.3,.64,1);--t-s:160ms;--t-m:280ms;--t-l:520ms;
  --headline:600 1.0625rem/1.3 var(--body);--subhead:400 .9375rem/1.36 var(--body);--footnote:400 .8125rem/1.38 var(--body);--caption:400 .75rem/1.33 var(--body);
}
html[data-theme=day]{--l1:rgba(0,0,0,.88);--l2:rgba(60,60,67,.7);--sheet-solid:#f8f6f0;--l3:rgba(60,60,67,.4);--l-back:rgba(60,60,67,.5);--sep:rgba(60,60,67,.22);--fill:rgba(120,120,128,.14);
  --tint:#b2380c;--on-tint:#fff;--thick:rgba(252,251,248,.9);--opaque1:#fdfcf9;--opaque2:#f2f1ec}

/* the type, everywhere */
body{font:400 1.1875rem/1.6 var(--ny);font-optical-sizing:auto;letter-spacing:-.006em;color:var(--l1)}
a{color:var(--tint)}
strong,b{font-weight:600;color:var(--l1)}
h1,h2,.reel b{font-family:var(--ny);font-weight:700;color:var(--l1)}
h1,.leaf.hero h1{font-size:clamp(2.1rem,3vw,2.6rem);line-height:1.1;font-variation-settings:'opsz' 60;letter-spacing:-.012em}
h2{font-size:1.5rem;line-height:1.22;font-variation-settings:'opsz' 36;letter-spacing:-.006em}
h3,h4,.branches .leaf b{font:var(--headline);letter-spacing:-.026em;color:var(--l1)}
p,li{max-width:34em}
video,img{max-width:100%;height:auto}   /* the data page's films are 1280 wide: they stretched the phone's page to 1356px */
li::marker{color:var(--l3)}
.path,.byline,small,time,.when,.org,.k,.meta,.tags,.what,.foot,.stats span{font:var(--footnote);color:var(--l2);letter-spacing:-.006em}
.path a,.byline a,.foot a{color:var(--l2)}.path a:hover{color:var(--l1)}
.mono,.leaf.hero .mono{font:600 var(--footnote);font-family:var(--body);letter-spacing:-.006em;text-transform:none;color:var(--l2)}
table{font:var(--subhead);letter-spacing:-.016em}
th{font-weight:600;color:var(--l2);padding:0 16px 8px 0;border-bottom:.5px solid var(--sep)}
td{padding:10px 16px 10px 0;border-bottom:.5px solid var(--sep)}
.tldr{padding:0 0 20px;border-bottom:.5px solid var(--sep)}
.tldr>span{font:var(--subhead);font-weight:600;color:var(--l2);letter-spacing:-.016em}
.tldr p{font:400 1.33rem/1.45 var(--ny);font-variation-settings:'opsz' 28;color:var(--l1)}
.hire{padding:20px 0 0;border-top:.5px solid var(--sep)}
.hire b{font:700 1.25rem/1.2 var(--ny)}
.stats b{font-family:var(--ny)}
.turn,.twigs a{font:var(--subhead);font-size:1rem;letter-spacing:-.016em}
.turn a,.twigs a{color:var(--l1)}.turn a:hover,.twigs a:hover{color:var(--tint)}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--tint);color:var(--on-tint);font:var(--headline);letter-spacing:-.02em;text-decoration:none}
.btn{position:relative;gap:6px;transition:transform var(--t-s) var(--out),box-shadow var(--t-m) var(--out),background var(--t-s)}
/* one tinted action per view (buttons.md, liquid-glass.md: colour budget): .primary is gold; the rest are quiet fills that answer the pointer */
.btn:not(.primary){background:var(--fill);color:var(--l1);box-shadow:inset 0 0 0 .5px var(--sep)}
.btn:not(.primary):hover{background:rgba(120,120,128,.34)}
.btn.primary:hover{box-shadow:0 0 0 1px rgba(255,181,71,.35),0 8px 28px -6px rgba(255,138,61,.6)}
html[data-theme=day] .btn.primary:hover{box-shadow:0 8px 24px -8px rgba(178,56,12,.55)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97);transition-duration:60ms}
body[data-kind=grove] .leaf.tree h2{font-family:var(--ny);font-weight:700}

:is(a,button,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:8px}
main:focus,main:focus-visible{outline:0}   /* world.js focuses the new page's words for screen readers; that is not a control to ring */
.btn:focus-visible,.top a:focus-visible,.ctl button:focus-visible,.pill:focus-visible{border-radius:999px}
main a:not(.btn):not(:is(h1,h2,h3) a){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,var(--tint) 40%,transparent);transition:text-decoration-color var(--t-s),color var(--t-s)}
main a:not(.btn):hover{text-decoration-color:var(--tint)}
.path a,:is(h1,h2,h3) a{text-decoration:none!important;color:inherit}
:is(h2,h3) a:hover{color:var(--tint)}
h1,h2,h3,.tldr p,.hire b{text-wrap:balance}
p,li{text-wrap:pretty;hanging-punctuation:first}
body{font-feature-settings:'kern','liga','calt'}
td,.stats b,.pill .n{font-variant-numeric:tabular-nums}
::selection{background:color-mix(in srgb,var(--tint) 32%,transparent);color:var(--l1)}
#tags .tag{font:600 .78rem/1 var(--body);letter-spacing:-.005em;color:var(--l1);padding:4px 8px 4px 4px;border-radius:999px;transition:opacity .3s,color var(--t-s),background var(--t-s)}
#tags .tag:hover{color:var(--tint);background:color-mix(in srgb,var(--ground) 70%,transparent)}
blockquote{margin:1.1em 0;padding:2px 0 2px 20px;border-left:2px solid color-mix(in srgb,var(--tint) 55%,transparent);font:italic 400 1.0625rem/1.55 var(--ny);color:var(--l2)}
blockquote p{margin:.4em 0}blockquote a{font-style:normal}
.dial a:not(.here):hover{background:color-mix(in srgb,var(--fill) 55%,transparent)}
.dial a{transition:color var(--t-s) var(--out),background var(--t-s)}
/* previous / next page: two quiet cards with the direction above the name (was arrows in key boxes) */
nav.turn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
nav.turn a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;background:var(--fill);font:600 .9375rem/1.25 var(--body);color:var(--l1);text-decoration:none;transition:background var(--t-s),transform var(--t-s) var(--out)}
nav.turn a[rel=next]{grid-column:2;text-align:right;align-items:flex-end}
nav.turn a kbd{display:none}
nav.turn a::before{font:500 .75rem/1 var(--body);color:var(--l2)}
nav.turn a[rel=prev]::before{content:'‹ Previous'}nav.turn a[rel=next]::before{content:'Next ›'}
nav.turn a:hover{background:rgba(120,120,128,.34);transform:translateY(-1px)}
nav.turn a:active{transform:scale(.98)}
html{scrollbar-width:thin;scrollbar-color:var(--fill) transparent}
/* sailing is watching: the toolbar and the pill step back so the scene has the stage; a pointer over them brings them back */
.top,.pill{transition:opacity var(--t-l) var(--out),transform var(--t-s) var(--out)}
body.sailing .top:not(:hover):not(:focus-within),body.sailing .pill:not(:hover){opacity:.28}
@keyframes settle{from{letter-spacing:.02em;opacity:0;filter:blur(6px)}}
main .leaf:first-of-type h1{animation:settle 900ms var(--out) 180ms backwards}
#webs{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
#webs path{fill:none;stroke:var(--tint);stroke-width:1.1;stroke-linecap:round;opacity:0;transition:opacity var(--t-m)}   /* no filter: these move every frame (perf audit P11) */
body.swap #webs{opacity:0}
/* the reading card's own line: the same curve, brighter and wider than the others, so it reads beside the stream of light */
#thread path.base{stroke-width:1.8;filter:none}
#thread path.glow{fill:none;stroke:rgba(255,170,70,.22);stroke-width:7;stroke-linecap:round;filter:none}   /* the glow, as a stroke (perf audit P11) */
html[data-theme=day] #thread path.glow{display:none}
#thread path.pulse{filter:none!important;stroke-width:2.2}
#thread.lit path.pulse{filter:none}
html[data-theme=day] #thread path.base{stroke-width:1.6;filter:none}
/* a project's label row is also class="top": it's words in the card, not the toolbar (the toolbar's glass, fixed position and arrival
   were landing on it and pinning 'Benchmark v1.3' to the card's edge) */
main .top{position:static;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;max-width:none;margin:0 0 6px;padding:0;border-radius:0;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;animation:none;pointer-events:auto;font:var(--footnote);color:var(--l2)}
main .top .star{color:var(--l3)}
/* the atlas's lines of work (lineages.js): the lines as a wrapping row of tabs, the chosen one's steps newest first down a thin timeline
   that fades with age, like the trees' silver past and golden tip */
.ltabs{display:flex;flex-wrap:wrap;gap:6px}
.ltabs button{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border:0;border-radius:999px;background:var(--fill);font:500 .8125rem/1 var(--body);color:var(--l2);cursor:pointer;transition:background var(--t-s),color var(--t-s)}
.ltabs button span{font-weight:600;font-size:.6875rem;color:var(--l3);font-variant-numeric:tabular-nums}
.ltabs button:hover{color:var(--l1)}
.ltabs button[aria-selected=true]{background:var(--tint);color:var(--on-tint);font-weight:600}
.ltabs button[aria-selected=true] span{color:inherit;opacity:.7}
.lpanel h3{margin:0 0 6px;font:700 1.35rem/1.2 var(--ny)}
.lpanel>p{margin:0 0 18px;color:var(--l2)}
.steps{list-style:none;margin:0;padding:0 0 0 18px;border-left:1.5px solid var(--sep)}
.steps li{position:relative;display:grid;grid-template-columns:5.5em 1fr;gap:4px 14px;padding:0 0 16px;opacity:calc(1 - var(--age,0) * .5)}
.steps li::before{content:'';position:absolute;left:-23px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--l3)}
.steps li:first-child::before{background:var(--tint);box-shadow:0 0 10px var(--tint)}
.steps time{font:var(--footnote);color:var(--l2);padding-top:.15em}
.steps b{display:block;font:600 1rem/1.3 var(--body);color:var(--l1)}
.steps p{margin:3px 0 0;font-size:.9375rem;line-height:1.5;color:var(--l2)}
@media (max-width:520px){.steps li{grid-template-columns:1fr}}
/* inner pages (x 11-01 sketch IMG_1982, 'card modding', 'floating feeling'): the one tall sheet comes apart into a card per section, floating
   in the scene and stepping left and right like stones down a stream; each card has its own line of light to its place on the tree (world.js).
   The card you're reading comes forward and catches the light on its rim; the others hang back. Same rule at every width (the step is fluid) */
:root{--step:clamp(0px,5vw,72px);--card-pad:clamp(20px,2.6vw,34px)}
body:not([data-kind=grove]) .veil{display:none}
body:not([data-kind=grove]) main{margin:calc(var(--pill-top) + 52px) 0 0 var(--rail);width:min(660px,calc(100vw - 2 * var(--rail)));padding:0}
body:not([data-kind=grove]) main .leaf:not(.reel){position:relative;min-height:0;opacity:1;width:calc(100% - var(--step));margin:0 0 clamp(18px,2.4vw,30px);padding:var(--card-pad);border-radius:26px;
  background:var(--thick);backdrop-filter:var(--mat);-webkit-backdrop-filter:var(--mat);color:var(--l1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 .5px rgba(255,255,255,.08),0 30px 70px -28px rgba(0,0,0,.8);
  transform:scale(.975);transform-origin:left center;
  transition:color var(--t-l) var(--out),transform var(--t-l) var(--spring),box-shadow var(--t-l) var(--out)}
body:not([data-kind=grove]) main .leaf:not(.reel):nth-of-type(even){margin-left:var(--step);transform-origin:right center}
html[data-theme=day] body:not([data-kind=grove]) main .leaf:not(.reel){box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(0,0,0,.07),0 24px 50px -24px rgba(60,40,10,.35)}
/* the card you're reading: forward, full size, a warm rim */
body:not([data-kind=grove]) main .leaf.on:not(.reel){transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,181,71,.32),0 0 34px -6px rgba(255,150,60,.35),0 40px 90px -30px rgba(0,0,0,.85)}
html[data-theme=day] body:not([data-kind=grove]) main .leaf.on:not(.reel){box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(178,56,12,.3),0 30px 60px -24px rgba(120,50,10,.35)}
/* floating: each card bobs a few pixels on its own slow breath (translate, so it adds to the scale above); none with reduced motion */
@keyframes bob{50%{translate:0 -5px}}
body:not([data-kind=grove]) main .leaf:not(.reel){animation:bob 7.5s ease-in-out infinite}
body:not([data-kind=grove]) main .leaf:not(.reel):nth-of-type(3n+2){animation-duration:8.6s;animation-delay:-2.1s}
body:not([data-kind=grove]) main .leaf:not(.reel):nth-of-type(3n){animation-duration:6.9s;animation-delay:-4.3s}
@media (prefers-reduced-motion:reduce){body:not([data-kind=grove]) main .leaf:not(.reel){animation:none;transition:none}}
/* Home: the same cards. The hero is one; each tree's stage (its words, pinned and swapping in place as the ring turns) is one, stepping
   half a step right on every other tree; both float and carry the reading card's rim */
body[data-kind=grove] :is(.leaf.hero>.card,.stage){box-sizing:border-box;padding:var(--card-pad);border-radius:26px;background:var(--thick);backdrop-filter:var(--mat);-webkit-backdrop-filter:var(--mat);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,181,71,.28),0 0 34px -6px rgba(255,150,60,.3),0 40px 90px -30px rgba(0,0,0,.85);animation:bob 7.5s ease-in-out infinite}
html[data-theme=day] body[data-kind=grove] :is(.leaf.hero>.card,.stage){box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(178,56,12,.25),0 30px 60px -24px rgba(120,50,10,.35)}
body[data-kind=grove] .leaf.tree:nth-of-type(odd) .stage{left:calc(var(--rail) + var(--step) / 2);animation-duration:8.6s;animation-delay:-2.1s}
body[data-kind=grove] .stage::before{display:none}
body[data-kind=grove] .twigs li.more a{white-space:nowrap}
body[data-kind=grove] .leaf.hero>.card h1{font-size:clamp(2.1rem,3vw,2.8rem)}   /* inside the card's padding: the hero still fits the screen with its buttons */
body[data-kind=grove] .leaf.hero>.card> :last-child,body[data-kind=grove] .stage> :last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){body[data-kind=grove] :is(.leaf.hero>.card,.stage){animation:none}}
/* one place to look: the cards you're not reading dim their words, not the card, so a button there keeps its colour */
body:not([data-kind=grove]) main .leaf:not(.reel):not(.on):not(:first-of-type){--l1:var(--l-back);--l2:var(--l3);color:var(--l-back)}
body:not([data-kind=grove]) main .leaf:not(.reel) :is(h1,h2,h3,p,li,td,th,b,strong,span,a:not(.btn)){transition:color var(--t-l) var(--out)}
body:not([data-kind=grove]) .leaf::before{display:none}
body:not([data-kind=grove]) .leaf> :last-child{margin-bottom:0}
body:not([data-kind=grove]) .path{margin:0 0 12px 4px}
body:not([data-kind=grove]) h1{margin:0 0 14px}
body:not([data-kind=grove]) h2{margin:0 0 10px}
body:not([data-kind=grove]) nav.turn{margin:6px 0 0;padding:0;border:0}
body:not([data-kind=grove]) .foot{margin:0;padding:16px 4px 34px}
.reel{min-height:118vh}
main .leaf.reel{min-height:0;height:12vh;padding:0;margin:0;overflow:hidden}   /* the run-out was 1.2 empty screens under the footer (its title is hidden); the cut now comes on the next scroll at the page bottom (world.js reelDue) */
main>.reading{display:none;position:absolute;left:-1px;top:0;width:2px;height:100px;border-radius:2px;pointer-events:none;transform-origin:top;opacity:0;
  background:linear-gradient(transparent,var(--tint) 12%,var(--tint) 88%,transparent);box-shadow:0 0 12px var(--tint),0 0 3px var(--tint);
  transition:transform var(--t-l) var(--spring),opacity var(--t-m)}
html[data-theme=day] main>.reading{box-shadow:0 0 8px rgba(178,56,12,.4)}

/* the chrome, the same at every width (x 11-01: 'whatever we decide has to be SAME'; mocks/mobile 2 + Focus): no header band, the name and
   the four trees float as glass capsules over the scene; zoom, theme and the keys live in the menu bar; ‹ ▶ › sits on the scene box's lower
   corner; the page's sections are one pill above the words that opens their list (world-text.js). The scene names two places (world.js).
   A width only moves the box: --box-b (where it ends), --rail (the words' left edge), --pill-top. */
:root{--box-b:100vh;--rail:clamp(16px,7vw,120px);--pill-top:12vh;--edge-x:var(--rail);--edge-w:min(600px,calc(100vw - 2 * var(--rail)));--edge-bg:var(--sheet-solid);--edge-rest:0;--edge-h:calc(var(--pill-top) + 52px);--edge-home:0px;--glass:rgba(30,30,32,.55);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgba(255,255,255,.14);--glass-mat:blur(18px) saturate(150%)}
html[data-theme=day] .top .me::before{background:radial-gradient(circle,var(--tint) 0 2.5px,transparent 3.5px);box-shadow:0 0 8px rgba(178,56,12,.45)}
html[data-theme=day] .top,html[data-theme=day] .ctl,html[data-theme=day] .pill{box-shadow:var(--glass-edge),0 6px 20px rgba(60,40,10,.12)}
html[data-theme=day]{--glass:rgba(255,255,255,.72);--glass-edge:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(0,0,0,.08)}
.keys,.strip,.top .theme-toggle,.top nav .zoom{display:none}
/* the toolbar: one glass capsule on the words' left edge, the same at every width (liquid-glass.md: glass only on the floating controls) */
.top{left:var(--rail);right:auto;top:calc(12px + env(safe-area-inset-top));display:flex;align-items:center;gap:clamp(0px,.4vw,2px);padding:clamp(3px,.8vw,4px);border-radius:999px;max-width:calc(100vw - 2 * var(--rail));font-size:inherit}
.top nav{flex-wrap:nowrap;align-items:center;gap:2px}
.top,.ctl,.pill{background:var(--glass);backdrop-filter:var(--glass-mat);-webkit-backdrop-filter:var(--glass-mat);box-shadow:var(--glass-edge),0 8px 24px rgba(0,0,0,.35)}
.top .me{display:inline-flex;align-items:center;min-height:32px;padding:0 clamp(7px,2.2vw,12px);font:600 clamp(.78rem,3.4vw,.875rem)/1 var(--body);letter-spacing:-.012em;color:var(--l1)}
.top .me::before{content:'';width:7px;height:7px;margin-right:clamp(6px,2vw,9px);border-radius:50%;flex:none;background:radial-gradient(circle,#fff6e6 0 1.5px,var(--tint) 2.5px,transparent 4px);box-shadow:0 0 10px 1px var(--tint)}
.top .me{border-right:.5px solid var(--sep);border-radius:999px 0 0 999px;margin-right:clamp(1px,.6vw,4px)}
.dial{position:relative;align-items:center;gap:0;margin:0;font:500 clamp(.78rem,3.4vw,.875rem)/1 var(--body);letter-spacing:-.012em;text-transform:none}
/* the trees as a segmented control: sentence case at the reading size, not 10px tracked capitals (typography.md: 11pt minimum;
   frontend-design: no all-caps labels); the tree you're in is the selected segment, the one the ring brings round is lit */
.dial a{display:flex;align-items:center;min-height:32px;padding:0 clamp(5px,2vw,12px);border-radius:999px;color:var(--l2);transition:color var(--t-s) var(--out)}
.dial a:hover,.dial a.front{color:var(--l1)}
.dial a.here{color:var(--l1);font-weight:600}
.dial a::after,.dial a.here::before{display:none}
.dial{isolation:isolate}
.dial .seg{position:absolute;z-index:-1;left:0;top:0;height:100%;border-radius:999px;background:var(--fill);box-shadow:inset 0 .5px 0 rgba(255,255,255,.12);
  transition:transform var(--t-l) var(--spring),width var(--t-l) var(--spring),opacity var(--t-s)}
.dial .seg.cold{transition:none}
/* the menu bar (x 11-01: 'extend the top bar to cover whole horizontal area ... persistent access menu bar'): one full-width glass bar, the
   same at every width: the name and the four trees on the left, the tools always there on the right (zoom, the light, Sail, Next tree, The
   grove). A narrow bar keeps every tool and drops their words for icons; when even that doesn't fit beside the trees, the tools wrap to a
   second row of the same bar (a phone), never hidden */
.top{left:0;right:0;top:0;max-width:none;border-radius:0;box-sizing:border-box;min-height:52px;padding:calc(6px + env(safe-area-inset-top)) var(--rail) 6px;gap:clamp(4px,1vw,10px);
  flex-wrap:wrap;row-gap:2px;container:bar/inline-size;background:color-mix(in srgb,var(--ground) 62%,transparent);box-shadow:0 .5px 0 var(--sep)}
html[data-theme=day] .top{background:color-mix(in srgb,var(--ground) 72%,transparent);box-shadow:0 .5px 0 var(--sep)}
.top .me{flex:none;border-right:0;border-radius:999px;margin-right:0}
.top nav{flex:none}
.tools{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none;max-width:100%}
.tools .sep{width:.5px;height:20px;background:var(--sep);margin:0 4px}
.tool{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:999px;background:none;font:500 .8125rem/1 var(--body);color:var(--l2);cursor:pointer;white-space:nowrap;transition:background var(--t-s),color var(--t-s)}
.tool svg,.segs svg{width:16px;height:16px;flex:none}
.tool:hover{background:var(--fill);color:var(--l1)}
.tool:active{transform:scale(.95)}
.tool[data-k=s]{color:var(--tint)}.tool[data-k=s] span{color:var(--l1)}
body.sailing .tool[data-k=s]{background:color-mix(in srgb,var(--tint) 20%,transparent)}
.tools .zoom{display:inline-flex;align-items:center;margin:0;padding:2px;border-radius:999px;background:var(--fill)}
.tools .zoom button{min-width:28px;height:28px;padding:0 6px;border:0;border-radius:999px;background:none;font:600 .875rem/1 var(--body);color:var(--l1);cursor:pointer;font-variant-numeric:tabular-nums}
.tools .zoom button[data-z="0"]{min-width:46px;font-weight:500;font-size:.75rem;color:var(--l2)}
.tools .zoom button:hover{background:var(--fill)}
.segs button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px}
@container bar (max-width:1000px){.tool span,.segs span{display:none}.tool,.segs button{padding:0 8px}}
@container bar (max-width:600px){.tools .sep{display:none}.tool,.segs button{padding:0 6px}.tools .zoom button[data-z="0"]{min-width:40px}}   /* the zoom's readout is its reset: it stays (audit M8) */
.ctl button,.pill{font:500 .8125rem/1 var(--body);color:var(--l1);border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* ‹ ▶ Sail ›: the travel controls on the scene box's lower corner. While sailing, ▶ becomes ❚❚ Stop and a slow light runs along the capsule */
.ctl{position:fixed;z-index:6;right:var(--rail);top:calc(var(--box-b) - 62px);display:flex;align-items:center;gap:0;padding:4px;border-radius:999px;overflow:hidden;isolation:isolate}
.ctl button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px;height:36px;padding:0 10px;border-radius:999px;background:none;color:var(--l2);transition:background var(--t-s),color var(--t-s),transform var(--t-s) var(--out)}
.ctl button svg{width:18px;height:18px}
.ctl button:hover{color:var(--l1);background:var(--fill)}
.ctl button:active{transform:scale(.94)}
.ctl .sail{padding:0 14px 0 11px;color:var(--tint);font-weight:600}
.ctl .sail b{font-weight:600;color:var(--l1)}
.ctl .sail .stop,body.sailing .ctl .sail .go{display:none}
body.sailing .ctl .sail .stop{display:inline}
body.sailing .ctl .sail b{font-size:0}body.sailing .ctl .sail b::after{content:'Stop';font-size:.8125rem}
body.sailing .ctl::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,181,71,.22) 50%,transparent 70%);background-size:250% 100%;animation:sheen 2.4s linear infinite}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.pill{display:flex;align-items:center;gap:8px;position:fixed;z-index:6;left:var(--rail);top:var(--pill-top);max-width:min(460px,calc(100vw - 2 * var(--rail)));height:38px;font-size:.875rem;transition:transform var(--t-s) var(--out),opacity var(--t-m) var(--out);padding:0 14px;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .16s}
.pill{padding:0 10px 0 9px}
.pill .ring{width:18px;height:18px;flex:none;transform:rotate(-90deg)}
.pill .ring circle{fill:none;stroke:var(--fill);stroke-width:2.2}
.pill .ring .done{stroke:var(--tint);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;transition:stroke-dashoffset var(--t-m) var(--out)}
.pill .n{color:var(--l2);font-weight:500;font-variant-numeric:tabular-nums}
.pill .t{overflow:hidden;text-overflow:ellipsis;display:inline-block}
.pill .t.roll{animation:roll var(--t-l) var(--out)}
@keyframes roll{from{opacity:0;transform:translateY(55%);filter:blur(3px)}}
.pill .chev{width:16px;height:16px;flex:none;color:var(--l2);transition:transform var(--t-m) var(--out)}
.pill.read .ring{animation:done var(--t-l) var(--spring)}
.pill.read .ring circle:first-child{fill:var(--tint);stroke:var(--tint)}
@keyframes done{40%{transform:rotate(-90deg) scale(1.25)}}
body.sections .pill .chev{transform:rotate(180deg)}
.pill:hover{color:var(--l1)}.pill:active{transform:scale(.98)}
.pill[hidden],.outline[hidden],body[data-kind=grove] .pill,body[data-kind=grove] .outline{display:none!important}
body.swap .pill{opacity:0}
/* the list of sections: grows down from the pill, numbered because the sections are a sequence; the one you're in carries the gold line */
.outline{display:flex;flex-direction:column;position:fixed;z-index:7;left:var(--rail);top:calc(var(--pill-top) + 46px);width:min(340px,calc(100vw - 32px));
  max-height:60vh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:6px;gap:0;border-radius:18px;background:var(--opaque2);counter-reset:sec;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.1),0 0 0 .5px var(--sep),0 18px 50px rgba(0,0,0,.55);transform-origin:22px top;
  opacity:0;visibility:hidden;transform:scale(.96) translateY(-4px);filter:blur(4px);
  transition:opacity var(--t-s) var(--in),transform var(--t-s) var(--in),filter var(--t-s),visibility 0s var(--t-s)}
body.sections .outline{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity var(--t-m) var(--out),transform var(--t-m) var(--out),filter var(--t-m) var(--out),visibility 0s}
html[data-theme=day] .outline{box-shadow:inset 0 .5px 0 #fff,0 0 0 .5px var(--sep),0 18px 50px rgba(60,40,10,.2)}
.outline b{display:none}
.outline a{position:relative;display:flex;align-items:center;gap:12px;min-height:42px;padding:6px 12px;border-radius:12px;font:var(--subhead);letter-spacing:-.016em;color:var(--l1);text-decoration:none;counter-increment:sec}
.outline a::before{content:counter(sec);min-width:1.2em;font-weight:500;color:var(--l3);font-variant-numeric:tabular-nums}
.outline a::after{content:'';position:absolute;left:3px;top:12px;bottom:12px;width:2.5px;border-radius:2px;background:var(--tint);box-shadow:0 0 8px var(--tint);opacity:0;transform:scaleY(.3);transition:opacity var(--t-m),transform var(--t-m) var(--out)}
.outline a:hover,.outline a:focus-visible{background:var(--fill);outline:0}
.outline a.on{font-weight:600}
.outline a.on::before{color:var(--tint)}
.outline a.on::after{opacity:1;transform:none}
/* arrival, once per load: the toolbar, then the pill, then the words come into focus (opacity + 8px + blur, staggered 70ms).
   A page swap is the words alone: out quickly, in with the same focus pull */
@keyframes arrive{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}
.top,.pill,.ctl{animation:arrive var(--t-l) var(--out) backwards}
.pill{animation-delay:70ms}.ctl{animation-delay:140ms}
main{animation:arrive var(--t-l) var(--out) 140ms backwards;transition:opacity var(--t-s) var(--in),filter var(--t-s) var(--in),transform var(--t-s) var(--in)}
body.swap main{opacity:0;filter:blur(3px);transform:translateY(-6px)}
/* the scroll edge (liquid-glass.md, checklist 6): words fade and soften where they pass under the bars instead of colliding with them.
   Where the scene's box is above the words, the same edge is the box's ground, so no words show through the tree */
.edge{position:fixed;z-index:3;left:var(--edge-x);top:0;width:var(--edge-w);height:var(--edge-h);pointer-events:none;opacity:var(--edge-rest);transition:opacity var(--t-s);
  background:linear-gradient(var(--edge-bg) calc(100% - 14px),transparent)}
body.under .edge{opacity:1}
body:not([data-kind=grove]) .edge{visibility:hidden}   /* inner pages: the cards fade themselves (world-text.js); the edge only measures the line */   /* only once the sheet has gone up under the bars: at rest its own rounded top shows */
body[data-kind=grove] .edge{height:var(--edge-home)}
.segs{display:inline-flex;padding:2px;border-radius:999px;background:var(--fill)}
.segs button{height:30px;padding:0 12px;border:0;border-radius:999px;background:none;font:500 .8125rem/1 var(--body);color:var(--l2);cursor:pointer;transition:background var(--t-s),color var(--t-s)}
.segs button[aria-checked=true]{background:var(--opaque1);color:var(--l1);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.3)}

@media (prefers-reduced-transparency:reduce){
  :root,html[data-theme=day]{--thick:var(--opaque1);--glass:var(--opaque2)}
}
@media (prefers-reduced-motion:reduce){:root{--t-s:1ms;--t-m:1ms;--t-l:1ms}*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important}}
@media (prefers-contrast:more){:root{--l2:rgba(235,235,245,.84);--sep:rgba(160,160,168,.7);--l-back:rgba(235,235,245,.78);--glass:var(--opaque2);--glass-edge:inset 0 0 0 1px rgba(255,255,255,.5)}
  html[data-theme=day]{--l2:rgba(40,40,45,.9);--sep:rgba(60,60,67,.5);--l-back:rgba(40,40,45,.8);--glass-edge:inset 0 0 0 1px rgba(0,0,0,.5)}}

/* a narrow screen: the same page, the scene's box moves from the right of the words to the top 30% of the screen (x 11-01: 'exactly
   like how desktop shows except for instead of right everything shows in 30% box'). The canvas is that box; world.js frames the tree,
   the thread, the tags, the orb's particles and the sail into it from --scene / --scene-home / --orb (fractions of the canvas) */
@media (max-width:760px){
  :root{--scene:.03 .38 .97 .99;--scene-home:.42 .38 .98 .99;--orb:.02 .38 .42 .99;--over:1;--home-col:calc(100vw - 32px);--box-b:30vh;--rail:16px;--pill-top:calc(30vh - 18px);--edge-x:0px;--edge-w:100vw;--edge-bg:var(--ground);--edge-rest:1;--edge-home:calc(30vh + 22px)}
  body{font-size:1.0625rem}
  h1,.leaf.hero h1,body[data-kind=grove] .leaf.hero h1{font-size:1.85rem}
  h2,body[data-kind=grove] .leaf.tree h2{font-size:1.35rem}
  .tldr p{font-size:1.2rem}
  #w{bottom:auto;height:100vh;height:100lvh;z-index:0}   /* x 11-02: 'the 30% becomes 100%': the portrait painting is the whole phone screen, the words float over it */
  :root{--scene:.03 .12 .97 .97;--scene-home:.12 .12 .97 .97;--orb:.02 .12 .5 .5}
  #thread,#tags{z-index:5}
  .veil{display:none}
  main,body:not([data-kind=grove]) main{width:calc(100vw - 32px);margin:calc(var(--pill-top) + 52px) 16px 0}
  body[data-kind=grove] main{margin-top:0;padding:calc(30vh + 12px) 0 0}
  td:first-child{white-space:normal}
}

/* ---- audit fixes (2026-11-01, behaviour only; looks unchanged except where a fix needs it) ---- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* S1: on the grove one panel at a time: the one leaving fades out quickly and is gone (not readable, not clickable) before the next fades in */
body[data-kind=grove] main .leaf{transition:opacity .16s var(--in),visibility 0s .16s}
body[data-kind=grove] main .leaf:not(.on){visibility:hidden;pointer-events:none}
body[data-kind=grove] main .leaf.on{transition:opacity .34s var(--out) .16s,visibility 0s}
/* S15: the bar's Sail says Stop while sailing, as the corner's does */
.tool[data-k=s] .stop,body.sailing .tool[data-k=s] .go{display:none}
body.sailing .tool[data-k=s] .stop{display:inline}
body.sailing .tool[data-k=s] span{font-size:0}body.sailing .tool[data-k=s] span::after{content:'Stop';font-size:.8125rem}
/* S20: '+N more' is a button now, dressed as the link it was; an opened list scrolls inside its card */
body[data-kind=grove] .twigs li.more button{background:none;border:0;padding:0;font:inherit;color:var(--tint);cursor:pointer;white-space:nowrap}
body[data-kind=grove] .stage.open{max-height:calc(70vh - 76px);overflow:auto;overscroll-behavior:contain}
/* M2, M3: nothing wider than the screen: a stepped Home card gives up its step's width, names in the scene are clipped to it */
body[data-kind=grove] .leaf.tree:nth-of-type(odd) .stage{width:calc(var(--home-col,min(560px,40vw)) - var(--step) / 2)}
#tags{overflow:hidden}
/* M7: on a touch screen every control's hit area reaches 44px tall, without changing how it looks */
@media (pointer:coarse){
  .tool,.segs button,.tools .zoom button,.dial a,.ctl button,.top .me{position:relative}   /* the pill is fixed: already a containing block */
  :is(.tool,.segs button,.tools .zoom button,.ctl button,.pill,.top .me)::after,.dial a::after{content:'';display:block;position:absolute;inset:-7px 0;background:none;transform:none;box-shadow:none}
}
/* T2: the grove's cards have a direction: the one you leave lifts away as you go down and drops away as you come back up; the next settles in */
body[data-kind=grove] :is(.leaf.hero>.card,.stage){transition:transform .34s var(--out)}
body[data-kind=grove] .leaf.past :is(.card,.stage){transform:translateY(-14px)}
body[data-kind=grove] .leaf:not(.on):not(.past) :is(.card,.stage){transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){body[data-kind=grove] :is(.leaf.hero>.card,.stage){transition:none;transform:none!important}}

/* ---- 道 Michi / 霧 Kiri (japan, x 11-02: colours, or lack thereof, make even a subpar object ethereal): one hue in shades per light,
   gold light on a blue-black night, indigo ink on cool mist paper (x-taste: one colour in shades; the warm cream look was rejected) ---- */
html[data-variant=kiri] .btn.primary:hover{box-shadow:0 8px 24px -8px rgba(183,50,28,.55)}
html[data-variant=kiri] ::selection{background:#b7321c;color:#f6f1ea}
html[data-theme=day][data-variant=kiri] body:not([data-kind=grove]) main .leaf.on:not(.reel){box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(29,63,138,.22),0 0 40px -10px rgba(29,63,138,.28),0 30px 60px -28px rgba(20,40,90,.3)}
html[data-variant=kiri] body[data-kind=grove] :is(.leaf.hero>.card,.stage){box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(29,63,138,.14),0 24px 60px -30px rgba(20,40,90,.32)}
html[data-variant=kiri] #thread path{stroke:#b7321c;filter:drop-shadow(0 0 3px rgba(183,50,28,.35))}
html[data-variant=kiri] #thread path.base{stroke-width:1.8;filter:drop-shadow(0 0 4px rgba(183,50,28,.4))}html[data-variant=kiri] #thread circle{stroke:#b7321c}
html[data-variant=michi] #thread path.base{stroke-width:1.8;filter:drop-shadow(0 0 4px rgba(255,170,70,.75))}
html[data-variant=kiri] #webs path{stroke:#2a4a94;stroke-width:1}
html[data-variant=kiri]{scrollbar-color:rgba(183,50,28,.32) transparent;accent-color:#b7321c;caret-color:#b7321c}
html[data-variant=michi]{scrollbar-color:rgba(255,181,71,.22) transparent;accent-color:#ffb547;caret-color:#ffb547}
html[data-variant=michi] body:not([data-kind=grove]) main .leaf.on:not(.reel){box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 .5px rgba(255,181,71,.42),0 0 46px -8px rgba(255,150,60,.26),0 40px 90px -30px rgba(0,0,8,.9)}
html[data-variant=michi] .btn.primary:hover{box-shadow:0 0 0 1px rgba(255,181,71,.3),0 10px 34px -8px rgba(255,160,70,.5)}
html[data-variant=kiri] body.swap main{opacity:0;filter:blur(9px);transform:none}
html[data-variant=kiri] main{transition:opacity var(--t-m) var(--in),filter var(--t-m) var(--in)}
html[data-variant=michi] body.swap main{opacity:0;filter:blur(4px) brightness(.6);transform:scale(.992)}
html[data-variant] body:not([data-kind=grove]) main>.leaf:not(.reel){animation:arrive var(--t-l) var(--out) backwards}
html[data-variant] body:not([data-kind=grove]) main>.leaf:nth-of-type(1){animation-delay:160ms}html[data-variant] body:not([data-kind=grove]) main>.leaf:nth-of-type(2){animation-delay:240ms}html[data-variant] body:not([data-kind=grove]) main>.leaf:nth-of-type(3){animation-delay:320ms}html[data-variant] body:not([data-kind=grove]) main>.leaf:nth-of-type(n+4){animation-delay:400ms}
html[data-variant=michi] #w.on{transition:opacity .9s var(--out),filter .9s var(--out)}
html[data-variant=kiri] #w.on{transition:opacity 1.4s var(--out),filter .9s var(--out)}
html[data-variant] #tags .tag{transition:opacity .7s var(--out),color var(--t-s),background var(--t-s)}
html[data-variant] body:not([data-kind=grove]) main .leaf:not(.reel){transition:color .7s var(--out),transform var(--t-l) var(--spring),box-shadow .9s var(--out)}
@media (prefers-reduced-motion:reduce){html[data-variant] body:not([data-kind=grove]) main>.leaf{animation:none!important}html[data-variant] #w.on,html[data-variant] main,html[data-variant] #tags .tag,html[data-variant] body:not([data-kind=grove]) main .leaf:not(.reel){transition-duration:1ms!important}}
html.leaving body{opacity:0;transition:opacity .26s var(--in)}html.leaving{background:var(--ground)}
html[data-variant=kiri] body[data-kind=grove] main .leaf{transition:opacity .3s var(--in),visibility 0s .3s,filter .3s var(--in)}html[data-variant=kiri] body[data-kind=grove] main .leaf:not(.on){filter:blur(6px)}
html[data-variant=kiri] body[data-kind=grove] main .leaf.on{transition:opacity .6s var(--out) .22s,visibility 0s,filter .7s var(--out) .22s}
html[data-variant] #webs path{transition:opacity var(--t-l) var(--out)}
html[data-variant=michi] body[data-kind=grove] :is(.leaf.hero>.card,.stage){box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 .5px rgba(255,181,71,.22),0 30px 80px -30px rgba(0,0,10,.95)}
html[data-variant=kiri] main>.reading{background:#b7321c;box-shadow:0 0 10px rgba(183,50,28,.45)}
html[data-variant=kiri] .top .me::before{background:#b7321c;border-radius:1.5px;box-shadow:0 0 9px rgba(183,50,28,.45)}
html[data-variant=kiri] .tag::before{box-shadow:0 0 6px rgba(183,50,28,.4)}
html[data-variant=kiri] .leaf.on::before{box-shadow:0 0 12px rgba(183,50,28,.5),0 0 0 4px rgba(183,50,28,.1)}
html[data-variant=kiri] body.sailing .ctl::before{background:linear-gradient(100deg,transparent 30%,rgba(29,63,138,.16) 50%,transparent 70%);background-size:250% 100%}
html[data-variant=kiri] :is(.top,.ctl,.pill){box-shadow:var(--glass-edge),0 8px 28px -6px rgba(20,40,90,.18)}
html[data-variant=michi] :is(.top,.ctl,.pill){box-shadow:var(--glass-edge),0 10px 30px -6px rgba(0,0,12,.6)}
html[data-variant=kiri] #tags .tag{text-shadow:0 0 6px var(--ground),0 0 2px var(--ground)}
html[data-variant=michi] #tags .tag{text-shadow:0 0 10px rgba(2,3,10,.9),0 0 3px rgba(2,3,10,.9)}
html[data-variant=michi] main>.reading{box-shadow:0 0 12px rgba(255,170,70,.55)}
html[data-variant=kiri]{--glass-edge:inset 0 0 0 .5px rgba(29,63,138,.16),inset 0 1px 0 rgba(255,255,255,.85)}
html[data-variant=michi]{--glass-edge:inset 0 0 0 .5px rgba(200,212,240,.13),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-variant=kiri] .btn:not(.primary):hover{background:rgba(29,63,138,.14)}html[data-variant=michi] .btn:not(.primary):hover{background:rgba(150,165,200,.22)}

html[data-variant=michi] #w{-webkit-mask-image:radial-gradient(125% 115% at 58% 46%,#000 58%,rgba(0,0,0,.35) 88%,transparent 104%);mask-image:radial-gradient(125% 115% at 58% 46%,#000 58%,rgba(0,0,0,.35) 88%,transparent 104%)}
html[data-variant=kiri] #w{-webkit-mask-image:radial-gradient(130% 120% at 58% 46%,#000 60%,rgba(0,0,0,.45) 90%,transparent 106%);mask-image:radial-gradient(130% 120% at 58% 46%,#000 60%,rgba(0,0,0,.45) 90%,transparent 106%)}
@keyframes condense{from{opacity:0;letter-spacing:.08em;filter:blur(12px)}60%{filter:blur(1px)}}
@keyframes condense-n{from{opacity:0;letter-spacing:.08em;filter:blur(12px) brightness(2.2)}60%{filter:blur(1px) brightness(1.3)}}
html[data-variant=kiri] h1{animation:condense 1.3s var(--out) 120ms backwards}
html[data-variant=michi] h1{animation:condense-n 1.3s var(--out) 120ms backwards}
@media (prefers-reduced-motion:reduce){html[data-variant] h1{animation:none}}
html[data-variant=michi] h1{text-shadow:0 0 32px rgba(255,165,70,.16),0 0 2px rgba(255,220,170,.12)}
html[data-variant=michi] h1 em{color:#ffc46b}
html[data-variant=kiri] h1{color:#0c1631}
html[data-variant=kiri] h1 em{color:#b7321c}
html[data-variant=kiri] main .leaf:not(.reel),html[data-variant=kiri] body[data-kind=grove] :is(.leaf.hero>.card,.stage){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 .35' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .16 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-variant=michi] main .leaf:not(.reel),html[data-variant=michi] body[data-kind=grove] :is(.leaf.hero>.card,.stage){background-image:linear-gradient(90deg,transparent 8%,rgba(255,190,110,.22) 50%,transparent 92%);background-size:100% 1px;background-repeat:no-repeat}
html[data-variant] main h2{position:relative}
html[data-variant] main h2::before{content:"";position:absolute;left:-16px;top:.62em;width:6px;height:6px}
html[data-variant=kiri] main h2::before{background:#b7321c;border-radius:1px}
html[data-variant=michi] main h2::before{background:#ffb547;border-radius:50%;box-shadow:0 0 8px rgba(255,170,70,.8)}
html[data-variant] main .leaf p a:not(.btn),html[data-variant] main .leaf li a:not(.btn){text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--t-s),color var(--t-s)}
html[data-variant=kiri] main .leaf p a:not(.btn),html[data-variant=kiri] main .leaf li a:not(.btn){text-decoration-color:rgba(183,50,28,.45)}
html[data-variant=kiri] main .leaf p a:not(.btn):hover,html[data-variant=kiri] main .leaf li a:not(.btn):hover{color:#b7321c;text-decoration-color:#b7321c}
html[data-variant=michi] main .leaf p a:not(.btn),html[data-variant=michi] main .leaf li a:not(.btn){text-decoration-color:rgba(255,181,71,.4)}
html[data-variant=michi] main .leaf p a:not(.btn):hover,html[data-variant=michi] main .leaf li a:not(.btn):hover{color:#ffd08a;text-decoration-color:#ffb547}
html[data-variant=kiri] .leaf.reel small{color:#b7321c;letter-spacing:.14em}
html[data-variant=michi] .leaf.reel small{color:#ffb547;letter-spacing:.14em;text-shadow:0 0 10px rgba(255,170,70,.5)}
html[data-variant] .leaf.reel b{transition:opacity 1s var(--out),filter 1s var(--out)}
html[data-variant] .leaf.reel:not(.on) b{opacity:.55;filter:blur(1.5px)}
html[data-variant].leaving body{filter:blur(8px);transform:scale(.985);transition:opacity .26s var(--in),filter .26s var(--in),transform .26s var(--in)}
html[data-variant] .facts b{margin-right:.45em}
html[data-variant=kiri] .facts b{color:#b7321c}
html[data-variant=michi] .facts b{color:#ffc46b;text-shadow:0 0 14px rgba(255,170,70,.35)}
html[data-variant] .dial a.here::before{display:block!important;content:"";position:absolute;left:50%;top:auto;bottom:4px;margin-left:0;transform:translateX(-50%);border-radius:2px}
html[data-variant=kiri] .dial a.here::before{width:12px;height:2px;background:#b7321c}
html[data-variant=michi] .dial a.here::before{width:4px;height:4px;border-radius:50%;background:#ffb547;box-shadow:0 0 8px rgba(255,170,70,.9)}
html[data-variant=kiri] .pill .ring .done{stroke:#b7321c}
html[data-variant=michi] .pill .ring .done{stroke:#ffb547;filter:drop-shadow(0 0 3px rgba(255,170,70,.7))}
html[data-variant] main .leaf>a>b{transition:color var(--t-s) var(--out),text-shadow var(--t-m) var(--out)}
html[data-variant=kiri] main .leaf>a:hover>b{color:#b7321c}
html[data-variant=michi] main .leaf>a:hover>b{color:#ffd08a;text-shadow:0 0 18px rgba(255,170,70,.35)}
html[data-variant] #w{transition:opacity 1.2s var(--out),filter .9s var(--out)}
html[data-variant=michi] body.swap #w{filter:brightness(.62)}
html[data-variant=kiri] body.swap #w{filter:blur(3px) contrast(.8) brightness(1.06)}
html[data-variant=kiri] :is(a,button,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:#b7321c}
html[data-variant=michi] :is(a,button,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:#ffb547;box-shadow:0 0 12px rgba(255,170,70,.35)}
html[data-variant=kiri] #tags .tag{color:#16213f}
html[data-variant=kiri] #tags .tag::before{border-color:#b7321c}
html[data-variant=michi] #tags .tag{color:#dfe6f4}
html[data-variant=michi] #tags .tag::before{border-color:#ffb547;box-shadow:0 0 6px rgba(255,170,70,.6)}
html[data-variant=kiri] .stats b{color:#b7321c}
html[data-variant=michi] .stats b{color:#ffc46b;text-shadow:0 0 14px rgba(255,170,70,.3)}
html[data-variant=kiri] .btn.primary{background:linear-gradient(180deg,#c63f22,#a92c16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px -6px rgba(183,50,28,.5)}
html[data-variant=michi] .btn.primary{background:linear-gradient(180deg,#ffcd7a,#f5a63e);box-shadow:inset 0 1px 0 rgba(255,250,235,.6),0 6px 20px -8px rgba(255,160,60,.6)}
html[data-variant=kiri] .path span{color:#b7321c}
html[data-variant=michi] .path span{color:#ffc46b}
html[data-variant] .path a{transition:color var(--t-s)}
html[data-variant=kiri] .path a:hover{color:#b7321c}html[data-variant=michi] .path a:hover{color:#ffd08a}
html[data-variant=kiri] body:not([data-kind=grove]) main .leaf:not(.reel):not(.on):hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(183,50,28,.16),0 18px 40px -24px rgba(20,40,90,.3)}
html[data-variant=michi] body:not([data-kind=grove]) main .leaf:not(.reel):not(.on):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 .5px rgba(255,181,71,.28),0 0 30px -10px rgba(255,150,60,.2)}
html[data-variant] body:not([data-kind=grove]) main .leaf:not(.reel){transition:color .7s var(--out),transform var(--t-l) var(--spring),box-shadow .9s var(--out),filter .9s var(--out),opacity .9s var(--out)}
@media (prefers-reduced-motion:reduce){html[data-variant] body:not([data-kind=grove]) main .leaf:not(.reel){transition-duration:1ms!important}}
html[data-variant=michi] #thread path.glow{stroke:rgba(255,165,70,.3);stroke-width:9}
html[data-variant=kiri] #thread path.glow{display:block;fill:none;stroke:rgba(183,50,28,.07);stroke-width:4.5;stroke-linecap:round}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.86}}
html[data-variant] #w.on{animation:breathe 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html[data-variant] #w.on{animation:none}}
html[data-variant=michi] #tags .tag{text-shadow:0 0 1px rgba(205,215,236,.55),0 0 10px rgba(2,3,10,.95),0 0 3px rgba(2,3,10,.95)}
html[data-variant=kiri] #tags .tag{text-shadow:0 0 1px rgba(236,239,240,1),0 0 8px var(--ground),0 0 3px var(--ground)}
html[data-variant] main .leaf h1::after{content:"";display:block;height:2px;width:56px;margin-top:14px;border-radius:2px;transform-origin:left;animation:inscribe 1.1s var(--out) .9s backwards}
@keyframes inscribe{from{transform:scaleX(0);opacity:0}}
html[data-variant=kiri] main .leaf h1::after{background:linear-gradient(90deg,#b7321c,rgba(183,50,28,.25))}
html[data-variant=michi] main .leaf h1::after{background:linear-gradient(90deg,#ffb547,rgba(255,181,71,0));box-shadow:0 0 10px rgba(255,170,70,.5);height:1.5px}
@media (prefers-reduced-motion:reduce){html[data-variant] main .leaf h1::after{animation:none}}
html[data-variant] main .leaf.trunk>:is(.lede,p,.mono,.facts,.stats,.btns,div){animation:arrive .9s var(--out) backwards}
html[data-variant] main .leaf.trunk>:nth-child(2){animation-delay:.45s}html[data-variant] main .leaf.trunk>:nth-child(3){animation-delay:.6s}html[data-variant] main .leaf.trunk>:nth-child(4){animation-delay:.75s}html[data-variant] main .leaf.trunk>:nth-child(n+5){animation-delay:.9s}
@media (prefers-reduced-motion:reduce){html[data-variant] main .leaf.trunk>*{animation:none!important}}
html[data-variant=kiri] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.55;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75 .22' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .52 0 0 0 0 .58 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-variant=michi] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .6 0 0 0 0 .75 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-variant=kiri] main .leaf li::marker{color:#b7321c}
html[data-variant=michi] main .leaf li::marker{color:#ffb547}
html[data-variant] main .leaf table{border-collapse:collapse}
html[data-variant] main .leaf :is(th,td){border-bottom:1px solid var(--sep);padding:.5em .75em .5em 0}
html[data-variant=kiri] main .leaf th{color:#b7321c;border-bottom-color:rgba(183,50,28,.4)}
html[data-variant=michi] main .leaf th{color:#ffc46b;border-bottom-color:rgba(255,181,71,.35)}
html[data-variant=kiri] main h3{color:#7a2a1a}
html[data-variant=michi] main h3{color:#f3d6a4}
html[data-variant=kiri] kbd{border:1px solid rgba(183,50,28,.35);box-shadow:0 1px 0 rgba(183,50,28,.25);color:#7a2a1a;background:rgba(255,255,255,.5)}
html[data-variant=michi] kbd{border:1px solid rgba(255,181,71,.3);box-shadow:0 0 8px -2px rgba(255,170,70,.35);color:#ffd9a0;background:rgba(255,181,71,.06)}
html[data-variant=kiri] .foot a{color:#b7321c}
html[data-variant=michi] .foot a{color:#ffc46b}
@keyframes beckon{0%,100%{opacity:.45}50%{opacity:1}}
html[data-variant] .leaf.reel span{animation:beckon 2.6s ease-in-out infinite}
html[data-variant=kiri] .leaf.reel span{color:#b7321c}
html[data-variant=michi] .leaf.reel span{color:#ffc46b}
@media (prefers-reduced-motion:reduce){html[data-variant] .leaf.reel span{animation:none}}
html[data-variant=kiri] .edge{background:linear-gradient(180deg,rgba(236,239,240,.96),rgba(236,239,240,0))}
html[data-variant=michi] .edge{background:linear-gradient(180deg,rgba(2,3,10,.92),rgba(2,3,10,0))}
html[data-variant=michi] .segs button[aria-pressed=true] svg{color:#dbe4ff;filter:drop-shadow(0 0 4px rgba(190,205,255,.7))}
html[data-variant=kiri] .segs button[aria-pressed=true] svg{color:#b7321c}
html[data-variant] :is(.tool,.tools .zoom button,.ctl button){transition:color var(--t-s),background var(--t-s)}
html[data-variant=kiri] :is(.tool,.tools .zoom button,.ctl button):hover{color:#b7321c}
html[data-variant=michi] :is(.tool,.tools .zoom button,.ctl button):hover{color:#ffc46b}
html[data-variant=michi] ::selection{background:rgba(255,181,71,.85);color:#120a02}
html[data-variant=kiri] main .leaf>a+small,html[data-variant=kiri] main .leaf>small{color:#8a4a3a}
html[data-variant=michi] main .leaf>a+small,html[data-variant=michi] main .leaf>small{color:#c9a978}
html[data-variant=kiri] main h2{color:#101a38}
html[data-variant=michi] main h2{color:#f4ead8}
html[data-variant] :is(.facts,.stats)>div{animation:arrive .8s var(--out) backwards}
html[data-variant] :is(.facts,.stats)>div:nth-child(1){animation-delay:.9s}html[data-variant] :is(.facts,.stats)>div:nth-child(2){animation-delay:1.02s}html[data-variant] :is(.facts,.stats)>div:nth-child(3){animation-delay:1.14s}html[data-variant] :is(.facts,.stats)>div:nth-child(4){animation-delay:1.26s}html[data-variant] :is(.facts,.stats)>div:nth-child(n+5){animation-delay:1.38s}
@media (prefers-reduced-motion:reduce){html[data-variant] :is(.facts,.stats)>div{animation:none}}
html[data-variant=kiri] .pill .n{color:#b7321c}
html[data-variant=michi] .pill .n{color:#ffc46b}
html[data-variant=michi] body:not([data-kind=grove]) main .leaf.on:not(.reel){background-image:linear-gradient(90deg,transparent 8%,rgba(255,190,110,.4) 30%,transparent 92%),radial-gradient(120% 60% at 0 0,rgba(255,170,70,.07),transparent 60%);background-size:100% 1px,100% 100%;background-repeat:no-repeat}
html[data-variant=kiri] body:not([data-kind=grove]) main .leaf.on:not(.reel){background-image:radial-gradient(110% 55% at 0 0,rgba(255,240,225,.6),transparent 60%),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 .35' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .16 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-variant=michi] .dial a.here{color:#fff3df;text-shadow:0 0 12px rgba(255,170,70,.45)}
html[data-variant=kiri] .dial a.here{color:#0c1631}
html[data-variant=kiri] :is(.ctl,.pill){background:rgba(244,246,250,.7)}
html[data-variant=michi] :is(.ctl,.pill){background:rgba(10,13,24,.62)}
html[data-variant=michi] .btn.primary{transition:filter var(--t-s),box-shadow var(--t-m)}
html[data-variant=michi] .btn.primary:hover{filter:brightness(1.08) saturate(1.08)}
html[data-variant=kiri] .btn.primary{transition:filter var(--t-s),box-shadow var(--t-m)}
html[data-variant=kiri] .btn.primary:hover{filter:brightness(1.06)}
html[data-variant=kiri] main .leaf>a>b{color:#0f1a3a}
html[data-variant=michi] main .leaf>a>b{color:#f5ecdc}
html[data-variant=michi] h1 em{text-shadow:0 0 22px rgba(255,170,70,.4)}
html[data-variant=michi] .leaf.reel.on b{text-shadow:0 0 20px rgba(255,170,70,.45);color:#fff1da}
html[data-variant=kiri] .leaf.reel.on b{color:#0c1631;text-decoration:underline;text-decoration-color:#b7321c;text-decoration-thickness:1.5px;text-underline-offset:5px}
html[data-variant=kiri] .path{color:rgba(183,50,28,.6)}
html[data-variant=michi] .path{color:rgba(255,181,71,.55)}
html[data-variant] .path a{color:var(--l3)}
html[data-variant=kiri] main code{background:rgba(183,50,28,.07);color:#7a2a1a;border-radius:4px;padding:.05em .3em}
html[data-variant=michi] main code{background:rgba(255,181,71,.08);color:#ffd9a0;border-radius:4px;padding:.05em .3em}
html[data-variant=kiri] main .leaf p strong{color:#0c1631}
html[data-variant=michi] main .leaf p strong{color:#fff4e2}
html[data-variant=michi] body.swap main{filter:blur(4px) brightness(.6) sepia(.4)}
html[data-variant=kiri] body.swap main{filter:blur(9px) saturate(.6)}
html[data-variant=michi] body.sailing .ctl::before{background:linear-gradient(100deg,transparent 30%,rgba(255,181,71,.16) 50%,transparent 70%);background-size:250% 100%}
@keyframes lamp{0%,100%{opacity:1}50%{opacity:.55}}
html[data-variant] .top .me::before{animation:lamp 4.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html[data-variant] .top .me::before{animation:none}}.zoom.frozen button{cursor:default}.zoom.frozen button[data-z]:not([data-z="0"]){opacity:.3}

/* ---- blind-audit fixes (x 11-02: 'fix blind opus issues first') ---- */
/* 1: a project card's header row is class="top", so the menu bar's glass, shadow and sail fade reached it; it is a plain line of metadata */
main .proj>.top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none!important;animation:none;opacity:1!important;padding:0;margin:0 0 12px;border:0;font:var(--footnote);letter-spacing:.02em}
main .proj>.top .mono{color:var(--l2)}main .proj>.top .star{color:var(--l3)}
html[data-variant=kiri] main .proj>.top .mono{color:#b7321c}html[data-variant=michi] main .proj>.top .mono{color:#ffc46b}
/* the project cards' figures ran into their labels ('53.8%accuracy'): air between a figure and its words */
main .proj div>b+span{margin-left:.45em}
/* 10: tree labels sat on the branches: each letter is cut out of the scene by a stroke of the ground colour behind it */
html[data-variant] #tags .tag{-webkit-text-stroke:3.5px var(--ground);paint-order:stroke fill}
/* 11: breadcrumbs vanished into the land: full-strength words with the same cut-out */
html[data-variant] .path,html[data-variant] .path a{-webkit-text-stroke:3px var(--ground);paint-order:stroke fill}
html[data-variant] .path a{color:var(--l2)}
/* 12: the previous / next panels were a faint fill over the scene: they are the cards' own glass */
nav.turn a{background:var(--thick);backdrop-filter:var(--glass-mat);-webkit-backdrop-filter:var(--glass-mat);box-shadow:var(--glass-edge),0 10px 30px -12px rgba(0,0,0,.45)}
html[data-variant=kiri] nav.turn a{box-shadow:var(--glass-edge),0 10px 30px -14px rgba(20,40,90,.3)}
nav.turn a:hover{transform:translateY(-1px)}
/* 14: a dataset pack's tree figure is only drawn on the plain site: on the grove the empty figure left a divider over nothing */
main figure.dtree:not(:has(canvas)){display:none}
main .tldr:is(:last-child,:has(+ figure.dtree:not(:has(canvas)):last-child)){border-bottom:0;padding-bottom:0;margin-bottom:0}