:root {
  color-scheme:dark;
  --ink:#030404;
  --paper:#f2eadc;
  --champagne:#d8bf91;
  --gold:#ad8d5d;
  --muted:#aaa59c;
  --safe-top:max(14px,env(safe-area-inset-top));
  --safe-bottom:max(14px,env(safe-area-inset-bottom));
  font-family:"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; }
body { margin:0; min-width:280px; overflow-x:hidden; background:var(--ink); color:var(--paper); }
body.room-locked { overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; font:inherit; }
button:focus-visible,a:focus-visible { outline:1px solid #f1d9aa; outline-offset:4px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; z-index:200; left:16px; top:16px; transform:translateY(-160%); padding:12px 16px; background:var(--paper); color:#111; text-decoration:none; font-size:12px; }
.skip-link:focus { transform:none; }

.mirror-room { --room-pan:0; position:relative; isolation:isolate; width:100%; height:100svh; min-height:100svh; overflow:hidden; overflow:clip; background:#030404; }
.room-environment { position:absolute; z-index:-5; inset:0; width:100%; height:100%; object-fit:cover; object-position:calc(50% + var(--room-pan)*1%) center; filter:brightness(.42) saturate(.65) contrast(1.08); transform:scale(1.22); transition:object-position .16s linear; }
.room-atmosphere { position:absolute; z-index:-4; inset:0; background:radial-gradient(ellipse at 50% 39%,rgba(193,161,102,.16),transparent 35%),linear-gradient(180deg,rgba(0,0,0,.6),transparent 30%,rgba(0,0,0,.18) 62%,#020303 100%),linear-gradient(90deg,#000b,transparent 22% 78%,#000b); pointer-events:none; }
.room-light { position:absolute; z-index:-3; left:50%; top:5svh; width:76vw; max-width:440px; height:72svh; transform:translateX(calc(-50% + var(--room-pan)*.9%)); background:conic-gradient(from 166deg at 50% 0,transparent 0 41%,rgba(216,191,145,.11) 48%,transparent 56%); filter:blur(14px); opacity:.82; pointer-events:none; transition:transform .18s linear; }
.room-header { position:absolute; z-index:40; top:0; left:0; right:0; height:calc(58px + var(--safe-top)); padding:var(--safe-top) 18px 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:linear-gradient(#030404f2,#03040485 72%,transparent); }
.room-logo { width:128px; height:auto; filter:brightness(1.25) saturate(.58); }
.about-link { justify-self:start; color:#d8cebd; text-decoration:none; text-transform:uppercase; font-size:8px; letter-spacing:.2em; }
.soundless-mark { justify-self:end; width:34px; height:34px; padding:8px; border:0; background:transparent; cursor:pointer; }
.soundless-mark>span:not(.visually-hidden) { display:block; width:16px; height:1px; margin:4px auto; background:#dbc9a9; transition:transform .22s ease,opacity .2s ease; }
.soundless-mark[aria-expanded="true"]>span:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.soundless-mark[aria-expanded="true"]>span:nth-child(2) { opacity:0; }
.soundless-mark[aria-expanded="true"]>span:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }
.world-heading { position:absolute; z-index:8; top:calc(var(--safe-top) + 69px); left:22px; right:22px; display:grid; grid-template-columns:auto 1fr; align-items:start; column-gap:13px; pointer-events:none; }
.world-heading__index { grid-row:1/3; padding-top:3px; color:var(--champagne); font:500 10px/1.2 "Helvetica Neue",Arial,sans-serif; letter-spacing:.16em; }
.world-heading__eyebrow { margin:0 0 4px; color:#95866e; text-transform:uppercase; font-size:7px; letter-spacing:.22em; }
.world-heading h2 { margin:0; color:#f0e8da; font:400 clamp(24px,7vw,34px)/.96 Georgia,"Times New Roman",serif; letter-spacing:-.035em; text-wrap:balance; }

.mirror-viewport { position:absolute; z-index:5; inset:calc(var(--safe-top) + 116px) 0 17svh; overflow:hidden; perspective:900px; }
.mirror-track { height:100%; display:flex; align-items:center; gap:4vw; overflow-x:auto; overflow-y:hidden; padding:0 11vw; scroll-padding-inline:11vw; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; touch-action:pan-x pinch-zoom; }
.mirror-track::-webkit-scrollbar { display:none; }
.mirror-slide { --distance:1; --touch-x:50%; --touch-y:44%; position:relative; isolation:isolate; flex:0 0 78vw; max-width:380px; height:min(63svh,640px); padding:0; border:0; background:transparent; scroll-snap-align:center; scroll-snap-stop:always; cursor:pointer; transform:translateY(calc(var(--distance)*18px)) rotateY(calc(var(--distance)*-8deg)) scale(calc(1 - var(--distance)*.1)); opacity:calc(1 - var(--distance)*.5); filter:brightness(calc(1 - var(--distance)*.25)); transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .25s ease,filter .25s ease; transform-style:preserve-3d; }
.mirror-slide:nth-child(even) { transform:translateY(calc(var(--distance)*18px)) rotateY(calc(var(--distance)*8deg)) scale(calc(1 - var(--distance)*.1)); }
.mirror-slide.is-selected { z-index:3; filter:none; }
.mirror-slide:focus-visible { outline:none; }
.mirror-slide:focus-visible .mirror-art { filter:drop-shadow(0 24px 28px #000c) drop-shadow(0 0 24px rgba(226,193,132,.34)); }
.mirror-art { position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 24px 28px #000c) drop-shadow(0 0 16px rgba(216,191,145,.12)); }
.mirror-art image { pointer-events:none; }
.mirror-slide::before { content:""; position:absolute; z-index:2; inset:2% 2% 1%; background:linear-gradient(115deg,transparent 0 36%,rgba(255,239,207,.08) 44%,transparent 52%); clip-path:polygon(8% 2%,92% 6%,96% 94%,4% 98%); opacity:.45; transform:translateX(-24%); transition:transform .55s ease,opacity .35s ease; pointer-events:none; }
.mirror-slide.is-selected::before { transform:translateX(22%); opacity:.72; }
.mirror-slide__glow { position:absolute; z-index:4; inset:5% 7%; background:radial-gradient(circle 74px at var(--touch-x) var(--touch-y),rgba(255,237,201,.28),rgba(216,191,145,.08) 36%,transparent 68%); mix-blend-mode:screen; opacity:0; transition:opacity .25s ease; pointer-events:none; }
.mirror-slide.is-touching .mirror-slide__glow { opacity:1; }
.mirror-slide__label { position:absolute; z-index:5; top:8%; left:12%; right:12%; color:#e8dbc4; text-transform:uppercase; text-align:center; font-size:clamp(9px,2.8vw,12px); line-height:1.35; letter-spacing:.17em; text-shadow:0 2px 10px #000; pointer-events:none; }
.mirror-slide__enter { position:absolute; z-index:5; left:50%; bottom:8%; transform:translate(-50%,8px); width:max-content; max-width:80%; padding:8px 12px; border:1px solid rgba(225,200,155,.35); background:rgba(3,4,4,.74); color:#e5d5b8; text-transform:uppercase; font-size:7px; letter-spacing:.17em; opacity:0; transition:opacity .25s ease,transform .25s ease; pointer-events:none; }
.mirror-slide.is-selected .mirror-slide__enter { transform:translate(-50%,0); opacity:1; }
.room-tony { position:absolute; z-index:11; left:50%; bottom:-1px; width:min(56vw,270px); height:31svh; transform:translateX(calc(-50% + var(--room-pan)*.15%)); filter:drop-shadow(0 10px 14px #000); pointer-events:none; transition:transform .18s linear; }
.room-controls { position:absolute; z-index:20; left:50%; bottom:calc(var(--safe-bottom) + 35px); transform:translateX(-50%); display:flex; align-items:center; gap:15px; }
.room-controls button { width:38px; height:38px; border:1px solid rgba(225,202,164,.32); border-radius:50%; background:rgba(3,4,4,.64); color:#dbc7a5; cursor:pointer; }
.room-controls span { display:flex; align-items:center; gap:6px; }
.room-controls i { display:block; width:4px; height:4px; border-radius:50%; background:#716858; transition:width .2s ease,background .2s ease; }
.room-controls i.is-active { width:17px; border-radius:3px; background:#d8bf91; }
.swipe-hint { position:absolute; z-index:18; left:0; right:0; bottom:var(--safe-bottom); margin:0; color:#8e877c; text-align:center; text-transform:uppercase; font-size:7px; letter-spacing:.17em; pointer-events:none; }
.swipe-hint span { display:inline-block; margin-right:7px; color:#c8af83; font-size:11px; }
.interaction-message { position:absolute; z-index:45; left:50%; bottom:calc(var(--safe-bottom) + 92px); width:min(86vw,360px); transform:translate(-50%,10px); margin:0; padding:11px 14px; border:1px solid rgba(216,191,145,.24); background:rgba(2,3,3,.9); color:#d9cebc; text-align:center; font:400 9px/1.45 "Helvetica Neue",Arial,sans-serif; letter-spacing:.08em; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; }
.interaction-message.is-visible { opacity:1; transform:translate(-50%,0); }
.prototype-note { position:absolute; z-index:50; top:calc(var(--safe-top) + 56px); right:16px; width:min(310px,calc(100vw - 32px)); padding:21px; border:1px solid rgba(216,191,145,.22); background:rgba(4,5,5,.96); box-shadow:0 24px 70px #000b; backdrop-filter:blur(16px); }
.prototype-note button { position:absolute; top:8px; right:9px; width:30px; height:30px; border:0; background:transparent; font-size:24px; cursor:pointer; }
.prototype-note span { color:var(--champagne); text-transform:uppercase; font-size:8px; letter-spacing:.2em; }
.prototype-note p { margin:14px 30px 0 0; color:#b8b1a6; font-size:13px; line-height:1.55; }

.portal-transition { position:fixed; z-index:120; inset:0; display:grid; place-items:center; background:#020303; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .42s ease,visibility .42s ease; }
.portal-transition::before { content:""; position:absolute; width:74vw; max-width:420px; height:78svh; border:1px solid rgba(216,191,145,.5); background:radial-gradient(ellipse at 50% 38%,rgba(231,208,167,.22),rgba(13,14,14,.72) 42%,#030404 74%); box-shadow:0 0 90px rgba(198,160,97,.26); transform:perspective(800px) scale(.6) rotateY(-4deg); transition:transform .62s cubic-bezier(.16,.72,.22,1),border-radius .62s ease; }
.portal-transition span { position:relative; z-index:2; width:1px; height:54svh; background:#f2dfb8; box-shadow:0 0 44px 15px rgba(238,208,154,.42); transform:scaleY(.1); transition:transform .5s ease .08s; }
.prototype.is-entering .portal-transition { opacity:1; visibility:visible; }
.prototype.is-entering .portal-transition::before { transform:perspective(800px) scale(2.15) rotateY(0); border-radius:50%; }
.prototype.is-entering .portal-transition span { transform:scaleY(1); }

.choreo-world { position:relative; min-height:100svh; isolation:isolate; overflow:hidden; background:#030404; }
.choreo-world[hidden] { display:none; }
.choreo-world__backdrop { position:absolute; z-index:-4; inset:0 0 auto; width:100%; height:100svh; object-fit:cover; object-position:62% center; filter:brightness(.52) saturate(.7); }
.choreo-world__shade { position:absolute; z-index:-3; inset:0; min-height:115svh; background:linear-gradient(180deg,rgba(2,3,3,.42),rgba(2,3,3,.22) 36svh,#030404 92svh),linear-gradient(90deg,rgba(2,3,3,.72),transparent 75%); pointer-events:none; }
.world-nav { position:fixed; z-index:30; top:0; left:0; right:0; height:calc(58px + var(--safe-top)); padding:var(--safe-top) 16px 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:linear-gradient(#030404f5,#030404d8 72%,transparent); backdrop-filter:blur(10px); }
.world-nav img { width:118px; height:auto; filter:brightness(1.25) saturate(.58); }
.world-nav a,.back-to-room { border:0; background:transparent; color:#d8cebd; text-decoration:none; text-transform:uppercase; font-size:8px; letter-spacing:.16em; cursor:pointer; }
.back-to-room { justify-self:start; padding:10px 0; }.back-to-room span { margin-right:5px; color:var(--champagne); }
.world-nav a { justify-self:end; }
.choreo-hero { min-height:calc(100svh - 20px); display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--safe-top) + 76px) 22px 46px; }
.scene-number,.scene-kicker { margin:0; color:var(--champagne); text-transform:uppercase; font-size:8px; letter-spacing:.2em; }
.scene-number { position:absolute; top:calc(var(--safe-top) + 82px); right:22px; }
.scene-kicker { margin-bottom:12px; }
.choreo-hero>h2 { margin:0; max-width:9ch; color:#f2eadc; font:400 clamp(52px,15vw,76px)/.83 Georgia,"Times New Roman",serif; letter-spacing:-.06em; text-shadow:0 9px 30px #000; }
.choreo-hero>p:not(.scene-number):not(.scene-kicker) { max-width:430px; margin:24px 0 28px; color:#c4bdb2; font-size:14px; line-height:1.65; }
.primary-project { display:grid; grid-template-columns:44% 1fr; width:100%; max-width:620px; border-top:1px solid rgba(216,191,145,.38); border-bottom:1px solid rgba(216,191,145,.24); color:inherit; text-decoration:none; background:rgba(3,4,4,.38); backdrop-filter:blur(5px); }
.primary-project__image { position:relative; aspect-ratio:16/10; overflow:hidden; }
.primary-project__image img { width:100%; height:100%; object-fit:cover; filter:brightness(.75) saturate(.8); }
.primary-project__image i { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:38px; height:38px; border:1px solid #ead6b0aa; border-radius:50%; background:#0008; color:#ecd7b1; font:normal 10px/1 Arial,sans-serif; padding-left:2px; }
.primary-project__copy { display:flex; flex-direction:column; justify-content:center; padding:12px 14px; }
.primary-project__copy small { color:#a99573; text-transform:uppercase; font-size:6px; line-height:1.5; letter-spacing:.15em; }
.primary-project__copy strong { margin:7px 0 10px; font:400 17px/1.05 Georgia,"Times New Roman",serif; }
.primary-project__copy b { color:#d8bf91; text-transform:uppercase; font-size:7px; letter-spacing:.16em; }
.choreo-evidence { position:relative; padding:84px 22px 100px; background:linear-gradient(180deg,#030404,#080807 55%,#030404); }
.evidence-heading p { margin:0 0 10px; color:#a88f66; text-transform:uppercase; font-size:8px; letter-spacing:.19em; }
.evidence-heading h3 { margin:0 0 36px; font:400 42px/1 Georgia,"Times New Roman",serif; letter-spacing:-.04em; }
.credit-sequence { margin:0; padding:0; list-style:none; border-top:1px solid rgba(216,191,145,.22); }
.credit-sequence li { display:grid; grid-template-columns:46px 1fr; gap:16px; padding:23px 0; border-bottom:1px solid rgba(216,191,145,.16); }
.credit-sequence>li>span { color:#9c8765; font-size:8px; letter-spacing:.14em; }
.credit-sequence strong { display:block; font:400 21px/1.08 Georgia,"Times New Roman",serif; }
.credit-sequence small { display:block; margin-top:8px; color:#aaa49a; font-size:11px; line-height:1.55; }
.credit-sequence a { display:inline-block; margin-top:10px; color:#d8bf91; text-transform:uppercase; text-decoration:none; font-size:7px; letter-spacing:.16em; }
.alpha-link { display:flex; justify-content:space-between; margin-top:42px; padding:18px 0; border-top:1px solid rgba(216,191,145,.35); border-bottom:1px solid rgba(216,191,145,.2); color:#e6d9c2; text-transform:uppercase; text-decoration:none; font-size:9px; letter-spacing:.16em; }
.world-footer { display:flex; flex-direction:column; gap:18px; padding:44px 22px calc(48px + var(--safe-bottom)); background:#020303; }
.world-footer button,.world-footer a { padding:16px 0; border:0; border-top:1px solid rgba(216,191,145,.18); background:transparent; color:#d8cdbb; text-transform:uppercase; text-align:left; text-decoration:none; font-size:8px; letter-spacing:.17em; cursor:pointer; }
.world-footer a { color:#d8bf91; }

@media (min-width:760px) {
  .world-heading { left:max(28px,calc(50% - 620px)); right:max(28px,calc(50% - 620px)); }
  .mirror-track { gap:20px; padding-inline:calc(50vw - 180px); scroll-padding-inline:calc(50vw - 180px); }
  .mirror-slide { flex-basis:360px; }
  .room-tony { width:250px; }
  .choreo-hero { padding-inline:max(44px,calc(50% - 620px)); }
  .scene-number { right:max(44px,calc(50% - 620px)); }
  .choreo-hero>h2 { font-size:84px; }
  .primary-project { grid-template-columns:260px 1fr; }
  .choreo-evidence { padding-inline:max(44px,calc(50% - 620px)); }
  .credit-sequence { max-width:900px; }
  .credit-sequence li { grid-template-columns:80px 1fr; }
  .world-footer { padding-inline:max(44px,calc(50% - 620px)); }
}
@media (max-width:340px) {
  .world-heading h2 { font-size:23px; }
  .mirror-slide { flex-basis:80vw; }
  .room-controls { bottom:calc(var(--safe-bottom) + 30px); }
  .primary-project { grid-template-columns:40% 1fr; }
  .primary-project__copy strong { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .mirror-slide { transform:none!important; }
  .portal-transition::before { transform:scale(1)!important; }
}