@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&family=Manrope:wght@400;500;600&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#f2f0e9;background:#090a0d;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer}button{border:0;background:none}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #f6f4ec;outline-offset:5px}button:hover{color:white}button[hidden],[hidden]{display:none!important}
#world,.shade{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#world{opacity:.26;transition:opacity 1.4s}.shade{background:linear-gradient(180deg,#0008,transparent 22%,transparent 65%,#000b),radial-gradient(ellipse at center,transparent 25%,#0005 100%)}header{position:fixed;top:0;left:0;right:0;z-index:5;padding:32px 42px;display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:20px}#identity{font-weight:500}#identity span{color:#aaa8a2;margin-left:10px}.edition{position:absolute;left:50%;transform:translateX(-50%);letter-spacing:.19em;font-size:10px;color:#c8c6bd}.quiet{padding:10px 0;font-size:12px;color:#d5d3cd}.quiet span{padding:0 7px}.quiet:hover{color:white}
main{height:100svh;position:relative}#intro{position:absolute;left:7vw;top:29%;z-index:3;transition:opacity .6s,transform .9s}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#c0beb5;margin:0 0 22px}h1,h2{font-family:'Manrope',sans-serif;font-weight:400;margin:0}h1{font-size:clamp(42px,5.4vw,86px);line-height:1.07;letter-spacing:-.065em}.intro-copy{font-size:14px;line-height:1.8;color:#bcbab4;margin-top:28px}.enter{margin-top:22px;border:1px solid #fff4;border-radius:30px;padding:16px 21px;background:#ffffff0a;font-size:12px;backdrop-filter:blur(12px);transition:background .3s}.enter:hover{background:#fff2}.enter span{margin-left:25px}.note{font-size:10px;color:#8e8d88;margin-top:18px}
.screen{position:absolute;left:72%;top:50%;width:min(43vw,740px,calc(50svh * var(--film-aspect,1.7778)));transform:translate(-50%,-50%) perspective(1200px) rotateY(-7deg);transition:left 1.15s cubic-bezier(.2,.8,.2,1),width 1.15s,transform 1.15s,top 1.15s;z-index:2}.video-shell{position:relative;aspect-ratio:16/9;background:#141416;box-shadow:0 0 0 1px #fff3,0 0 0 8px #ffffff03,0 35px 80px #0009;overflow:hidden;border-radius:3px}video{display:block;width:100%;height:100%;object-fit:contain;background:#08090b}.transport{height:42px;display:flex;align-items:center;gap:15px;font-size:10px;color:#c5c3bb;opacity:.65;transition:opacity .2s}.screen:hover .transport,.screen:focus-within .transport{opacity:1}.transport button{font-size:10px;white-space:nowrap;min-height:36px}.transport input{flex:1;min-width:20px}input[type=range]{height:18px;accent-color:#ddd9cf;cursor:pointer}#seek{appearance:none;background:none}#seek::-webkit-slider-runnable-track{height:2px;background:#ffffff40}#seek::-webkit-slider-thumb{appearance:none;width:7px;height:7px;border-radius:50%;background:#e8e4db;margin-top:-2.5px}#time{font-variant-numeric:tabular-nums;font-size:10px}
body.entered #intro{opacity:0;pointer-events:none;transform:translateY(35px)}body.entered #world{opacity:1}body.entered .screen{left:50%;top:46%;width:min(62vw,920px,calc(56svh * var(--film-aspect,1.7778)));transform:translate(-50%,-50%)}#sequence{position:fixed;right:35px;top:44%;display:flex;flex-direction:column;align-items:center;gap:20px;z-index:4}#sequence button{border:1px solid #ffffff30;border-radius:50%;height:35px;width:35px;background:#0002}#count{font-size:10px;letter-spacing:.15em;color:#bbb8ad}footer{position:absolute;bottom:6.5vh;left:7vw;right:7vw;display:grid;grid-template-columns:1fr minmax(220px,340px);align-items:end;gap:30px;z-index:2;animation:appear 1.2s}footer .eyebrow{margin-bottom:14px}h2{font-size:clamp(24px,3.3vw,45px);letter-spacing:-.04em}#description{font-size:12px;line-height:1.8;color:#c0bdb4;margin:0 0 4px}.scroll-note{position:absolute;left:0;bottom:-34px;color:#8e8d87;font-size:9px;letter-spacing:.08em}.scroll-note span{margin-left:12px}
#settings{position:fixed;z-index:10;top:82px;right:32px;width:290px;padding:22px;border:1px solid #ffffff26;border-radius:12px;background:#111318de;backdrop-filter:blur(30px);box-shadow:0 20px 80px #0005;max-height:calc(100svh - 105px);overflow-y:auto}.panel-title{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:25px}.panel-title button{font-size:24px;color:#aaa}fieldset{border:0;padding:0;margin:0 0 24px}legend{font-size:10px;color:#999;margin-bottom:12px}.segments{display:flex;border:1px solid #fff2;border-radius:5px;padding:3px;gap:3px}.segments button{flex:1;font-size:10px;padding:9px 4px;color:#999;border-radius:3px}.segments button[aria-pressed=true]{background:#fff1;color:#fff}#settings label{display:block;font-size:11px;color:#c1bfb9;margin:18px 0}#settings output{float:right;color:#8a8b8c;font-variant-numeric:tabular-nums}#settings input{width:100%;display:block;margin:8px 0 0}#settings .quiet{display:block;text-align:left;font-size:11px}#settings p{font-size:10px;color:#85868a;line-height:1.7;margin-bottom:0}#status{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);font-size:11px;color:#bcbcb8;z-index:20;background:#111b;border-radius:20px;padding:8px 14px;max-width:80vw;text-align:center}#status:empty{display:none}.screen.switching{opacity:.35;filter:blur(4px)}@keyframes appear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){header{padding:22px}.edition{display:none}#identity span{display:none}#intro{left:7vw;top:auto;bottom:10%}h1{font-size:48px}.intro-copy{font-size:12px;margin-top:18px}.screen{left:50%;top:29%;width:min(80vw,calc(35svh * var(--film-aspect,1.7778)));transform:translate(-50%,-50%)}.enter{margin-top:12px}body.entered .screen{top:41%;width:min(84vw,calc(45svh * var(--film-aspect,1.7778)))}#sequence{right:7vw;top:auto;bottom:24%;flex-direction:row;gap:12px}footer{bottom:9%;display:block}h2{font-size:30px}#description{margin-top:17px;max-width:80%;font-size:11px}.scroll-note{display:none}#settings{right:15px;top:70px;width:min(290px,calc(100vw - 30px))}.transport{gap:10px}.note{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#settings details{border-top:1px solid #ffffff1a;border-bottom:1px solid #ffffff1a;padding:13px 0;margin:20px 0}#settings summary{font-size:11px;color:#bdbbb6;cursor:pointer}#settings summary:focus-visible{outline:2px solid #eee;outline-offset:5px}

button:disabled{cursor:default;opacity:.5}header{background:linear-gradient(#0005,transparent)}
@media(max-width:760px){header{gap:12px}.edition{display:block;position:static;transform:none;font-size:9px;letter-spacing:.02em}}

#presentation{font-size:10px;line-height:1.6;color:#eee9df;margin:12px 0 0;letter-spacing:.025em}.caption-copy{min-width:0}@media(max-width:760px){#presentation{max-width:90%;font-size:10px;margin-top:10px}}
/* Reserve separate mobile bands for video, navigation and longer event credits. */
@media(max-width:760px){body.entered .screen{top:35%;width:min(84vw,calc(38svh * var(--film-aspect,1.7778)))}#sequence{top:58svh;bottom:auto}footer{top:65svh;bottom:auto;max-height:31svh;overflow-y:auto;padding-bottom:8px}#description{max-width:100%}}
@media(max-width:760px){.shade{background:linear-gradient(180deg,#0007,transparent 20%,transparent 48%,#0009 65%,#000d 100%)}}

/* The video surface is also a native keyboard-accessible playback button. */
button.video-shell{display:block;width:100%;padding:0;border:0;cursor:pointer}
button.video-shell:focus-visible{outline:2px solid #fff;outline-offset:5px}