:root{color-scheme:dark;--background:#15181d;--ink:#f5f3ee;--accent:#ff711f;--muted:#a3a6ac}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--background);color:var(--ink);font-family:Arial,Helvetica,sans-serif}header{height:88px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:5;width:100%;border-bottom:0}.wordmark{font-size:18px;font-weight:900;text-decoration:none;letter-spacing:-.6px;color:var(--ink)}.wordmark span{color:var(--accent)}.wordmark i{display:inline-block;width:6px;height:6px;background:var(--accent);margin:0 0 2px 8px}.header-note{font-size:10px;letter-spacing:2.5px;color:var(--muted)}.logo-story{height:480vh;height:480svh}.stage{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at 68% 45%,#293039 0%,var(--background) 65%)}.intro,.ending{position:absolute;z-index:2;top:18%;left:6vw;pointer-events:none;will-change:opacity,transform}.eyebrow{font-size:10px;letter-spacing:2.8px;font-weight:bold;color:var(--muted)}h1,h2{font-size:clamp(46px,6vw,92px);line-height:1.04;font-weight:500;letter-spacing:-.055em;margin:24px 0}em{font-style:normal;color:var(--accent)}.hint{font-size:12px;color:var(--muted);margin-top:32px}.hint span{color:var(--accent);margin-left:18px}.render{position:absolute;inset:12% -3% 10%;display:grid;place-items:center;pointer-events:none}canvas{width:100%;height:100%;object-fit:contain;display:block}.ending{top:13%;opacity:0}.ending h2{font-size:clamp(36px,4vw,62px)}.controls{position:absolute;bottom:28px;left:6vw;right:6vw;z-index:3}.progress-heading,.control-bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.6px}.progress-heading{color:var(--ink);margin-bottom:12px}#percent{font-variant-numeric:tabular-nums;color:var(--accent)}input[type=range]{display:block;width:100%;height:20px;appearance:none;background:transparent;cursor:pointer;margin:0}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--accent) var(--progress,0%),#ffffff24 var(--progress,0%))}input[type=range]::-moz-range-track{height:2px;background:#ffffff24}input[type=range]::-moz-range-progress{height:2px;background:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);margin-top:-5px}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--accent)}.control-bottom{margin-top:8px;color:var(--muted);font-size:10px}a{color:inherit;text-underline-offset:6px}a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.after{min-height:65vh;padding:12vh 6vw;background:#eeeae3;color:#15181d}.after .eyebrow{color:#5b5e61}.after h2{font-size:clamp(42px,5.5vw,80px)}.after>a{display:inline-block;font-size:13px;margin-top:20px}.after>a span{margin-left:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:680px){header{height:70px;padding:0 6vw}.header-note{display:none}.intro,.ending{top:15%}.intro h1{font-size:52px}.render{inset:33% -12% 20%}.ending h2{font-size:40px}.controls{bottom:24px}.logo-story{height:400svh}.eyebrow{font-size:9px;letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){.logo-story{height:100svh}.intro{display:none}.ending{opacity:1}.render{inset:28% 0 12%}.hint{display:none}}

/* Continuous page surface and explicitly bounded canvas (including Chrome grid sizing). */
body{background:radial-gradient(ellipse at 68% 45%,#293039 0%,var(--background) 65%);background-attachment:fixed}
.stage,.after{background:transparent;color:var(--ink)}
.after .eyebrow{color:var(--muted)}
.render{display:block;inset:20% 3% 9%;min-width:0;min-height:0}
canvas{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain}
.after{padding-top:8vh;min-height:75vh}
@media(max-width:680px){.render{inset:34% 2% 12%}}
@media(prefers-reduced-motion:reduce){.render{inset:30% 3% 8%}}

/* The transparent animation is a viewport layer, not an inset video rectangle. */
.stage{isolation:isolate}
.render{inset:0;display:block;width:100%;height:100%;overflow:hidden}
canvas{inset:0;width:100%;height:100%;object-fit:fill;mask-image:linear-gradient(to bottom,transparent 0%,black 3%,black 96%,transparent 100%)}
.ending{top:7%}
@media(max-width:680px){.render{inset:0}.ending{top:12%}}
@media(prefers-reduced-motion:reduce){.render{inset:0}}

.wordmark{display:flex;align-items:center;flex-shrink:0}.wordmark img{display:block;width:156px;height:72px;object-fit:contain}@media(max-width:680px){.wordmark img{width:122px;height:58px}}