@font-face{font-family:Hanken;src:url('/assets/hanken-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Newsreader;src:url('/assets/newsreader-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Newsreader;src:url('/assets/newsreader-italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
:root{--forest:#0b1813;--deep:#07110c;--paper:#f3f1e7;--white:#f7f5ec;--muted:#b3c6b8;--ink:#1d3027;--green:#d2efa6;--line:#3f5649;--serif:Newsreader,Georgia,serif;--sans:Hanken,Arial,sans-serif;--gutter:clamp(24px,5.2vw,88px);--ease:cubic-bezier(.16,1,.3,1);--r-control:4px;--r-sheet:clamp(20px,2.6vw,36px);--ink-muted:#44584b;--edge:#b3c6b82e;--edge-strong:#b3c6b859}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--forest);color:var(--white);font-family:var(--sans);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}a,button{touch-action:manipulation}button{cursor:pointer}[hidden]{display:none!important}::selection{background:var(--green);color:var(--deep)}:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:2px}.paper :focus-visible{outline-color:var(--ink)}p,h1,h2,h3,figure{margin:0}h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.043em;line-height:1.05;text-wrap:balance}h1 em,h2 em{font-weight:400}h2{font-size:clamp(44px,5.3vw,78px)}p{max-width:65ch}.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}.eyebrow{font-size:12px;font-weight:550;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}.small{font-size:15px}.skip{position:fixed;top:12px;left:12px;z-index:30;transform:translateY(-150%);padding:12px 20px;color:var(--forest);background:var(--paper)}.skip:focus{transform:none}.landscape{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--forest)}.landscape-poster,.landscape video,.landscape canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 54%}.landscape-poster,.landscape video{filter:saturate(.68)}.landscape video{opacity:0;transition:opacity 1.2s}.landscape video.playing{opacity:1}.landscape canvas{opacity:.8}.landscape-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,27,19,.68),rgba(9,27,19,.64) 65%,rgba(9,27,19,.64))}.site-header{height:106px;padding:0 var(--gutter);max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:3}.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:31px;letter-spacing:-1.8px;line-height:1;font-weight:500}.wordmark img{width:32px;height:32px}.site-header nav{display:flex;align-items:center;gap:36px;font-size:14px}.site-header nav>a:not(.button){padding:12px 0}.site-header nav>a:not(.button):hover{box-shadow:0 1px currentColor}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;min-height:54px;padding:14px 23px;background:var(--green);color:var(--deep);border:1px solid transparent;border-radius:4px;font-size:15px;font-weight:550;line-height:1.35;transition:background .2s,box-shadow .2s}.button span{font-size:21px;font-weight:400;line-height:1}.button:hover{background:color-mix(in srgb,var(--green) 70%,#fff);box-shadow:0 3px 18px #091b1920}.nav-cta{min-height:44px;padding:11px 17px;gap:26px;background:var(--paper);font-size:13px}.hero{min-height:calc(100dvh - 106px);position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}.hero-copy{padding-top:clamp(44px,8vh,110px);padding-bottom:220px;position:relative;z-index:2;text-align:center}.hero .eyebrow{margin-inline:auto}.hero h1{font-size:clamp(44px,5.15vw,78px);max-width:1160px;margin:28px auto 24px;line-height:1.08}.hero-description{max-width:570px;margin:0 auto 29px;font-size:17px;line-height:1.6}.landscape-word{position:absolute;bottom:-.12em;left:50%;transform:translateX(-50%);font-family:var(--sans);font-weight:500;font-size:clamp(220px,30vw,510px);line-height:.9;letter-spacing:-.072em;color:rgba(240,242,223,.15);z-index:0;user-select:none}.hero-bottom{margin-top:auto;position:absolute;bottom:40px;left:0;right:0;display:flex;align-items:end;justify-content:space-between;z-index:2;font-size:13px}.hero-bottom>p{font-size:13px;text-align:right;line-height:1.5}.explore{display:inline-flex;align-items:center;gap:14px;min-height:44px}.explore>span{display:grid;place-items:center;border:1px solid #ffffff80;border-radius:50%;width:40px;height:40px;font-size:20px;transition:background .2s}.explore:hover>span{background:#ffffff20}.paper{background:var(--paper);color:var(--ink)}.workflow{padding-block:92px 42px;position:relative}.section-top{display:flex;justify-content:space-between;align-items:start;padding-bottom:64px;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent);padding-top:24px;gap:24px}.section-top>p:last-child{font-size:13px;max-width:270px}.workflow-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(48px,8vw,125px);align-items:start}.workflow-intro>p{max-width:370px;margin-top:30px;font-size:18px;line-height:1.7}.steps{list-style:none;margin:0;padding:0}.steps li{display:grid;grid-template-columns:42px 1fr;gap:16px;padding:27px 0;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}.steps li:first-child{padding-top:3px;border-top:0}.step-index{font-size:12px;padding-top:8px;color:var(--ink-muted)}.steps h3{font-family:var(--serif);font-size:32px;line-height:1.2;font-weight:400;letter-spacing:-.03em}.steps p{font-size:16px;color:var(--ink-muted);max-width:350px;margin-top:10px}.workflow-foot{max-width:none;margin-top:70px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent);font-size:13px;color:var(--ink-muted)}.measurement{padding-block:112px 92px;background:var(--forest)}.measurement-heading{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-top:26px}.measurement-heading>p{max-width:305px;font-size:17px;color:var(--muted);padding-bottom:6px}.movement-study{margin-top:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.study-label{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;font-size:12px;color:var(--muted)}.study-label>span:first-child{color:var(--white);font-size:14px}.study-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:48px;padding-block:24px 28px}.pose-view svg{width:100%;height:auto;display:block;overflow:visible}.pose-view{max-width:460px;width:100%;margin:auto}.pose-ground{fill:#294236}.motion-arc{fill:none;stroke:#3d5647;stroke-width:1}.motion-arc.inner{stroke:#2f473b}.pose-body,.pose-leg,.pose-far{fill:none;stroke:var(--green);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}.pose-far{stroke:#6d8a76;stroke-width:3}.pose-body circle{fill:#172b24;stroke-width:2}.pose-joints{fill:var(--paper)}#joint-guide{stroke:#91aa96;stroke-width:1;stroke-dasharray:2 5}#pose-angle{fill:var(--paper);font:14px var(--sans)}.pose-caption{font-size:12px;color:var(--muted);text-align:center}.trace{display:block;width:100%;height:auto;margin:24px 0 14px}.trace-grid{stroke:#3b5345;stroke-width:1;fill:none}.trace-labels{fill:var(--muted);font:11px var(--sans)}#curve{stroke:var(--green);stroke-width:2.5;fill:none}#trace-cursor path{stroke:#adc6b3;stroke-width:1}#trace-point{fill:var(--green);stroke:var(--forest);stroke-width:3}.range-caption{display:flex;justify-content:space-between;font-size:12px;color:var(--white);gap:20px}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;margin:5px 0;height:38px;background:transparent;cursor:ew-resize;display:block}input[type=range]::-webkit-slider-runnable-track{height:2px;background:#748b7b}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:18px;width:18px;border-radius:50%;background:var(--paper);margin-top:-8px;border:3px solid var(--forest);outline:1px solid #bccdbb}input[type=range]::-moz-range-track{height:2px;background:#748b7b}input[type=range]::-moz-range-thumb{height:14px;width:14px;border-radius:50%;background:var(--paper);border:3px solid var(--forest);outline:1px solid #bccdbb}#cycle-help{font-size:11px;color:var(--muted)}.movement-study figcaption{border-top:1px solid #3e5647;padding:18px 0;font-size:12px;color:var(--muted)}.measurement-list{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin:36px 0 0}.measurement-list dt{font-family:var(--serif);font-size:28px;letter-spacing:-.02em}.measurement-list dd{font-size:15px;color:var(--muted);margin:9px 0 0;max-width:270px}.beyond{min-height:680px;display:flex;align-items:center;background:linear-gradient(180deg,#172b2433,#10201933)}.beyond-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center;padding-block:110px}.beyond h2{margin-top:30px}.beyond-copy{padding:32px 36px;background:#102019e8;border-left:1px solid #c5dfb460;max-width:450px}.beyond-copy p{font-size:18px;line-height:1.65}.beyond-copy p+p{margin-top:22px}.beyond-copy .small{font-size:13px;color:var(--muted);margin-top:30px}.closing{background:#172b24f5;padding-block:92px}.closing-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center}.closing h2{margin-top:27px}.closing-copy{max-width:365px}.closing-copy>p:first-child{font-size:18px;line-height:1.6;color:var(--muted)}.closing .button{margin-top:27px}.email-note{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.7}.site-footer{display:flex;align-items:end;justify-content:space-between;padding-top:36px;padding-bottom:92px;background:var(--forest);position:relative;gap:36px}.site-footer:before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}.site-footer .wordmark{font-size:30px}.site-footer p{font-size:12px;margin-top:17px;color:var(--muted)}.site-footer nav{display:flex;gap:26px;font-size:13px}.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}.footer-right{text-align:right}.page-tools{position:fixed;bottom:16px;right:24px;z-index:10;display:flex;gap:16px;align-items:center;background:color-mix(in srgb,var(--deep) 95%,transparent);color:var(--paper);border:1px solid #6a806d;padding:0 12px;font-size:10px;letter-spacing:.03em;border-radius:3px;min-height:34px}.page-tools button{border:0;background:none;color:inherit;min-height:34px;padding:0 8px 0 0;font-size:10px;border-right:1px solid #6a806d}.page-tools button:hover{text-decoration:underline}.page-tools button[aria-disabled=true]{cursor:default}.legal-header{border-bottom:1px solid var(--line)}.legal{max-width:960px;padding-block:76px 96px}.legal h1{font-size:clamp(48px,6vw,76px);margin-bottom:20px}.legal .legal-date{color:var(--muted);font-size:14px;margin-bottom:35px}.legal p{font-size:17px;line-height:1.75;margin-block:20px;max-width:none;color:#d4dfd5}.legal h2{font-family:var(--sans);font-weight:500;font-size:24px;letter-spacing:-.02em;line-height:1.3;margin:40px 0 16px}.legal a:not(.button){text-decoration:underline;text-underline-offset:4px}.notice{border-left:2px solid var(--green);padding:1px 24px;background:#213b2e}.not-found{min-height:25vh}.static-note{font-size:13px;color:var(--muted)}
@media(min-width:1600px){.hero-copy{padding-top:12vh}.hero{min-height:850px}}
@media(max-width:1023px){.hero h1{font-size:clamp(43px,6vw,64px)}.hero h1 br{display:none}.hero-copy{padding-top:70px;padding-bottom:220px}.hero-description{max-width:530px}.workflow-layout{gap:55px}.measurement-heading>p{max-width:260px}.study-grid{gap:25px}.beyond-layout,.closing-layout{gap:40px}.beyond-copy{padding:25px}.measurement-list{gap:30px}}
@media(max-width:767px){h2{font-size:clamp(36px,10vw,44px)}body{font-size:16px}.site-header{height:88px;gap:16px}.wordmark{font-size:28px;gap:7px}.wordmark img{width:28px;height:28px}.site-header nav>a:not(.button){display:none}.nav-cta{font-size:12px;gap:16px;padding:11px 12px}.hero{min-height:calc(100dvh - 88px)}.hero-copy{padding-top:56px;padding-bottom:180px}.hero h1{font-size:clamp(40px,8.8vw,61px);line-height:1.07;margin-top:25px;margin-bottom:24px;letter-spacing:-.04em}.hero-description{font-size:15px;line-height:1.6;max-width:410px;margin-bottom:26px}.hero .eyebrow{font-size:10px;letter-spacing:.095em}.landscape-word{font-size:45vw;bottom:36px}.hero-bottom{bottom:26px}.hero-bottom>p{display:none}.hero-bottom .explore{font-size:12px}.page-tools{right:12px;bottom:10px}.workflow{padding-block:40px 32px}.section-top{padding-top:19px;padding-bottom:44px}.section-top>p:last-child{font-size:11px;max-width:155px}.eyebrow{font-size:10px}.workflow-layout{grid-template-columns:1fr;gap:42px}.workflow-intro>p{font-size:17px;max-width:470px;margin-top:22px}.steps li{padding:24px 0}.steps p{max-width:400px}.workflow-foot{margin-top:30px;font-size:12px}.measurement{padding-block:65px 55px}.measurement-heading{display:block;margin-top:25px}.measurement-heading>p{max-width:390px;margin-top:24px;font-size:16px}.movement-study{margin-top:38px}.study-label{font-size:10px;align-items:start}.study-label>span:first-child{font-size:12px;white-space:nowrap}.study-label>span:last-child{max-width:140px;text-align:right}.study-grid{grid-template-columns:1fr;gap:28px;padding-top:12px}.pose-view{max-width:320px}.pose-caption{font-size:11px}.trace{margin-top:20px}.measurement-list{display:block;margin-top:16px}.measurement-list>div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid #3e5647}.measurement-list>div:last-child{border-bottom:0}.measurement-list dt{font-size:23px}.measurement-list dd{font-size:14px;margin:0;max-width:330px}.beyond{min-height:690px}.beyond-layout{grid-template-columns:1fr;gap:42px;padding-block:65px}.beyond-copy{margin-left:24px;max-width:450px;padding:24px;border-left-color:#c5dfb460}.beyond-copy p{font-size:16px}.beyond h2{margin-top:23px}.closing{padding-block:64px 48px}.closing-layout{grid-template-columns:1fr;gap:30px}.closing-copy{max-width:450px}.closing-copy>p:first-child{font-size:16px}.site-footer{align-items:start;gap:32px;padding-top:30px;padding-bottom:75px;flex-direction:column}.footer-right{text-align:left}.site-footer nav{font-size:12px}.site-footer p{font-size:11px}.legal{padding-block:48px 60px}.legal p{font-size:16px}.legal h2{font-size:22px}.legal-header .button{font-size:12px}.notice{padding-inline:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.landscape video,.landscape canvas{display:none!important}}
@media(prefers-reduced-transparency:reduce){.beyond-copy,.closing,.page-tools{background:var(--forest)}.landscape canvas{display:none}}
/* Expanded movement study: original anatomical illustration, not a product screen. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#cursor-trace{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.study-selector{display:flex;gap:32px;margin-top:32px;border-bottom:1px solid #52685b}
.study-selector button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:15px;padding:12px 0 14px;min-height:48px}
.study-selector button[aria-pressed=true]{color:var(--green);border-bottom-color:var(--green)}
.study-selector button:hover{color:var(--white)}
.study-context{margin-top:30px;max-width:700px;min-height:115px}
.study-context h3{font:400 32px/1.2 var(--serif);letter-spacing:-.025em}
.study-context p{font-size:16px;line-height:1.6;color:var(--muted);margin-top:13px;max-width:620px}
.study-grid{grid-template-columns:1fr 1.05fr;gap:46px;padding-top:4px}.pose-view{max-width:510px}
.vitruvian-frame{fill:none;stroke:#4a6352;stroke-width:.8}.vitruvian-frame>path{stroke:#354f40;stroke-dasharray:2 5}
.anatomy-reference{opacity:.38}.reference-outline{fill:none;stroke:#728a75;stroke-width:.9}
.anatomy-outline{fill:#20392c;stroke:#bdcdb4;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.anatomy-detail{fill:none;stroke:#8fa387;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}
.anatomy-detail-dot{fill:#8fa387}.anatomy-landmark{fill:#b9c9be}.far-limb{opacity:.62}
.study-guide{fill:none;stroke:#92a38a;stroke-width:1;stroke-dasharray:3 6}.study-measure{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round}
.study-point{fill:var(--green);stroke:var(--forest);stroke-width:2}.figure-label{fill:var(--muted);font:11px var(--sans)}
.study-detail{font-size:13px;line-height:1.6;color:var(--muted);margin-top:22px;max-width:420px}
.comparison-curve{fill:none;stroke:#a6bda9;stroke-width:1.6;stroke-dasharray:5 4}#curve-after{stroke:#f6f5ed;stroke-dasharray:1 4}
.stride-legend{display:flex;gap:22px;font-size:11px;color:var(--muted);margin:-5px 0 22px}
.stride-legend span{display:flex;align-items:center;gap:7px}.stride-legend span:before{content:'';display:block;width:18px;height:0;border-top:2px dashed #a6bda9}.stride-legend span:nth-child(2):before{border-top:2px solid var(--green)}.stride-legend span:nth-child(3):before{border-top:2px dotted var(--white)}
@media(max-width:767px){.study-selector{gap:0;justify-content:space-between;margin-top:22px}.study-selector button{font-size:12px;padding:13px 3px;min-height:48px}.study-context{min-height:168px;margin-top:24px}.study-context h3{font-size:27px}.study-context p{font-size:14px;margin-top:12px}.study-grid{grid-template-columns:1fr;gap:28px}.pose-view{max-width:380px}.study-detail{font-size:12px;margin-top:20px}.stride-legend{gap:16px}}
@media(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){#cursor-trace{display:none!important}}
.anatomy-hair{fill:#20392c;stroke:#a7b99f;stroke-width:1.2;stroke-linejoin:round}.anatomy-floor{fill:none;stroke:#52685b;stroke-width:.8}
/* Soft chapter boundaries keep native scrolling and fully readable static content. */
.hero:after{content:'';position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,rgba(9,27,19,.42));z-index:1;pointer-events:none}
/* Chapter sheets: the paper chapter slides over the fixed meadow; the forest study rises over the paper. */
.workflow{padding-top:clamp(88px,9vw,128px);padding-bottom:calc(clamp(96px,9vw,132px) + var(--r-sheet));background:var(--paper);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:0 -28px 70px -36px #050f0bcc;z-index:1}
.measurement{position:relative;z-index:2;margin-top:calc(-1*var(--r-sheet));padding-top:calc(60px + var(--r-sheet));border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:0 -24px 60px -40px #10201966}
.world-story{position:relative;isolation:isolate;background:var(--forest)}
.world-scene{position:absolute;inset:0;z-index:-1;pointer-events:none}
.world-scene-sticky{position:sticky;top:0;height:100dvh;overflow:hidden;background:var(--forest)}
.world-scene img,.world-scene video{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:54% 50%;filter:saturate(.65)}
.world-scene video{opacity:0;transition:opacity 1.2s}.world-scene video.playing{opacity:1}
.world-shade{position:absolute;inset:0;background:rgba(9,27,19,.66)}
.world-story:before,.world-story:after{content:'';position:absolute;left:0;right:0;height:170px;pointer-events:none;z-index:0}
.world-story:before{top:-1px;background:linear-gradient(var(--forest),transparent)}
.world-story:after{bottom:-1px;background:linear-gradient(transparent,var(--forest))}
.world-story section{position:relative;z-index:1;background:none}.beyond{min-height:740px}.beyond-copy{background:none;border:0;padding:0 0 0 24px}
.closing{padding-block:100px 145px}.closing-copy>p:first-child,.world-story .email-note,.beyond-copy .small{color:var(--white)}
@media(max-width:767px){.hero:after{height:110px}.workflow{padding-top:72px;padding-bottom:calc(72px + var(--r-sheet))}.measurement{padding-top:calc(40px + var(--r-sheet))}.beyond{min-height:720px}.beyond-copy{padding:0;margin-left:0}.closing{padding-block:60px 105px}.world-scene img,.world-scene video{object-position:58% 50%}}
@media(prefers-reduced-motion:reduce){.world-scene video{display:none!important}.narrative-enter{transform:none!important;transition:none!important}}
@media(prefers-reduced-transparency:reduce){.world-shade{background:var(--forest)}}
/* Shared-camera anatomical rendering, with the far arm behind the trunk. */
.far-arm{opacity:.64}.anatomy-hatch{fill:none;stroke:#8fa387;stroke-width:.6;opacity:.6;stroke-linecap:round}.anatomy-hair-strand{fill:none;stroke:#a5b89b;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}
.anatomy-fill{fill:#20392c;stroke:none}.anatomy-silhouette{fill:none;stroke:#bdcdb4;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
/* Classical profiles: continuous facial silhouette, shaded planes and curled locks. */
.head-skin{fill:#344b3a;stroke:#c5d1b8;stroke-width:1.1;stroke-linejoin:round}
.head-hair{fill:#283e30;stroke:#b9c9ab;stroke-width:1.05;stroke-linejoin:round}
.head-shadow{fill:#243c2d;stroke:none}
.head-detail{fill:none;stroke:#c5d1b8;stroke-width:.8;stroke-linecap:round;stroke-linejoin:round}
.head-curl{fill:none;stroke:#a9ba9b;stroke-width:.8;stroke-linecap:round}
.head-hatch{fill:none;stroke:#92a588;stroke-width:.65;stroke-linecap:round}
/* Scroll position controls the arrival, with static readable fallbacks. */
.narrative-enter{transition:opacity 1.4s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.narrative-enter.waiting{transform:translateY(26px)}
@supports(animation-timeline:view()){
 body[data-motion=running] .chapter-reveal{animation:chapter-arrival 1s linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
}
body[data-motion=stopped] .narrative-enter,body[data-motion=stopped] .chapter-reveal,.narrative-enter:focus-within,.chapter-reveal:focus-within{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.narrative-enter,.chapter-reveal{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}}
@media print{.narrative-enter,.chapter-reveal{animation:none!important;opacity:1!important;transform:none!important}}
/* Keep body copy above AA contrast throughout arrival; headings and scenery
   carry the stronger fade. Never leave a paused paragraph half-transparent. */
.narrative-enter,.chapter-reveal{--arrival-opacity:.9;--title-opacity:.5}
.workflow .narrative-enter,.workflow .chapter-reveal{--title-opacity:.72}
.world-story .narrative-enter,.world-story .chapter-reveal{--arrival-opacity:.98;--title-opacity:.78}
@keyframes chapter-arrival{from{opacity:var(--arrival-opacity);transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes chapter-title-arrival{from{opacity:var(--title-opacity)}to{opacity:1}}
@keyframes scene-arrival{from{opacity:0}to{opacity:1}}
.narrative-enter.waiting{opacity:var(--arrival-opacity)}
.narrative-enter h2{transition:opacity 1.4s ease}
.narrative-enter.waiting h2{opacity:var(--title-opacity)}
@supports(animation-timeline:view()){
 .chapter-reveal{view-timeline-name:--chapter-arrival;view-timeline-axis:block}
 body[data-motion=running] .chapter-reveal h2{animation:chapter-title-arrival 1s linear both;animation-timeline:--chapter-arrival;animation-range:entry 0% entry 85%}
 .world-story{view-timeline-name:--world-arrival;view-timeline-axis:block}
 body[data-motion=running] .world-scene{animation:scene-arrival 1s linear both;animation-timeline:--world-arrival;animation-range:entry 0% entry 80%}
}
body[data-motion=stopped] .chapter-reveal h2,body[data-motion=stopped] .narrative-enter h2,body[data-motion=stopped] .world-scene,.chapter-reveal:focus-within h2,.narrative-enter:focus-within h2{animation:none!important;opacity:1!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.chapter-reveal h2,.narrative-enter h2,.world-scene{animation:none!important;opacity:1!important;transition:none!important}}
@media print{.chapter-reveal h2,.narrative-enter h2,.world-scene{animation:none!important;opacity:1!important}}
/* Instrument pass, 27 September 2026. Alfred-derived discipline adapted to Positus:
   one easing, a documented radius rule (controls and instrument panels 4px, chapter
   sheets --r-sheet), labelled tabular readouts, fine panel edges and 44px targets. */
body{timeline-scope:--sheet}
.landscape:after{content:'';position:absolute;inset:0;background:#0a1712;opacity:0;pointer-events:none}
@supports(animation-timeline:view()){
 .workflow{view-timeline-name:--sheet;view-timeline-axis:block}
 .hero{view-timeline-name:--hero;view-timeline-axis:block}
 body[data-motion=running] .landscape{animation:landscape-recede linear both;animation-timeline:--sheet;animation-range:entry 0% entry 100%}
 body[data-motion=running] .landscape:after{animation:landscape-dim linear both;animation-timeline:--sheet;animation-range:entry 0% entry 100%}
 body[data-motion=running] .landscape-word{animation:word-drift linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
 body[data-motion=running] .steps li:not(:first-child):before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--ink);transform-origin:left;animation:rule-draw linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
}
@keyframes landscape-recede{to{transform:scale(1.06)}}
@keyframes landscape-dim{to{opacity:.45}}
@keyframes word-drift{to{transform:translate(-50%,30%)}}
@keyframes rule-draw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.5}}
.steps li{position:relative}
.button{transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease)}.button:active{transform:translateY(1px)}
/* The study as an instrument panel: fine edge, corner ticks, deeper ground. */
.movement-study{position:relative;border:1px solid var(--edge);border-radius:var(--r-control);background:var(--deep);padding-inline:clamp(16px,3vw,40px)}
.movement-study:before,.movement-study:after{content:'';position:absolute;width:14px;height:14px;border:0 solid var(--edge-strong);pointer-events:none}
.movement-study:before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px;border-top-left-radius:var(--r-control)}
.movement-study:after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px;border-bottom-right-radius:var(--r-control)}
.study-selector,.movement-study figcaption{border-color:var(--edge)}
.study-selector button{transition:color .2s var(--ease),border-color .2s var(--ease)}
.readouts{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:16px;border-bottom:1px solid var(--edge)}
.readout{display:flex;flex-direction:column;gap:8px;min-width:0}
.readout+.readout{text-align:right}
.readout-label{font-size:13px;line-height:1.3;color:var(--muted)}
.readout-value{font:300 44px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--white)}
.readout+.readout .readout-value{font-size:30px}
.readout-unit{font-size:.46em;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:2px}.readout-degree{font-size:1em;font-weight:300;margin-left:0}
.trace{overflow:visible;margin:28px 0 12px}.trace-labels{font-size:12px}
.phase-band rect{fill:#c5dfb40d;stroke:#c5dfb42e;stroke-width:1;stroke-dasharray:2 4}
.phase-band text{fill:var(--muted);font:12px var(--sans)}
.range-caption{align-items:center;font-size:13px}
.study-play{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:92px;padding:0 16px 0 14px;border:1px solid var(--edge-strong);border-radius:var(--r-control);background:transparent;color:var(--white);font-size:14px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.study-play:before{content:'';width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.is-playing .study-play:before{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.study-play:hover{border-color:var(--green);background:#c5dfb414}
.study-play:active{transform:translateY(1px)}
input[type=range]{height:44px}
input[type=range]::-webkit-slider-thumb{height:22px;width:22px;margin-top:-10px}
input[type=range]::-moz-range-thumb{height:16px;width:16px}
#cycle-help{font-size:12px}.stride-legend{font-size:12px}
.anatomy-shadow{fill:#08140f}
.page-tools{gap:0;padding:0;font-size:12px;letter-spacing:.01em;border-radius:var(--r-control);min-height:40px;overflow:hidden}
.page-tools button{min-height:40px;padding:0 14px;font-size:12px;border-right:1px solid #6a806d}
.page-tools button:hover{text-decoration:none;background:#c5dfb414}
#section-counter{display:flex;gap:10px;padding:0 14px}.section-index{font-variant-numeric:tabular-nums}.section-name{color:var(--muted)}
@media(pointer:coarse){.page-tools,.page-tools button{min-height:44px}}
@media(max-width:767px){.section-name{display:none}.study-label{font-size:12px}.study-label>span:last-child{max-width:170px}.pose-caption{font-size:12px}.readout-value{font-size:36px}.readout+.readout .readout-value{font-size:26px}.readout-label{font-size:12px}.trace-labels text,.phase-band text{font-size:21px}.figure-label{font-size:19px}.movement-study{margin-inline:-8px}}
@media(prefers-reduced-transparency:reduce){.landscape:after{display:none}}
@media(prefers-reduced-motion:reduce){.landscape,.landscape:after,.landscape-word{animation:none!important}}
@media(max-width:380px){.movement-study{margin-inline:-12px;padding-inline:12px}.study-selector button{font-size:12px;letter-spacing:-.005em;padding-inline:2px}}
/* Phones: page tools collapse to one 44px icon button, keep clear of the home
   indicator, and step aside while the movement study (with its own Pause) is on screen. */
@media(max-width:767px){
 .page-tools{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));min-height:44px;border-radius:50%;transition:opacity .25s var(--ease),visibility .25s}
 #section-counter{display:none}
 .page-tools button{width:44px;min-height:44px;padding:0;border-right:0;display:grid;place-items:center}
 .page-tools .tool-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .page-tools button:before{content:'';width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
 .page-tools button[aria-pressed=true]:before{clip-path:polygon(15% 0,100% 50%,15% 100%)}
 .page-tools:has(button[aria-disabled=true]),.page-tools:has(#motion-toggle[hidden]),body[data-study-in-view=true] .page-tools{opacity:0;visibility:hidden}
}
/* Site chrome, 27 September 2026: sticky chapter-aware header, phone menu,
   current-page marks, sitemap footer, loop band, shared closing band and content pages. */
:root{--header-h:80px}
html{scroll-padding-top:calc(var(--header-h) + 20px)}
.header-sentinel{position:absolute;top:0;left:0;width:1px;height:24px;pointer-events:none}
.site-header{position:sticky;top:0;z-index:20;height:var(--header-h);max-width:none;margin:0;padding-inline:max(var(--gutter),calc((100% - 1600px)/2 + var(--gutter)));color:var(--white);transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header[data-scrolled]{background:color-mix(in srgb,var(--deep) 86%,transparent);box-shadow:0 1px 0 var(--edge)}
@supports(backdrop-filter:blur(1px)){.site-header[data-scrolled]{-webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%)}}
.site-header[data-scrolled][data-theme=paper]{background:color-mix(in srgb,var(--paper) 94%,transparent);color:var(--ink);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 15%,transparent)}
.site-header[data-theme=paper] .nav-cta{background:var(--forest);color:var(--white)}
.site-header[data-theme=paper] .nav-cta:hover{background:#22392f}
.site-header[data-scrolled][data-theme=paper] :focus-visible{outline-color:var(--ink)}
.site-nav a[aria-current=page]{box-shadow:0 1px var(--green)}
.site-header[data-theme=paper] .site-nav a[aria-current=page]{box-shadow:0 1px var(--ink)}
.hero{min-height:calc(100dvh - var(--header-h))}
.menu-toggle,.menu-close{display:none;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--edge-strong);border-radius:var(--r-control);background:transparent;color:inherit;font-size:14px}
.site-header[data-theme=paper] .menu-toggle{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.menu-icon{width:16px;height:10px;border-block:1.5px solid currentColor}
.menu-close{display:inline-flex}
.site-menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--white)}
.site-menu::backdrop{background:rgba(9,27,19,.62)}
@supports(backdrop-filter:blur(1px)){.site-menu::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
html:has(.site-menu[open]){overflow:hidden}
.site-menu-panel{position:absolute;inset:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:auto;padding:10px 20px 20px;background:var(--forest);border:1px solid var(--edge);border-radius:var(--r-sheet)}
.site-menu[open] .site-menu-panel{animation:menu-in .25s var(--ease)}
@keyframes menu-in{from{opacity:0;transform:translateY(8px)}}
.site-menu-top{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.site-menu-top .wordmark{font-size:26px}.site-menu-top .wordmark img{width:28px;height:28px}
.site-menu nav ul{list-style:none;margin:28px 0 0;padding:0}
.site-menu nav a{display:block;padding:12px 0;border-bottom:1px solid var(--edge);font:400 30px/1.2 var(--serif);letter-spacing:-.02em}
.site-menu nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--green);text-underline-offset:7px}
.site-menu-foot{display:grid;gap:12px;margin-top:auto;padding-top:28px}
.site-menu-foot .button{width:100%;background:var(--paper)}
.menu-motion{min-height:44px;border:1px solid var(--edge-strong);border-radius:var(--r-control);background:none;color:var(--white);font-size:14px}
@media(prefers-reduced-transparency:reduce){.site-header[data-scrolled]{background:var(--deep);backdrop-filter:none}.site-header[data-scrolled][data-theme=paper]{background:var(--paper)}.site-menu::backdrop{background:var(--deep);backdrop-filter:none}}
@media(max-width:767px){:root{--header-h:64px}.menu-toggle{display:inline-flex}.site-header.has-menu{gap:10px}.site-header.has-menu .site-nav{margin-left:auto}}
@media(max-width:400px){.site-header.has-menu .nav-cta{display:none}}
/* Sitemap footer */
.site-footer{display:block;padding:0 0 96px;gap:0}
.site-footer:before{content:none}
.footer-grid{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-top:40px}
.footer-grid:before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
.site-footer .footer-col{display:block}
.footer-heading{margin:0 0 14px;font:550 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.footer-col a{display:inline-block;padding-block:5px}
.footer-brand p{margin-top:14px;font-size:13px}
.footer-legal{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;font-size:13px;color:var(--muted)}
.footer-legal nav{display:flex;gap:24px}.footer-legal p{margin:0;font-size:13px}
.site-footer a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:5px}
@media(max-width:767px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.footer-brand{grid-column:1/-1}.footer-legal{flex-direction:column;align-items:flex-start;gap:14px;margin-top:36px}.footer-legal p,.footer-brand p{font-size:12px}}
/* Loop band: repeat measurement as a cycle, on the paper sheet */
.loop{container-type:inline-size;margin-top:72px;padding-top:36px;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.loop-title{font:400 32px/1.2 var(--serif);letter-spacing:-.03em}
.loop-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.loop-steps li{position:relative;display:grid;align-content:start;gap:4px;padding:52px 16px 0 0}
.loop-steps li:before{content:'';position:absolute;top:18px;left:44px;right:8px;height:1px;background:color-mix(in srgb,var(--ink) 40%,transparent);transform-origin:left}
.loop-num{position:absolute;top:0;left:0;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--ink);border-radius:50%;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.loop-label{font:400 23px/1.2 var(--serif);letter-spacing:-.02em}
.loop-note{font-size:14px;color:var(--ink-muted)}
.loop-repeat{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:20px;font-size:15px}
.loop-repeat svg{flex:none;overflow:visible}.loop-repeat path{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
@container (max-width:48em){.loop-steps{grid-template-columns:1fr;gap:22px}.loop-steps li{padding:6px 0 0 56px;min-height:44px}.loop-steps li:before{top:40px;bottom:-22px;left:18px;right:auto;width:1px;height:auto}.loop-repeat{justify-content:flex-start;padding-left:4px}}
@supports(animation-timeline:view()){@container (min-width:48em){body[data-motion=running] .loop-steps li:before{animation:loop-draw linear both;animation-timeline:view();animation-range:entry 30% cover 45%}}}
@keyframes loop-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Shared closing band */
.closing-notes{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:4px;font-size:13px;line-height:1.55;color:var(--white)}
/* Content pages (Science, About): the home hero and chapter templates */
.hero-page{min-height:min(calc(82dvh - var(--header-h)),760px)}
.hero-page .hero-copy{padding-top:clamp(48px,11vh,128px);padding-bottom:clamp(150px,22vh,230px)}
.chapter-copy p{font-size:18px;line-height:1.7;max-width:560px}.chapter-copy p+p{margin-top:18px}
.measurement-heading>.chapter-copy{max-width:440px;color:var(--muted)}.measurement-heading>.chapter-copy p{font-size:17px}
.chapter-plain{position:relative;z-index:2;background:var(--forest);padding-block:24px 128px}
.workflow-foot a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:767px){.hero-page .hero-copy{padding-top:44px;padding-bottom:150px}.chapter-copy p{font-size:16px}.chapter-plain{padding-block:12px 88px}.loop{margin-top:48px}.loop-title{font-size:27px}}
.loop-repeat{max-width:none}
/* Phones: at the very top the page tools would sit on the hero's demo button; the
   phone menu carries the same motion control there. */
@media(max-width:767px){.site-header:not([data-scrolled])~.page-tools{opacity:0;visibility:hidden}}
/* Third pass, 27 September 2026: chapters blend instead of stacking as cards, and the
   workflow becomes a scroll-through sequence with a sticky illustration. */
:root{--blend:clamp(110px,20vh,230px);--accent-ink:#3f6b4b}
.workflow{border-radius:0;box-shadow:none;padding-top:calc(var(--blend) + clamp(48px,6vw,96px));padding-bottom:clamp(96px,9vw,132px);background:linear-gradient(to bottom,rgba(239,240,230,0),var(--paper) var(--blend));background:linear-gradient(to bottom in oklab,color-mix(in srgb,var(--paper) 0%,transparent),color-mix(in srgb,var(--paper) 10%,transparent) calc(var(--blend)*.3),color-mix(in srgb,var(--paper) 55%,transparent) calc(var(--blend)*.62),color-mix(in srgb,var(--paper) 90%,transparent) calc(var(--blend)*.85),var(--paper) var(--blend))}
.measurement{margin-top:0;border-radius:0;box-shadow:none;padding-top:calc(var(--blend) + 40px);background:linear-gradient(to bottom,var(--paper),var(--forest) var(--blend));background:linear-gradient(to bottom in oklab,var(--paper),color-mix(in oklab,var(--forest) 18%,var(--paper)) calc(var(--blend)*.3),color-mix(in oklab,var(--forest) 62%,var(--paper)) calc(var(--blend)*.55),color-mix(in oklab,var(--forest) 92%,var(--paper)) calc(var(--blend)*.8),var(--forest) var(--blend))}
@media(max-width:767px){:root{--blend:clamp(90px,16vh,150px)}.workflow{padding-top:calc(var(--blend) + 40px);padding-bottom:72px}.measurement{padding-top:calc(var(--blend) + 24px)}}
/* Scroll-through steps */
.workflow-intro-wide{max-width:640px}.workflow-intro-wide>p{max-width:420px;margin-top:26px;font-size:18px;line-height:1.7}
.scroll-steps{margin-top:56px}
.steps-stage{display:none}
.diagram{display:block;width:100%;height:auto;overflow:visible}
@media(min-width:900px){
 .scroll-steps.is-scroll{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:start}
 .is-scroll .stage-visual{position:absolute;inset:0;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .6s var(--ease),transform .9s var(--ease)}
 .steps-stage[data-active="1"] .stage-visual[data-step="1"],.steps-stage[data-active="2"] .stage-visual[data-step="2"],.steps-stage[data-active="3"] .stage-visual[data-step="3"]{opacity:1;transform:none}
 .stage-caption{margin-top:14px;font-size:12px;color:var(--ink-muted)}
 .is-scroll .step-visual{display:none}
 .is-scroll .steps-scroll{position:relative;padding-left:36px;border-left:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
 .is-scroll .steps-scroll:before{content:'';position:absolute;top:0;left:-1px;width:1px;height:100%;background:var(--ink);transform-origin:top;transform:scaleY(var(--fill,.333));transition:transform .7s var(--ease)}
 .is-scroll .steps-scroll li:before{display:none}
 .is-scroll .steps-scroll li h3,.is-scroll .steps-scroll li p,.is-scroll .steps-scroll .step-index{transition:color .4s var(--ease)}
 .is-scroll .steps-scroll li:not(.is-active) h3,.is-scroll .steps-scroll li:not(.is-active) p,.is-scroll .steps-scroll li:not(.is-active) .step-index{color:var(--ink-muted)}
}
body[data-motion=stopped] .stage-visual,body[data-motion=stopped] .steps-scroll:before{transition:none}
/* Greener dusk between paper and forest: sage mid-tones instead of grey. */
.measurement{background:linear-gradient(to bottom in oklab,var(--paper),color-mix(in oklab,var(--forest) 25%,var(--paper)) calc(var(--blend)*.25),color-mix(in oklab,var(--forest) 65%,var(--paper)) calc(var(--blend)*.5),color-mix(in oklab,var(--forest) 90%,var(--paper)) calc(var(--blend)*.75),var(--forest) var(--blend))}
.measurement-list-2{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
/* Publication list: hairlines, not cards. */
.pubs{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px)}
.pub{padding:26px 0 30px;border-top:1px solid var(--line)}
.pub-meta{font-size:13px;color:var(--muted)}
.pub-title{margin-top:10px;font:400 23px/1.3 var(--serif);letter-spacing:-.015em;color:var(--white)}
.pub-journal{margin-top:6px;font-size:14px;color:var(--muted)}
.pub-note{margin-top:14px;font-size:15px;line-height:1.6;color:var(--white);max-width:52ch}
.pub-link{display:inline-block;margin-top:12px;padding-block:6px;font-size:13px;color:var(--green);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.pubs-note{margin-top:18px;font-size:13px;color:var(--muted)}
@media(max-width:767px){.measurement-list-2,.pubs{grid-template-columns:1fr}.pub-title{font-size:21px}}
/* Fourth pass: the step illustrations live in a dark instrument viewport with a faint
   grid, glowing lines and slow live motion (rays, landmarks, scan, cursor). All motion
   stops with the global pause, reduced motion and print. */
.step-visual{margin:22px 0 0;max-width:420px}
.stage-frame,.step-visual{position:relative;overflow:hidden;background:var(--deep);border:1px solid #c5dfb42e;border-radius:var(--r-control);color:var(--white)}
.stage-frame:before,.step-visual:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#c5dfb414 1px,transparent 1px),linear-gradient(90deg,#c5dfb414 1px,transparent 1px);background-size:20px 20px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 80%)}
.stage-frame:after,.step-visual:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 45%,#c5dfb412,transparent 70%)}
.step-visual .diagram{position:relative;z-index:1}.stage-frame .diagram{z-index:1}
.h-area{fill:#c5dfb40a;stroke:#8fa387;stroke-width:1;stroke-dasharray:4 5}
.h-line{fill:none;stroke:#dfe7d8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.h-faint{stroke:#8fa387;opacity:.65}.h-dash{stroke-dasharray:5 5}
.h-accent{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px #c5dfb499)}
.h-head{fill:none;stroke:#dfe7d8;stroke-width:1.5}
.h-joint{fill:var(--deep);stroke:var(--green);stroke-width:1.6}
.h-phone{fill:var(--deep);stroke:#dfe7d8;stroke-width:1.4}
.h-ray{fill:none;stroke:var(--green);stroke-width:1;stroke-dasharray:2 6;opacity:.45}
.h-band{fill:var(--green);opacity:.14}
.h-scan{opacity:0}.h-scan-line{fill:var(--green);opacity:.8}.h-scan-haze{fill:var(--green);opacity:.07}
.h-cursor path{stroke:var(--green);stroke-width:1;opacity:.7}
.h-cursor-review{transform:translateX(222px)}.h-cursor-compare{transform:translateX(48px)}
.h-label{font:12px var(--sans);fill:#b9c9be;letter-spacing:.02em}
@keyframes h-flow{to{stroke-dashoffset:-32}}
@keyframes h-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes h-scan{0%{opacity:0;transform:translateY(58px)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(268px)}}
@keyframes h-cursor-review{from{transform:translateX(222px)}to{transform:translateX(372px)}}
@keyframes h-cursor-compare{from{transform:translateX(48px)}to{transform:translateX(352px)}}
body[data-motion=running] .h-ray{animation:h-flow 1.8s linear infinite}
body[data-motion=running] .h-joint{animation:h-pulse 2.6s ease-in-out infinite}
body[data-motion=running] .h-joint:nth-child(3n+2){animation-delay:-.9s}body[data-motion=running] .h-joint:nth-child(3n){animation-delay:-1.7s}
body[data-motion=running] .h-scan{animation:h-scan 3.6s ease-in-out infinite}
body[data-motion=running] .h-cursor-review{animation:h-cursor-review 4.2s ease-in-out infinite alternate}
body[data-motion=running] .h-cursor-compare{animation:h-cursor-compare 5s ease-in-out infinite alternate}
@media(min-width:900px){
 .is-scroll .steps-stage{position:sticky;top:calc(var(--header-h) + 8vh);display:flex;flex-direction:column;justify-content:center;height:min(62vh,560px)}
 .is-scroll .stage-frame{width:100%;aspect-ratio:5/4;max-height:100%}
 .is-scroll .steps-scroll li,.is-scroll .steps-scroll li:first-child{min-height:44vh;align-content:center;padding:0;border-top:0}
}
@media(prefers-reduced-motion:reduce){.h-ray,.h-joint,.h-scan,.h-cursor-review,.h-cursor-compare{animation:none!important}}
/* Palette concepts for local comparison (palette-lab.js). The default page is unchanged;
   these apply only when body[data-palette] is set on a local preview. */
.palette-lab{position:fixed;left:16px;bottom:16px;z-index:25;display:flex;align-items:center;gap:2px;padding:4px;background:#08110dee;color:#f6f5ed;border:1px solid #c5dfb440;border-radius:999px;font-size:12px}
.palette-lab span{padding:0 10px;color:#b9c9be}
.palette-lab button{min-height:34px;padding:0 12px;border:0;border-radius:999px;background:none;color:inherit;font-size:12px}
.palette-lab button[aria-pressed=true]{background:#c5dfb4;color:#08110d}
@media(pointer:coarse){.palette-lab button{min-height:44px}}
/* Shared: every palette derives its blends and header surfaces from tokens. */
body[data-palette] .measurement{background:linear-gradient(to bottom in oklab,var(--paper),color-mix(in oklab,var(--forest) 25%,var(--paper)) calc(var(--blend)*.25),color-mix(in oklab,var(--forest) 65%,var(--paper)) calc(var(--blend)*.5),color-mix(in oklab,var(--forest) 90%,var(--paper)) calc(var(--blend)*.75),var(--forest) var(--blend))}
body[data-palette] .page-tools{background:color-mix(in srgb,var(--deep) 95%,transparent)}
/* 1. Deeper: the same identity, darker ground, warmer paper, a more luminous accent for live data. */
body[data-palette=deep],body[data-palette=sun],body[data-palette=deepsun]{--forest:#0b1813;--deep:#07110c;--paper:#f3f1e7;--white:#f7f5ec;--ink:#1d3027;--ink-muted:#44584b;--green:#d2efa6;--line:#3f5649;--muted:#b3c6b8;--edge:#b3c6b82e;--edge-strong:#b3c6b859}
body[data-palette=deep],body[data-palette=sun],body[data-palette=deepsun]{background:var(--forest)}
/* 2. All dark: one continuous ground like Habitus and Ochy, soft sage glows, fine grain, pill buttons. */
body[data-palette=dark]{--forest:#0c1813;--deep:#08110d;--paper:#0f1e18;--white:#f3f2ea;--ink:#eef0e6;--ink-muted:#a9bcaf;--muted:#a9bcaf;--green:#c5dfb4;--line:#33483d;--edge:#a9bcaf2e;--edge-strong:#a9bcaf59;background:var(--forest)}
body[data-palette=dark] .paper{background-image:radial-gradient(55% 40% at 12% 18%,#c5dfb412,transparent 70%),radial-gradient(45% 35% at 88% 70%,#c5dfb40d,transparent 70%)}
body[data-palette=dark] .workflow{background:radial-gradient(55% 40% at 12% 30%,#c5dfb412,transparent 70%),linear-gradient(to bottom in oklab,color-mix(in srgb,var(--paper) 0%,transparent),var(--paper) var(--blend))}
body[data-palette=dark] .button{border-radius:999px;box-shadow:0 0 0 1px #c5dfb440,0 0 28px #c5dfb433}
body[data-palette=dark] .nav-cta{background:#c5dfb41f;color:var(--white);box-shadow:0 0 0 1px #c5dfb459}
body[data-palette=dark] .site-header[data-theme=paper] .nav-cta{background:#c5dfb41f;color:var(--white)}
body[data-palette=dark] .stage-frame,body[data-palette=dark] .step-visual{background:#0a1611;box-shadow:0 0 60px #c5dfb40f}
body[data-palette=dark]:after{content:'';position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 3. Sunlight: Deeper plus one warm light motif, "komorebi" sun through leaves, kept to
   the italic words and a sunlit corner of the landscape. */
body[data-palette=sun]{--sun:#f1c17a;--sun-ink:#7f5412}
body[data-palette=sun] h1 em,body[data-palette=sun] h2 em{color:var(--sun)}
body[data-palette=sun] .paper h2 em,body[data-palette=sun] .paper h3 em{color:var(--sun-ink)}
body[data-palette=sun] .landscape-shade{background:radial-gradient(38% 42% at 90% 4%,#f1c17a2e,transparent 72%),linear-gradient(180deg,rgba(9,27,19,.68),rgba(9,27,19,.64) 65%,rgba(9,27,19,.64))}
body[data-palette=sun] .world-shade{background:radial-gradient(40% 45% at 92% 8%,#f1c17a24,transparent 72%),rgba(9,27,19,.66)}
/* All dark: surfaces that use the paper token as a light colour keep a light value. */
body[data-palette=dark] .page-tools,body[data-palette=dark] .skip{color:var(--white)}
body[data-palette=dark] .skip{background:var(--deep)}
body[data-palette=dark] .site-menu-foot .button{background:var(--green);color:var(--deep)}
body[data-palette=dark] input[type=range]::-webkit-slider-thumb{background:var(--white)}
body[data-palette=dark] input[type=range]::-moz-range-thumb{background:var(--white)}
@media(max-width:767px){.palette-lab{left:8px;right:8px;bottom:auto;top:calc(var(--header-h) + 8px);justify-content:center}.palette-lab span{display:none}}
/* Research chapter: intro aligned to the heading's first line; each study floats up
   into an opaque "bubble" on hover or focus, with its study details brightening. */
.research-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,6vw,96px)}
.research-heading>.chapter-copy{max-width:520px;padding-top:.7em}
.pubs{gap:20px clamp(20px,3vw,40px)}
.pub{position:relative;padding:26px 24px 28px;margin-inline:-24px;border-top:1px solid var(--line);border-radius:var(--r-control);transition:transform .45s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.pub-details{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:16px 0 0;font-size:13px;line-height:1.5;opacity:.72;transition:opacity .45s var(--ease)}
.pub-details>div{display:contents}.pub-details dt{color:var(--muted)}.pub-details dd{margin:0;color:var(--white)}
@media(hover:hover){.pub:hover,.pub:focus-within{transform:translateY(-6px);background:color-mix(in srgb,var(--deep) 92%,var(--green));border-color:transparent;box-shadow:0 0 0 1px #c5dfb42e,0 18px 44px -18px #000c,0 0 36px -10px #c5dfb426}.pub:hover .pub-details,.pub:focus-within .pub-details{opacity:1}}
@media(hover:none){.pub-details{opacity:1}}
@media(max-width:767px){.research-heading{grid-template-columns:1fr;gap:20px}.research-heading>.chapter-copy{padding-top:0}.pub{padding-inline:16px;margin-inline:-16px}}
/* 4. Deeper + Sunlight: Deeper with the warm light carried further. Dappled sun over the
   landscapes, a warmer paper, and amber on the live marks (study cursor and point, the
   illustration scan and cursors) and the italic words. The demo button stays green. */
body[data-palette=deepsun]{--sun:#f1c17a;--sun-ink:#7f5412;--paper:#f4efe3}
body[data-palette=deepsun] h1 em,body[data-palette=deepsun] h2 em{color:var(--sun)}
body[data-palette=deepsun] .paper h2 em,body[data-palette=deepsun] .paper h3 em{color:var(--sun-ink)}
body[data-palette=deepsun] .landscape-shade{background:radial-gradient(30% 36% at 88% 6%,#f1c17a38,transparent 72%),radial-gradient(14% 18% at 70% 22%,#f1c17a1f,transparent 70%),radial-gradient(10% 14% at 58% 12%,#f1c17a17,transparent 70%),radial-gradient(18% 22% at 8% 30%,#f1c17a12,transparent 70%),linear-gradient(180deg,rgba(9,27,19,.68),rgba(9,27,19,.64) 65%,rgba(9,27,19,.64))}
body[data-palette=deepsun] .world-shade{background:radial-gradient(34% 40% at 90% 8%,#f1c17a2e,transparent 72%),radial-gradient(14% 18% at 72% 26%,#f1c17a17,transparent 70%),rgba(9,27,19,.66)}
body[data-palette=deepsun] #trace-point{fill:var(--sun)}body[data-palette=deepsun] #trace-cursor path{stroke:#f1c17a99}
body[data-palette=deepsun] .h-scan-line,body[data-palette=deepsun] .h-scan-haze{fill:var(--sun)}body[data-palette=deepsun] .h-cursor path{stroke:var(--sun)}
body[data-palette=deepsun] .stage-frame:after,body[data-palette=deepsun] .step-visual:after{background:radial-gradient(50% 45% at 80% 15%,#f1c17a14,transparent 70%),radial-gradient(ellipse 60% 55% at 50% 45%,#c5dfb410,transparent 70%)}
body[data-palette=deepsun] .pub:hover,body[data-palette=deepsun] .pub:focus-within{box-shadow:0 0 0 1px #f1c17a33,0 18px 44px -18px #000c,0 0 36px -10px #f1c17a26}
.pub{border-top:0}.pub:before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:var(--line);transition:opacity .3s var(--ease)}
@media(hover:hover){.pub:hover:before,.pub:focus-within:before{opacity:0}}
@media(max-width:767px){.pub:before{left:16px;right:16px}}
/* Original: the palette before Deeper became the default (27 September 2026). */
body[data-palette=original]{--forest:#172b24;--deep:#102019;--paper:#eff0e6;--white:#f6f5ed;--muted:#b9c9be;--ink:#273b30;--ink-muted:#4b5e51;--green:#c5dfb4;--line:#52685b;--edge:#b9c9be2e;--edge-strong:#b9c9be59;background:var(--forest)}
body[data-palette=original] .measurement{background:linear-gradient(to bottom,var(--paper),#c9d3c3 calc(var(--blend)*.22),#7d937f calc(var(--blend)*.48),#34493d calc(var(--blend)*.74),var(--forest) var(--blend))}
/* Page tools on every screen, 28 September 2026 (founder request): one quiet 44px icon button for
   pausing and resuming motion, as phones already had. The words stay in the button for screen
   readers and as its tooltip. With motion off (reduced motion, data saving) it steps aside. */
.page-tools{gap:0;padding:0;min-height:44px;border-radius:50%;transition:opacity .25s var(--ease),visibility .25s}
.page-tools button{width:44px;min-height:44px;padding:0;border-right:0;display:grid;place-items:center}
.page-tools .tool-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.page-tools button:before{content:'';width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.page-tools button[aria-pressed=true]:before{clip-path:polygon(15% 0,100% 50%,15% 100%)}
.page-tools:has(button[aria-disabled=true]),.page-tools:has(#motion-toggle[hidden]){opacity:0;visibility:hidden}