@font-face{font-family:"Lexend";src:url("assets/fonts/lexend-latin-wght-normal.woff2") format("woff2-variations"),url("assets/fonts/lexend-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* Colour: --paper, --ink, --muted, --accent and --line are retuned by app.js to match each rendered frame,
   so the page background is always the render's own studio background (white since the 8 Oct white-studio renders). */
:root{
  --paper:#ffffff;--ink:#19303a;--muted:#566e78;--accent:#7d5e22;--line:rgba(25,48,58,.13);
  --hover:rgba(25,48,58,.05);
  --pad:clamp(24px,5.6vw,104px);--progress:0;--notice-h:50px;
  /* Glass: translucent fill, blurred backdrop, bright top edge */
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.58));
  --glass-edge:rgba(25,48,58,.09);
  --glass-shine:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(25,48,58,.04);
  --glass-shadow:0 10px 30px rgba(25,48,58,.08),0 1px 3px rgba(25,48,58,.05);
  --glass-blur:blur(22px) saturate(160%);
  --pill-on:rgba(25,48,58,.07);
  /* Type scale grows with the window, like the render: meta 14–18 · ui 15–19 · labels 17–26 · body 17–22 · lede 20–26 · h2 36–58 · h1 40–64 */
  --fs-meta:clamp(14px,.55vw + 7px,18px);--fs-ui:clamp(15px,.5vw + 8.5px,19px);--fs-label:clamp(17px,.85vw + 7px,26px);--fs-body:clamp(17px,.9rem + .4vw,22px);--fs-lede:clamp(20px,1rem + .6vw,26px);
  --fs-h2:clamp(36px,3.5vw,58px);--fs-h1:clamp(40px,4vw,64px);
  --font:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;font-family:var(--font);font-synthesis:none
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:var(--fs-body);line-height:1.55;padding-bottom:var(--notice-h)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:999px}
button:disabled{cursor:default}
::selection{background:#a7c9c8;color:#152e35}
.skip-link{position:fixed;top:-100px;left:24px;padding:12px 20px;background:var(--paper);font-size:var(--fs-ui);z-index:100;border-radius:999px}.skip-link:focus{top:16px}

.glass{background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-shine),var(--glass-shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,255,255,.95)}}

/* Header: floating glass capsule */
.site-header{position:fixed;top:14px;left:calc(var(--pad) - 20px);right:calc(var(--pad) - 8px);z-index:30;height:60px;padding:0 7px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:999px}
.logo{display:block;flex:none;padding:4px 0}
.logo img{display:block;height:36px;width:auto}
.primary-nav{display:flex;gap:2px;align-items:center;font-size:var(--fs-ui);font-weight:500;margin-left:auto}
.login-link{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink);background:var(--hover);box-shadow:var(--glass-shine);transition:background-color .2s}
.login-link:hover{background:var(--pill-on)}
.site-header{gap:8px}
.primary-nav a{padding:10px 18px;border-radius:999px;transition:background-color .2s}
.primary-nav a:hover{background:var(--hover)}
.primary-nav a[aria-current="true"]{background:var(--pill-on);box-shadow:var(--glass-shine)}

/* Scroll journey */
.journey{height:900svh;position:relative}
.scene{height:100svh;min-height:600px;position:sticky;top:0;overflow:hidden;background:var(--paper);isolation:isolate}
.stage{position:absolute;inset:96px -3% calc(var(--notice-h) + 92px) 34%;contain:layout paint}
.stage-poster,#pump-canvas,.annotations{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.stage-poster{opacity:1}#pump-canvas{opacity:0}.has-frame #pump-canvas{opacity:1}.has-frame .stage-poster{opacity:0}
.annotations{overflow:visible;pointer-events:none;font-size:var(--fs-label)}
.annotations text{font-family:var(--font);font-size:inherit;font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:.28em;stroke-linejoin:round}
.annotations path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.45}
.annotations circle{fill:var(--ink);opacity:.65}

.chapter-copy{position:absolute;inset:0 0 var(--notice-h);pointer-events:none}
.chapter{position:absolute;left:var(--pad);top:50%;width:30%;max-width:520px;transform:translateY(-50%);opacity:0;visibility:hidden}
.chapter.is-current{opacity:1;visibility:visible}
@media(min-width:1051px){.chapter[data-chapter="hero"]{width:37%;max-width:600px}}
.chapter-text{pointer-events:auto}
h1,h2{font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
.description{font-size:var(--fs-body);line-height:1.55;color:var(--muted);max-width:28em;margin:24px 0 0;text-wrap:pretty}
.text-link{display:inline-flex;gap:14px;align-items:center;font-size:var(--fs-ui);font-weight:500;padding:12px 22px;border-radius:999px;transition:background-color .2s}
.text-link:hover{background-color:var(--hover)}
.text-link span{transition:transform .25s}.text-link:hover span{transform:translateY(2px)}
.hero-link{margin-top:30px}
.still{display:none}
.patent{margin:18px 0 0;font-size:var(--fs-meta);color:var(--muted);pointer-events:auto}
.patent a,.facts dd a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;font-variant-numeric:tabular-nums}
.patent a:hover,.facts dd a:hover{color:var(--ink);text-decoration-color:currentColor}
.dimensions{font-size:var(--fs-ui);margin:28px 0 0;display:grid;gap:10px;max-width:24em}
.dimensions div{display:grid;grid-template-columns:7.5em auto;gap:16px;padding-top:10px;border-top:1px solid var(--line)}
.dimensions dt{color:var(--muted)}
.dimensions dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}

.scene-footer{position:absolute;bottom:calc(var(--notice-h) + 20px);left:var(--pad);right:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.chapter-status{display:flex;gap:14px;align-items:center;font-size:var(--fs-meta);font-weight:500;min-width:210px}
.chapter-status #chapter-number{font-variant-numeric:tabular-nums;color:var(--muted)}
.chapter-status #chapter-name{color:var(--accent)}
.status-divider{width:24px;height:1px;background:var(--line)}
.chapter-nav{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px}
.chapter-nav button{border:0;background:none;padding:8px 0;border-radius:999px;font-weight:500;min-width:42px;min-height:36px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--fs-meta);transition:background-color .2s,color .2s}
.chapter-nav button:hover{color:var(--ink);background:var(--hover)}
.chapter-nav button[aria-current="step"]{color:var(--ink);background:var(--pill-on);box-shadow:var(--glass-shine)}
.scroll-cue{font-size:var(--fs-meta);color:var(--muted);display:flex;gap:14px;white-space:nowrap;min-width:210px;justify-content:flex-end}
.effect-note{position:absolute;bottom:calc(var(--notice-h) + 84px);right:var(--pad);font-size:var(--fs-meta);color:var(--muted);opacity:0;margin:0;pointer-events:none}
.journey-progress{height:2px;position:absolute;bottom:var(--notice-h);left:0;right:0;background:var(--line);z-index:2}
.journey-progress span{display:block;height:100%;background:var(--accent);transform:scaleX(var(--progress));transform-origin:left}

/* About */
.about{scroll-margin-top:-92px;padding:150px var(--pad) 120px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,120px);align-items:start;
  background:radial-gradient(55% 50% at 80% 38%,rgba(131,212,201,.075),transparent 70%),radial-gradient(40% 45% at 12% 85%,rgba(215,184,123,.055),transparent 70%),var(--paper)}
.about-intro{position:sticky;top:130px}
.about-intro h2{font-size:var(--fs-h2)}
.about-intro p{font-size:var(--fs-lede);line-height:1.45;color:var(--muted);margin:28px 0 0;max-width:22em;text-wrap:pretty}
.about-detail{display:grid;gap:28px}
.facts{margin:0;display:grid;padding:6px 32px;border-radius:28px}
.facts div{display:grid;grid-template-columns:minmax(140px,11em) minmax(0,1fr);gap:8px 32px;padding:24px 0}
.facts div+div{border-top:1px solid var(--line)}
.facts dt{font-weight:500}
.facts dd{margin:0;color:var(--muted);max-width:32em}
.caution{margin:0;padding:0 32px;font-size:var(--fs-meta);line-height:1.55;color:var(--muted);max-width:44em}
.caution strong{color:var(--ink);font-weight:600;letter-spacing:.02em}

.site-footer{border-top:1px solid var(--line);margin:0 var(--pad);padding:28px 0 36px;display:flex;gap:32px;align-items:center;justify-content:space-between;font-size:var(--fs-meta);color:var(--muted)}
.footer-logo{height:30px;width:auto;flex:none}
.site-footer p{margin:0;line-height:1.55;max-width:36em}
.site-footer .copyright{color:var(--ink);white-space:nowrap}
.footer-actions{display:flex;gap:24px;align-items:center;white-space:nowrap}
.footer-actions button,.footer-actions a{border:0;background:none;padding:10px 0;font-size:var(--fs-meta);color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}
.footer-actions button:hover,.footer-actions a:hover{text-decoration-color:currentColor}

/* Publications */
.publications{padding:40px var(--pad) 120px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,120px);align-items:start}
.pub-head{position:sticky;top:130px}
.pub-head h2{font-size:var(--fs-h2)}
.pub-head p{font-size:var(--fs-lede);line-height:1.45;color:var(--muted);margin:28px 0 0;max-width:22em;text-wrap:pretty}
.pub-heading{font-size:var(--fs-ui);font-weight:500;margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.pub-count{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.pub-list{list-style:none;margin:0;padding:0}
.pub{display:grid;grid-template-columns:3.6em minmax(0,1fr);gap:20px;padding:18px 0 0;border-top:1px solid var(--line);margin-top:18px}
.pub.repeat{border-top:0;margin-top:0}
.pub.repeat .pub-year{visibility:hidden}
.pub-year{font-size:var(--fs-ui);font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.5}
.pub-title{margin:0;font-size:17px;font-weight:500;line-height:1.45;text-wrap:pretty}
.pub-title a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
.pub-title a:hover{text-decoration-color:currentColor}
.pub-meta{margin:6px 0 0;font-size:var(--fs-meta);line-height:1.5;color:var(--muted)}
.pub-kind{display:inline-block;margin-left:4px;padding:0 9px;border:1px solid var(--line);border-radius:999px;font-size:calc(var(--fs-meta) - 1px);line-height:1.6;white-space:nowrap}
.pub-more{margin-top:44px}
.pub-more summary{display:inline-flex;gap:10px;align-items:center;padding:12px 22px;border-radius:999px;font-size:var(--fs-ui);font-weight:500;cursor:pointer;list-style:none}
.pub-more summary::-webkit-details-marker{display:none}
.pub-more summary::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;margin-left:4px}
.pub-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.pub-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pub-more[open] .pub-list{margin-top:10px}

/* Regulatory notice: always visible */
.dev-notice{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;padding:13px var(--pad) calc(13px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.74));box-shadow:inset 0 1px 0 rgba(25,48,58,.08),0 -10px 30px rgba(25,48,58,.05)}
.dev-notice p{margin:0;text-align:center;font-size:var(--fs-meta);line-height:1.45;color:var(--muted)}
.dev-notice strong{color:var(--ink);font-weight:600}
.notice-short{display:none}
.no-script-note{text-align:center;font-size:var(--fs-ui);padding:20px}

/* Static view: no JavaScript, or reduced motion */
.static-view .journey{height:auto}
.static-view .scene{height:auto;min-height:0;position:relative;overflow:visible;padding-top:110px}
.static-view .stage,.static-view .scene-footer,.static-view .effect-note,.static-view .journey-progress{display:none}
.static-view .chapter-copy{position:relative;pointer-events:auto;inset:auto}
.static-view .chapter{position:relative;inset:auto;width:auto;max-width:none;transform:none!important;opacity:1!important;visibility:visible;min-height:640px;display:grid;grid-template-columns:40% 60%;align-items:center;padding:72px var(--pad);scroll-margin-top:70px}
.static-view .chapter .still{display:block;margin:0 -4vw 0 0;min-width:0}
.still img{display:block;width:100%;height:auto}
.static-view .chapter{background:var(--static-paper,var(--paper))!important;color:var(--static-ink,var(--ink));--ink:var(--static-ink);--muted:var(--static-muted);--accent:var(--static-accent)}

@media(min-width:1800px){.stage{left:35%;right:0}.chapter{width:28%}}
@media(max-width:1050px) and (min-width:701px){.chapter{width:36%}.stage{left:38%;right:-7%}:root{--fs-h1:clamp(36px,4.6vw,46px);--fs-h2:clamp(32px,4.2vw,42px)}.chapter-status,.scroll-cue{min-width:0}.scroll-cue{display:none}.about{grid-template-columns:1fr;row-gap:48px}.about-intro{position:static}.publications{grid-template-columns:1fr;row-gap:40px}.pub-head{position:static}.primary-nav a{padding:10px 13px}}
@media(min-width:701px) and (max-height:650px){.scene{min-height:480px}.stage{top:84px;bottom:calc(var(--notice-h) + 64px)}.scene-footer{bottom:calc(var(--notice-h) + 10px)}.description{margin-top:16px}:root{--fs-h1:44px;--fs-h2:40px}.effect-note{bottom:calc(var(--notice-h) + 66px)}}
@media(max-width:760px){.notice-long{display:none}.notice-short{display:inline}}

/* Phones */
@media(max-width:700px){
  :root{--pad:22px;--fs-meta:14px;--fs-ui:15px;--fs-label:17px;--fs-body:16px;--fs-lede:19px;--fs-h1:clamp(31px,8.6vw,38px);--fs-h2:clamp(28px,7.8vw,34px);--notice-h:46px}
  .site-header{top:10px;left:10px;right:10px;height:54px;padding:0 5px 0 14px;gap:8px}
  .logo img{height:29px}
  .primary-nav a{padding:9px 11px;font-size:14px}
  .primary-nav a[data-go]{display:none}
  .login-link{width:40px;height:40px}
  .journey{height:780svh}
  .scene{min-height:620px}
  .chapter{top:90px;left:var(--pad);right:var(--pad);width:auto;max-width:none;transform:none}
  .description{line-height:1.5;margin-top:12px}
  .hero-link{margin-top:16px;padding:10px 18px}
  .stage{inset:320px -4% calc(var(--notice-h) + 112px);min-height:200px}
  .scene-footer{bottom:calc(var(--notice-h) + 12px);left:12px;right:12px;display:flex;flex-direction:column;gap:8px}
  .chapter-status{justify-content:center;gap:10px;min-width:0}
  .status-divider{width:18px}
  .chapter-nav{justify-content:center;padding:3px}
  .chapter-nav button{min-width:38px;min-height:34px;font-size:14px}
  .scroll-cue{display:none}
  .effect-note{bottom:calc(var(--notice-h) + 100px);right:0;left:0;text-align:center}
  .dimensions{margin-top:14px;gap:6px;font-size:14px}
  .dimensions div{padding-top:6px}
  .about{grid-template-columns:1fr;padding:110px 16px 64px;row-gap:36px;scroll-margin-top:-70px}
  .about-intro{position:static;padding:0 6px}
  .facts{padding:2px 20px;border-radius:22px}
  .facts div{grid-template-columns:1fr;padding:18px 0}
  .caution{padding:0 6px}
  .site-footer{display:grid;grid-template-columns:auto 1fr;gap:16px 20px;padding:24px 0 28px}
  .footer-logo{height:26px}
  .site-footer .copyright{grid-column:1/-1;grid-row:2}
  .site-footer .footer-note{grid-column:1/-1;grid-row:3}
  .publications{grid-template-columns:1fr;padding:24px 16px 72px;row-gap:28px}
  .pub-head{position:static;padding:0 6px}
  .pub{grid-template-columns:1fr;gap:4px}
  .pub.repeat .pub-year{display:none}
  .pub-body{padding:0 6px}
  .footer-actions{justify-content:flex-end;gap:18px}
  .dev-notice{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .dev-notice p{font-size:14px}
  .static-view .scene{padding-top:76px}
  .static-view .chapter{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:56px 22px 32px;gap:22px}
  .static-view .chapter .still{margin:0 -12px}
}
@media(max-width:700px) and (max-height:760px){.chapter{top:80px}.stage{top:290px;bottom:calc(var(--notice-h) + 100px)}.effect-note{bottom:calc(var(--notice-h) + 90px)}.hero-link{margin-top:10px}}
@media(max-width:700px) and (max-height:620px){.scene{min-height:540px}:root{--fs-h1:28px;--fs-h2:26px;--fs-body:15px}.chapter{top:74px}.stage{top:250px;bottom:calc(var(--notice-h) + 92px)}.effect-note{display:none}.dimensions{display:none}.chapter-status{display:none}.hero-link{display:none}}
@media(max-width:374px){.site-header{padding:0 4px 0 12px;gap:4px}.primary-nav a{padding:9px 7px;font-size:13px}.login-link{width:34px;height:34px}.logo img{height:24px}.chapter-nav button{min-width:33px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.text-link:hover span{transform:none}}
@media(prefers-reduced-transparency:reduce){.glass,.dev-notice{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(248,250,250)}}

#pump-canvas,.stage-poster{mask-image:linear-gradient(to right,transparent var(--image-left,0px),#000 calc(var(--image-left,0px) + var(--edge-fade,2px)),#000 calc(var(--image-right,100%) - var(--edge-fade,2px)),transparent var(--image-right,100%)),linear-gradient(to bottom,transparent var(--image-top,0px),#000 calc(var(--image-top,0px) + var(--edge-fade,2px)),#000 calc(var(--image-bottom,100%) - var(--edge-fade,2px)),transparent var(--image-bottom,100%));mask-composite:intersect}
.static-view .still img{mask-image:linear-gradient(to right,transparent,#000 5%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 96%,transparent);mask-composite:intersect}

#play-motion{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;padding:10px 20px;border-radius:999px;color:var(--ink);font-size:var(--fs-meta);cursor:pointer}
#play-motion[hidden]{display:none}