@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#fffdf5;background:#17212a;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}html{scrollbar-width:none}html::-webkit-scrollbar{display:none}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #fff3cc;outline-offset:6px}#journey{height:300svh}#comparison{--split:50%;position:fixed;inset:0;overflow:hidden;isolation:isolate;user-select:none;background:#1d2b37}.fallback,canvas,.vignette{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.fallback img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50%) center}.fallback.storm{clip-path:inset(0 calc(100% - var(--split)) 0 0)}#landscape{opacity:0}.webgl-ready #landscape{opacity:1}.webgl-ready .fallback{visibility:hidden}.vignette{background:linear-gradient(180deg,#10192270,transparent 22%,transparent 52%,#111b2b88 100%),linear-gradient(90deg,#101b2529,transparent 55%)}header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:28px 3.4%;pointer-events:none}header>*{pointer-events:auto}.logo{font-family:Georgia,serif;letter-spacing:-2px;font-size:40px;color:#fffdf5;text-decoration:none;line-height:1}.logo span{font:9px 'DM Sans',sans-serif;letter-spacing:0;vertical-align:top;display:inline-block;margin:5px 0 0 5px}.header-note{font-size:8px;letter-spacing:2.4px;opacity:.78}#motion{background:#15222e30;border:1px solid #ffffff35;border-radius:25px;padding:10px 15px;font-size:10px;backdrop-filter:blur(14px)}#motion>span{display:inline-block;width:5px;height:5px;background:#f3efd4;border-radius:50%;margin-right:7px}#motion[aria-pressed=false]>span{background:#8a959c}.scene-label{position:absolute;top:125px;font:20px 'Libre Caslon Display',Georgia,serif;text-shadow:0 2px 14px #15212a88;pointer-events:none}.scene-label span{display:block;font:8px 'DM Sans',sans-serif;letter-spacing:2px;margin-bottom:8px}.before{left:3.5%}.after{right:3.5%;text-align:right}.divider{position:absolute;left:var(--split);top:0;bottom:0;width:1px;background:linear-gradient(transparent,#fff4dca6 17%,#fffdf4 50%,#fff4dca6 83%,transparent);box-shadow:0 0 20px #fff1c94d;transform:translateX(-50%);pointer-events:none}.handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border:1px solid #ffffffaa;border-radius:50%;background:#fbf9ed20;backdrop-filter:blur(16px);box-shadow:0 0 0 6px #ffffff08,0 8px 24px #0002;display:grid;place-items:center;transition:background .3s}.handle svg{width:28px}.drag-tag{position:absolute;left:50%;top:calc(50% + 48px);transform:translateX(-50%);white-space:nowrap;font-size:7px;letter-spacing:2px;text-shadow:0 2px 8px #000;transition:opacity .6s}.interacted .drag-tag{opacity:0}#reveal{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;touch-action:pan-y}#comparison:has(#reveal:focus-visible) .handle{outline:3px solid #fff;outline-offset:7px;background:#fff5}.story{position:absolute;left:3.5%;bottom:115px;pointer-events:none;text-shadow:0 2px 30px #12202e50}.eyebrow{font-size:8px;letter-spacing:2.5px;margin:0 0 17px;opacity:.85}h1{font:clamp(40px,5.5vw,90px)/.98 'Libre Caslon Display',Georgia,serif;font-weight:400;letter-spacing:-1.5px;margin:0}h1 em{font-weight:400;color:#f5eddb}.caption{font-size:11px;letter-spacing:.2px;margin:19px 0 0;color:#ffffffb0}.controls{position:absolute;left:3.5%;right:3.5%;bottom:27px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.controls button{pointer-events:auto;background:none;border:0;padding:10px 0;display:flex;align-items:center;gap:14px;font-size:22px;text-shadow:0 1px 6px #000}.controls button span{font-size:10px;letter-spacing:.2px}.scroll-cue{display:flex;align-items:center;gap:11px;font-size:7px;letter-spacing:2.2px;color:#fffd}.scroll-track{height:27px;width:14px;border:1px solid #fff6;border-radius:10px;display:grid;justify-content:center;padding-top:5px}.scroll-track i{display:block;width:2px;height:5px;border-radius:3px;background:#fffd;animation:scroll 2s ease-in-out infinite}@keyframes scroll{60%{transform:translateY(8px);opacity:.2}100%{transform:translateY(0);opacity:1}}#load-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#182b39bd;padding:18px 24px;border:1px solid #ffffff30;border-radius:50px;font-size:11px;letter-spacing:1px;backdrop-filter:blur(20px);transition:opacity .5s;pointer-events:none}#load-status.loaded{opacity:0}#error:not([hidden]){position:absolute;inset:0;background:#17212a;display:grid;align-content:center;justify-items:center;gap:20px;font-size:14px}#error button{background:none;border:1px solid #fff6;border-radius:30px;padding:10px 20px}@media(max-width:700px){header{padding:25px 6%}.logo{font-size:34px}.header-note{display:none}#motion{font-size:9px;padding:9px 12px}.scene-label{top:100px;font-size:15px}.scene-label span{font-size:7px}.before{left:6%}.after{right:6%}.story{left:6%;bottom:130px}h1{font-size:55px}.caption{font-size:10px}.controls{left:6%;right:6%;bottom:24px;flex-wrap:wrap;gap:8px}.controls button span{font-size:10px}.scroll-cue{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:6px;letter-spacing:1.5px}.handle{width:50px;height:50px}.drag-tag{font-size:6px;letter-spacing:1px}.eyebrow{font-size:7px}.story{max-width:85%}}@media(max-height:540px){header{padding-top:16px}.scene-label{top:80px}.story{bottom:75px}h1{font-size:38px}.caption{display:none}.eyebrow{margin-bottom:10px}.controls{bottom:12px}.scroll-cue{position:static;transform:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}body.motion-off .scroll-track i{animation:none}

@media(max-width:700px) and (min-height:541px){.story{bottom:200px}.scroll-cue{bottom:155px}}
/* Frame the supplied transparent artwork without its large empty margins. */
.logo{position:relative;display:block;flex-shrink:0;width:250px;aspect-ratio:466/79;overflow:hidden;filter:drop-shadow(0 0 1px rgba(235,249,255,.9)) drop-shadow(0 3px 4px rgba(3,12,25,.95)) drop-shadow(0 6px 10px rgba(3,12,25,.65))}
.logo img{position:absolute;width:145.279%;height:auto;max-width:none;left:-22.747%;top:-184.811%}
@media(max-width:700px){.logo{width:clamp(175px,51vw,210px)}}