.experience-page{--surface:#101e24;--ink:#f4ecd9;--muted:#b4c6c4;--accent:#d2b078;--on-accent:#112324;--rule:#d2b07830}.experience-page .brand{color:#c8a66b}.experience-page nav{max-width:1440px}.experience-page .hero{padding-top:45px}.experience-page .nav-links button{font-size:11px;padding:9px 12px;white-space:nowrap}.experience-stage{max-width:1100px;position:relative;margin:25px auto 0;padding:0 30px;overflow:clip}.experience-stage canvas,.experience-stage svg{width:100%;height:auto;display:block;aspect-ratio:1000/560}.art-caption{display:flex;justify-content:space-between;gap:20px;margin:12px 20px 0;font-size:10px;letter-spacing:1.8px;color:var(--muted)}.experience-controls{max-width:760px;margin:30px auto 0;padding:0 25px}.experience-ranges{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-bottom:25px}.experience-ranges:has(> :only-child){grid-template-columns:1fr;max-width:500px;margin:0 auto 25px}.experience-range label{display:flex;justify-content:space-between;gap:15px;font-size:13px;margin-bottom:8px}.experience-range output{color:var(--accent);font-variant-numeric:tabular-nums}.experience-controls .footnote{text-align:center;max-width:620px;margin:20px auto}.demo-note{font-size:10px;letter-spacing:.5px;color:var(--muted);text-align:center;line-height:1.8;margin:35px 20px 0;opacity:.7}.experience-page[data-paused=true] *{animation-play-state:paused!important}.experience-page footer{margin-top:45px}
.aurora-page{background:radial-gradient(ellipse at 50% 40%,#153b3c,transparent 65%),#081922;--accent:#d7c093;--muted:#b0c5c7}.aurora-page .experience-stage{background:radial-gradient(ellipse,#19494b38,transparent 65%)}
.clockwork-page{--surface:#231b15;--muted:#bba78a;--accent:#d1aa65;--on-accent:#281c11;background:radial-gradient(ellipse at 50% 35%,#65422670,transparent 60%),#211a15}.clockwork-page .hero h1 em{color:#d5ad69}.clockwork-page .experience-stage{filter:drop-shadow(0 18px 23px #0004)}
.pencil-page{--surface:#f1e7d5;--ink:#453d34;--muted:#887660;--accent:#9e684b;--on-accent:#fff6e3;--rule:#a68f6940;--hover:#9e684b11;background:radial-gradient(ellipse at 50% 43%,#fff9ea,transparent 70%),repeating-linear-gradient(93deg,transparent 0 3px,#8e674403 3px 4px),#f1e7d5}.pencil-page .experience-stage{background:#f8f1e3;border:1px solid #b6a78b42;box-shadow:0 15px 40px #74512c10;transform:rotate(-.6deg);padding:8px 30px 15px}.pencil-page .art-caption{letter-spacing:1.1px}.pencil-page .pencil-lines{fill:none;stroke-linecap:round;stroke-linejoin:round}.pencil-page .draw-line{stroke-dasharray:1;stroke-dashoffset:0}.pencil-page.drawing .draw-line{animation:pencil-draw 3.8s cubic-bezier(.2,.6,.3,1) both;animation-delay:var(--delay,0s)}.pencil-page.drawing .pencil-color{animation:pencil-fill 5s ease both}.pencil-page .pencil-color{opacity:.82}@keyframes pencil-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes pencil-fill{0%,25%{opacity:0}to{opacity:.82}}
.garden-page{--surface:#0e2625;--muted:#b8c5af;--accent:#d8bd83;--on-accent:#142d28;background:radial-gradient(ellipse at 50% 38%,#2c544146,transparent 65%),#0e2625}.garden-page .experience-stage{background:radial-gradient(ellipse,#91b6820d,transparent 62%)}.garden-page .petal{transition:fill .5s,opacity .5s}.garden-page .bloom-text{font-family:Bodoni,serif;fill:#f4e7c7}
.arcade-page{--surface:#121429;--muted:#b4b2cf;--accent:#9cffd7;--on-accent:#152525;--rule:#bb9eff36;background:radial-gradient(ellipse at 50% 35%,#45366a70,transparent 68%),#121429}.arcade-page h1 em{color:#baa4ff}.arcade-page .experience-stage canvas{image-rendering:pixelated;box-shadow:0 0 70px #7161c719;border:1px solid #a394e045}.arcade-page .art-caption{color:#b9a8e8}.arcade-page .eyebrow{color:#9cffd7}
@media(max-width:700px){.experience-page nav{padding:18px 16px;align-items:start}.experience-page .brand{font-size:22px;gap:8px;white-space:nowrap}.experience-page .brand img{width:25px;height:25px}.experience-page .nav-links{gap:9px;flex-wrap:wrap;justify-content:end;font-size:10px;max-width:100px}.experience-page .nav-links button{padding:6px 8px;font-size:9px}.experience-page .hero{padding-top:35px}.experience-stage{padding:0;margin:25px 10px 0}.art-caption{font-size:8px;letter-spacing:.7px;margin:15px 7px 0;gap:15px}.art-caption span:last-child{text-align:right}.experience-ranges{gap:22px}.experience-controls{margin-top:28px;padding:0 22px}.experience-range label{font-size:12px}.pencil-page .experience-stage{padding:0 0 13px;transform:none}.experience-controls .footnote{font-size:11px}.demo-note{font-size:9px}.experience-page footer{font-size:8px}.clockwork-page .experience-stage{margin-left:0;margin-right:0}}
@media(prefers-reduced-motion:reduce){.pencil-page.drawing .draw-line{stroke-dashoffset:0}.pencil-page.drawing .pencil-color{opacity:.82}}