@font-face{font-family:"Geologica";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geologica-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geologica";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geologica-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/onest-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/onest-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* heron-site theme. Light = Paper, dark = Night. Fluid layout: no fixed column,
   gutters and type grow with the screen, grids add columns as space allows. */
:root{
  --paper:#F4F7FB; --sheet:#FFFFFF; --ink:#0A1B2D; --ink-2:#44566B; --ink-3:#66788D; --crease:#D8E1EC; --tint:#E7EFF8;
  --heron:#024379; --facet:#0B5FA8; --mist:#8CB2CE; --glow:#BFD8EE; --on-heron:#FFFFFF; --m-mid:#005494; --m-dark:#024379;
  --ok:#17704D; --ok-bg:#E1F2E9; --soon:#7A4F00; --soon-bg:#FAEFD7;
  --code-bg:#0A1B2D; --code-ink:#E2EBF5; --code-key:#8CB2CE; --code-dim:#7E94AC; --code-str:#B9D3EA; --code-ok:#7FD3A8;
  --shadow:0 1px 2px rgba(10,27,45,.06),0 14px 40px -12px rgba(10,27,45,.18);
  --f-display:"Geologica","Onest",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --f-body:"Onest",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s-1:clamp(2.6rem,1.6rem + 4vw,5rem); --s-2:clamp(2rem,1.4rem + 2.2vw,3.4rem); --s-3:1.25rem;
  --r-md:12px; --r-lg:20px; --gutter:clamp(16px,4.6vw,120px); --col:clamp(260px,19vw,440px);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.77,0,.175,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#03070D; --sheet:rgba(13,24,40,.82); --ink:#F2F6FB; --ink-2:#C6D3E1; --ink-3:#93A6BB; --crease:#1F3655; --tint:#0E2236;
  --heron:#A9D0F2; --facet:#D2E8FA; --mist:#3F79AD; --glow:#1D4670; --on-heron:#03070D; --m-mid:#A9D0F2; --m-dark:#78A9D6;
  --ok:#6BDCAA; --ok-bg:#0C2E23; --soon:#F4C774; --soon-bg:#2E230C;
  --code-bg:#010409; --code-key:#9CC6EA; --code-dim:#7189A3; --code-str:#B5D3EE; --code-ok:#6BDCAA;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 20px 50px -18px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#03070D; --sheet:rgba(13,24,40,.82); --ink:#F2F6FB; --ink-2:#C6D3E1; --ink-3:#93A6BB; --crease:#1F3655; --tint:#0E2236;
  --heron:#A9D0F2; --facet:#D2E8FA; --mist:#3F79AD; --glow:#1D4670; --on-heron:#03070D; --m-mid:#A9D0F2; --m-dark:#78A9D6;
  --ok:#6BDCAA; --ok-bg:#0C2E23; --soon:#F4C774; --soon-bg:#2E230C;
  --code-bg:#010409; --code-key:#9CC6EA; --code-dim:#7189A3; --code-str:#B5D3EE; --code-ok:#6BDCAA;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 20px 50px -18px rgba(0,0,0,.8); color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:clamp(100%,.42vw + .7rem,122%);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip;margin:0;transition:background-color .5s}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
a{color:var(--facet);text-underline-offset:3px}a:hover{color:var(--heron)}
:focus-visible{outline:2px solid var(--facet);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);text-wrap:balance;margin:0;line-height:1.05;letter-spacing:-.02em}
p{margin:0}
code,pre{font-family:var(--f-mono)}
code.inl{font-size:.86em;background:var(--tint);color:var(--heron);padding:.12em .4em;border-radius:5px}
.wrap{width:100%;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.eyebrow{font:600 .75rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--facet)}
.eyebrow-links{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;line-height:1.3}.eyebrow-links a{color:inherit;text-decoration:none;padding:5px 9px;border:1px solid var(--crease);border-radius:999px;background:var(--sheet);transition:border-color .2s,transform .2s}.eyebrow-links a:hover{border-color:var(--facet);transform:translateY(-1px)}.eyebrow-links span{margin-right:4px}
.hero .more b{color:var(--ink-2)}
.lede{color:var(--ink-2);max-width:60ch;font-size:1.15rem}

/* live backdrop (fixed, behind everything) */
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.spot{position:fixed;left:0;top:0;width:1040px;height:1040px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;transform:translate3d(50vw,-200px,0);will-change:transform;background:radial-gradient(520px circle at 50% 50%,rgba(255,214,160,.13),rgba(120,170,230,.06) 40%,transparent 70%)}
.is-dark .spot{opacity:1}
.progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--heron),var(--mist));z-index:70;pointer-events:none}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 93%,transparent);border-bottom:1px solid color-mix(in srgb,var(--crease) 70%,transparent)}
.site-head .wrap{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{height:36px;width:auto;overflow:visible}
.brand span{font:800 1.32rem/1 var(--f-display);letter-spacing:.06em;color:var(--heron)}
/* logo: folds out of a paper square on load, strikes with its beak on a fast scroll, a glint runs over the facets, recolours in a wave on theme change */
.mark-sheet{fill:var(--m-mid);opacity:0;transform-box:fill-box;transform-origin:center;animation:markSheet 1.1s var(--ease-out) .1s both}
@keyframes markSheet{0%{opacity:.9;transform:rotate(-8deg) scale(.9)}35%{opacity:.75;transform:rotate(0) scale(.62)}100%{opacity:0;transform:rotate(12deg) scale(.08)}}
.mark-head polygon,.mark-body polygon{transform-box:fill-box;transform-origin:center;animation:markFold .75s var(--ease-out) both;animation-delay:calc(var(--i)*65ms + .35s);transition:transform .45s var(--ease-out)}
@keyframes markFold{0%{opacity:0;transform:translate(calc(var(--hx,0)*-9px),calc(var(--hy,0)*-9px)) rotate(calc(var(--hr,0)*-9deg)) scale(.15,1)}55%{opacity:1;transform:scale(1.12,.92)}100%{opacity:1;transform:none}}
.brand:hover .mark-head polygon,.brand:hover .mark-body polygon{transform:translate(calc(var(--hx,0)*1px),calc(var(--hy,0)*1px)) rotate(calc(var(--hr,0)*1deg))}
.mark-head{transform-box:fill-box;transform-origin:10% 95%}
.mark.strike .mark-head{animation:markStrike .62s cubic-bezier(.2,.9,.3,1)}
@keyframes markStrike{0%{transform:none}22%{transform:translate(-30px,-24px) rotate(-14deg)}42%{transform:translate(95px,125px) rotate(34deg)}62%{transform:translate(85px,112px) rotate(30deg)}100%{transform:none}}
.mark.recolor polygon{transition:fill .45s ease,transform .45s var(--ease-out);transition-delay:calc(var(--i,0)*55ms);animation:markPop .6s var(--ease-out) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes markPop{50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.mark *{animation:none!important}.mark-sheet{display:none}.mark-glint{display:none}}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.95rem;padding:8px 10px;border-radius:8px;transition:color .15s,background-color .15s}
.nav a:hover{color:var(--ink);background:var(--tint)}
.head-tools{display:flex;gap:8px;align-items:center}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--crease);background:color-mix(in srgb,var(--sheet) 80%,transparent);color:var(--ink);cursor:pointer;transition:border-color .15s,transform .16s var(--ease-out)}
.icon-btn:hover{border-color:var(--facet)}.icon-btn:active{transform:scale(.95)}
.theme-btn .sun{display:none}
.is-dark .theme-btn .sun{display:block}.is-dark .theme-btn .moon{display:none}
.lang{font:500 .85rem/1 var(--f-mono);color:var(--ink-3);display:flex;gap:6px}.lang a{color:var(--ink-3);text-decoration:none}.lang a[aria-current]{color:var(--ink)}
.menu-btn{display:none!important}
@media (max-width:960px){.head-tools .head-cta{display:none}.menu-btn{display:inline-flex!important}.head-tools{margin-left:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem/1 var(--f-body);text-decoration:none;border-radius:12px;padding:15px 22px;min-height:50px;border:1px solid transparent;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .16s var(--ease-out),box-shadow .2s;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--heron);color:var(--on-heron);box-shadow:0 10px 26px -10px color-mix(in srgb,var(--heron) 80%,transparent)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:shine 4s var(--ease-io) infinite 2s}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn-primary:hover{background:var(--facet);color:var(--on-heron)}
.btn-secondary{background:color-mix(in srgb,var(--sheet) 80%,transparent);color:var(--ink);border-color:var(--crease)}
.btn-secondary:hover{border-color:var(--facet);color:var(--heron)}
.btn-sm{min-height:42px;padding:11px 16px;font-size:.92rem}

/* terminal */
.term{background:var(--code-bg);color:var(--code-ink);border-radius:var(--r-md);box-shadow:var(--shadow);min-width:0;position:relative;border:1px solid rgba(255,255,255,.06)}
.term-bar{display:flex;align-items:center;gap:4px;padding:8px 8px 0;flex-wrap:wrap}
.term-bar .dots{display:flex;gap:6px;padding:0 8px 0 6px}.term-bar .dots i{width:10px;height:10px;border-radius:50%;background:#33475e}
.term-bar .dots i:nth-child(1){background:#e5776b}.term-bar .dots i:nth-child(2){background:#e9b949}.term-bar .dots i:nth-child(3){background:#5fb87a}
.term-bar button{font:500 .75rem/1 var(--f-mono);letter-spacing:.05em;color:var(--code-dim);background:none;border:0;border-radius:7px;padding:9px 11px;cursor:pointer;min-height:34px;transition:color .15s,background-color .15s}
.term-bar button[aria-selected="true"]{color:var(--code-ink);background:rgba(255,255,255,.09)}
.term-bar .copy{margin-left:auto;color:var(--code-ink);display:inline-flex;align-items:center;gap:6px}
.term-bar .title{font:500 .75rem/1 var(--f-mono);color:var(--code-dim);padding:9px 6px}
.term pre{margin:0;padding:12px 18px 18px;font-size:.88rem;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;min-height:4.5em}
.term .p{color:var(--code-dim);user-select:none}.term .k{color:var(--code-key)}.term .s{color:var(--code-str)}.term .c{color:var(--code-dim)}.term .ok{color:var(--code-ok)}
.caret{display:inline-block;width:.55em;height:1.1em;vertical-align:-.18em;background:var(--code-key);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* hero */
.hero{position:relative;isolation:isolate;overflow:clip}
.hero .scene{position:absolute;inset:0;z-index:-1}
.hero .scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .hero-copy{position:relative;width:min(100%,clamp(520px,46vw,1000px));min-width:0}
.hero h1{font-size:var(--s-1);font-weight:800;letter-spacing:-.04em;margin-top:18px}
.hero h1 .w{display:inline-block;animation:wordIn .9s var(--ease-out) both;animation-delay:calc(var(--wi)*80ms + .15s)}
@keyframes wordIn{from{opacity:0;transform:translateY(.4em) rotate(2deg);filter:blur(6px)}}
.hero h1 em{font-style:normal;color:var(--heron)}
.hero .lede{margin-top:20px}
.hero .term{margin-top:26px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center}
.hero .more{font:500 .9rem/1.4 var(--f-body);color:var(--ink-3);margin-top:14px}
.hero .more a{font-weight:600}
.hero.full{min-height:max(660px,calc(100svh - 66px))}
.hero.full .wrap{display:flex;align-items:center;min-height:inherit;padding-block:48px 80px}
@media (max-width:860px){.hero.full .wrap{align-items:flex-start;padding-block:28px 330px}.hero.full .scene{top:auto;height:360px}}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:grid;justify-items:center;gap:8px}
.scroll-cue i{width:1.5px;height:36px;background:linear-gradient(var(--facet),transparent);animation:cue 1.8s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px){.scroll-cue{display:none}}

/* ticker */
.ticker{border-block:1px solid color-mix(in srgb,var(--crease) 70%,transparent);overflow:hidden;background:color-mix(in srgb,var(--paper) 88%,transparent)}
.ticker-track{display:flex;width:max-content;gap:0;animation:tick 38s linear infinite}
.ticker span{font:600 clamp(1.1rem,.9rem + .8vw,1.6rem)/1 var(--f-display);color:var(--ink);padding:22px 28px;white-space:nowrap;display:inline-flex;align-items:center;gap:28px}
.ticker span::after{content:"";width:10px;height:10px;background:var(--heron);transform:rotate(45deg);opacity:.6}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* sections as film: --e (0..1) arrives with scroll; --p (0..1) runs through the viewport */
section.block{position:relative;overflow:clip}
section.block>.wrap{padding-block:clamp(72px,10vw,140px);display:grid;gap:40px;position:relative}
.bignum{position:absolute;right:-1vw;top:clamp(20px,4vw,60px);will-change:transform;font:800 clamp(8rem,4rem + 16vw,22rem)/.8 var(--f-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--crease) 90%,transparent);pointer-events:none;z-index:-1;user-select:none}
.head{display:grid;gap:14px;max-width:72ch}
.head h2{font-size:var(--s-2);font-weight:750;letter-spacing:-.035em}
.head h2 .w{display:inline-block;--wp:clamp(0,calc(var(--e,1) * var(--wn,6) * 1.5 - var(--wi,0)),1);opacity:var(--wp);transform:translateY(calc((1 - var(--wp)) * .45em));filter:blur(calc((1 - var(--wp)) * 6px))}
.grid{display:grid;gap:clamp(14px,1.2vw,26px);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--col)),1fr))}

.card{background:var(--sheet);border:1px solid var(--crease);border-radius:var(--r-lg);padding:26px;display:grid;gap:12px;align-content:start;min-width:0;position:relative;overflow:hidden;
  --k:clamp(0,calc(var(--e,1) * 1.6 - var(--ci,0) * .12),1);
  opacity:calc(.15 + .85 * var(--k));transform:translateY(calc((1 - var(--k)) * 90px)) scale(calc(.93 + .07 * var(--k)));transition:border-color .25s,box-shadow .3s}
.card:hover{border-color:color-mix(in srgb,var(--facet) 50%,var(--crease));box-shadow:var(--shadow)}
.card h3{font-size:1.3rem;font-weight:650}
.card p{color:var(--ink-2);font-size:1rem}
.badge{display:inline-flex;align-items:center;gap:6px;font:600 .72rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 10px;width:max-content}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-ok{color:var(--ok);background:var(--ok-bg)}.b-soon{color:var(--soon);background:var(--soon-bg)}.b-info{color:var(--heron);background:var(--tint)}
.b-ok::before{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.8);opacity:.35}}

/* how it works */
.how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
.how-steps{list-style:none;margin:0;padding:0}
.how-steps li{padding:30px 0 30px 70px;position:relative;min-height:clamp(240px,46vh,380px);transition:opacity .4s}
.how-steps li::before{content:"";position:absolute;left:21px;top:76px;bottom:-4px;width:2px;background:var(--crease)}
.how-steps li:last-child::before{display:none}
.how-steps li .n{position:absolute;left:0;top:30px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:700 1.05rem/1 var(--f-display);background:var(--tint);color:var(--heron);transition:background-color .3s,color .3s,transform .5s var(--ease-out),box-shadow .3s}
.how-steps li.act .n{background:var(--heron);color:var(--on-heron);transform:scale(1.12);box-shadow:0 0 0 8px color-mix(in srgb,var(--heron) 15%,transparent)}
.how-steps li:not(.act){opacity:.45}
.how-steps h3{font-size:1.6rem;font-weight:750;margin-bottom:10px}
.how-steps p{color:var(--ink-2);max-width:48ch}
.how-steps .links{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.92rem}
.how-steps .links a{font-weight:600}
.how-scene{position:sticky;top:96px;display:grid;gap:14px}
.viz{position:relative;aspect-ratio:16/11;max-width:100%;background:var(--sheet);border:1px solid var(--crease);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.viz>.pane{position:absolute;inset:0;padding:24px;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);display:grid;align-content:center;justify-items:center}
.viz>.pane.on{opacity:1;transform:none}
.viz .tree{font:500 .95rem/1.9 var(--f-mono);color:var(--ink-2);justify-self:start;margin-left:8%}
.viz .tree span{display:block;opacity:0;transform:translateX(-10px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.viz .tree span:nth-child(2){transition-delay:.06s}.viz .tree span:nth-child(3){transition-delay:.12s}.viz .tree span:nth-child(4){transition-delay:.18s}.viz .tree span:nth-child(5){transition-delay:.24s}.viz .tree span:nth-child(6){transition-delay:.3s}.viz .tree span:nth-child(7){transition-delay:.36s}
.viz .on .tree span{opacity:1;transform:none}
.viz .tree b{color:var(--heron);font-weight:600}
.viz .cfg{width:min(92%,420px);border:1px solid var(--crease);border-radius:12px;overflow:hidden;background:var(--paper)}
.viz .cfg .bar{display:flex;gap:6px;align-items:center;padding:8px 10px;background:var(--tint)}.viz .cfg .bar i{width:8px;height:8px;border-radius:50%;background:var(--crease)}
.viz .cfg .bar span{margin-left:8px;font:500 .72rem/1 var(--f-mono);color:var(--ink-3)}
.viz .cfg form{padding:14px;display:grid;gap:9px}
.viz .cfg label{display:grid;grid-template-columns:128px minmax(0,1fr);gap:8px;align-items:center;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.viz .cfg .in{border:1px solid var(--crease);border-radius:7px;padding:7px 10px;font:500 .84rem/1.2 var(--f-mono);color:var(--ink);background:var(--sheet);min-height:34px;overflow:hidden;white-space:nowrap}
.viz .cfg .row{display:flex;gap:6px;flex-wrap:wrap}
.viz .cfg .chip{font:500 .72rem/1 var(--f-mono);padding:6px 9px;border-radius:999px;border:1px solid var(--crease);color:var(--ink-2)}
.viz .cfg .chip.on{background:var(--heron);color:var(--on-heron);border-color:var(--heron)}
.viz .cfg em{font-style:normal;display:flex;align-items:center;gap:6px;position:relative}
.hint{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--facet);color:var(--facet);font:700 .62rem/1 var(--f-mono);font-style:normal;cursor:help;flex:none}
.hint span{position:absolute;z-index:5;left:22px;top:50%;width:200px;transform:translate(6px,-50%);padding:9px 11px;border-radius:10px;background:var(--ink);color:var(--paper);font:500 .74rem/1.4 var(--f-body);letter-spacing:0;text-transform:none;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease-out)}
.hint span::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;background:inherit;transform:translateY(-50%) rotate(45deg)}
.hint:hover span,.hint:focus span,.hint.show span{opacity:1;transform:translate(0,-50%)}
.hint.show{background:var(--facet);color:var(--paper)}
.viz .unpack{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(92%,440px)}
.viz .unpack div{aspect-ratio:3/4;border-radius:10px;background:var(--tint);border:1px solid var(--crease);display:grid;align-content:end;padding:8px;font:500 .7rem/1.2 var(--f-mono);color:var(--ink-3);transform:translateY(20px) rotate(-4deg);opacity:0;transition:transform .7s var(--ease-out),opacity .5s}
.viz .on .unpack div{transform:none;opacity:1}
.viz .on .unpack div:nth-child(2){transition-delay:.1s}.viz .on .unpack div:nth-child(3){transition-delay:.2s}.viz .on .unpack div:nth-child(4){transition-delay:.3s}.viz .on .unpack div:nth-child(5){transition-delay:.4s}.viz .on .unpack div:nth-child(6){transition-delay:.5s}
.viz .unpack div i{display:block;height:6px;border-radius:3px;background:var(--crease);margin-bottom:5px}
.viz .unpack div i.h{background:var(--heron);width:60%}
.viz .browser{width:min(92%,460px);border:1px solid var(--crease);border-radius:12px;overflow:hidden;background:var(--paper)}
.viz .browser .bar{display:flex;gap:6px;align-items:center;padding:8px 10px;background:var(--tint)}.viz .browser .bar i{width:8px;height:8px;border-radius:50%;background:var(--crease)}
.viz .browser .bar span{margin-left:8px;font:500 .72rem/1 var(--f-mono);color:var(--ink-3);background:var(--sheet);border-radius:6px;padding:5px 10px}
.viz .browser .pg{padding:16px;display:grid;gap:8px}
.viz .browser .pg i{display:block;height:8px;border-radius:4px;background:var(--crease)}
.viz .browser .pg .h{height:16px;width:70%;background:var(--ink)}.viz .browser .pg .h2{height:16px;width:44%;background:var(--heron)}
.viz .browser .pg .row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}.viz .browser .pg .row i{height:48px;border-radius:7px;background:var(--tint)}
.viz .on .browser .pg>*{animation:build .6s var(--ease-out) both}
.viz .on .browser .pg>*:nth-child(2){animation-delay:.12s}.viz .on .browser .pg>*:nth-child(3){animation-delay:.24s}.viz .on .browser .pg>*:nth-child(4){animation-delay:.36s}.viz .on .browser .pg>*:nth-child(5){animation-delay:.48s}
@keyframes build{from{opacity:0;transform:translateY(10px)}}
.viz .ship{display:grid;gap:12px;width:min(94%,460px)}
.viz .ship .route{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--crease);border-radius:12px;background:var(--paper);font-size:.85rem;opacity:.45;transition:opacity .3s,border-color .3s}
.viz .ship .route.on{opacity:1;border-color:var(--facet)}
.viz .ship .route b{font:600 .85rem/1.2 var(--f-display)}
.viz .ship .route small{display:block;font:500 .72rem/1.3 var(--f-mono);color:var(--ink-3)}
.viz .ship .route .ic{width:34px;height:34px;border-radius:9px;background:var(--tint);display:grid;place-items:center;color:var(--heron)}
.viz .ship .flow{height:2px;background:var(--crease);position:relative;overflow:hidden;border-radius:1px}
.viz .ship .route.on .flow::after{content:"";position:absolute;inset:0;width:35%;background:var(--facet);animation:flow 1.1s linear infinite}
@keyframes flow{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.viz .cap{position:absolute;left:16px;bottom:12px;font:500 .72rem/1 var(--f-mono);color:var(--ink-3)}
.ship-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ship-tabs button{font:600 .85rem/1 var(--f-body);color:var(--ink-2);background:var(--tint);border:1px solid var(--crease);border-radius:999px;padding:10px 14px;cursor:pointer;min-height:40px;transition:background-color .2s,color .2s}
.ship-tabs button[aria-pressed="true"]{background:var(--heron);color:var(--on-heron);border-color:var(--heron)}
.why-git{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.why-git .card{padding:22px}
.why-git .big{font:800 2.4rem/1 var(--f-display);color:var(--heron);letter-spacing:-.03em}
@media (max-width:980px){.how{grid-template-columns:minmax(0,1fr)}.how-scene{position:sticky;top:70px;z-index:3}.how-steps li{min-height:auto;padding-block:24px}.viz{aspect-ratio:16/10}}

/* out of the box illos */
.illo{height:130px;border-radius:14px;background:color-mix(in srgb,var(--paper) 70%,transparent);border:1px solid var(--crease);position:relative;overflow:hidden;margin-bottom:4px}
.illo svg{width:100%;height:100%;display:block}
.draw{stroke-dasharray:240;stroke-dashoffset:240}
.run .draw{animation:draw 2.8s var(--ease-out) infinite}
@keyframes draw{0%{stroke-dashoffset:240}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
.illo .flip{font:700 1.6rem/1 var(--f-display);color:var(--heron);display:grid;place-items:center;height:100%;gap:6px;perspective:400px}
.illo .flip small{font:500 .78rem/1 var(--f-mono);color:var(--ink-3)}
.illo .sizes{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:100%;padding-bottom:16px}
.illo .sizes i{display:grid;place-items:end center;background:linear-gradient(160deg,var(--mist),var(--heron));border-radius:6px;font:600 .62rem/1.6 var(--f-mono);color:#fff;font-style:normal;transform-origin:50% 100%}
.run .sizes i{animation:grow 3s var(--ease-out) infinite}.run .sizes i:nth-child(2){animation-delay:.2s}.run .sizes i:nth-child(3){animation-delay:.4s}
@keyframes grow{0%{transform:scale(.2);opacity:0}25%,80%{transform:none;opacity:1}100%{opacity:0}}
.illo .redir{display:grid;gap:10px;align-content:center;height:100%;padding:0 18px;font:500 .78rem/1 var(--f-mono)}
.illo .redir div{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.illo .redir b{font-weight:700;padding:3px 6px;border-radius:5px}
.illo .redir .r1 b{background:var(--tint);color:var(--heron)}.illo .redir .r2 b{background:var(--soon-bg);color:var(--soon)}
.illo .redir s{color:var(--ink-3)}
.run .redir div{animation:slide 3.2s var(--ease-out) infinite}.run .redir .r2{animation-delay:.5s}
@keyframes slide{0%{opacity:0;transform:translateX(-12px)}20%,85%{opacity:1;transform:none}100%{opacity:0}}
.illo .llm{font:500 .74rem/1.65 var(--f-mono);color:var(--ink-2);padding:12px 16px;white-space:pre;overflow:hidden}
.illo .llm b{color:var(--heron)}
.illo .e404{display:grid;place-items:center;height:100%;font:800 2.8rem/1 var(--f-display);color:var(--heron);letter-spacing:-.04em}
.run .e404 span{display:inline-block;animation:bob 2.4s var(--ease-io) infinite}.run .e404 span:nth-child(2){animation-delay:.15s}.run .e404 span:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:none}30%{transform:translateY(-10px)}}
.crease-ico svg{width:44px;height:44px;overflow:visible}
.crease-ico .flap{transform-origin:22px 22px;transition:transform 1s var(--ease-io) .3s}
.card:hover .crease-ico .flap{transform:rotate(180deg)}

/* themes */
.theme-card{padding:0}
.theme-card .shot{aspect-ratio:16/10;max-width:100%;border-bottom:1px solid var(--crease);background:var(--tint);position:relative;overflow:hidden}
.theme-card .body{padding:20px 22px 22px;display:grid;gap:8px}
.mini{position:absolute;inset:10% 8% 0;background:var(--paper);border-radius:8px 8px 0 0;box-shadow:var(--shadow);padding:10px 12px;display:grid;gap:8px;align-content:start;transition:transform .7s var(--ease-out)}
.theme-card:hover .mini{transform:translateY(-8%) scale(1.03)}
.mini i{display:block;height:6px;border-radius:3px;background:var(--crease)}
.mini .bar{display:flex;gap:6px;align-items:center}.mini .bar i{width:18%}
.mini .t{height:12px;width:70%;background:var(--ink)}.mini .t2{height:12px;width:45%}
.mini .row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mini .row i{height:28px;border-radius:5px}

/* AI */
.roles{width:100%;max-width:520px}
.roles .ln{stroke:var(--crease);stroke-width:2;fill:none}
.roles .lit{stroke:var(--facet);stroke-width:2.5;fill:none;stroke-dasharray:8 200;animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-208}}
.roles rect{fill:var(--sheet);stroke:var(--crease)}
.roles text{font:600 13px var(--f-body);fill:var(--ink)}
.roles .main rect{fill:var(--heron);stroke:var(--heron)}.roles .main text{fill:var(--on-heron)}

/* ecosystem + telegram */
.eco-map{background:var(--sheet);border:1px solid var(--crease);border-radius:var(--r-lg);padding:8px;overflow:hidden}
.eco-map svg{width:100%;height:auto;display:block}
.eco-map .edge{stroke:var(--crease);stroke-width:2;fill:none}
.eco-map .node rect{fill:var(--paper);stroke:var(--crease);stroke-width:1.2}
.eco-map .node text{font:600 14px var(--f-display);fill:var(--ink)}
.eco-map .node .sub{font:500 11px var(--f-mono);fill:var(--ink-3)}
.eco-map .core rect{fill:var(--heron);stroke:var(--heron)}.eco-map .core text{fill:var(--on-heron)}.eco-map .core .sub{fill:var(--on-heron);opacity:.75}
.eco-map .pulse{fill:var(--facet)}
.eco-map .soon rect{stroke-dasharray:5 4}
.tgw{grid-area:tg;--tg-bg:#C9DBEA;--tg-pat:rgba(255,255,255,.35);--tg-head:#FFFFFF;--tg-text:#0F1419;--tg-meta:#8C99A6;--tg-bubble:#FFFFFF;--tg-link:#2481CC;--tg-key:rgba(36,64,92,.32);--tg-input:#FFFFFF;
  border-radius:22px;overflow:hidden;border:1px solid var(--crease);box-shadow:var(--shadow);display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:500px;max-width:440px;width:100%;justify-self:center;position:relative;font:400 15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,var(--f-body),sans-serif;color:var(--tg-text)}
.is-dark .tgw{grid-area:tg;--tg-bg:#0E1621;--tg-pat:rgba(255,255,255,.035);--tg-head:#17212B;--tg-text:#F5F7FA;--tg-meta:#6D7F8F;--tg-bubble:#182533;--tg-link:#6AB2F2;--tg-key:rgba(24,37,51,.85);--tg-input:#17212B}
.tg-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--tg-head);border-bottom:1px solid rgba(0,0,0,.06);z-index:2}
.tg-head .back{color:var(--tg-link);display:flex}
.tg-ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(160deg,#2a6fb3,#024379);display:grid;place-items:center;flex:none}
.tg-ava svg{height:24px;width:auto}
.tg-head b{display:block;font-weight:600;font-size:15px}.tg-head small{display:block;color:var(--tg-meta);font-size:13px}
.tg-head .dots{margin-left:auto;color:var(--tg-meta);display:flex}
.tg-chat{background:var(--tg-bg);background-image:radial-gradient(circle at 20% 30%,var(--tg-pat) 0 2px,transparent 3px),radial-gradient(circle at 70% 80%,var(--tg-pat) 0 1.5px,transparent 2.5px),radial-gradient(circle at 45% 60%,var(--tg-pat) 0 1px,transparent 2px);background-size:56px 56px,72px 72px,40px 40px;padding:12px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden}
.tg-day{align-self:center;font-size:13px;font-weight:500;color:#fff;background:rgba(36,64,92,.35);padding:3px 10px;border-radius:12px;margin-bottom:4px}
.tg-msg{align-self:flex-start;max-width:86%;background:var(--tg-bubble);border-radius:16px 16px 16px 6px;padding:7px 10px 6px 11px;box-shadow:0 1px 1px rgba(0,0,0,.08);animation:pop .35s var(--ease-out) both;white-space:pre-line;overflow-wrap:anywhere}
.tg-msg b{font-weight:600}.tg-msg code{font:500 12.5px/1.4 var(--f-mono);color:var(--tg-link)}
.tg-msg .meta{float:right;margin:6px 0 -3px 10px;font-size:12px;color:var(--tg-meta)}
.tg-keys{align-self:flex-start;width:86%;display:grid;grid-template-columns:1fr 1fr;gap:4px;animation:pop .35s var(--ease-out) both}
.tg-keys button{font-size:14px;font-weight:500;line-height:1;font-family:inherit;color:#fff;background:var(--tg-key);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:0;border-radius:10px;padding:11px 8px;min-height:40px;cursor:pointer;transition:transform .16s var(--ease-out),filter .2s}
.tg-keys button:hover{filter:brightness(1.12)}.tg-keys button:active{transform:scale(.97)}
.tg-typing{align-self:flex-start;background:var(--tg-bubble);border-radius:16px 16px 16px 6px;padding:11px 14px;display:flex;gap:4px}
.tg-typing i{width:7px;height:7px;border-radius:50%;background:var(--tg-meta);animation:dots 1s infinite}.tg-typing i:nth-child(2){animation-delay:.15s}.tg-typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{50%{transform:translateY(-4px);opacity:.4}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.tg-input{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--tg-input);border-top:1px solid rgba(0,0,0,.06)}
.tg-input .menu{display:inline-flex;align-items:center;gap:6px;background:var(--tg-link);color:#fff;border-radius:16px;padding:6px 12px;font-weight:500;font-size:14px}
.tg-input span.ph{color:var(--tg-meta);flex:1}
.tg-toast{position:absolute;left:50%;top:64px;transform:translate(-50%,-8px);background:rgba(20,28,36,.88);color:#fff;font-size:14px;padding:9px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease-out);z-index:3;white-space:nowrap}
.tg-toast.on{opacity:1;transform:translate(-50%,0)}

/* cookie */
.cookie{position:fixed;z-index:85;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));width:min(420px,calc(100% - 32px));padding:18px;border-radius:var(--r-lg);background:var(--sheet);color:var(--ink-2);border:1px solid var(--crease);box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:.92rem;line-height:1.5;transform:translateY(24px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.cookie.on{opacity:1;transform:none;pointer-events:auto}.cookie b{color:var(--ink)}.cookie a{color:var(--heron)}
.cookie-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.cookie .btn{min-height:40px;padding:8px 14px;font-size:.88rem}
@media (max-width:520px){.cookie{bottom:calc(64px + env(safe-area-inset-bottom,0px))}}

/* compare */
.tbl-wrap{overflow-x:auto;border:1px solid var(--crease);border-radius:var(--r-lg);background:var(--sheet)}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:.98rem}
th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--crease);vertical-align:top}
thead th{font:600 .88rem/1.2 var(--f-display);color:var(--ink-2);background:var(--tint)}
thead th:nth-child(2){color:var(--heron)}
tbody tr:last-child td{border-bottom:0}
td{color:var(--ink-3)}td:first-child{color:var(--ink)}td:nth-child(2){color:var(--ink-2)}td.w{color:var(--ink);font-weight:600}td.w::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:2px}td:nth-child(2).w{color:var(--heron)}
.tbl-note{margin-top:12px;font-size:.88rem;color:var(--ink-3)}.tbl-note .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px}
tbody tr{--k:clamp(0,calc(var(--e,1) * 2.2 - var(--ri,0) * .14),1);opacity:calc(.2 + .8 * var(--k));transform:translateX(calc((1 - var(--k)) * -40px))}

/* cta */
.cta{background:var(--heron);color:var(--on-heron);border-radius:28px;padding:clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px;align-items:center;position:relative;overflow:hidden;
  transform:scale(calc(.92 + .08 * var(--e,1)));border-radius:calc(60px - 32px * var(--e,1))}
@media (max-width:860px){.cta{grid-template-columns:minmax(0,1fr)}}
.cta h2{color:var(--on-heron);font-size:var(--s-2)}
.cta p{color:color-mix(in srgb,var(--on-heron) 82%,transparent);max-width:60ch;margin-top:12px}
.cta .term{margin-top:20px}
.cta .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cta .btn-primary{background:var(--on-heron);color:var(--heron)}.cta .btn-primary:hover{background:var(--tint)}
.cta .btn-secondary{background:transparent;color:var(--on-heron);border-color:color-mix(in srgb,var(--on-heron) 45%,transparent)}
.cta-mark{width:100%;max-width:280px;justify-self:center}
.cta-mark polygon{fill:var(--on-heron);transform-box:fill-box;transform-origin:center;--q:clamp(0,calc(var(--e,1) * 1.7 - var(--i) * .07),1);opacity:calc(var(--q) * (1 - var(--dim,0) * .28));transform:translate(calc((1 - var(--q)) * var(--x)),calc((1 - var(--q)) * var(--y))) rotate(calc((1 - var(--q)) * var(--r))) scale(calc(.4 + .6 * var(--q)))}
.cta-mark polygon:nth-child(even){--dim:1}

/* footer */
.foot{border-top:1px solid var(--crease);background:color-mix(in srgb,var(--sheet) 94%,transparent)}
.foot .wrap{padding-block:52px 30px;display:grid;gap:36px}
.foot-cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.foot h4{font:600 .82rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:var(--ink-2);text-decoration:none}.foot a:hover{color:var(--heron)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;border-top:1px solid var(--crease);padding-top:22px;color:var(--ink-3);font-size:.88rem}
.ft{display:inline-flex;align-items:center;padding:10px 16px;border-radius:14px;background:#0E0E12;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 10px 24px -12px rgba(0,0,0,.5);transition:transform .25s var(--ease-out)}.ft:hover{transform:translateY(-2px)}
.ft-logo{display:block;width:96px;height:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .card,.head h2 .w,tbody tr,.cta,.cta-mark polygon{--e:1!important}
}

/* ===== theme additions ===== */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--heron);color:var(--on-heron);padding:10px 14px;border-radius:10px}.skip:focus{left:12px}
.muted{color:var(--ink-3)}
.lede p+p{margin-top:.8em}
.head .lede{font-size:1.1rem}

/* motion per theme: paper sheets land in light, cards light up at night */
html:not(.is-dark) .card{transform:translateY(calc((1 - var(--k)) * 110px)) rotate(calc((1 - var(--k)) * var(--rot,-5deg))) scale(calc(.93 + .07 * var(--k)));box-shadow:0 1px 1px rgba(10,27,45,.04),0 calc(2px + 18px * var(--k)) calc(6px + 30px * var(--k)) -10px rgba(10,27,45,.16)}
.is-dark .card{transform:translateY(calc((1 - var(--k)) * 60px));filter:brightness(calc(.25 + .75 * var(--k)))}
.is-dark .card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--cx,50%) var(--cy,0%),rgba(170,210,250,.14),transparent 60%);pointer-events:none}
.card-text{color:var(--ink-2);font-size:1rem}.card-text p+p{margin-top:.6em}
.card-text code,.x-panel code,.step-text code,.prose code,.lede code,dd code{font-size:.86em;background:var(--tint);color:var(--heron);padding:.12em .4em;border-radius:5px}
.links{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.92rem}.links a{font-weight:600;display:inline-flex;align-items:center;gap:5px}
.ext{opacity:.6}

/* expandable cards: the open card takes the whole row and its details split in columns */
.xgrid{grid-auto-flow:row dense}
.xcard{cursor:default}
.x-toggle{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:4px;font:600 .9rem/1 var(--f-body);color:var(--heron);background:var(--tint);border:1px solid var(--crease);border-radius:999px;padding:9px 14px;min-height:40px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.x-toggle:hover{border-color:var(--facet)}
.x-toggle svg{transition:transform .45s var(--ease-out)}
.xcard.open .x-toggle svg{transform:rotate(135deg)}
.x-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.x-inner{overflow:hidden;min-height:0}
.xcard.open .x-panel{grid-template-rows:1fr}
.xcard.open{grid-column:1/-1;border-color:color-mix(in srgb,var(--facet) 55%,var(--crease))}
.x-panel dl{margin:8px 0 0;display:grid;gap:14px 28px;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(240px,22vw,420px)),1fr));padding-top:14px;border-top:1px dashed var(--crease)}
.x-panel dl>div{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s var(--ease-out)}
.xcard.open .x-panel dl>div{opacity:1;transform:none}
.xcard.open .x-panel dl>div:nth-child(2){transition-delay:.06s}.xcard.open .x-panel dl>div:nth-child(3){transition-delay:.12s}.xcard.open .x-panel dl>div:nth-child(4){transition-delay:.18s}.xcard.open .x-panel dl>div:nth-child(5){transition-delay:.24s}
dt{font:700 .78rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--facet);margin-bottom:6px}
dd{margin:0;color:var(--ink-2);font-size:.98rem}
dd pre,.prose pre{background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:12px 14px;font-size:.84rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0}
dd pre code,.prose pre code{background:none;color:inherit;padding:0}
dd a,.card-text a{font-weight:600}

/* how-it-works additions */
.step-text{color:var(--ink-2);max-width:52ch}.step-text p+p{margin-top:.6em}
.viz .tree{font-size:.88rem;line-height:1.85;margin-left:6%}
.viz .tree em{font-style:normal;color:var(--ink-3);font-size:.78rem;margin-left:8px}
.viz .cfg{width:min(94%,480px)}
.cfg-form{padding:14px;display:grid;gap:8px}
.cfg-form .f{display:grid;grid-template-columns:minmax(110px,34%) minmax(0,1fr);gap:8px;align-items:center;font-size:.78rem;font-weight:600;color:var(--ink-2)}
.cfg-form em{font-style:normal;display:flex;align-items:center;gap:6px;position:relative}
.cfg-form .in{border:1px solid var(--crease);border-radius:7px;padding:6px 10px;font:500 .8rem/1.2 var(--f-mono);color:var(--ink);background:var(--sheet);min-height:30px;overflow:hidden;white-space:nowrap}
.cfg-form .row{display:flex;gap:5px;flex-wrap:wrap}
.cfg-form .chip{font:500 .7rem/1 var(--f-mono);padding:5px 8px;border-radius:999px;border:1px solid var(--crease);color:var(--ink-2)}
.cfg-form .chip.on{background:var(--heron);color:var(--on-heron);border-color:var(--heron)}
.cfg-form .saved{display:flex;align-items:center;gap:6px;justify-self:end;font:600 .74rem/1 var(--f-mono);color:var(--ok);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.viz .on .cfg-form .saved{opacity:1;transform:none;transition-delay:3.4s}
.hint span{width:min(220px,50vw)}
.viz .browser{position:relative}
.edit-cursor{position:absolute;left:30%;top:46%;width:2px;height:16px;background:var(--heron);animation:blink 1s steps(1) infinite}
.viz .on .browser .pg .h{animation:retitle 4s var(--ease-out) infinite}
@keyframes retitle{0%,40%{width:70%}55%,100%{width:52%}}

/* page hero for inner pages */
.page-hero{position:relative;overflow:clip;isolation:isolate}
.page-hero .wrap{padding-block:clamp(48px,7vw,120px) clamp(28px,4vw,64px);display:grid;gap:18px;justify-items:start}
.page-hero h1{font-size:var(--s-1);font-weight:800;letter-spacing:-.04em;max-width:22ch}
.page-hero h1 em{font-style:normal;color:var(--heron)}
.page-hero h1 .w{display:inline-block;animation:wordIn .9s var(--ease-out) both;animation-delay:calc(var(--wi)*70ms + .1s)}
.page-hero .lede{max-width:64ch;font-size:1.18rem}
.hero-fold{position:absolute;right:max(var(--gutter),4vw);top:50%;height:min(80%,420px);width:auto;transform:translateY(-50%);z-index:-1;opacity:.9}
.hero-fold polygon{fill:var(--heron);transform-box:fill-box;transform-origin:center;animation:fold 1.3s var(--ease-out) both;animation-delay:calc(var(--i)*80ms + .2s)}
.hero-fold polygon:nth-child(even){fill:var(--facet);opacity:.75}
@keyframes fold{from{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.4)}}
@media (max-width:900px){.hero-fold{opacity:.12;right:-10%}}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font:500 .82rem/1 var(--f-mono);color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}.crumbs a{color:var(--ink-3);text-decoration:none}.crumbs a:hover{color:var(--heron)}
.nf .e404.big{font:800 clamp(5rem,3rem + 10vw,12rem)/1 var(--f-display);color:var(--heron);letter-spacing:-.05em;margin:0}
.nf .e404 span{display:inline-block;animation:bob 2.4s var(--ease-io) infinite}.nf .e404 span:nth-child(2){animation-delay:.15s}.nf .e404 span:nth-child(3){animation-delay:.3s}

/* generic blocks */
.prose{max-width:72ch;color:var(--ink-2);font-size:1.06rem}.prose p+p,.prose ul,.prose ol{margin-top:.9em}.prose h3{margin-top:1.4em;font-size:1.3rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}.ticks li{padding-left:26px;position:relative;color:var(--ink-2)}.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.steps-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.2vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(300px,26vw,520px)),1fr));counter-reset:s}
.steps-list li{grid-template-columns:auto 1fr;display:grid;gap:16px;align-items:start}
.steps-list .n{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:700 1.05rem/1 var(--f-display);background:var(--heron);color:var(--on-heron)}
.steps-list h3{margin-bottom:8px}
.faq{display:grid;gap:12px;max-width:min(100%,110ch)}
.faq details{padding:0}.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px}.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.15rem}.faq summary svg{flex:none;transition:transform .4s var(--ease-out);color:var(--heron)}.faq details[open] summary svg{transform:rotate(135deg)}
.faq .card-text{padding:0 24px 22px}
.facts{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));margin:0}
.facts dd{font:700 1.3rem/1.2 var(--f-display);color:var(--ink)}
.callout{border-left:4px solid var(--heron)}
.more-link{margin-top:8px}

/* AI section */
.ai-wrap{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));align-items:center}
.ai-copy{display:grid;gap:24px}
.ai-guides{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.ai-guide{text-decoration:none;display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:18px 20px;align-items:center}
.ai-guide b{font:650 1.08rem/1.2 var(--f-display);color:var(--ink)}.ai-guide span{grid-column:1;color:var(--ink-2);font-size:.92rem}.ai-guide svg{grid-row:1/3;grid-column:2;color:var(--heron);transition:transform .3s var(--ease-out)}.ai-guide:hover svg{transform:translateX(4px)}
.ai-side{display:grid;gap:18px}

/* themes */
.theme-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(300px,24vw,560px)),1fr))}
.theme-card .shot picture,.theme-card .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease-out)}
.theme-card:hover .shot img{transform:scale(1.04) translateY(-2%)}
.row-badges{display:flex;gap:6px;flex-wrap:wrap}
.theme-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}

/* ecosystem */
.eco{display:grid;gap:clamp(16px,1.6vw,28px);grid-template-columns:minmax(0,6fr) minmax(0,4fr) minmax(300px,4fr);grid-template-areas:"map detail tg";align-items:start}
@media (max-width:1380px){.eco{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"map map" "detail tg"}}
@media (max-width:860px){.eco{grid-template-columns:minmax(0,1fr);grid-template-areas:"map" "detail" "tg"}}
.eco-map{grid-area:map;padding:10px}
.eco-map svg{width:100%;height:auto;display:block}
.eco-map .edge{stroke:var(--crease);stroke-width:2;fill:none;transition:stroke .4s,stroke-width .4s}
.eco-map .edge.lit{stroke:var(--facet);stroke-width:3}
.eco-map .node{cursor:pointer;outline:none}
.eco-map .node rect{fill:var(--paper);stroke:var(--crease);stroke-width:1.2;transition:fill .35s,stroke .35s,transform .45s var(--ease-out);transform-box:fill-box;transform-origin:center}
.eco-map .node text{font:600 15px var(--f-display);fill:var(--ink);pointer-events:none}
.eco-map .node .sub{font:500 11px var(--f-mono);fill:var(--ink-3)}
.eco-map .node:hover rect,.eco-map .node:focus-visible rect{stroke:var(--facet)}
.eco-map .node.on rect{fill:var(--heron);stroke:var(--heron);transform:scale(1.08)}
.eco-map .node.on text{fill:var(--on-heron)}.eco-map .node.on .sub{fill:var(--on-heron);opacity:.8}
.eco-map .node.near rect{stroke:var(--facet);stroke-width:2}
.eco-map .pulse{fill:var(--facet);opacity:.7}
.eco-hint{font:500 .8rem/1.3 var(--f-mono);color:var(--ink-3);padding:4px 10px 6px}
.eco-detail{grid-area:detail;min-width:0}
.eco-item{animation:pop .45s var(--ease-out) both}
.eco-item dl{display:grid;gap:12px;margin:6px 0 0;padding-top:12px;border-top:1px dashed var(--crease)}
.tgw{max-width:none}
.tg-keys.three{grid-template-columns:1fr 1fr 1fr}

/* mobile menu */
@media (max-width:960px){
  .nav{position:fixed;inset:66px 0 auto 0;display:grid;gap:4px;padding:14px var(--gutter) 22px;background:var(--paper);border-bottom:1px solid var(--crease);box-shadow:var(--shadow);transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease-out)}
  .nav.open{opacity:1;transform:none;pointer-events:auto}
  .nav a{font-size:1.05rem;padding:12px 10px}
  .nav .nav-lang{display:flex;padding:10px}
}
.nav a[aria-current="page"]{color:var(--heron)}
.nav-lang{margin-left:8px}.nav-lang .sep{opacity:.5}

/* big screens: more room for type and grids */
@media (min-width:1900px){.how-steps li{min-height:clamp(300px,40vh,460px)}.tgw{height:560px}}
.pre-copy{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:5px;font:500 .7rem/1 var(--f-mono);color:var(--code-ink);background:rgba(255,255,255,.08);border:0;border-radius:7px;padding:6px 8px;cursor:pointer;opacity:.7}
.pre-copy:hover{opacity:1}
dd pre,.prose pre{padding-right:84px}
.nav-lang{display:flex;align-items:center;gap:6px;margin-left:10px;font:500 .85rem/1 var(--f-mono)}
.nav .nav-lang a{padding:6px 4px;font-size:.85rem}
.nav-lang a[aria-current]{color:var(--ink)}.nav-lang span[aria-disabled]{opacity:.4}
.theme-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(280px,20vw,520px)),1fr))}
.eco-item[hidden]{display:none!important}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--col)),1fr))}
.theme-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(280px,20vw,520px)),1fr))}
@media (max-width:440px){.term pre{font-size:.78rem;padding:10px 14px 14px}.hero .term pre{overflow-wrap:normal;word-break:normal;white-space:pre;overflow-x:auto}}
.eco-hint{font-size:.78rem}
.card-text code,.step-text code,dd code{overflow-wrap:anywhere;word-break:break-word}
.xcard .ticks{margin-top:4px}

/* performance: sections far from view skip rendering; heavy effects pause while scrolling */
section.block{contain:layout paint}
section.block:not(#how):not(.eco-sec):not(#cta):not(.warm){content-visibility:auto;contain-intrinsic-size:auto 900px}
html:not(.is-dark) .card{box-shadow:0 1px 1px rgba(10,27,45,.04),0 18px 36px -12px rgba(10,27,45,calc(.16 * var(--k)))}
.head h2 .w{will-change:auto}

/* ===== hero story: loader → fold → wave → the site with its checks ===== */
.hero .scene canvas{transition:opacity .7s var(--ease-out),filter .7s}
.scene.ph-mock canvas{opacity:0;filter:blur(6px)}
.loader{position:absolute;left:76%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:10px;padding:26px 30px;border-radius:18px;background:var(--sheet);border:1px solid var(--crease);box-shadow:var(--shadow);font:600 1rem/1.2 var(--f-display);color:var(--ink);opacity:0;pointer-events:none;transition:opacity .5s,transform .8s var(--ease-out)}
.loader small{font:500 .75rem/1 var(--f-mono);color:var(--ink-3)}
.scene.loading .loader{opacity:1}
.scene.ready .loader{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--tint);border-top-color:var(--heron);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wave{position:absolute;left:76%;top:52%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--facet) 60%,transparent),0 0 60px 20px color-mix(in srgb,var(--glow) 70%,transparent) inset}
.scene.ph-wave .wave{animation:wave 1.3s var(--ease-out) forwards}
@keyframes wave{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(28)}}
.site-mock{position:absolute;right:max(var(--gutter),3vw);top:50%;width:min(44vw,820px);display:grid;pointer-events:none;opacity:0;transform:translateY(-46%) scale(.94);transition:opacity .6s var(--ease-out),transform .9s var(--ease-out)}
.scene.ph-mock .site-mock{opacity:1;transform:translateY(-50%)}
.mock-browser{aspect-ratio:16/11;background:var(--paper);border:1px solid var(--crease);border-radius:16px;box-shadow:0 30px 70px -30px rgba(2,30,60,.45);overflow:hidden;display:grid;grid-template-rows:auto auto 1fr;min-height:0}
.mock-bar{display:flex;gap:6px;align-items:center;padding:9px 12px;background:var(--tint)}.mock-bar i{width:9px;height:9px;border-radius:50%;background:var(--crease)}
.mock-bar span{margin-left:10px;font:500 .72rem/1 var(--f-mono);color:var(--ink-3);background:var(--sheet);border-radius:6px;padding:6px 12px}
.mock-head{display:flex;align-items:center;gap:18px;padding:14px 18px;border-bottom:1px solid var(--crease);font:600 .82rem/1 var(--f-body);color:var(--ink-2)}
.mock-logo{display:flex;align-items:center;gap:7px;font:800 .95rem/1 var(--f-display);color:var(--heron)}.mock-logo svg{height:22px;width:auto}
.mock-head nav{display:flex;gap:14px;margin-left:auto}
.mock-cta{background:var(--heron);color:var(--on-heron);padding:8px 12px;border-radius:9px;font-size:.78rem}
.mock-body{padding:22px 18px;display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-content:start}
.mock-hero{display:grid;gap:9px;align-content:start}
.mock-hero i{display:block;height:9px;border-radius:5px;background:var(--crease)}
.mock-hero .h1{height:18px;background:var(--ink);width:92%}.mock-hero .h1.short{width:60%;background:var(--heron)}.mock-hero .p:nth-of-type(4){width:80%}
.mock-btn{display:block;width:110px;height:30px;border-radius:8px;background:var(--heron);margin-top:6px}
.mock-pic{border-radius:12px;background:linear-gradient(150deg,var(--glow),var(--mist));min-height:110px}
.mock-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mock-cards i{height:64px;border-radius:10px;background:var(--tint);border:1px solid var(--crease)}
.scene.ph-mock .mock-head,.scene.ph-mock .mock-body>*{animation:build .7s var(--ease-out) both}
.scene.ph-mock .mock-head{animation-delay:.15s}.scene.ph-mock .mock-hero{animation-delay:.3s}.scene.ph-mock .mock-pic{animation-delay:.45s}.scene.ph-mock .mock-cards{animation-delay:.6s}
.mock-checks{position:absolute;right:-18px;bottom:-30px;width:min(280px,60%);list-style:none;margin:0;padding:12px 14px;display:grid;gap:5px;background:var(--sheet);border:1px solid var(--crease);border-radius:14px;box-shadow:var(--shadow);font:500 .8rem/1.2 var(--f-body);color:var(--ink-2)}
.mock-checks li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;opacity:.3;transition:opacity .3s}
.mock-checks li.ok{opacity:1}
.mock-checks li i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--crease);display:grid;place-items:center;transition:background-color .25s,border-color .25s}
.mock-checks li.ok i{background:var(--ok);border-color:var(--ok)}
.mock-checks li.ok i::after{content:"";width:7px;height:4px;border-left:2px solid var(--on-heron);border-bottom:2px solid var(--on-heron);transform:rotate(-45deg) translate(1px,-1px)}
.mock-checks em{font:700 .7rem/1 var(--f-mono);font-style:normal;color:var(--ok);opacity:0;transition:opacity .3s}
.mock-checks li.ok em{opacity:1}
@media (max-width:860px){.loader,.wave{left:50%}.site-mock{left:5%;right:5%;width:auto;top:auto;bottom:40px;transform:none}.scene.ph-mock .site-mock{transform:none}.mock-head nav{display:none}.mock-checks{left:auto;right:0;bottom:-30px;width:70%}}

/* ===== tiles: click to open, the rest become tabs beside it ===== */
[data-x]{cursor:pointer;outline:none}
[data-x]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--facet) 50%,transparent)}
.xcard h3{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.x-ico{flex:none;margin-top:3px;color:var(--heron);transition:transform .45s var(--ease-out)}
.xcard.open .x-ico{transform:rotate(135deg)}
.x-toggle{display:none}
.x-tail{margin-top:16px}
.xgrid.has-open{grid-template-columns:minmax(220px,24%) minmax(0,1fr);grid-auto-rows:min-content;align-items:start}
.xgrid.has-open .xcard{grid-column:1;padding:14px 16px;gap:4px;transform:none!important;opacity:1!important;filter:none!important}
.xgrid.has-open .xcard:not(.open) .card-text,.xgrid.has-open .xcard:not(.open) .illo,.xgrid.has-open .xcard:not(.open) .crease-ico,.xgrid.has-open .xcard:not(.open) .badge{display:none}
.xgrid.has-open .xcard:not(.open) h3{font-size:1rem}
.xgrid.has-open .xcard:not(.open):hover{border-color:var(--facet)}
.xgrid.has-open .xcard.open{grid-column:2;grid-row:1/span 40;padding:clamp(22px,2.4vw,40px);gap:14px}
.xgrid.has-open .xcard.open h3{font-size:clamp(1.4rem,1rem + 1vw,2rem)}
.xgrid .xcard.open{grid-column:auto}
@media (max-width:860px){
  .xgrid.has-open{display:flex;flex-wrap:wrap;gap:8px}
  .xgrid.has-open .xcard:not(.open){flex:0 1 auto;max-width:100%;min-width:0;padding:10px 14px;border-radius:999px}
  .xgrid.has-open .xcard:not(.open) h3{font-size:.9rem}.xgrid.has-open .xcard:not(.open) .x-ico{display:none}
  .xgrid.has-open .xcard.open{flex:1 1 100%;order:2}
}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* ===== tabs without script + flow diagrams ===== */
.tab-radio{position:absolute;opacity:0;pointer-events:none}
.tab-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tab-list label{font:600 1rem/1 var(--f-body);padding:13px 20px;border-radius:999px;border:1px solid var(--crease);background:var(--sheet);color:var(--ink-2);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .2s var(--ease-out)}
.tab-list label:hover{border-color:var(--facet);transform:translateY(-1px)}
.tab-panel{display:none;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(18px,2.4vw,44px);align-items:start}
.tab-radio:nth-of-type(1):checked~.tab-panels>.tab-panel:nth-child(1),.tab-radio:nth-of-type(2):checked~.tab-panels>.tab-panel:nth-child(2),.tab-radio:nth-of-type(3):checked~.tab-panels>.tab-panel:nth-child(3),.tab-radio:nth-of-type(4):checked~.tab-panels>.tab-panel:nth-child(4){display:grid;animation:pop .5s var(--ease-out) both}
.tab-radio:nth-of-type(1):checked~.tab-list label:nth-child(1),.tab-radio:nth-of-type(2):checked~.tab-list label:nth-child(2),.tab-radio:nth-of-type(3):checked~.tab-list label:nth-child(3),.tab-radio:nth-of-type(4):checked~.tab-list label:nth-child(4){background:var(--heron);color:var(--on-heron);border-color:var(--heron)}
.tab-radio:focus-visible~.tab-list{outline:2px solid var(--facet);outline-offset:6px;border-radius:999px}
.tab-text{color:var(--ink-2);font-size:1.05rem;display:grid;gap:14px;max-width:72ch}
.tab-text ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:st}
.tab-text li{position:relative;padding-left:42px;counter-increment:st}
.tab-text li::before{content:counter(st);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 .85rem/1 var(--f-display);background:var(--tint);color:var(--heron)}
.tab-text li strong{color:var(--ink)}
.tab-text code{font-size:.86em;background:var(--tint);color:var(--heron);padding:.12em .4em;border-radius:5px;overflow-wrap:anywhere}
.tab-text pre{background:var(--code-bg);color:var(--code-ink);border-radius:12px;padding:14px 90px 14px 16px;font-size:.86rem;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.tab-text pre code{background:none;color:inherit;padding:0}
.tab-text p:last-child a{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;background:var(--heron);color:var(--on-heron);text-decoration:none;font-weight:600}
.tab-text p:last-child a:hover{background:var(--facet)}
.flow-card{padding:clamp(18px,2vw,30px);position:sticky;top:90px}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.flow li{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:14px;padding:10px 0;position:relative;opacity:0;transform:translateX(14px);animation:flowIn .5s var(--ease-out) forwards;animation-delay:calc(var(--i) * .32s + .15s)}
.flow li:not(:last-child)::after{content:"";position:absolute;left:19px;top:48px;bottom:-8px;width:2px;background:linear-gradient(var(--crease),var(--crease)) no-repeat;background-size:2px 100%}
.flow li:not(:last-child)::before{content:"";position:absolute;left:16px;top:48px;width:8px;height:8px;border-radius:50%;background:var(--facet);z-index:1;opacity:0;animation:drop 1.6s ease-in infinite;animation-delay:calc(var(--i) * .32s + .8s)}
@keyframes flowIn{to{opacity:1;transform:none}}
@keyframes drop{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(30px)}}
.flow .ic{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;position:relative;z-index:2}
.flow .you .ic{background:var(--soon-bg);color:var(--soon)}
.flow .auto .ic{background:var(--ok-bg);color:var(--ok)}
.flow .auto .ic svg{animation:spin 6s linear infinite}
.flow .you .ic svg{animation:tap 2.4s var(--ease-io) infinite}
@keyframes tap{0%,70%,100%{transform:none}80%{transform:translateY(2px) scale(.92)}}
.flow b{font:600 1rem/1.3 var(--f-display);color:var(--ink);align-self:end}
.flow small{font:500 .74rem/1.2 var(--f-mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.flow-note{margin-top:14px;padding-top:14px;border-top:1px dashed var(--crease);font-size:.86rem;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flow-note i{display:inline-block;width:12px;height:12px;border-radius:4px}.flow-note .hand{background:var(--soon)}.flow-note .gear{background:var(--ok);margin-left:8px}
.flow-note b{color:var(--ink)}
@media (max-width:900px){.tab-panel{grid-template-columns:minmax(0,1fr)}.flow-card{position:static}}

/* ===== scroll slides ===== */
.slides-sec{height:calc(var(--n) * 70vh + 30vh);overflow:visible;contain:none}
.slides-stick{position:sticky;top:66px;min-height:calc(100vh - 66px);display:flex;align-items:center}
.slides-stick>.wrap{padding-block:40px;display:grid;gap:32px;width:100%}
.slides{display:grid;grid-template-columns:minmax(220px,30%) minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:center}
.slide-dots{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.slide-dots button{width:100%;text-align:left;display:flex;gap:12px;align-items:center;font:600 1rem/1.25 var(--f-body);color:var(--ink-3);background:none;border:0;border-left:2px solid var(--crease);padding:10px 14px;cursor:pointer;transition:color .3s,border-color .3s,background-color .3s}
.slide-dots button span{font:700 .78rem/1 var(--f-mono);color:var(--ink-3)}
.slide-dots button.on{color:var(--ink);border-color:var(--heron);background:var(--tint)}
.slide-dots button.on span{color:var(--heron)}
.slide-stage{position:relative;min-height:clamp(320px,46vh,520px)}
.slide{position:absolute;inset:0;padding:clamp(24px,3vw,48px);display:grid;align-content:center;gap:14px;opacity:0;transform:translateY(40px) scale(.97);transition:opacity .55s var(--ease-out),transform .7s var(--ease-out);pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide.past{transform:translateY(-40px) scale(.97)}
.slide h3{font-size:clamp(1.6rem,1.1rem + 1.4vw,2.6rem);font-weight:750;letter-spacing:-.02em}
.slide .card-text{font-size:1.1rem;max-width:60ch}
.slide-art{position:absolute;right:clamp(20px,3vw,48px);top:clamp(20px,3vw,48px);width:84px;height:84px;border-radius:24px;display:grid;place-items:center;background:var(--tint);color:var(--heron)}
.slide-art svg{width:40px;height:40px;position:relative;z-index:1}
.slide-art .ring{position:absolute;inset:0;border-radius:inherit;border:2px solid var(--facet);opacity:0}
.slide.on .slide-art .ring{animation:ring 2.2s var(--ease-out) infinite}.slide.on .slide-art .r2{animation-delay:1.1s}
@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.slide.on .slide-art svg path{stroke-dasharray:80;stroke-dashoffset:80;animation:drawIn 1.2s var(--ease-out) forwards .2s}
@keyframes drawIn{to{stroke-dashoffset:0}}
.slide-bar{height:3px;border-radius:2px;background:var(--crease);overflow:hidden}.slide-bar i{display:block;height:100%;width:0;background:var(--heron);transition:width .3s}
@media (max-width:860px){.slides{grid-template-columns:1fr}.slide-dots{display:flex;overflow-x:auto;gap:6px}.slide-dots button{white-space:nowrap;border-left:0;border-bottom:2px solid var(--crease)}.slide-dots button.on{border-color:var(--heron)}.slide-art{width:60px;height:60px}}
@media (prefers-reduced-motion:reduce){.slides-sec{height:auto}.slides-stick{position:static}.slide{position:relative;opacity:1;transform:none;margin-bottom:12px}.slide-stage{min-height:0}}
.step-text pre{background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:10px 84px 10px 14px;font-size:.84rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:12px}
.step-text pre code{background:none;color:inherit;padding:0}
.how-steps .links a{font-weight:600}
/* balanced tile rows: no half-empty last row */
@media (min-width:700px){.xgrid[data-c]:not(.has-open){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.xgrid[data-c="3"]:not(.has-open){grid-template-columns:repeat(3,minmax(0,1fr))}.xgrid[data-c="4"]:not(.has-open){grid-template-columns:repeat(4,minmax(0,1fr))}}
.card-text pre{background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:10px 84px 10px 14px;font-size:.82rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:12px;max-width:100%}
.card-text pre code{background:none!important;color:inherit!important;padding:0!important;font-size:inherit}
.card-text{min-width:0}
/* loop ending: the site breaks into paper shards, the clean sheet comes back underneath */
.scene.ph-shatter .site-mock{opacity:0;transition:none}
.wave.wave-out{animation:wave 1.3s var(--ease-out) forwards}
.flow b sup{color:var(--facet);font-size:.7em;margin-left:2px}
.flow-foot{margin:10px 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-3)}

/* ---------- hero paper: SVG + CSS 3D, no WebGL ---------- */
.paper{--pp-face:#FBFCFE;--pp-back:#0A4C8C;--pp-mid:#1767B0;--pp-deep:#0A4C8C;--pp-ink:#2E4258;--pp-key:#0B5FA8;--pp-val:#0A1B2D;
  position:absolute;right:max(var(--gutter),2vw);top:50%;width:min(47vw,880px);aspect-ratio:1;translate:0 -50%;container-type:inline-size;perspective:1500px;pointer-events:none;
  transition:opacity .8s var(--ease-out),filter .8s var(--ease-out)}
html.is-dark .paper{--pp-face:#A9BBD0;--pp-key:#9CC6EA;--pp-val:#F2F6FB;--pp-ink:#1C2C3E}
.pp-tilt,.pp-flat{position:absolute;inset:0;transform:rotateX(calc(var(--ty,0)*-7deg + 8deg)) rotateY(calc(var(--tx,0)*9deg - 4deg));transition:transform .9s var(--ease-out)}
.pp-tilt{transform-style:preserve-3d}
.pp-flat{pointer-events:none}
.pp-shadow{position:absolute;left:8%;top:22%;width:52%;height:72%;border-radius:8%;background:radial-gradient(closest-side,rgba(10,40,80,.26),rgba(10,40,80,.08) 60%,transparent);transform:translate3d(3%,4%,-2px)}
html.is-dark .pp-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
.pp-sheet{position:absolute;transform-style:preserve-3d;display:flex}
.pp-col{position:relative;width:50%;height:100%;transform-style:preserve-3d}
.pp-r{transform-origin:0 50%}
.pp-q{position:absolute;left:0;width:100%;height:50%;transform-style:preserve-3d}
.pp-b{bottom:0}.pp-t{top:0;transform-origin:50% 100%}
.pp-q i{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pp-q .pf{background:var(--pp-grain) repeat,linear-gradient(160deg,color-mix(in srgb,var(--pp-face) 100%,#fff),color-mix(in srgb,var(--pp-face) 92%,#8aa0b8));box-shadow:inset 0 0 0 .5px rgba(30,60,100,.12)}
.pp-q .pb{background:linear-gradient(160deg,var(--pp-mid),var(--pp-back));transform:rotateX(180deg)}
.pp-r .pp-b .pb{transform:rotateY(180deg)}
.pp-q .ps{background:linear-gradient(0deg,rgba(10,30,60,.55),rgba(10,30,60,.1));opacity:0;backface-visibility:visible}
.pp-glyphs{position:absolute;inset:0}
.gl{position:absolute;left:0;top:0;font:600 2.4cqw/1 "JetBrains Mono",ui-monospace,monospace;color:var(--pp-ink);white-space:pre;transition:none}
.inked .gl{transition:color .5s ease}.inked .gl.key{color:var(--pp-key)}.inked .gl.val{color:var(--pp-val)}
.pp-heron{position:absolute;overflow:visible}
.pp-heron g{transform-box:view-box}
.pp-heron .mid{fill:var(--pp-mid)}.pp-heron .deep{fill:var(--pp-deep)}
.pp-flash{position:absolute;left:14%;top:20%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(190,220,255,.5) 40%,transparent);opacity:0}
.scene.ph-mock .paper{opacity:0;filter:blur(8px)}
.scene.ph-shatter .paper{transition:opacity 1.5s 1.1s,filter 1.5s 1.1s}
.shards{position:absolute;pointer-events:none;z-index:3;perspective:1100px;transform-style:preserve-3d}
.shard{position:absolute;overflow:hidden;will-change:transform,opacity;backface-visibility:visible}
.mock-clone{position:absolute;display:grid;pointer-events:none}
.shard-ink{position:absolute;inset:0;opacity:0}
.wave.wave-out{animation:wave 1.3s var(--ease-out) forwards}
@media (max-width:860px){.paper{right:auto;left:50%;width:min(94vw,380px);translate:-50% -50%}}
@media (prefers-reduced-motion:reduce){.pp-tilt,.pp-flat{transition:none}}
.scene:not(.ready) .paper{opacity:0}
/* ---------- arrival once, on the compositor; animations only on screen ---------- */
.js .film{--e:0}
.js .film.in{--e:1}
.head h2 .w{transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),filter .7s var(--ease-out);transition-delay:calc(var(--wi,0) * 55ms)}
.card{transition:opacity .7s var(--ease-out),transform .95s var(--ease-out),border-color .25s,box-shadow .3s;transition-delay:calc(var(--ci,0) * 75ms),calc(var(--ci,0) * 75ms),0s,0s}
tbody tr{transition:opacity .6s var(--ease-out),transform .75s var(--ease-out);transition-delay:calc(var(--ri,0) * 45ms)}
.cta{transition:transform 1s var(--ease-out),border-radius 1s var(--ease-out)}
.cta-mark polygon{transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 45ms)}
.js .block:not(.live) *,.js .hero:not(.live) *,.js .ticker:not(.live) *,.js .foot:not(.live) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.js .film{--e:1}}

/* backdrop as compositor layers */
.bg-sheet{position:absolute;left:var(--x);top:0;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);background:rgba(255,255,255,.72);opacity:var(--o);
  background-image:linear-gradient(135deg,rgba(11,95,168,.07) 50%,transparent 50%),linear-gradient(45deg,transparent calc(50% - .5px),rgba(11,95,168,.12) 50%,transparent calc(50% + .5px));
  animation:bgFloat 100s linear infinite;}
@keyframes bgFloat{from{transform:translate3d(0,110vh,0) rotate(var(--r0))}to{transform:translate3d(0,-40vh,0) rotate(calc(var(--r0) + var(--r1)))}}
.bg-dust{position:absolute;left:0;top:0;width:100%;height:calc(100% + 260px);opacity:0;transition:opacity .6s;animation:bgDust 26s linear infinite;
  background-image:radial-gradient(1.6px 1.6px at 20px 30px,rgba(255,230,190,.55),transparent 70%),radial-gradient(1.1px 1.1px at 140px 90px,rgba(255,230,190,.4),transparent 70%),radial-gradient(2px 2px at 90px 190px,rgba(255,230,190,.35),transparent 70%);background-size:220px 260px}
html:not(.is-dark) .bg-dust{display:none}
html.is-dark .bg-sheet{animation:none}
.bg-dust.d1{display:none}
@keyframes bgDust{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-260px,0)}}
html.is-dark .bg-sheet{display:none}
html.is-dark .bg-dust{opacity:1}
@media (prefers-reduced-motion:reduce){.bg-sheet,.bg-dust{animation-play-state:paused}}

:root{--heron-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 783'%3E%3Cpolygon points='281,87 309,22 379,3 440,47 334,63'/%3E%3Cpolygon points='334,63 440,47 512,80'/%3E%3Cpolygon points='282,101 331,74 455,273 346,256'/%3E%3Cpolygon points='346,256 455,273 401,396'/%3E%3Cpolygon points='334,272 389,402 288,436'/%3E%3Cpolygon points='186,250 326,256 272,440'/%3E%3Cpolygon points='0,540 186,250 272,440'/%3E%3Cpolygon points='180,577 205,480 375,420'/%3E%3Cpolygon points='180,592 262,529 262,778'/%3E%3Cpolygon points='272,738 350,780 272,780'/%3E%3C/svg%3E")}
/* logo glint: one gradient strip masked by the heron, moved by transform */
.brand{position:relative}
.brand .glint{position:absolute;left:0;top:50%;height:36px;width:24px;translate:0 -50%;overflow:hidden;pointer-events:none;
  -webkit-mask:var(--heron-mask) center/contain no-repeat;mask:var(--heron-mask) center/contain no-repeat}
.brand .glint::before{content:"";position:absolute;inset:-20% -150%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(-60%);animation:glint 8s ease-in-out 2.4s infinite}
html.is-dark .brand .glint::before{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%)}
@keyframes glint{0%,78%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
@media (prefers-reduced-motion:reduce){.brand .glint{display:none}}

/* llms.txt generator */
.lg{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));margin-top:28px;transform:none!important}
.lg-in{display:grid;gap:16px;align-content:start}
.lg label{display:grid;gap:6px;font-weight:600;font-size:.95rem;color:var(--ink)}
.lg input,.lg textarea{font:400 .95rem/1.45 var(--f-mono,ui-monospace,monospace);color:var(--ink);background:var(--paper);border:1px solid var(--crease);border-radius:10px;padding:10px 12px;width:100%;resize:vertical}
.lg input{font-family:inherit}
.lg input:focus,.lg textarea:focus{outline:2px solid var(--heron);outline-offset:1px}
.lg-hint{font-weight:400;font-size:.85rem;color:var(--ink-2)}
.lg-sitemap{display:grid;gap:8px}.lg-sitemap summary{cursor:pointer;font-weight:600;color:var(--heron)}
.lg-sitemap[open]{display:grid;gap:8px}
.lg-out{display:grid;gap:10px;align-content:start;min-width:0}
.lg-bar{display:flex;gap:8px;align-items:center}.lg-bar b{margin-right:auto}
.lg pre{margin:0;min-height:260px;max-height:520px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--paper);border:1px solid var(--crease);border-radius:10px;padding:14px;font-size:.88rem}

/* documentation pages: contents on the side, long-form text */
.doc-layout{position:relative}
.doc-layout.with-toc{display:grid;grid-template-columns:minmax(0,1fr);max-width:1320px;margin:0 auto}
@media (min-width:1080px){.doc-layout.with-toc{grid-template-columns:240px minmax(0,1fr);gap:8px;padding-left:max(var(--gutter),env(safe-area-inset-left,0px))}
 .doc-layout.with-toc .doc-main .wrap{padding-left:24px}}
.doc-toc{display:none}
@media (min-width:1080px){.doc-toc{display:block;position:sticky;top:88px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;padding:28px 0 20px;font-size:.9rem}
 .doc-toc p{font:600 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
 .doc-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--crease)}
 .doc-toc a{display:block;padding:5px 12px;color:var(--ink-2);text-decoration:none;border-left:2px solid transparent;margin-left:-1px;line-height:1.3}
 .doc-toc a:hover{color:var(--heron)}.doc-toc a.on{color:var(--heron);border-left-color:var(--heron);font-weight:600}}
.doc-main .prose{max-width:80ch}
.prose h3{color:var(--ink);font-weight:650}.prose h4{margin-top:1.2em;font-size:1.08rem;color:var(--ink);font-weight:650}
.prose ul,.prose ol{padding-left:1.3em}.prose li+li{margin-top:.35em}.prose li::marker{color:var(--heron)}
.prose strong{color:var(--ink)}
.prose a{color:var(--heron);text-underline-offset:3px}
.prose blockquote{margin:1em 0;padding:12px 16px;border-left:3px solid var(--heron);background:var(--tint);border-radius:0 10px 10px 0;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.94rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--crease)}
.prose th{font-weight:600;color:var(--ink);background:var(--tint)}
.prose td code,.prose th code{white-space:nowrap}
.prose hr{border:0;border-top:1px solid var(--crease);margin:1.6em 0}
.doc-source{font-size:.9rem;color:var(--ink-3)}

/* paid features: gold */
:root{--gold:#9A6A00;--gold-bg:#FBF0D2;--gold-line:#E5C66B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--gold:#F3C760;--gold-bg:rgba(243,199,96,.12);--gold-line:rgba(243,199,96,.45)}}
:root[data-theme="dark"]{--gold:#F3C760;--gold-bg:rgba(243,199,96,.12);--gold-line:rgba(243,199,96,.45)}
.b-paid{color:var(--gold);background:var(--gold-bg);box-shadow:inset 0 0 0 1px var(--gold-line)}
.b-paid::before{background:linear-gradient(135deg,#F7D774,#B8860B)}
.card:has(> .b-paid){border-color:var(--gold-line)}
.more a[href*="agent"],.more a[href*="bot"]{color:var(--gold);font-weight:600}

/* forms reference */
.fd-head{display:grid;gap:10px;margin-bottom:18px}.fd-head .prose{max-width:76ch}
.fd-box{border:1px solid var(--crease);border-radius:var(--r-lg);background:var(--paper);overflow:hidden}
.fd-bar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:8px;border-bottom:1px solid var(--crease);background:var(--sheet)}
.fd-bar [data-fd]{font:600 .82rem/1 var(--f-mono);padding:9px 12px;border-radius:9px;border:0;background:none;color:var(--ink-2);cursor:pointer}
.fd-bar [data-fd][aria-selected="true"]{background:var(--tint);color:var(--heron)}
.fd-sw{margin-left:auto;display:flex;gap:6px;padding-right:4px}
.fd-sw button{width:22px;height:22px;border-radius:50%;border:2px solid var(--sheet);background:var(--c);box-shadow:0 0 0 1px var(--crease);cursor:pointer;transition:transform .2s}
.fd-sw button.on{box-shadow:0 0 0 2px var(--c);transform:scale(1.1)}
.fd-pane{padding:4px 0}.fd-pane[data-pane="md"],.fd-pane[data-pane="html"],.fd-pane[data-pane="css"]{padding:14px}
.fd-pane pre{margin:0;max-height:520px;overflow:auto;background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:14px 16px;font:400 .82rem/1.6 var(--f-mono);white-space:pre}
.fd-stage section.block{min-height:0!important}.fd-stage section.block > .wrap{padding-block:24px 28px;gap:22px}
.fd-stage section.block::before,.fd-stage section.block::after{display:none}
.fd-stage .wrap{padding-inline:22px}
.fd-stage .head h2{font-size:1.5rem}
.fd-stage[data-tone="forest"]{--heron:#1F7A4D;--tint:#E3F2EA;--facet:#BFE3CF}
.fd-stage[data-tone="ember"]{--heron:#B4471F;--tint:#F8E7DF;--facet:#F1C9B7}
.fd-stage[data-tone="plum"]{--heron:#6B3FA0;--tint:#EEE6F7;--facet:#D6C5EC}
:root[data-theme="dark"] .fd-stage[data-tone="forest"]{--heron:#7FD6A8;--tint:#11291D}
:root[data-theme="dark"] .fd-stage[data-tone="ember"]{--heron:#F2A27F;--tint:#2E1910}
:root[data-theme="dark"] .fd-stage[data-tone="plum"]{--heron:#C3A5EE;--tint:#22173A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fd-stage[data-tone="forest"]{--heron:#7FD6A8;--tint:#11291D}
 :root:not([data-theme="light"]) .fd-stage[data-tone="ember"]{--heron:#F2A27F;--tint:#2E1910}
 :root:not([data-theme="light"]) .fd-stage[data-tone="plum"]{--heron:#C3A5EE;--tint:#22173A}}
.fd-notes{margin-top:14px}
@media (min-width:1080px){.doc-toc .doc-up{display:inline-flex;align-items:center;gap:8px;border:0;margin:0 0 18px;padding:0;font-weight:600;color:var(--heron)}
 .doc-toc .doc-up svg{transform:rotate(180deg);transition:transform .25s var(--ease-out)}.doc-toc .doc-up:hover svg{transform:rotate(180deg) translateX(3px)}}

/* hero: the scene starts level with the eyebrow line and fits in the first screen */
@media (min-width:861px){
  .hero.full{--hero-top:clamp(36px,6.5vh,88px)}
  .hero.full .wrap{align-items:flex-start;padding-top:var(--hero-top)}
  .hero .paper{top:var(--hero-top);translate:0 0;width:min(47vw,880px,calc(100svh - 66px - var(--hero-top) - 70px))}
  .hero .site-mock{top:var(--hero-top);width:min(44vw,820px,calc((100svh - 66px - var(--hero-top) - 110px) * 16 / 11));transform:translateY(3%) scale(.94)}
  .hero .scene.ph-mock .site-mock{transform:none}
}