@property --p{syntax: "<number>"; inherits: true; initial-value: 0;}@property --lp{syntax: "<number>"; inherits: true; initial-value: 0;}@property --sp{syntax: "<number>"; inherits: false; initial-value: 0;}@property --start{syntax: "<number>"; inherits: false; initial-value: 0;}@property --inv-span{syntax: "<number>"; inherits: false; initial-value: 1;}@property --inv-dspan{syntax: "<number>"; inherits: true; initial-value: 1;}@property --delay{syntax: "<number>"; inherits: false; initial-value: 0;}@property --len{syntax: "<number>"; inherits: false; initial-value: 1000;}@property --w{syntax: "<number>"; inherits: true; initial-value: 1.1;}@property --scroll-length{syntax: "<number>"; inherits: false; initial-value: 300;}:root{--paper: #f6f4ef;--paper-deep: #edeae2;--ink: #17171b;--ink-soft: #5c5a55;--rule: #d9d4c9;--font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light dark}@media (prefers-color-scheme: dark){:root{--paper: #0f0f11;--paper-deep: #161619;--ink: #e8e4db;--ink-soft: #8d8a83;--rule: #2a2a2f}}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}.intro,.outro{min-height:92vh;display:grid;align-content:center;justify-items:start;gap:1.1rem;max-width:46rem;margin:0 auto;padding:4rem 1.75rem}.intro h1{margin:0;font-size:clamp(2.6rem,8vw,5.5rem);line-height:.95;letter-spacing:-.03em;font-weight:500}.intro p,.outro p{margin:0;max-width:34rem;font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.6;color:var(--ink-soft)}.intro__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:.4rem}.intro__sandbox{display:inline-flex;align-items:center;gap:.7rem;min-height:2.9rem;padding:.7rem 1rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--font-ui);font-size:.82rem;font-weight:650;letter-spacing:.04em;text-decoration:none;transition:transform .16s ease,background-color .16s ease,color .16s ease}.intro__sandbox span{font-size:1.1rem;line-height:1;transition:transform .16s ease}.intro__sandbox:hover{transform:translateY(-2px);background:var(--paper);color:var(--ink)}.intro__sandbox:hover span{transform:translate(.2rem)}.intro__sandbox:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.intro__hint{font-family:var(--font-ui);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:.6rem}.intro__hint:after{content:"";width:2.5rem;height:1px;background:currentColor;animation:nudge 2.4s ease-in-out infinite}@keyframes nudge{0%,to{transform:translate(0);opacity:.4}50%{transform:translate(.5rem);opacity:1}}.scrub{position:fixed;z-index:50;left:50%;bottom:1rem;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;padding:.5rem .9rem;border-radius:999px;background:color-mix(in srgb,var(--paper) 85%,transparent);border:1px solid var(--rule);backdrop-filter:blur(8px);font-family:var(--font-ui);font-size:.75rem;color:var(--ink-soft)}.scrub__range{width:min(52vw,24rem);accent-color:var(--ink)}.scrub__out{font-variant-numeric:tabular-nums;min-width:3.2rem}.scrub__toggle{display:flex;align-items:center;gap:.3rem;cursor:pointer}@media (prefers-reduced-motion: reduce){.intro__hint:after{animation:none}.intro__sandbox,.intro__sandbox span{transition:none}}.is-solo .intro,.is-solo .outro{display:none}.is-solo .scene{height:100vh}.is-share .intro,.is-share .outro{display:none}.is-share .scene__stage{padding-bottom:3.2rem}.share-bar{position:fixed;z-index:40;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(1rem,3vw,2.5rem);font-family:var(--font-ui);font-size:.78rem;background:linear-gradient(to top,var(--paper) 55%,transparent);pointer-events:none}.share-bar__seed{color:var(--ink-soft);letter-spacing:.06em;font-variant-numeric:tabular-nums}.share-bar a{pointer-events:auto;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}.share-bar a:hover{border-color:currentColor}.scene{position:relative;height:calc(var(--scroll-length) * 1vh);background:var(--scene-bg, transparent)}.scene__stage{position:sticky;top:var(--chrome, 0px);height:calc(100vh - var(--chrome, 0px));display:grid;grid-template-rows:1fr auto;padding:clamp(1rem,3vw,2.5rem);gap:1rem}.scene__frame{min-height:0;position:relative}.scene__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.layer{--lp: clamp(0, (var(--p) - var(--start)) * var(--inv-span), 1);opacity:var(--layer-opacity, 1)}.stroke{--sp: clamp(0, (var(--lp) - var(--delay)) * var(--inv-dspan), 1);fill:none;stroke:var(--ink);stroke-width:var(--w);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:calc(var(--len) * 1px);stroke-dashoffset:calc(var(--len) * (1 - var(--sp)) * 1px)}.fill{stroke:none;opacity:calc(var(--lp) * var(--fill-opacity, 1))}.scene__meta{font-family:var(--font-ui);display:grid;gap:.35rem;justify-items:start;max-width:34rem;opacity:clamp(0,var(--p) * 14,1);transition:opacity .12s linear}.scene__meta h2{margin:0;font-family:var(--font);font-size:clamp(1.25rem,3vw,1.75rem);font-weight:500;letter-spacing:-.01em}.scene__meta p{margin:0;font-size:.85rem;line-height:1.5;color:var(--ink-soft)}@media (prefers-reduced-motion: reduce){.scene{height:100vh;--p: 1}.scene__meta{opacity:1}}