@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__studio{color:var(--ink);font-family:var(--font-ui);font-size:.82rem;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.2rem}.intro__studio:hover{border-color:currentColor}.intro__studio: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);isolation:isolate;overflow:clip}.scene:before,.scene:after{content:"";position:absolute;inset:-8%;pointer-events:none;z-index:0;opacity:0}.scene--ambient:before,.scene--ambient:after{opacity:calc(clamp(0,(var(--p, 1) - .985) * 66.667,1) * var(--ambience-intensity, .35));transition:opacity .9s ease}.scene[data-ambience-tone=paper]:before{background:radial-gradient(circle at 48% 42%,rgba(255,255,255,.55),rgba(216,207,188,.2) 68%,transparent)}.scene[data-ambience-tone=warm]:before{background:radial-gradient(circle at 30% 30%,rgba(237,184,93,.48),transparent 48%),linear-gradient(125deg,#9c4c2d29,#ffe5ad5c)}.scene[data-ambience-tone=cool]:before{background:radial-gradient(circle at 70% 26%,rgba(130,176,190,.45),transparent 46%),linear-gradient(145deg,#46668130,#d0e0db61)}.scene[data-ambience-tone=twilight]:before{background:radial-gradient(circle at 72% 24%,rgba(225,153,113,.38),transparent 35%),linear-gradient(155deg,#3d467061,#ba849240 58%,#efc1823d)}.scene[data-ambience-tone=night]:before{background:radial-gradient(circle at 75% 20%,rgba(174,194,205,.25),transparent 28%),linear-gradient(155deg,#192741b8,#3342567a)}.scene[data-ambience-effect=breathe]:before{animation:ambience-breathe var(--ambience-duration) ease-in-out infinite alternate}.scene[data-ambience-effect=drift]:before{background-size:145% 145%;animation:ambience-drift var(--ambience-duration) ease-in-out infinite alternate}.scene[data-ambience-effect=ripples]:after{inset:8% 4%;background:repeating-radial-gradient(ellipse at 50% 56%,transparent 0 38px,rgba(67,111,125,.18) 40px 41px,transparent 43px 62px);animation:ambience-ripples var(--ambience-duration) ease-in-out infinite}.scene[data-ambience-effect=grain]:after{background:repeating-linear-gradient(112deg,transparent 0 8px,rgba(72,58,47,.075) 9px,transparent 10px 17px);animation:ambience-grain calc(var(--ambience-duration) * .55) linear infinite}.scene[data-ambience-effect=day-night]:before{animation:ambience-day-night calc(var(--ambience-duration) * 2.2) ease-in-out infinite alternate}@keyframes ambience-breathe{0%{transform:scale(1);filter:saturate(.9)}to{transform:scale(1.035);filter:saturate(1.15)}}@keyframes ambience-drift{0%{background-position:0% 35%;transform:translate(-1%)}to{background-position:100% 65%;transform:translate(1%)}}@keyframes ambience-ripples{0%,to{transform:scale(.98)}50%{transform:scale(1.025)}}@keyframes ambience-grain{0%{transform:translate3d(-1%,-1%,0)}to{transform:translate3d(1%,1%,0)}}@keyframes ambience-day-night{0%{filter:hue-rotate(-8deg) brightness(1.08)}to{filter:hue-rotate(35deg) brightness(.72) saturate(1.25)}}.scene[data-scene=sky-weather]{--weather-day-bg: rgb(224, 225, 218);--weather-night-bg: rgb(42, 50, 65);transition:background 12s ease}.scene[data-scene=sky-weather] .layer[class*=layer--weather-]{transition:opacity 4s ease}.scene[data-scene=sky-weather].is-complete .layer--sky{animation:weather-cloud-drift 32s ease-in-out infinite alternate}.scene[data-scene=sky-weather].is-complete .layer--sky .stroke{animation:weather-cloud-line 28s ease-in-out infinite;animation-delay:calc(var(--delay) * -17s)}.scene[data-scene=sky-weather][data-weather-state=clear]{--weather-day-bg: rgb(244, 235, 207);--weather-night-bg: rgb(28, 38, 59)}.scene[data-scene=sky-weather][data-weather-state=cloudy]{--weather-day-bg: rgb(224, 225, 218);--weather-night-bg: rgb(45, 53, 66)}.scene[data-scene=sky-weather][data-weather-state=rain]{--weather-day-bg: rgb(194, 207, 211);--weather-night-bg: rgb(35, 48, 63)}.scene[data-scene=sky-weather][data-weather-state=snow]{--weather-day-bg: rgb(238, 241, 237);--weather-night-bg: rgb(54, 64, 78)}.scene[data-scene=sky-weather][data-time-of-day=day]{background:var(--weather-day-bg)}.scene[data-scene=sky-weather][data-time-of-day=night]{background:var(--weather-night-bg)}.scene[data-scene=sky-weather][data-weather-state=storm][data-time-of-day=day]{animation:weather-storm-sky-day 12s ease-in-out infinite}.scene[data-scene=sky-weather][data-weather-state=storm][data-time-of-day=night]{animation:weather-storm-sky-night 12s ease-in-out infinite}.scene[data-scene=sky-weather][data-weather-state=clear] .layer--weather-sun{opacity:.9}.scene[data-scene=sky-weather][data-time-of-day=night] .layer--weather-sun{opacity:0}.scene[data-scene=sky-weather][data-time-of-day=night] .layer--weather-stars{opacity:.78}.scene[data-scene=sky-weather][data-time-of-day=night][data-weather-state=cloudy] .layer--weather-stars{opacity:.5}.scene[data-scene=sky-weather][data-time-of-day=night][data-weather-state=rain] .layer--weather-stars{opacity:.28}.scene[data-scene=sky-weather][data-time-of-day=night][data-weather-state=storm] .layer--weather-stars{opacity:.08}.scene[data-scene=sky-weather][data-weather-state=rain] .layer--weather-rain,.scene[data-scene=sky-weather][data-weather-state=storm] .layer--weather-rain,.scene[data-scene=sky-weather][data-weather-state=snow] .layer--weather-snow{opacity:.82}.scene[data-scene=sky-weather][data-weather-state=storm] .layer--weather-lightning{opacity:1;transition-duration:.7s}.scene[data-scene=sky-weather][data-weather-state=clear][data-time-of-day=day] .layer--weather-sun{animation:weather-sun-breathe 9s ease-in-out infinite alternate}.scene[data-scene=sky-weather][data-time-of-day=night] .layer--weather-stars .stroke{animation:weather-star-twinkle 5.5s ease-in-out infinite alternate;animation-delay:calc(var(--delay) * -4s)}.scene[data-scene=sky-weather][data-weather-state=rain] .layer--weather-rain .stroke,.scene[data-scene=sky-weather][data-weather-state=storm] .layer--weather-rain .stroke{animation:weather-rain-line 1.8s linear infinite;animation-delay:calc(var(--delay) * -1.7s)}.scene[data-scene=sky-weather][data-weather-state=storm] .layer--weather-lightning .stroke{animation:weather-lightning-line 11s ease-in-out infinite;animation-delay:calc(var(--delay) * -4s)}.scene[data-scene=sky-weather][data-weather-state=snow] .layer--weather-snow .stroke{transform-box:fill-box;transform-origin:center;animation:weather-snow-drift 6.5s ease-in-out infinite;animation-delay:calc(var(--delay) * -5s)}@keyframes weather-cloud-drift{0%{transform:translate(-1.2%)}to{transform:translate(1.2%)}}@keyframes weather-cloud-line{0%,22%,to{stroke-dashoffset:0;opacity:1}43%{stroke-dashoffset:calc(var(--len) * -1px);opacity:.12}56%{stroke-dashoffset:calc(var(--len) * 1px);opacity:.12}78%{stroke-dashoffset:0;opacity:1}}@keyframes weather-sun-breathe{0%{transform:scale(.97);filter:saturate(.9)}to{transform:scale(1.035);filter:saturate(1.2)}}@keyframes weather-star-twinkle{0%{opacity:.35}to{opacity:1}}@keyframes weather-rain-line{0%{stroke-dashoffset:calc(var(--len) * 1px);opacity:0}18%,62%{stroke-dashoffset:0;opacity:1}82%,to{stroke-dashoffset:calc(var(--len) * -1px);opacity:0}}@keyframes weather-lightning-line{0%,22%,72%,to{stroke-dashoffset:calc(var(--len) * 1px);opacity:0}34%,48%{stroke-dashoffset:0;opacity:1}58%,66%{stroke-dashoffset:0;opacity:.18}}@keyframes weather-snow-drift{0%,to{transform:translateY(-5px) rotate(-5deg);opacity:.15}50%{transform:translate(12px,10px) rotate(8deg);opacity:1}}@keyframes weather-storm-sky-day{0%,25%,68%,to{background:#4c5867}38%,52%{background:#b0b8ba}}@keyframes weather-storm-sky-night{0%,25%,68%,to{background:#161f2e}38%,52%{background:#8493a2}}.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;z-index:1}.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}.scene:before,.scene:after{animation:none!important}.scene[data-scene=sky-weather] .layer[class*=layer--weather-]{transition:none!important;opacity:.55}}