:root{color-scheme:light;--paper:#ffffff;--paper-deep:#f8fafc;--surface:#ffffff;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--accent:#1e40af;--accent-deep:#0a48a9;--accent-soft:#eff4ff;--shadow:#0f172a;--honey:#F6E7C8;--honey-deep:#E6CC93;--honey-ink:#6E4D12;--clay-soft:#F7E6DC;--clay-ink:#8A4B33;--font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--step--1:0.9375rem;--step-0:1.125rem;--step-1:1.3125rem;--step-2:clamp(1.5rem,1.3rem + 0.9vw,1.9rem);--step-3:clamp(1.9rem,1.45rem + 2vw,2.9rem);--step-4:clamp(2.2rem,1.6rem + 3vw,3.7rem);--r-s:12px;--r-m:20px;--r-l:28px;--r-xl:44px;--gutter:clamp(18px,4.5vw,48px);--measure:40rem;--wide:72rem;--ease-emphasized:cubic-bezier(.05,.7,.1,1);--ease-standard:cubic-bezier(.2,0,0,1);--ease-breathe:cubic-bezier(.45,.05,.4,1);--motion-state:200ms var(--ease-standard);--motion-enter:640ms var(--ease-emphasized);--motion-page:560ms var(--ease-emphasized);--ease:var(--ease-standard);--ease-out:var(--ease-emphasized);--t-touch:200ms;--t-enter:640ms;--t-page:560ms;--shadow-1:0 1px 2px rgb(15 23 42 / .05),0 8px 22px -14px rgb(15 23 42 / .28);--shadow-2:0 2px 6px rgb(15 23 42 / .06),0 22px 44px -22px rgb(15 23 42 / .36)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--step-0);font-weight:440;line-height:1.64;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
h1,h2,h3{line-height:1.12;font-weight:800;letter-spacing:-0.024em;margin:0 0 .5em;text-wrap:balance}
h1{letter-spacing:-0.031em;line-height:1.05}
h3{font-weight:740;letter-spacing:-0.014em}
p{margin:0 0 1em;text-wrap:pretty}
strong{font-weight:760}
a{color:var(--accent-deep);text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgb(30 64 175 / .55)}
a:hover{color:#0a48a9;text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
::selection{background:#dbeafe}
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:12px;z-index:50;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--surface);font-weight:700;text-decoration:none;transform:translateY(-160%);opacity:0}
.skip-link:focus{transform:none;opacity:1;color:var(--surface)}
.icon{width:24px;height:24px;flex:none}
.site-header{padding-block:14px}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font-weight:820;font-size:1.28rem;letter-spacing:-0.01em}
.brand:hover{color:var(--ink)}
.logo-mark{width:34px;height:34px}
.brand b{color:var(--accent-deep);font-weight:820}
.header-nav{display:flex;align-items:center;gap:6px}
.header-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-weight:700;font-size:.98rem;text-decoration:none;color:var(--ink)}
.header-nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-deep)}
@media (max-width:520px){.header-nav .nav-hub{display:none}
}
.draft-banner{background:var(--honey);color:var(--honey-ink);font-size:var(--step--1);line-height:1.45}
.draft-banner .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;padding-block:6px}
.draft-banner__msg{margin:0;padding-block:4px}
.draft-banner strong{font-weight:800}
.draft-banner a{color:var(--honey-ink);font-weight:750}
.draft-banner .icon{width:20px;height:20px}
.draft-banner__msg{display:inline-flex;align-items:flex-start;gap:8px;flex:1 1 100%}
.draft-banner__msg .icon{margin-top:1px}
@media (min-width:900px){.draft-banner__msg{flex-basis:auto;flex-grow:1}
}
.draft-banner a{display:inline-flex;align-items:center;min-height:44px}
.marks-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:700;margin-left:auto}
.marks-toggle input{appearance:none;margin:0;width:42px;height:24px;border-radius:999px;background:#E3CF9F;position:relative;flex:none;cursor:pointer}
.marks-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgb(91 70 49 / .3)}
.marks-toggle input:checked{background:#B58A33}
.marks-toggle input:checked::after{transform:translateX(18px)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:0;background:var(--accent-deep);color:#ffffff;font:inherit;font-weight:760;text-decoration:none;cursor:pointer}
.btn:hover{color:#ffffff}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 14px 28px -14px rgb(30 64 175 / .7);opacity:0;pointer-events:none}
.btn--quiet{background:var(--surface);color:var(--accent-deep);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--quiet:hover{color:var(--accent-deep)}
.card{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 22px 20px;border-radius:var(--r-l);background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-1)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--shadow-2);opacity:0;pointer-events:none}
.card__title{margin:0;font-size:var(--step-1);font-weight:780;line-height:1.25}
.card__link{color:var(--ink);text-decoration:none}
.card__link:hover{color:var(--ink)}
.card__link::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.card__link:focus-visible{outline:none}
.card__link:focus-visible::before{outline:2px solid var(--accent);outline-offset:3px}
.card .claim-tag{position:relative;z-index:2}
.card__summary{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.55}
.card__more{margin-top:auto;padding-top:10px;font-weight:760;color:var(--accent-deep);font-size:.98rem}
.card--row{display:grid;grid-template-columns:1fr;gap:3px;height:auto;padding:19px 10px;border-radius:16px;background:transparent;box-shadow:none}
.card--row::after{display:none}
.card--row .card__title{font-size:1.19rem;font-weight:780;letter-spacing:-0.016em}
.card--row .card__title a{text-decoration:none}
.card--row .card__summary{font-size:.99rem;line-height:1.55;max-width:44rem}
.card--row .card__more{margin:8px 0 0;padding:0;font-size:.9rem;font-weight:750;justify-self:start}
.card--row .card__more::after{content:"";display:block;width:100%;height:1.5px;margin-top:1px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--motion-state)}
.card--row:hover{background:rgb(255 255 255 / .7)}
.card--row:hover .card__title,.card--row:hover .card__link{color:var(--deep,var(--accent-deep))}
.card--row:hover .card__more::after{transform:scaleX(1)}
.card--row:active{transform:scale(.996)}
.card--row .card__link::before{border-radius:16px}
.card--feature{margin-top:6px;padding:30px 26px;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 70%,#ffffff),var(--accent-soft));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-deep) 20%,transparent)}
.card--feature .card__title{font-size:1.45rem;letter-spacing:-0.02em}
.card--feature:hover{background:linear-gradient(180deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 80%,#ffffff))}
.card--feature:hover .card__title{color:var(--accent-deep)}
.callout{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:start;padding:20px 22px;border-radius:var(--r-l);background:var(--clay-soft);color:var(--ink)}
.callout .icon{color:var(--clay-ink);margin-top:3px}
.callout p{margin:0 0 .4em}
.callout p:last-child{margin:0}
.callout__title{font-weight:800}
.note{background:var(--paper-deep);border-radius:var(--r-m);padding:16px 18px;margin:0 0 1em}
.site-footer{margin-top:88px;padding-block:36px 60px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--step--1)}
.site-footer .wrap{display:grid;gap:14px}
.site-footer p{margin:0;max-width:46rem}
.site-footer .brand{font-size:1.1rem}
.site-footer .attribution{color:var(--ink);font-weight:650}
.claim{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:rgb(110 77 18 / .5);text-decoration-thickness:1.6px;text-underline-offset:4px}
.claim[data-status="approved"]{text-decoration-color:rgb(60 102 87 / .35)}
.claim-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px rgb(110 77 18 / .42);color:var(--honey-ink);font-size:.68em;font-weight:800;line-height:1.75;vertical-align:.18em;text-decoration:none;white-space:nowrap;letter-spacing:.04em}
.claim-tag:hover{color:var(--honey-ink);background:rgb(246 231 200 / .6);box-shadow:inset 0 0 0 1px rgb(110 77 18 / .6)}
.claim[data-status="approved"] .claim-tag{background:var(--accent-soft);color:var(--accent-deep)}
body:has(#marks:not(:checked)) .claim{text-decoration:none}
body:has(#marks:not(:checked)) .claim-tag{display:none}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}
.btn{transition:transform var(--motion-state),background-color var(--motion-state),box-shadow var(--motion-state)}
.btn::after{transition:opacity var(--motion-state)}
.btn:active{transform:scale(.97)}
.toc a,.chip,.card--row{transition:transform var(--motion-state),background-color var(--motion-state),box-shadow var(--motion-state)}
.marks-toggle input::after{transition:transform var(--motion-state) var(--ease-standard)}
.skip-link{transition:transform var(--motion-state) var(--ease-standard),opacity var(--motion-state) var(--ease-standard)}
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:var(--motion-page);animation-timing-function:var(--ease-emphasized)}
::view-transition-old(root){animation:nonop-page-out 380ms var(--ease-emphasized) both}
::view-transition-new(root){animation:nonop-page-in var(--motion-page) var(--ease-emphasized) both}
html:active-view-transition-type(forward)::view-transition-old(root){animation-name:nonop-slide-out-left}
html:active-view-transition-type(forward)::view-transition-new(root){animation-name:nonop-slide-in-right}
html:active-view-transition-type(back)::view-transition-old(root){animation-name:nonop-slide-out-right}
html:active-view-transition-type(back)::view-transition-new(root){animation-name:nonop-slide-in-left}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px);background-color:#0a48a9}
.btn:hover::after{opacity:1}
.btn--quiet:hover{background-color:var(--surface);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-deep) 45%,var(--line))}
}
@keyframes nonop-page-out{to{opacity:0;transform:translateY(-10px) scale(.994)}
}
@keyframes nonop-page-in{from{opacity:0;transform:translateY(16px)}
}
@keyframes nonop-slide-out-left{to{opacity:0;transform:translateX(-36px)}
}
@keyframes nonop-slide-in-right{from{opacity:0;transform:translateX(36px)}
}
@keyframes nonop-slide-out-right{to{opacity:0;transform:translateX(36px)}
}
@keyframes nonop-slide-in-left{from{opacity:0;transform:translateX(-36px)}
}
@media print{.draft-banner,.site-header nav,.toc,.claim-tag{display:none !important}
body{background:#fff}
}
.scene,.emblem{--in:1;--out:0}
.motif{--m:144px;position:relative;width:var(--m);height:var(--m)}
@media (min-width:760px){.scene__art .motif{--m:270px}
}
.hero__art .motif{--m:min(50vw,200px)}
@media (min-width:820px){.hero__art .motif{--m:380px}
}
.emblem .motif{--m:min(34vw,150px)}
@media (min-width:760px){.emblem .motif{--m:240px}
}
.motif--breathe{transform:scale(calc(1 + var(--out) * .45));opacity:calc(1 - var(--out) * .85)}
.b-ring{position:absolute;inset:calc(var(--m) * (3 - var(--n)) * .12);border-radius:50%;background:transparent;border:1.5px solid rgb(95 140 123 / .34);transform:scale(calc(.98 + var(--n) * .01))}
.b-ring[style*="--n:2"]{border-color:rgb(95 140 123 / .22)}
.b-ring[style*="--n:1"]{border-color:rgb(60 102 87 / .5)}
.b-core{position:absolute;inset:34%;border-radius:50%;background:#F5E7D4;box-shadow:0 10px 24px -14px rgb(91 70 49 / .45)}
.stone{position:absolute;left:50%;box-shadow:inset 1px 2px 2px rgb(255 255 255 / .35),inset -1px -3px 4px rgb(43 32 24 / .22)}
.stone::after{content:"";position:absolute;left:16%;right:16%;bottom:-2%;height:30%;border-radius:50%;background:rgb(43 32 24 / .32);filter:blur(3px)}
.motif--breathe .stone{transform:translateX(-50%) rotate(var(--lean,0deg))}
.st1{--lean:-1.8deg;width:21%;height:7.5%;top:58%;background:#6E9A84;border-radius:54% 46% 58% 42% / 66% 62% 38% 34%}
.st2{--lean:1.4deg;width:15.5%;height:6.4%;top:52%;background:#D9B48F;border-radius:46% 54% 43% 57% / 60% 64% 36% 40%}
.st3{--lean:-1.1deg;width:10%;height:5.2%;top:47.2%;background:#B97A57;border-radius:53% 47% 56% 44% / 58% 60% 40% 42%}
[data-scene="melt"] .ice-block{background:#E3F0EC;border:2px solid rgb(255 255 255 / .9);box-shadow:inset 0 2px 0 rgb(255 255 255 / .9),inset 0 -30px 44px -34px rgb(62 116 110 / .5),0 26px 50px -32px rgb(62 116 110 / .55)}
[data-scene="melt"] .ice-block,[data-scene="melt"] .ice-sheen,[data-scene="melt"] .ice-frost,[data-scene="melt"] .ice-facets{transform-origin:50% 100%;transform:translateY(calc(var(--out) * 30px)) scaleY(calc(1 - var(--out) * .08));opacity:calc(1 - var(--out) * .86)}
.ice-facets{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgb(255 255 255 / .75);stroke-width:1.5px;stroke-linejoin:round}
.ice-frost{position:absolute;inset:0;border-radius:var(--r-xl);box-shadow:inset 0 14px 24px -18px rgb(255 255 255 / 1)}
.ice-sheen{position:absolute;inset:0;overflow:hidden;border-radius:var(--r-xl)}
.ice-sheen i{position:absolute;top:-30%;bottom:-30%;left:10%;width:64px;border-radius:40px;background:rgb(255 255 255 / .42);transform:rotate(20deg)}
.ice-sheen i + i{left:19%;width:20px;background:rgb(255 255 255 / .32)}
.ice-edge{position:absolute;left:3%;width:94%;top:calc(100% - 3px);height:30px;fill:#E3F0EC;overflow:visible;transform-origin:50% 0;transform:translateY(calc(var(--out) * 29px)) scaleY(calc(.8 + var(--out) * 2.6));opacity:calc(1 - var(--out) * .7)}
[data-scene="melt"] .drop{--g:clamp(0,(var(--out) - var(--d)) / .18,1);--k:clamp(0,(var(--out) - var(--d) - .14) / .44,1);position:absolute;left:var(--x);top:0;width:17px;height:17px;margin:-7px 0 0 -8.5px;border-radius:0 50% 50% 50%;background:#CBE4DE;box-shadow:inset -3px -3px 0 rgb(62 116 110 / .16),inset 3px 3px 0 rgb(255 255 255 / .6);transform:translateY(calc(var(--k) * var(--k) * var(--fall) + var(--out) * 26px)) scale(calc(.5 + var(--g) * .5)) rotate(45deg);opacity:calc(1 - var(--k) * var(--k))}
[data-scene="melt"] .splash{--r:clamp(0,(var(--out) - var(--d) - .52) / .3,1);position:absolute;left:var(--x);top:calc(var(--fall) + 24px);width:46px;height:12px;margin-left:-23px;border-radius:50%;border:1.5px solid rgb(62 116 110 / .42);transform:scale(calc(.25 + var(--r) * 1.3));opacity:calc(min(1,var(--r) * 6) * (1 - var(--r)))}
.motif--melt{transform:translateY(calc(var(--out) * var(--m) * .1)) scale(calc(1 - var(--out) * .18));opacity:calc(1 - var(--out) * .6)}
.cube{position:absolute;width:50%;aspect-ratio:1;border-radius:26%;background:#E1EFEA;border:2px solid rgb(255 255 255 / .92);box-shadow:inset calc(var(--m) * -.04) calc(var(--m) * -.05) 0 rgb(62 116 110 / .1),0 12px 26px -16px rgb(62 116 110 / .55)}
.cube.c1{left:10%;top:34%;transform:rotate(-9deg)}
.cube.c2{left:44%;top:14%;width:44%;transform:rotate(12deg)}
.cube i{position:absolute;left:14%;top:13%;width:42%;height:15%;border-radius:999px;background:rgb(255 255 255 / .85);transform:rotate(-18deg)}
.spark{position:absolute;left:var(--x);top:var(--y);width:5%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 calc(var(--m) * .03) calc(var(--m) * .012) rgb(255 255 255 / .9);opacity:.8}
.amb-drip{position:absolute;left:30%;top:84%;width:7%;aspect-ratio:1;border-radius:0 50% 50% 50%;background:#CFE6E0;transform:rotate(45deg);opacity:.9}
.heat-glow{position:absolute;left:70%;top:22%;width:min(84vw,560px);aspect-ratio:1;translate:-50% -50%;transform:translateY(calc(var(--out) * -170px)) scale(calc(.7 + var(--in) * .3 + var(--out) * 1.05));opacity:calc(var(--in) * (1 - var(--out)))}
.heat-glow::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgb(245 172 110 / .5),rgb(245 172 110 / .18) 42%,rgb(245 172 110 / 0) 70%)}
.heat-ring{position:absolute;left:70%;top:22%;width:calc(var(--n) * 150px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px solid rgb(160 87 42 / .17);transform:scale(calc(.8 + var(--in) * .2 + var(--out) * (.4 + var(--n) * .28)));opacity:calc(var(--in) * (1 - var(--out)))}
.mote{--k:clamp(0,(var(--out) - var(--d)) / .55,1);position:absolute;left:var(--x);bottom:10%;width:10px;height:10px;border-radius:50%;background:#F2B583;transform:translate(calc(var(--k) * var(--dx)),calc(var(--k) * -260px)) scale(calc(1 - var(--k) * .5));opacity:calc(min(1,var(--k) * 5) * (1 - var(--k)) * .9)}
.heat-haze{position:absolute;left:50%;top:0;width:min(90vw,700px);height:190px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgb(247 205 160 / .6),rgb(247 205 160 / 0));transform:translateY(calc(var(--out) * -80px)) scale(calc(.8 + var(--out) * .5));opacity:calc(clamp(0,var(--out) * 2.2,1) * clamp(0,(1 - var(--out)) * 2.2,1))}
.motif--glow{transform:translateY(calc(var(--out) * var(--m) * -.35)) scale(calc(.9 + var(--in) * .1 + var(--out) * .35));opacity:calc(var(--in) * (1 - var(--out)))}
.warm-core{position:absolute;inset:30%;border-radius:50%;background:#F2B98A;box-shadow:inset calc(var(--m) * -.03) calc(var(--m) * -.04) 0 rgb(160 87 42 / .14),0 0 calc(var(--m) * .12) rgb(242 185 138 / .55)}
.warm-core i{position:absolute;left:22%;top:18%;width:30%;height:18%;border-radius:50%;background:rgb(255 255 255 / .5);transform:rotate(-24deg)}
.halo{position:absolute;inset:30%;border-radius:50%;border:2px solid rgb(232 150 90 / .55);transform:scale(calc(1.3 + var(--n) * .35));opacity:calc(.55 - var(--n) * .15)}
[data-scene="stride"] .stride-panel{transform:scaleX(calc(.95 + var(--in) * .05));opacity:calc(.5 + var(--in) * .5)}
.stride-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:rgb(75 119 95 / .28);stroke-width:2.5px;stroke-dasharray:1 12;stroke-linecap:round;opacity:var(--in)}
.print{--k:clamp(0,(var(--out) - var(--d)) / .12,1);--f:clamp(0,(var(--out) - var(--d) - .35) / .35,1);--rot:-12deg;position:absolute;left:var(--x);top:var(--y);width:14px;height:22px;margin-left:-7px;border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;background:rgb(75 119 95 / .62);transform:translateY(calc((1 - var(--k)) * -12px)) rotate(var(--rot)) scale(calc(.75 + var(--k) * .25));opacity:calc(var(--k) * (1 - var(--f) * .55))}
.print::after{content:"";position:absolute;left:22%;right:22%;bottom:-12px;height:9px;border-radius:50%;background:inherit}
.print--r{--rot:12deg}
.motif--stride .ground{position:absolute;left:22%;right:22%;top:88%;height:6%;border-radius:50%;background:rgb(75 119 95 / .16)}
.walker{position:absolute;left:30%;top:6%;width:40%;height:82%;transform:translateX(calc(var(--out) * var(--m) * .5));opacity:calc(1 - var(--out) * .8)}
.walker .head{position:absolute;left:40%;top:0;width:30%;aspect-ratio:1;border-radius:50%;background:#4B775F}
.walker .torso{position:absolute;left:38%;top:17%;width:22%;height:38%;border-radius:999px;background:#4B775F;transform:rotate(6deg)}
.limb{position:absolute;width:15%;border-radius:999px;background:#4B775F;transform-origin:50% 8%}
.limb.arm{left:42%;top:20%;height:32%}
.limb.leg{left:40%;top:49%;height:46%}
.limb.back{background:#86A994}
.limb.front.leg,.limb.back.arm{transform:rotate(22deg)}
.limb.back.leg,.limb.front.arm{transform:rotate(-22deg)}
[data-scene="unknot"] .unknot-panel{transform:scale(calc(1 - var(--out) * .015))}
.knot{position:absolute;inset:0;transform:scale(calc(.88 + var(--in) * .12));opacity:var(--in)}
.strand{--k:clamp(0,(var(--out) - var(--d)) / .5,1);position:absolute;left:18%;top:43%;width:64%;height:14%;border-radius:999px;background:#D9A694;box-shadow:inset 0 calc(var(--m) * .018) 0 rgb(255 255 255 / .35);transform:translate(calc(var(--x0) * var(--m) * (1 - var(--k)) + var(--k) * var(--k) * var(--m) * .55),calc(var(--y0) * var(--m) * (1 - var(--k)) + var(--y1) * var(--m) * var(--k))) rotate(calc(var(--r0) * (1 - var(--k)))) scaleX(calc(1 + var(--k) * .7));opacity:calc(1 - clamp(0,(var(--k) - .55) / .45,1))}
.strand:nth-child(3n + 2){background:#C88C79}
.strand:nth-child(3n){background:#E8C2B4}
.motif--align{transform:translateY(calc(var(--out) * var(--m) * .12));opacity:calc(1 - var(--out) * .7)}
.stone-block{--k:clamp(0,(var(--in) - .12 - var(--i) * .09) / .3,1);--c:clamp(0,(var(--in) - .34 - var(--i) * .09) / .16,1);position:absolute;left:21%;width:58%;height:11%;top:calc(8% + var(--i) * 14.4%);border-radius:42% / 50%;background:#C3CAAB;box-shadow:inset 0 calc(var(--m) * -.018) 0 rgb(91 104 74 / .2);transform:translateX(calc(var(--x0) * var(--m) * (1 - var(--k)))) rotate(calc(var(--r0) * (1 - var(--k))))}
.stone-block:nth-child(even){background:#B4BE98}
.stone-block::after{content:"";position:absolute;inset:-20% -7%;border-radius:inherit;border:2px solid rgb(91 104 74 / .4);transform:scale(calc(1 + var(--c) * .16));opacity:calc(clamp(0,var(--c) * 4,1) * (1 - var(--c)))}
[data-scene="align"] .scene__cards>li{transform:translateX(calc((1 - var(--k)) * var(--sx,22px)))}
[data-scene="align"] .scene__cards>li:nth-child(even){--sx:-22px}
.plumb{position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;border-radius:2px;background:rgb(91 104 74 / .28);transform-origin:50% 0;transform:scaleY(var(--out));opacity:calc(1 - clamp(0,(var(--out) - .75) / .25,1) * .6)}
.threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:rgb(122 98 50 / .38);stroke-width:1.3px;stroke-linecap:round;stroke-linejoin:round;opacity:calc(clamp(0,(var(--in) - .55) / .3,1) * (1 - clamp(0,var(--out) / .4,1)))}
.pt{--k:clamp(0,(var(--in) - .08 - var(--i) * .055) / .22,1);--o:clamp(0,(var(--out) - var(--i) * .015) / .5,1);position:absolute;left:var(--x);top:var(--y);width:7%;aspect-ratio:1;margin:-3.5% 0 0 -3.5%;border-radius:50%;background:#C8993F;box-shadow:0 0 0 calc(var(--m) * .02) rgb(200 153 63 / .2);transform:translate(calc(var(--tx) * var(--m) * var(--o)),calc(var(--ty) * var(--m) * var(--o))) scale(calc((.3 + var(--k) * .7) * (1 - var(--o) * .5)));opacity:calc(var(--k) * (1 - clamp(0,(var(--o) - .7) / .3,1)))}
.pt::after{content:"";position:absolute;inset:-90%;border-radius:50%;background:radial-gradient(circle,rgb(236 200 122 / .5),rgb(236 200 122 / 0) 65%);opacity:.7}
.acu-core{--g:clamp(0,(var(--out) - .35) / .3,1);--f:clamp(0,(var(--out) - .6) / .4,1);position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;margin:-9% 0 0 -9%;border-radius:50%;background:radial-gradient(circle,#F6DB9C 0 30%,rgb(246 219 156 / 0) 70%);transform:translateY(calc(var(--f) * var(--m) * 1.1)) scale(calc(var(--g) * 1.6));opacity:calc(var(--g) * (1 - var(--f) * .9))}
.acu-spark{--f:clamp(0,(var(--out) - .45) / .5,1);position:absolute;left:50%;top:0;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:radial-gradient(circle,#F6DB9C 0 32%,rgb(246 219 156 / 0) 72%);transform:translateY(calc(var(--f) * 150px)) scale(calc(.6 + var(--f) * .6));opacity:calc(min(1,var(--f) * 5) * (1 - var(--f) * .85))}
.acu-trail{position:absolute;left:50%;top:0;width:2px;height:70%;margin-left:-1px;background:rgb(200 153 63 / .3);border-radius:2px;transform-origin:50% 0;transform:scaleY(clamp(0,(var(--out) - .55) / .45,1));opacity:calc(1 - clamp(0,(var(--out) - .85) / .15,1))}
.cupwrap{--k:clamp(0,(var(--in) - .12 - var(--i) * .08) / .3,1);--u:clamp(0,(var(--out) - var(--i) * .07) / .45,1);position:absolute;left:var(--x);top:var(--y);width:calc(var(--s) * 100%);aspect-ratio:1;transform:translate(-50%,calc(-50% - (1 - var(--k)) * var(--m) * .14 - var(--u) * var(--m) * .7)) scale(calc(1.08 - var(--k) * .08 + var(--u) * .14));opacity:calc(var(--k) * (1 - var(--u)))}
.cup{position:absolute;inset:0;border-radius:50%;background:rgb(255 253 249 / .6);border:calc(var(--m) * .012 + 1px) solid rgb(152 90 69 / .45);box-shadow:inset 0 calc(var(--m) * -.02) 0 rgb(152 90 69 / .08)}
.cup i{position:absolute;left:18%;top:16%;width:38%;height:18%;border-radius:50%;border-top:calc(var(--m) * .012 + 1px) solid rgb(255 255 255 / .95);transform:rotate(-26deg)}
.imprint{--k2:clamp(0,(var(--in) - .42 - var(--i) * .08) / .3,1);--v:clamp(0,(var(--out) - .25 - var(--i) * .07) / .4,1);position:absolute;left:var(--x);top:var(--y);width:calc(var(--s) * 104%);aspect-ratio:1;border-radius:50%;background:rgb(196 118 92 / .2);transform:translate(-50%,-48%);opacity:calc(var(--k2) * (1 - var(--v)))}
.bubble{--k:clamp(0,(var(--out) - var(--d)) / .5,1);position:absolute;left:var(--x);top:72%;width:var(--s);aspect-ratio:1;border-radius:50%;border:1.5px solid rgb(152 90 69 / .42);background:rgb(255 253 249 / .5);transform:translate(calc(var(--k) * var(--dx)),calc(var(--k) * -150px));opacity:calc(min(1,var(--k) * 5) * (1 - var(--k)))}
.dollop{--k:clamp(0,var(--out) / .7,1);position:absolute;left:27%;top:42%;width:46%;height:30%;border-radius:58% 42% 52% 48% / 62% 58% 42% 38%;background:#FFFCF4;box-shadow:inset calc(var(--m) * -.025) calc(var(--m) * -.03) 0 rgb(82 118 79 / .1),0 10px 22px -14px rgb(82 118 79 / .6);transform:translateY(calc((1 - var(--in)) * var(--m) * .12)) scale(calc((.6 + var(--in) * .4) * (1 + var(--k) * 1.3)),calc((.6 + var(--in) * .4) * (1 - var(--k) * .55)));opacity:calc(var(--in) * (1 - var(--k) * .95))}
.dollop::before{content:"";position:absolute;left:36%;top:-30%;width:28%;height:48%;border-radius:50% 50% 42% 42% / 64% 64% 36% 36%;background:inherit}
.dollop i{position:absolute;left:18%;top:16%;width:30%;height:16%;border-radius:50%;background:rgb(255 255 255 / .9);transform:rotate(-16deg)}
.sheen{--k:clamp(0,var(--out) / .7,1);position:absolute;left:50%;top:60%;width:calc(40% + var(--n) * 17%);height:calc(14% + var(--n) * 6%);border-radius:50%;border:2px solid rgb(82 118 79 / .24);translate:-50% -50%;transform:scale(calc(1 + var(--k) * (1.1 + var(--n) * .3)));opacity:calc(var(--in) * (.45 * (1 - var(--k)) + min(1,var(--k) * 3) * (1 - var(--k)) * .5))}
.tingle{--k:clamp(0,(var(--out) - var(--d)) / .4,1);position:absolute;left:var(--x);top:var(--y);width:6%;aspect-ratio:1;border-radius:30%;background:#9CC39A;transform:translate(-50%,-50%) rotate(45deg) scale(calc(.4 + var(--k) * .8));opacity:calc(clamp(0,var(--k) * 3,1) * clamp(0,(1 - var(--k)) * 2,1))}
.capsule-float{position:absolute;left:18%;top:29%;width:64%;height:26%}
.capsule{position:absolute;inset:0;transform:translateY(calc((1 - var(--in)) * var(--m) * .14)) rotate(calc(-26deg - (1 - var(--in)) * 14deg));opacity:var(--in)}
.half{--k:clamp(0,(var(--out) - .05) / .5,1);position:absolute;top:0;bottom:0;width:52%;opacity:calc(1 - clamp(0,(var(--k) - .35) / .5,1))}
.half.l{left:0;border-radius:999px 0 0 999px;background:#D5A14A;transform:translateX(calc(var(--k) * var(--m) * -.16)) rotate(calc(var(--k) * -16deg))}
.half.r{right:0;border-radius:0 999px 999px 0;background:#FFF6E6;box-shadow:inset 0 0 0 2px rgb(131 99 24 / .22);transform:translateX(calc(var(--k) * var(--m) * .16)) rotate(calc(var(--k) * 16deg))}
.half i{position:absolute;left:22%;right:10%;top:20%;height:16%;border-radius:999px;background:rgb(255 255 255 / .55)}
.half.r i{left:10%;right:22%}
.pp{--k:clamp(0,(var(--out) - var(--d)) / .6,1);position:absolute;left:50%;top:42%;width:var(--s);height:var(--s);translate:-50% -50%;border-radius:50%;transform:translate(calc(var(--dx) * var(--m) * var(--k)),calc(var(--dy) * var(--m) * var(--k))) scale(calc(1 - var(--k) * .5));opacity:calc(min(1,var(--k) * 5) * (1 - var(--k)))}
.pp--a{background:#D5A14A}
.pp--b{background:#EFD6A6}
.pp--c{background:#9FBFA8}
.grain{--k:clamp(0,(var(--out) - var(--d)) / .6,1);position:absolute;left:var(--x);top:-4px;width:calc(var(--s) * 1.6);height:calc(var(--s) * 1.6);border-radius:50%;transform:translateY(calc(var(--k) * var(--fall))) scale(calc(1 - var(--k) * .5));opacity:calc(min(1,var(--k) * 5) * (1 - var(--k)))}
.grain--a{background:#D5A14A}
.grain--b{background:#EFD6A6}
.grain--c{background:#9FBFA8}
.motif--inject{transform:scale(calc(1 - var(--out) * .1));opacity:calc(1 - var(--out) * .75)}
.tissue{position:absolute;left:4%;right:4%;top:68%;height:30%;border-radius:50%;background:#C9E0DC;box-shadow:inset 0 calc(var(--m) * .02) 0 rgb(255 255 255 / .5);transform-origin:50% 100%}
.tissue i{position:absolute;left:22%;top:10%;width:32%;height:24%;border-radius:50%;background:rgb(255 255 255 / .45);transform:rotate(-8deg)}
.site-ring{position:absolute;left:38.5%;top:66%;width:7%;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgb(46 109 105 / .45)}
.site-glow{position:absolute;left:34%;top:61.5%;width:16%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgb(94 154 144 / .55),rgb(94 154 144 / 0) 70%);opacity:0}
.syringe-move{position:absolute;left:42%;top:70%;width:0;height:0;transform:rotate(-24deg) translateY(calc(var(--m) * -.15))}
.syringe{position:absolute;left:0;bottom:0;width:calc(var(--m) * .16);height:calc(var(--m) * .72);transform:translateX(-50%)}
.needle{position:absolute;bottom:0;left:50%;width:calc(var(--m) * .014);height:calc(var(--m) * .2);transform:translateX(-50%);border-radius:2px;background:linear-gradient(90deg,#9DB3AE,#E8F0ED 55%,#9DB3AE);clip-path:polygon(0 0,100% 0,78% 100%,22% 100%)}
.hub{position:absolute;bottom:calc(var(--m) * .2);left:50%;width:calc(var(--m) * .052);height:calc(var(--m) * .045);transform:translateX(-50%);background:#8FBFB8;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.barrel{position:absolute;bottom:calc(var(--m) * .245);left:50%;width:calc(var(--m) * .13);height:calc(var(--m) * .3);transform:translateX(-50%);border-radius:calc(var(--m) * .028);background:rgb(255 255 255 / .78);border:calc(var(--m) * .008) solid rgb(46 109 105 / .35);box-shadow:inset calc(var(--m) * -.012) 0 0 rgb(46 109 105 / .08)}
.med-fill{position:absolute;left:12%;right:12%;bottom:7%;top:14%;border-radius:calc(var(--m) * .012);background:linear-gradient(180deg,#6FA89E,#4E857B);transform-origin:50% 100%}
.tick{position:absolute;right:14%;width:22%;height:calc(var(--m) * .007);border-radius:2px;background:rgb(46 109 105 / .5)}
.tick.t1{top:26%}
.tick.t2{top:44%}
.tick.t3{top:62%}
.plunger{position:absolute;bottom:calc(var(--m) * .5);left:50%;width:calc(var(--m) * .024);height:calc(var(--m) * .22);transform:translateX(-50%);border-radius:999px;background:#7BAFA6}
.plunger::before{content:"";position:absolute;top:calc(var(--m) * -.022);left:50%;transform:translateX(-50%);width:calc(var(--m) * .1);height:calc(var(--m) * .036);border-radius:999px;background:#5E9A90;box-shadow:0 1px 0 rgb(46 109 105 / .25)}
.dose{position:absolute;left:50%;bottom:calc(var(--m) * -.035);width:calc(var(--m) * .1);aspect-ratio:1;transform:translateX(-50%) scale(.2);border-radius:50%;opacity:0;background:radial-gradient(circle,rgb(94 154 144 / .9),rgb(94 154 144 / 0) 70%)}
.disperse{--k:clamp(0,(var(--out) - var(--n) * .12) / .55,1);position:absolute;left:calc(38% + var(--n) * 6%);top:10%;width:9px;height:9px;border-radius:50%;background:rgb(94 154 144 / .5);transform:scale(calc(.4 + var(--k) * 1.6));opacity:calc(min(1,var(--k) * 4) * (1 - var(--k)) * .8)}
.arc{--k:clamp(0,(var(--in) - .18) / .45,1);--o:clamp(0,var(--out) / .6,1);position:absolute;top:7%;height:86%;width:42%;border-radius:50%;border:calc(var(--m) * .045) solid transparent;opacity:calc(var(--k) * (1 - var(--o) * .9))}
.arc--l{left:3%;border-left-color:rgb(119 91 61 / .42);transform:translateX(calc((1 - var(--k)) * var(--m) * -.3 - var(--o) * var(--m) * .35))}
.arc--r{right:3%;border-right-color:rgb(119 91 61 / .42);transform:translateX(calc((1 - var(--k)) * var(--m) * .3 + var(--o) * var(--m) * .35))}
.strap{--s:clamp(0,(var(--in) - .5) / .3,1);--o:clamp(0,var(--out) / .5,1);position:absolute;left:20%;right:20%;top:var(--y);height:7%;margin-top:-3.5%;border-radius:999px;background:rgb(119 91 61 / .16);transform:scaleX(calc((.4 + var(--s) * .6) * (1 + var(--o) * .25)));opacity:calc(var(--s) * (1 - var(--o)))}
.cairn{position:absolute;inset:0;transform:translateY(calc(var(--out) * var(--m) * .04))}
.cairn .stone{transform:translateX(-50%) rotate(var(--lean,0deg))}
.cairn .st1{top:60%;width:26%;height:9.5%}
.cairn .st2{top:52.4%;width:19%;height:8%}
.cairn .st3{top:46.3%;width:12.5%;height:6.5%;transform-origin:50% 100%}
.release{--o:clamp(0,(var(--out) - .1) / .6,1);position:absolute;top:6%;width:90px;height:120px;border-radius:50%;border:6px solid transparent;opacity:calc(min(1,var(--o) * 5) * (1 - var(--o)))}
.release--l{left:calc(50% - 110px);border-left-color:rgb(119 91 61 / .35);transform:translateX(calc(var(--o) * -70px)) rotate(calc(var(--o) * -12deg))}
.release--r{right:calc(50% - 110px);border-right-color:rgb(119 91 61 / .35);transform:translateX(calc(var(--o) * 70px)) rotate(calc(var(--o) * 12deg))}
.stand{--o:clamp(0,(var(--out) - .1) / .5,1);position:absolute;left:50%;top:6%;width:110px;height:120px;translate:-50% 0;opacity:calc(min(1,var(--o) * 4) * (1 - clamp(0,(var(--out) - .8) / .2,1)));transform:translateY(calc((1 - var(--o)) * -12px))}
.stand .stone{transform:translateX(-50%) rotate(var(--lean,0deg))}
.stand .st1{top:62%;width:44%;height:12%}
.stand .st2{top:52.4%;width:32%;height:10%}
.stand .st3{top:44.8%;width:21%;height:8%}
.soil{position:absolute;left:18%;right:18%;top:80%;height:9%;border-radius:50%;background:rgb(92 105 50 / .2)}
.plant{position:absolute;left:50%;top:8%;bottom:16%;width:0;transform-origin:50% 100%;transform:rotate(calc(var(--out) * 6deg))}
.sway{position:absolute;inset:0;transform-origin:50% 100%}
.stem{--g:clamp(0,(var(--in) - .12) / .4,1);position:absolute;left:calc(var(--m) * -.018);bottom:0;width:calc(var(--m) * .036);height:66%;border-radius:999px;background:#6F7D3E;transform-origin:50% 100%;transform:scaleY(var(--g))}
.leaf{--k:clamp(0,(var(--in) - .34 - var(--i) * .08) / .24,1);position:absolute;bottom:var(--y);width:calc(var(--m) * .26);height:calc(var(--m) * .12);background:#7F9148}
.leaf:nth-of-type(3),.leaf:nth-of-type(5){background:#95A659}
.leaf--r{left:0;border-radius:0 100% 0 100%;transform-origin:0 100%;transform:rotate(calc(var(--r) - (1 - var(--k)) * 40deg)) scale(var(--k))}
.leaf--l{right:0;border-radius:100% 0 100% 0;transform-origin:100% 100%;transform:rotate(calc(var(--r) + (1 - var(--k)) * 40deg)) scale(var(--k))}
.bud{--b:clamp(0,(var(--in) - .72) / .22,1);position:absolute;left:calc(var(--m) * -.05);bottom:62%;width:calc(var(--m) * .1);aspect-ratio:1;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:#E7B96F;transform:scale(var(--b))}
@media (prefers-reduced-motion:no-preference){.b-ring{animation:nonop-breathe 8s var(--ease-breathe) infinite;animation-delay:calc(var(--n) * -.45s)}
.ice-sheen i{animation:nonop-glint 12s var(--ease) infinite}
.ice-sheen i + i{animation-delay:.25s}
.spark{animation:nonop-twinkle 4.8s var(--ease-breathe) infinite;animation-delay:calc(var(--i) * -1.6s)}
.amb-drip{animation:nonop-drip 6.5s var(--ease) infinite}
.heat-glow::before{animation:nonop-warm 7s var(--ease-breathe) infinite}
.halo{animation:nonop-radiate 5.4s var(--ease-out) infinite;animation-delay:calc(var(--n) * -1.8s)}
.limb{animation:nonop-swing 2.8s var(--ease-breathe) infinite alternate}
.limb.back.leg,.limb.front.arm{animation-direction:alternate-reverse}
.motif--unknot{animation:nonop-soften 7.5s var(--ease-breathe) infinite}
.pt::after{animation:nonop-twinkle 5.2s var(--ease-breathe) infinite;animation-delay:calc(var(--i) * -.7s)}
.cup{animation:nonop-bob 6.4s var(--ease-breathe) infinite alternate;animation-delay:calc(var(--i) * -1.5s)}
.dollop i{animation:nonop-twinkle 5.5s var(--ease-breathe) infinite}
.capsule-float{animation:nonop-float 7.5s var(--ease-breathe) infinite alternate}
.syringe-move{animation:nonop-inject-cycle 9s var(--ease) infinite}
.plunger{animation:nonop-inject-plunger 9s var(--ease) infinite}
.med-fill{animation:nonop-inject-drain 9s var(--ease) infinite}
.dose{animation:nonop-inject-dose 9s var(--ease-out) infinite}
.site-glow{animation:nonop-inject-glow 9s var(--ease) infinite}
.tissue{animation:nonop-inject-press 9s var(--ease) infinite}
.cairn .st3{animation:nonop-balance 8s var(--ease-breathe) infinite alternate}
.sway{animation:nonop-sway 8s var(--ease-breathe) infinite alternate}
}
@keyframes nonop-breathe{0%,100%{transform:scale(.95)}
50%{transform:scale(1.045)}
}
@keyframes nonop-glint{0%,62%{transform:rotate(20deg) translateX(-160%)}
100%{transform:rotate(20deg) translateX(1400%)}
}
@keyframes nonop-twinkle{0%,100%{opacity:.35}
50%{opacity:1}
}
@keyframes nonop-drip{0%{transform:translateY(-30%) rotate(45deg) scale(.2);opacity:0}
30%{transform:translateY(0) rotate(45deg) scale(1);opacity:.95}
62%{transform:translateY(0) rotate(45deg) scale(1);opacity:.95}
100%{transform:translateY(260%) rotate(45deg) scale(1);opacity:0}
}
@keyframes nonop-warm{0%,100%{transform:scale(.94);opacity:.85}
50%{transform:scale(1.05);opacity:1}
}
@keyframes nonop-radiate{from{transform:scale(1);opacity:.6}
to{transform:scale(2.3);opacity:0}
}
@keyframes nonop-swing{from{transform:rotate(-22deg)}
to{transform:rotate(22deg)}
}
@keyframes nonop-soften{0%,100%{transform:scale(1)}
50%{transform:scale(1.035) rotate(1.5deg)}
}
@keyframes nonop-bob{from{transform:translateY(-3%)}
to{transform:translateY(3%)}
}
@keyframes nonop-float{from{transform:translateY(-3%) rotate(-2deg)}
to{transform:translateY(3%) rotate(2deg)}
}
@keyframes nonop-inject-cycle{0%,100%{transform:rotate(-24deg) translateY(calc(var(--m) * -.15))}
24%,56%{transform:rotate(-24deg) translateY(0)}
78%{transform:rotate(-24deg) translateY(calc(var(--m) * -.15))}
}
@keyframes nonop-inject-plunger{0%,28%,100%{transform:translateX(-50%) translateY(0)}
48%,58%{transform:translateX(-50%) translateY(calc(var(--m) * .11))}
78%{transform:translateX(-50%) translateY(0)}
}
@keyframes nonop-inject-drain{0%,28%,100%{transform:scaleY(1)}
48%,58%{transform:scaleY(.3)}
78%{transform:scaleY(1)}
}
@keyframes nonop-inject-dose{0%,30%{transform:translateX(-50%) scale(.2);opacity:0}
44%{transform:translateX(-50%) scale(1.15);opacity:.95}
58%,100%{transform:translateX(-50%) scale(1.5);opacity:0}
}
@keyframes nonop-inject-glow{0%,32%,100%{opacity:0;transform:scale(.7)}
46%{opacity:.9;transform:scale(1.1)}
60%{opacity:0;transform:scale(1.3)}
}
@keyframes nonop-inject-press{0%,20%,62%,100%{transform:scaleY(1)}
28%,54%{transform:scaleY(.94)}
}
@keyframes nonop-balance{from{transform:translateX(-50%) rotate(-2.5deg)}
to{transform:translateX(-50%) rotate(2.5deg)}
}
@keyframes nonop-sway{from{transform:rotate(-1.6deg)}
to{transform:rotate(1.6deg)}
}

/* ============ EXIT CHOREOGRAPHY ENHANCEMENTS (v3) ============
   Additive detail layer for scene-to-scene transitions. Uses CSS
   individual transform properties (translate / rotate / scale), which
   compose with the existing transform-based idle animations instead of
   overriding them. Everything stays driven by the scroll-linked --out
   variable, so pause, reduced-motion and print behavior are unchanged. */

/* --- melt: cubes shiver, drops tumble, splashes pop --- */
[data-scene="melt"] .cube{rotate:calc((1 - var(--out)) * var(--out) * 7deg)}
[data-scene="melt"] .cube.c2{rotate:calc((1 - var(--out)) * var(--out) * -7deg)}
[data-scene="melt"] .drop{rotate:calc(var(--k) * 70deg)}
[data-scene="melt"] .drop:nth-of-type(4n+3){rotate:calc(var(--k) * -70deg)}
[data-scene="melt"] .splash{scale:calc(.45 + var(--r) * .65)}

/* --- glow: motes sway sideways, glow swells, halos expand --- */
[data-scene="glow"] .mote{translate:calc((1 - var(--k)) * var(--k) * 30px) 0}
[data-scene="glow"] .mote:nth-of-type(even){translate:calc((1 - var(--k)) * var(--k) * -30px) 0}
[data-scene="glow"] .heat-glow{scale:calc(1 + (1 - var(--out)) * var(--out) * .4)}
[data-scene="glow"] .halo{scale:calc(1 + var(--out) * .45)}

/* --- stride: prints stamp in, walker leans forward, speed lines, ground shrinks --- */
[data-scene="stride"] .print{scale:calc(.7 + var(--k) * .45)}
[data-scene="stride"] .walker{transform-origin:50% 92%;rotate:calc(var(--out) * -5deg)}
[data-scene="stride"] .walker::after{content:"";position:absolute;right:102%;top:30%;width:56px;height:36px;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 8px,rgb(75 119 95 / .38) 8px 11px);transform-origin:100% 50%;scale:var(--out,0) 1;opacity:calc(var(--out,0) * (1 - var(--out,0)) * 4)}
[data-scene="stride"] .ground{transform-origin:50% 50%;scale:calc(1 - var(--out) * .35)}

/* --- unknot: strands ripple, the knot visibly loosens --- */
[data-scene="unknot"] .strand{translate:0 calc((1 - var(--k)) * var(--k) * 16px)}
[data-scene="unknot"] .knot{scale:calc(1 - var(--out) * .4);opacity:calc(var(--in,1) * (1 - var(--out,0)))}

/* --- align: plumb line swings and settles to center, blocks micro-shift --- */
[data-scene="align"] .plumb{rotate:calc((1 - var(--out,0)) * var(--out,0) * 26deg)}
[data-scene="align"] .stone-block:nth-of-type(odd){rotate:calc(var(--out,0) * -2deg)}
[data-scene="align"] .stone-block:nth-of-type(even){rotate:calc(var(--out,0) * 2deg)}

/* --- constellate: spark blooms, core flares, points wink out --- */
[data-scene="constellate"] .acu-spark{scale:calc(1 + var(--f) * .7)}
[data-scene="constellate"] .acu-core{filter:brightness(calc(1 + (1 - var(--f)) * var(--f) * 1.4))}
[data-scene="constellate"] .pt{scale:calc(1 - var(--o) * .35)}

/* --- lift: cups swell as they pop off, bubbles wobble, imprints settle --- */
[data-scene="lift"] .cupwrap{scale:calc(1 + (1 - var(--u)) * var(--u) * .45)}
[data-scene="lift"] .bubble{translate:calc((1 - var(--k)) * var(--k) * 34px) 0}
[data-scene="lift"] .bubble:nth-of-type(even){translate:calc((1 - var(--k)) * var(--k) * -34px) 0}
[data-scene="lift"] .imprint{scale:calc(1 - var(--v) * .22)}

/* --- absorb: dollop squelches wider, tingles spin --- */
[data-scene="absorb"] .dollop{scale:calc(1 + (1 - var(--k)) * var(--k) * .5) calc(1 - (1 - var(--k)) * var(--k) * .2)}
[data-scene="absorb"] .tingle{rotate:calc(var(--k) * 130deg)}

/* --- dissolve: halves already swing; add poof ring, grains tumble --- */
[data-scene="dissolve"] .motif--dissolve::after{content:"";position:absolute;left:50%;top:42%;width:130px;height:130px;translate:-50% -50%;border-radius:50%;border:1.5px solid rgb(131 99 24 / .3);pointer-events:none;scale:calc(.25 + var(--out,0) * .85);opacity:calc(var(--out,0) * (1 - var(--out,0)) * 2.6)}
[data-scene="dissolve"] .grain{rotate:calc(var(--k) * 100deg)}

/* --- inject: droplets wobble upward, site pulses; the syringe stays still --- */
[data-scene="inject"] .disperse{translate:calc((1 - var(--k)) * var(--k) * 20px) 0}
[data-scene="inject"] .motif--inject::after{content:"";position:absolute;left:42%;top:70%;width:110px;height:110px;translate:-50% -50%;border-radius:50%;border:1.5px solid rgb(46 109 105 / .32);pointer-events:none;scale:calc(.3 + var(--out,0) * .9);opacity:calc(var(--out,0) * (1 - var(--out,0)) * 2.6)}

/* --- embrace: arcs open like releasing arms, straps slacken, stones settle --- */
[data-scene="embrace"] .arc--l{transform-origin:50% 0;rotate:calc(var(--o) * -10deg)}
[data-scene="embrace"] .arc--r{transform-origin:50% 0;rotate:calc(var(--o) * 10deg)}
[data-scene="embrace"] .strap{scale:1 calc(1 + var(--o) * .3)}
[data-scene="embrace"] .stone{translate:0 calc((1 - var(--out)) * var(--out) * 12px)}

/* --- sprout: leaves flutter-tumble, foliage shivers, plant bows deeper --- */
[data-scene="sprout"] .leaf--l{--lsh:-1}
[data-scene="sprout"] .leaf--r{--lsh:1}
[data-scene="sprout"] .leaf{rotate:calc((1 - var(--out)) * var(--out) * 14deg * var(--lsh,1))}
[data-scene="sprout"] .plant{rotate:calc(var(--out) * 5deg)}

/* ============ EXIT CHOREOGRAPHY (v4): living exits ============
   v3 added shiver/sway/settle accents. v4 turns each exit into a small
   story: the ice visibly melts (cubes tilt, shrink and sink while drips
   stretch as they accelerate and splash rings ripple outward), the pill
   swings fully open, straps sag as they slacken, cups pop off with a tilt.
   Every transition also answers scroll velocity through --vel (signed
   -1..1, eased in scenes.js, 0 when paused or under reduced motion): flick
   faster and drops trail behind, motes stream, speed lines stretch, leaves
   flutter harder. Still no keyframes and no CSS transitions: everything is
   a pure function of --in/--out/--vel, so pause, reduced-motion and print
   behavior are unchanged. This block comes after v3 and overrides it where
   the same property is set; v3 properties not restated here persist. */

/* --- melt: cubes tilt, shrink and sink as they melt; their gloss highlight
   fades; drips stretch as they accelerate and trail on fast scrolls;
   splash rings ripple outward --- */
[data-scene="melt"] .cube{translate:0 calc(var(--out) * 14px);scale:calc(1 - var(--out) * .3);rotate:calc((1 - var(--out)) * var(--out) * 18deg)}
[data-scene="melt"] .cube i{scale:calc(1 - var(--out) * .45);opacity:calc(1 - var(--out) * .65)}
[data-scene="melt"] .drop{translate:0 calc(var(--vel,0) * var(--vel,0) * 52px);scale:calc(.5 + var(--g) * .5) calc((.5 + var(--g) * .5) * (1 + var(--k) * 1.15))}
[data-scene="melt"] .splash{scale:calc(.45 + var(--r) * 1.2);opacity:calc((1 - var(--r)) * .85)}

/* --- glow: motes stream upward on fast scrolls; the core exhales wider;
   halos expand and thin --- */
[data-scene="glow"] .mote{translate:calc((1 - var(--k)) * var(--k) * 30px + var(--vel,0) * 70px) calc(var(--vel,0) * var(--vel,0) * -44px)}
[data-scene="glow"] .mote:nth-of-type(even){translate:calc((1 - var(--k)) * var(--k) * -30px + var(--vel,0) * 70px) calc(var(--vel,0) * var(--vel,0) * -44px)}
[data-scene="glow"] .heat-glow{scale:calc(1 + (1 - var(--out)) * var(--out) * .55)}
[data-scene="glow"] .halo{scale:calc(1 + var(--out) * .6);opacity:calc(1 - var(--out) * .5)}

/* --- stride: the walker leans into the scroll direction with a little hop;
   speed lines stretch with velocity; prints stamp in harder --- */
[data-scene="stride"] .walker{transform-origin:50% 92%;translate:0 calc((1 - var(--out)) * var(--out) * -6px);rotate:calc(var(--out) * -7deg - var(--vel,0) * 4deg)}
[data-scene="stride"] .walker::after{scale:calc(var(--out,0) + var(--vel,0) * var(--vel,0) * 1.1) 1}
[data-scene="stride"] .print{scale:calc(.7 + var(--k) * .5)}

/* --- unknot: the knot twists open as it loosens; strands ripple with a
   traveling wave; the sweeps swing wider and drift --- */
[data-scene="unknot"] .knot{scale:calc(1 - var(--out) * .55);rotate:calc(var(--out) * 10deg)}
[data-scene="unknot"] .strand{translate:0 calc((1 - var(--k)) * var(--k) * 16px);rotate:calc((1 - var(--k)) * var(--k) * 7deg)}

/* --- align: blocks lift, settle and click into place; the plumb line's
   swing damps to center (v3) --- */
[data-scene="align"] .stone-block:nth-of-type(odd){rotate:calc(var(--out,0) * -2deg);translate:0 calc((1 - var(--out,0)) * var(--out,0) * -9px)}
[data-scene="align"] .stone-block:nth-of-type(even){rotate:calc(var(--out,0) * 2deg);translate:0 calc((1 - var(--out,0)) * var(--out,0) * -9px)}

/* --- constellate: sparks bloom bigger; the core flares hotter; points
   shrink and spin out --- */
[data-scene="constellate"] .acu-spark{scale:calc(1 + var(--f) * 1.25)}
[data-scene="constellate"] .acu-core{filter:brightness(calc(1 + (1 - var(--f)) * var(--f) * 2.1))}
[data-scene="constellate"] .pt{scale:calc(1 - var(--o) * .5);rotate:calc(var(--o) * 24deg)}

/* --- lift: cups pop off with a tilt; bubbles wobble and stream upward on
   fast scrolls; imprints bloom then fade --- */
[data-scene="lift"] .cupwrap{scale:calc(1 + (1 - var(--u)) * var(--u) * .6);rotate:calc((1 - var(--u)) * var(--u) * 12deg)}
[data-scene="lift"] .bubble{translate:calc((1 - var(--k)) * var(--k) * 34px + var(--vel,0) * 44px) calc(var(--vel,0) * var(--vel,0) * -36px)}
[data-scene="lift"] .imprint{scale:calc(1 - var(--v) * .3);opacity:calc(1 - var(--v) * .45)}

/* --- absorb: the dollop squelches wider and flatter; tingles spin faster
   and spiral outward --- */
[data-scene="absorb"] .dollop{scale:calc(1 + (1 - var(--k)) * var(--k) * .72) calc(1 - (1 - var(--k)) * var(--k) * .34)}
[data-scene="absorb"] .tingle{rotate:calc(var(--k) * 210deg);translate:calc(var(--k) * 18px) 0}

/* --- dissolve: the capsule swings fully open; grains burst, tumble, shrink
   and scatter with scroll velocity; the poof ring breathes outward --- */
[data-scene="dissolve"] .half.l{rotate:calc(var(--k) * -11deg)}
[data-scene="dissolve"] .half.r{rotate:calc(var(--k) * 11deg)}
[data-scene="dissolve"] .grain{translate:calc(var(--vel,0) * 34px) 0;scale:calc(1 - var(--k) * .62)}
[data-scene="dissolve"] .motif--dissolve::after{scale:calc(.25 + var(--out,0) * 1.05)}

/* --- inject: droplets arc downward with gravity and scatter on fast
   scrolls; the site pulse breathes wider --- */
[data-scene="inject"] .disperse{translate:calc((1 - var(--k)) * var(--k) * 20px + var(--vel,0) * 38px) calc(var(--k) * var(--k) * 12px)}
[data-scene="inject"] .motif--inject::after{scale:calc(.3 + var(--out,0) * 1.05)}

/* --- embrace: the arcs open like releasing arms; straps sag as they
   slacken --- */
[data-scene="embrace"] .arc--l{transform-origin:50% 0;rotate:calc(var(--o) * -17deg)}
[data-scene="embrace"] .arc--r{transform-origin:50% 0;rotate:calc(var(--o) * 17deg)}
[data-scene="embrace"] .strap{translate:0 calc((1 - var(--o)) * var(--o) * 14px);scale:1 calc(1 + var(--o) * .42)}

/* --- sprout: leaves flutter harder with scroll velocity; falling leaves
   spin faster; the plant bows and leans as it releases --- */
[data-scene="sprout"] .leaf{rotate:calc(((1 - var(--out)) * var(--out) * 14deg + var(--vel,0) * 26deg) * var(--lsh,1))}
[data-scene="sprout"] .plant{rotate:calc(var(--out) * 8deg);translate:calc(var(--out) * 6px) 0}

/* ============ EXIT CHOREOGRAPHY (v4b): David's transition notes ============
   2026-09-29: acupuncture should read as MANY LITTLE DOTS POPPING during
   the exit, chiropractic should CRACK, cupping should show LARGER cup
   pulls. Same discipline as v4: pure functions of --out/--vel, individual
   transform properties only, no keyframes, no transitions. */

/* --- acupuncture: the dots pop with an overshoot swell that ripples across
   the constellation instead of merely shrinking; their glow flares --- */
[data-scene="constellate"] .pt{scale:calc(1 + (1 - var(--o)) * var(--o) * 3.2)}
[data-scene="constellate"] .pt::after{scale:calc(1 + (1 - var(--o)) * var(--o) * 2.6)}

/* --- chiropractic: the exit CRACKS. A sharp jolt spike mid-exit snaps the
   blocks in alternating directions (harder on fast scrolls); the alignment
   ring flashes and the plumb line twitches --- */
[data-scene="align"] .stone-block{--jolt:min(calc(var(--out,0) * 2.6),calc((1 - var(--out,0)) * 2.6))}
[data-scene="align"] .stone-block:nth-of-type(odd){translate:calc(var(--jolt) * (1 + var(--vel,0) * var(--vel,0) * 2) * 14px) calc(var(--jolt) * -8px);rotate:calc(var(--jolt) * 4deg)}
[data-scene="align"] .stone-block:nth-of-type(even){translate:calc(var(--jolt) * (1 + var(--vel,0) * var(--vel,0) * 2) * -14px) calc(var(--jolt) * -8px);rotate:calc(var(--jolt) * -4deg)}
[data-scene="align"] .stone-block::after{opacity:calc(min(1,clamp(0,var(--c) * 4,1) * (1 - var(--c)) + var(--jolt) * .85))}
[data-scene="align"] .plumb{rotate:calc((1 - var(--out,0)) * var(--out,0) * 26deg + min(calc(var(--out,0) * 2.6),calc((1 - var(--out,0)) * 2.6)) * 6deg)}

/* --- cupping: LARGER cup pulls. Cups lift much higher and swell bigger on
   exit (stronger on fast scrolls); imprints stretch upward like pulled skin
   before fading --- */
[data-scene="lift"] .cupwrap{translate:0 calc(var(--u) * var(--m) * -.55 * (1 + var(--vel,0) * var(--vel,0) * 1.5));scale:calc(1 + (1 - var(--u)) * var(--u) * 1.15);rotate:calc(var(--u) * (1 - var(--u)) * 16deg)}
[data-scene="lift"] .imprint{translate:0 calc(var(--v) * var(--m) * -.22);scale:calc(1 - var(--v) * .1) calc(1 + var(--v) * .55);opacity:calc(1 - var(--v) * .45)}

/* ============ TRANSITION BANDS (v5): the bridges themselves ============
   2026-09-29: David clarified the "transitions" are the .scene__fx gap bands
   between scenes, not the scene exits. Each band now carries its own
   treatment-specific interstitial animation instead of a bare gradient:
   ice cubes melt at the top of the band, heat motes rise, chiropractic
   CRACKS, acupuncture pops MANY LITTLE DOTS, cupping shows LARGER cup
   pulls, injections bloom. Same discipline: pure functions of --out (and
   --vel), individual transform properties only, no keyframes. */

/* --- melt: cubes at the top of the band round off, shrink and sink as they
   melt; the falling drops stretch as they accelerate --- */
.melt-cube{--k:clamp(0,(var(--out) - var(--d)) / .5,1);position:absolute;left:var(--x);top:-2px;width:34px;height:34px;margin-left:-17px;border-radius:calc(7px + var(--k) * 15px);background:linear-gradient(135deg,#E9F4F0,#CBE4DE);box-shadow:inset -4px -4px 0 rgb(62 116 110 / .14),inset 3px 3px 0 rgb(255 255 255 / .55);transform:translateY(calc(var(--k) * 30px)) scale(calc(1 - var(--k) * .5));opacity:calc(1 - var(--k) * var(--k))}
[data-scene="melt"] .drop{scale:calc(1 + var(--k) * .5) calc(1 + var(--k) * 1.4)}

/* --- heat: embers rise. Bigger, hotter, more glow than the old motes --- */
.ember{--k:clamp(0,(var(--out) - var(--d)) / .55,1);position:absolute;left:var(--x);bottom:2%;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgb(255 216 172 / .95),rgb(232 150 90 / .7));box-shadow:0 0 14px 4px rgb(232 150 90 / .5);transform:translate(calc(var(--k) * var(--dx,14px) - var(--vel,0) * 34px * var(--k)),calc(var(--k) * -150px)) scale(calc(.5 + var(--k) * .9));opacity:calc(min(1,var(--k) * 4) * (1 - var(--k)))}

/* --- chiro: the band CRACKS. Jagged bolts snap down fast, each with a
   shock ring; harder snap on fast scrolls --- */
.crack{--k:clamp(0,(var(--out) - var(--d)) / .1,1);--f:clamp(0,(var(--out) - var(--d) - .3) / .45,1);position:absolute;left:var(--x);top:4%;width:64px;height:92%;margin-left:-32px;fill:none;stroke:rgb(91 104 74 / .6);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 0;transform:scaleY(var(--k)) scale(calc(1 + var(--vel,0) * var(--vel,0) * .35)) rotate(calc((var(--d) - .16) * 60deg));opacity:calc(min(1,var(--k) * 4) * (1 - var(--f)))}
.crack-flash{--k:clamp(0,(var(--out) - var(--d)) / .08,1);--f:clamp(0,(var(--out) - var(--d) - .08) / .3,1);position:absolute;left:var(--x);top:6%;width:46px;height:46px;margin-left:-23px;border-radius:50%;border:2px solid rgb(91 104 74 / .55);transform:scale(calc(.25 + var(--k) * 1.5));opacity:calc(min(1,var(--k) * 5) * (1 - var(--f)))}

/* --- acupuncture: MANY LITTLE DOTS pop across the band with an overshoot
   swell, rippling outward, then release --- */
.pop-dot{--k:clamp(0,(var(--out) - var(--d)) / .12,1);--f:clamp(0,(var(--out) - var(--d) - .32) / .5,1);position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#C8993F;box-shadow:0 0 10px rgb(200 153 63 / .6);scale:calc(var(--k) * (1 + (1 - var(--k)) * var(--k) * 3.4) * (1 + var(--vel,0) * var(--vel,0) * .6));opacity:calc(min(1,var(--k) * 4) * (1 - var(--f)))}

/* --- cupping: LARGER cup pulls. Big cups rise through the band, swelling
   and tilting; the marks stretch upward behind them like pulled skin --- */
.pull-cup{--k:clamp(0,(var(--out) - var(--d)) / .55,1);position:absolute;left:var(--x);top:80%;width:62px;height:62px;margin-left:-31px;border-radius:50%;background:rgb(255 253 249 / .7);border:3px solid rgb(152 90 69 / .5);box-shadow:inset 0 -8px 0 rgb(152 90 69 / .1),inset 4px 4px 0 rgb(255 255 255 / .5);transform:translateY(calc(var(--k) * var(--k) * -104px * (1 + var(--vel,0) * var(--vel,0)))) scale(calc(.72 + var(--k) * .5)) rotate(calc((1 - var(--k)) * var(--k) * 10deg));opacity:calc(min(1,var(--k) * 4) * (1 - var(--k) * var(--k)))}
.pull-mark{--k:clamp(0,(var(--out) - var(--d) - .12) / .5,1);position:absolute;left:var(--x);top:80%;width:62px;height:62px;margin-left:-31px;border-radius:50%;background:rgb(196 118 92 / .22);transform:translateY(calc(var(--k) * -34px)) scale(calc(.62 + var(--k) * .75));opacity:calc(min(1,var(--k) * 4) * (1 - var(--k)) * .85)}

/* --- injections: the dose blooms. Each core pops with two expanding rings --- */
.bloom{--k:clamp(0,(var(--out) - var(--d)) / .4,1);--f:clamp(0,(var(--out) - var(--d) - .3) / .5,1);position:absolute;left:var(--x);top:32%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgb(94 154 144 / .75);box-shadow:0 0 10px rgb(94 154 144 / .5);scale:calc(.4 + var(--k) * (1 + (1 - var(--k)) * var(--k) * 2.4));opacity:calc(min(1,var(--k) * 4) * (1 - var(--f)))}
.bloom::before,.bloom::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;border:2px solid rgb(94 154 144 / .45)}
.bloom::before{width:44px;height:44px;margin:-22px 0 0 -22px;scale:calc(.2 + var(--k) * 1.3);opacity:calc((1 - var(--k)) * .9)}
.bloom::after{width:64px;height:64px;margin:-32px 0 0 -32px;scale:calc(.15 + var(--k) * 1.15);opacity:calc((1 - var(--k)) * .7)}

/* ============ BAND ENCORE (v5b): capsule spill, injection pour, brace grip ============
   2026-09-29: David asked for three more band moments: the pill capsule
   opening with its contents spilling out, the injection liquid pouring out,
   and the brace gripping the spine. Same discipline: pure functions of
   --out (and --vel), individual transform properties only, no keyframes. */

/* --- medications: the capsule opens at the top of the band and its contents
   spill out and tumble down --- */
.spill{--k:clamp(0,(var(--out) - var(--d)) / .55,1);position:absolute;left:var(--x);top:16%;width:8px;height:8px;margin-left:-4px;border-radius:50%;transform:translateY(calc(var(--k) * var(--fall))) scale(calc(1 - var(--k) * .55));opacity:calc(min(1,var(--k) * 6) * (1 - var(--k) * var(--k)))}

/* --- injections: the liquid pours out. The section above already has the
   needle; the band just carries its fluid through. The stream grows
   down from the band top, droplets fall --- */
.pour{--k:clamp(0,(var(--out) - .18) / .3,1);--f:clamp(0,(var(--out) - .62) / .38,1);position:absolute;left:var(--x);top:0;width:7px;height:calc(var(--transition-gap) * .42);margin-left:-3.5px;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgb(94 154 144 / .85),rgb(94 154 144 / .35));transform-origin:50% 0;transform:scaleY(var(--k));opacity:calc(var(--k) * (1 - var(--f)))}
.pour-drop{--k:clamp(0,(var(--out) - var(--d)) / .28,1);position:absolute;left:var(--x);top:calc(var(--transition-gap) * .42);width:9px;height:12px;margin-left:-4.5px;border-radius:50% 50% 60% 60%;background:rgb(94 154 144 / .7);transform:translateY(calc(var(--k) * 34px)) scale(calc(1 - var(--k) * .4));opacity:calc(min(1,var(--k) * 5) * (1 - var(--k)))}

/* --- bracing: the brace grips the spine. Shells slide in from the sides,
   clamp the column, the column squeezes, pressure ticks flash --- */
.grip-spine{--sq:clamp(0,(var(--out) - .5) / .25,1) * (1 - clamp(0,(var(--out) - .8) / .2,1));position:absolute;left:50%;top:11%;width:17px;height:78%;margin-left:-8.5px;border-radius:9px;background:linear-gradient(90deg,#D9CFBE,#EFE8D8,#D9CFBE);box-shadow:inset 0 0 0 1.5px rgb(120 105 80 / .25);transform:scaleX(calc(1 - var(--sq) * .24))}
.grip{--k:clamp(0,(var(--out) - .15) / .35,1);position:absolute;top:16%;width:30px;height:68%;border:7px solid rgb(122 108 88 / .62);opacity:var(--k)}
.grip--l{left:50%;margin-left:-44px;border-radius:50% 0 0 50%;border-right:0;transform:translateX(calc((1 - var(--k)) * -52px))}
.grip--r{left:50%;margin-left:14px;border-radius:0 50% 50% 0;border-left:0;transform:translateX(calc((1 - var(--k)) * 52px))}
.grip-tick{--p:clamp(0,(var(--out) - .5) / .12,1) * (1 - clamp(0,(var(--out) - .72) / .28,1));position:absolute;top:var(--y);left:50%;width:64px;height:2px;margin-left:-32px;background:rgb(122 108 88 / .7);opacity:var(--p)}

/* ============ BAND REBUILDS (v6): kneads, gel absorb, growing sprouts ============
   2026-09-29: audit follow-up. The four weakest bands get the v5 treatment:
   massage sweeps become rhythmic kneading presses; topicals soak rings become
   a gel dollop that spreads and absorbs mid-band; lifestyle's two lost leaves
   become sprouts growing upward. (Heat's motes became embers in BRIDGE_FX.)
   Same discipline: pure functions of --out (and --vel), no keyframes. */

/* --- massage: kneading presses. Blobs press down and spread, then release, staggered --- */
.knead{--k:clamp(0,(var(--out) - var(--d)) / .5,1);--p:calc(var(--k) * (1 - var(--k)) * 4);position:absolute;left:var(--x);top:36%;width:80px;height:56px;margin:-28px 0 0 -40px;border-radius:50%;background:radial-gradient(ellipse at 50% 38%,rgb(196 116 90 / .78),rgb(149 86 70 / .48));box-shadow:0 6px 14px -6px rgb(149 86 70 / .35);transform:translateY(calc(var(--p) * 20px));scale:calc(1 + var(--p) * .45) calc(1 - var(--p) * .35);opacity:calc(min(1,var(--k) * 4) * (1 - var(--k)))}

/* --- topicals: the gel absorbs. A dollop stretches down and melts away while rings bloom outward mid-band --- */
.gel{--k:clamp(0,var(--out) / .4,1);--f:clamp(0,(var(--out) - .35) / .45,1);position:absolute;left:50%;top:5%;width:46px;height:30px;margin-left:-23px;border-radius:46% 54% 52% 48% / 62% 64% 36% 38%;background:linear-gradient(160deg,rgb(146 194 154 / .9),rgb(82 118 79 / .55));box-shadow:inset -3px -4px 0 rgb(255 255 255 / .25);transform:translateY(calc(var(--k) * 24px)) scale(1,calc(1 + var(--k) * 1.1));transform-origin:50% 0;opacity:calc(min(1,var(--k) * 5) * (1 - var(--f)))}
.absorb-ring{--k:clamp(0,(var(--out) - var(--d)) / .5,1);position:absolute;left:50%;top:46%;width:74px;height:28px;margin:-14px 0 0 -37px;border-radius:50%;border:2.5px solid rgb(82 118 79 / .5);transform:scale(calc(.45 + var(--k) * 1.7));opacity:calc(min(1,var(--k) * 4) * (1 - var(--k)) * .9)}

/* --- lifestyle: sprouts grow. Stems rise from the bottom, leaves unfurl in sequence --- */
.sprout-up{--k:clamp(0,(var(--out) - var(--d)) / .5,1);position:absolute;left:var(--x);bottom:6%;width:6px;height:var(--h,104px);margin-left:-3px;transform-origin:50% 100%;transform:scaleY(var(--k));opacity:calc(min(1,var(--k) * 4) * (1 - var(--k) * var(--k) * .35))}
.sprout-up .stem{position:absolute;inset:0;border-radius:3px;background:linear-gradient(180deg,#8FB45F,#5F7F3E)}
.sprout-up .lf{position:absolute;width:36px;height:19px;background:#8AA860}
.sprout-up .l1{left:1px;top:24px;border-radius:0 100% 0 100%;transform-origin:0 50%;transform:rotate(-26deg) scale(clamp(0,(var(--k) - .35) / .4,1))}
.sprout-up .l2{right:1px;top:50px;border-radius:100% 0 100% 0;transform-origin:100% 50%;transform:rotate(26deg) scale(clamp(0,(var(--k) - .55) / .4,1))}