:root{--page:#102c31;--ink:#edf0e3;--muted:#c0d2cd;--line:#53736f;--accent:#e5bc6b;color-scheme:dark}*{box-sizing:border-box}html{background:var(--page);scrollbar-color:#82a7a5 var(--page);scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--page);color:var(--ink);font:14px/1.7 Inter,sans-serif}::selection{background:var(--accent);color:var(--page)}a{color:inherit;text-underline-offset:5px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.skip{position:fixed;left:20px;top:-100px;z-index:20;background:var(--ink);color:var(--page);padding:13px}.skip:focus{top:12px}.topbar{display:flex;align-items:center;gap:30px;justify-content:space-between;padding:15px 3.5%;min-height:92px;background:var(--page)}h1{color:var(--ink);font:300 42px/1.1 Fraunces,serif;letter-spacing:-.035em;margin:0}h1 em{font-weight:300;color:#a7d2d4}.topbar p{margin:0;color:var(--muted);font-size:14px}.topbar a,footer a{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}.topbar a:hover,footer a:hover{text-decoration:underline}svg{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.topbar svg,footer svg{width:22px;height:22px}.experience{position:relative;isolation:isolate;height:calc(100svh - 92px);min-height:600px;max-height:1400px}.art-stage{position:absolute;inset:0;background:#1c5156;overflow:hidden;touch-action:pan-y;cursor:crosshair}.art-stage canvas,.art-stage>svg{display:block;position:absolute;inset:0;width:100%;height:100%}.art-stage canvas{opacity:0;pointer-events:none}.art-stage>svg{opacity:1}body[data-renderer=webgpu] canvas{opacity:1}body[data-renderer=webgpu] #art-fallback{opacity:0}.dock{position:absolute;bottom:25px;left:3.5%;right:3.5%;z-index:2;margin:0;padding:20px 28px 13px;background:#102c31;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;box-shadow:0 16px 42px #07191d52;border:1px solid #9bc8c331}.control{min-width:0}.control label{display:flex;justify-content:space-between;gap:12px;font-size:14px}.control output{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.control input{display:block;width:100%;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;accent-color:var(--accent)}.control input::-webkit-slider-runnable-track{height:1px;background:#83a5a1}.control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin-top:-7px;border-radius:50%;background:var(--accent);border:3px solid var(--page);box-shadow:0 0 0 1px var(--accent)}.control input::-moz-range-track{height:1px;background:#83a5a1}.control input::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--accent);border:3px solid var(--page);box-shadow:0 0 0 1px var(--accent)}.actions{grid-column:1/-1;display:flex;align-items:center;gap:24px;border-top:1px solid #a3c7bc38;margin-top:2px;padding-top:8px}.actions button{min-height:44px;border:0;background:none;color:var(--ink);cursor:pointer;padding:7px 0;display:flex;align-items:center;gap:10px;font-size:14px}.actions button:hover{color:var(--accent)}.actions button:disabled{opacity:.55;cursor:default}.actions #play svg{width:16px;height:16px;fill:currentColor;stroke:none}#reset{text-decoration:underline;text-underline-offset:5px}#renderer-status{margin-left:auto;font-size:12px;color:var(--muted)}.references{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5%;max-width:1580px;margin:auto;padding:90px 5% 85px}.references h2{font:300 clamp(32px,3vw,44px)/1.15 Fraunces,serif;letter-spacing:-.03em;color:var(--ink);margin:0 0 28px}.references h2 em{color:#a7d2d4;font-weight:300}.references p{font-size:14px;color:var(--muted);max-width:43ch;line-height:1.85;margin:0 0 22px}.references #motion-note{font-size:12px}.references figure{margin:0;min-width:0}.references figure a{display:block}.references img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#dddbcf}.references figcaption{display:flex;flex-direction:column;gap:7px;font:300 21px/1.4 Fraunces,serif;margin-top:18px}.references figcaption span{font:12px/1.8 Inter,sans-serif;color:var(--muted)}footer{display:flex;justify-content:space-between;align-items:center;gap:25px;max-width:1580px;margin:auto;padding:20px 5% 30px;border-top:1px solid #a3c7bc38}footer>a:first-child{font:300 25px Fraunces,serif}footer>span{font-size:12px;color:var(--muted)}
@media(max-width:1000px){.topbar p{font-size:12px;max-width:28ch}.dock{gap:0 25px;padding-inline:22px}.references{gap:30px;grid-template-columns:1fr 1fr}.reference-copy{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:35px}.reference-copy h2{grid-row:span 3}.references p{max-width:50ch}}
@media(max-width:650px){.topbar{padding:14px 6%;min-height:83px;gap:18px;align-items:center}.topbar h1{font-size:32px}.topbar p{display:none}.topbar a{font-size:13px;gap:8px}.experience{height:calc(100svh - 83px);min-height:690px}.dock{left:5%;right:5%;bottom:18px;padding:18px 18px 10px;gap:3px 0;grid-template-columns:1fr}.control label{font-size:13px}.control input{height:38px;min-height:44px}.actions{gap:22px;flex-wrap:wrap}.actions button{font-size:13px}.actions #renderer-status{margin-left:auto;font-size:12px}.references{display:block;padding:48px 6% 25px}.reference-copy{display:block}.references h2{font-size:36px}.references figure{margin-top:32px;margin-bottom:36px}.references img{aspect-ratio:1.3}.references figcaption{font-size:23px}footer{padding:24px 6%;align-items:flex-start;flex-direction:column;gap:5px}footer span{margin:4px 0 12px}.art-stage{touch-action:pan-y}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}