:root{color-scheme:dark;--ink:#10120f;--cream:#f0e9da;--amber:#dca16e;--edge:clamp(24px,4vw,64px)}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--cream);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
.stage{position:fixed;inset:0;overflow:hidden;background:#171a13}
.stage>video,.stage>img,#film-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Canvas keeps paused frames visible while the user scrolls. */
#film{opacity:0;pointer-events:none}
#film-frame{opacity:0}
#film-frame.ready{opacity:1}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,#05090665,transparent 65%),linear-gradient(0deg,#080b08c4,transparent 66%,#080b0855)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' fill='%23fff' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
header{position:fixed;z-index:10;top:0;width:100%;padding:30px var(--edge);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-size:15px;letter-spacing:-.4px;font-weight:800;color:inherit;text-decoration:none}
.owl{color:var(--amber);margin-right:8px}
.brand small{display:block;font:8px monospace;letter-spacing:2px;margin:8px 0 0 24px;color:#eee9d888}
.edition{position:absolute;left:50%;transform:translateX(-50%);text-align:center;font:9px/1.9 monospace;letter-spacing:2px}
.edition span{display:block;color:#ded8c680;font-size:8px;letter-spacing:1.5px}
#sound,#motion{font:9px monospace;letter-spacing:.3px;color:#e5dfcfb3;background:transparent;border:1px solid #f0e9da26;border-radius:20px;padding:10px 13px;transition:color .2s,border-color .2s,background .2s}
#sound:hover,#sound[aria-pressed=true],#motion:hover,#motion[aria-pressed=true]{color:var(--cream);border-color:#f0e9da66;background:#10120f40}
#journey{height:530vh}
.chapter{position:fixed;z-index:4;left:var(--edge);bottom:14vh;max-width:580px;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
.chapter.active{visibility:visible}
.chapter:first-child{opacity:1;visibility:visible}
.chapter h1,.chapter h2{font-size:clamp(40px,4.3vw,70px);line-height:1;letter-spacing:-.055em;font-weight:800;margin:22px 0 24px;text-wrap:balance}
.chapter em{font-style:normal;color:var(--amber)}
.eyebrow{font:9px monospace;letter-spacing:2px;color:var(--amber);margin:0}
.description{font-size:14px;line-height:1.9;color:#e4dece;margin:0;max-width:440px}
.scroll-cue{display:flex;align-items:center;gap:14px;font:9px monospace;letter-spacing:1.8px;margin-top:34px;color:#e4decea6}
.scroll-cue>span{font-size:24px;color:var(--amber)}
.chapter.compact,.chapter[data-chapter="1"]{bottom:12vh;max-width:350px}
.chapter.compact h2,.chapter[data-chapter="1"] h2{font-size:30px;letter-spacing:-1px;margin:18px 0}
.chapter.compact .description,.chapter[data-chapter="1"] .description{display:none}
.room-type{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:900px;pointer-events:none}
#room-word{font-size:clamp(64px,9vw,140px);font-weight:800;letter-spacing:-.06em;line-height:.9;text-align:center;color:#f3ddbd;opacity:0;will-change:transform,opacity}
#load-status{position:fixed;z-index:6;left:var(--edge);bottom:32px;font:10px monospace;display:flex;gap:10px;align-items:center;color:#ddd3bd}
#load-status[hidden]{display:none}
.loading-dot{height:5px;width:5px;border-radius:50%;background:var(--amber)}
#retry{background:none;border:1px solid #aaa6;color:inherit;padding:6px 10px}
.last-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px}
.last-actions button,#restart{pointer-events:auto;font:9px monospace;letter-spacing:.6px;border:1px solid #eee5c940;border-radius:2px;background:#10130e35;color:var(--cream);padding:14px 16px;transition:border-color .2s,background .2s}
.last-actions button:hover,#restart:hover{border-color:var(--amber);background:#10130e80}
#about-button{border-color:#dca16e99;color:var(--amber)}
.noscript{position:fixed;z-index:20;bottom:20px;margin:30px}
.reduced #room-word{display:none}
dialog{color:var(--cream);background:#171b14;border:1px solid #dca16e40;border-radius:4px;max-width:820px;width:calc(100% - 36px);max-height:85vh;padding:48px;box-shadow:0 30px 100px #0009}
dialog::backdrop{background:#050805cc;backdrop-filter:blur(10px)}
.close-dialog{position:absolute;top:12px;right:16px;width:36px;height:36px;background:none;border:0;color:var(--cream);font-size:27px}
dialog h2{font-size:36px;letter-spacing:-1.5px;line-height:1.15}
dialog h2 em{font-style:normal;color:var(--amber)}
.about-intro,.about-end{font-size:14px;line-height:1.8;color:#ddd2bc}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:25px 30px;margin:30px 0}
.principles section{border-top:1px solid #fff2;padding-top:20px}
.principles span{font:9px monospace;color:var(--amber);letter-spacing:1.5px}
.principles h3{font-size:18px;margin:12px 0}
.principles p{font-size:13px;line-height:1.8;color:#bfb7a7}
.about-end{border-left:2px solid var(--amber);padding-left:15px}
@media(max-width:650px){
 header{padding:24px var(--edge);align-items:flex-start}
 .edition{display:none}
 .brand{font-size:14px}.brand small{font-size:7px;letter-spacing:1.5px}
 #sound,#motion{font-size:8px;padding:9px 10px}
 .chapter{right:var(--edge);bottom:14vh;bottom:14svh;max-width:440px}
 .chapter h1,.chapter h2{font-size:clamp(36px,9vw,56px);margin:18px 0 20px}
 .description{font-size:12px;line-height:1.85;text-wrap:pretty}
 .description br{display:none}
 .eyebrow{font-size:8px;letter-spacing:1.5px}
 .chapter.compact,.chapter[data-chapter="1"]{bottom:12svh}
 .chapter.compact h2,.chapter[data-chapter="1"] h2{font-size:26px}
 .stage>img,#film-frame{object-position:52% center}
 .shade{background:linear-gradient(0deg,#080b08e0,transparent 90%)}
 #load-status{bottom:24px;font-size:9px;max-width:85%}
 .last-actions{gap:8px;margin-top:24px}.last-actions button{font-size:8px;padding:12px}
 dialog{padding:36px 24px}dialog h2{font-size:28px}.principles{grid-template-columns:1fr;gap:12px}
}
@media(min-width:651px) and (max-height:700px){
 .chapter{bottom:10vh;max-width:470px}.chapter h1,.chapter h2{font-size:46px;margin:16px 0}.description{font-size:12px}.scroll-cue{margin-top:22px}.last-actions{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}

.experience-controls{display:flex;gap:8px;align-items:center}
@media(max-width:850px){.edition{display:none}}
@media(max-width:650px){.experience-controls{flex-direction:column;align-items:flex-end;gap:6px}header{gap:10px}}