@font-face{font-family:RoomMono;src:local("Courier New");font-display:swap} :root{color-scheme:dark;--paper:#e2e2e4;--quiet:#a4a4a7;--line:#c8c7a728;--ink:#19191c;--amber:#c2aa75;--mono:RoomMono,"SFMono-Regular",Consolas,monospace} *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink)}body{color:var(--paper);font:12px/1.5 var(--mono);-webkit-font-smoothing:antialiased}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,input:focus-visible{outline:2px solid var(--paper);outline-offset:5px}a{color:inherit;text-decoration:none}button{border:0;border-radius:0}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}#experience{position:relative;width:100%;height:100dvh;min-height:400px;isolation:isolate}#room{position:absolute;inset:0;width:100%;height:100%;display:block;outline:0}.masthead{position:absolute;left:36px;right:36px;top:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:3;pointer-events:none}.masthead>*{pointer-events:auto}.wordmark{display:flex;gap:12px;align-items:flex-start;letter-spacing:.14em;font-size:13px;text-shadow:0 1px 8px #17171ad9}.wordmark small{display:block;color:var(--quiet);font-size:9px;letter-spacing:.12em;margin-top:4px}.live-dot{width:5px;height:5px;flex:0 0 auto;background:var(--amber);box-shadow:0 0 9px #d9bb7740;margin-top:8px}.top-links{display:flex;align-items:center;gap:32px;font-size:10px;letter-spacing:.08em}.location{color:var(--quiet);text-shadow:0 1px 7px #19191c}.top-links button{background:none;min-height:40px;padding:0;color:var(--paper)}.top-links button span{margin-left:8px}.room-caption{position:absolute;left:36px;bottom:137px;pointer-events:none;max-width:380px;transition:opacity .3s;text-shadow:0 2px 12px #18181b}.eyebrow{font-size:10px;letter-spacing:.15em;color:var(--quiet)}.room-caption h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(31px,3.8vw,59px);font-weight:400;line-height:1.04;letter-spacing:-.04em;margin:13px 0 12px}.room-caption p{color:#bdbdc0;font-size:11px;letter-spacing:.015em;margin:0}.device-label{position:absolute;left:0;top:0;display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px 12px;background:#1a1a1daa;box-shadow:0 0 22px #17171a20;color:#e0e0e3;font-size:10px;letter-spacing:.06em;z-index:2;transition:opacity .25s,background .2s;white-space:nowrap;transform:translate(-50%,-50%)}.device-label:hover{background:#333336ed}.device-label small{display:block;color:#b2b2b5;font-size:8px;letter-spacing:.03em;margin-top:4px}.label-cross{color:#c6c6c9;font-size:18px;line-height:1.1}.view-heading{position:absolute;left:50%;top:92px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:#bbbbbe;font-size:10px;letter-spacing:.09em;text-align:center;white-space:nowrap;pointer-events:none}.view-line{width:28px;height:1px;background:var(--line)}#project-status{color:var(--paper);letter-spacing:.02em}.device-nav{position:absolute;left:36px;bottom:68px;display:flex;gap:3px;background:#151518d6;border:1px solid #85858840;padding:4px;z-index:5;backdrop-filter:blur(8px)}.device-nav button{min-height:40px;padding:0 15px;display:flex;align-items:center;justify-content:center;gap:8px;color:#a1a1a4;background:none;font-size:10px;letter-spacing:.05em}.device-nav button.selected{background:#454548b3;color:#e7e7ea}.device-nav button:hover{color:var(--paper)}.device-nav button>span:not([class]){font-size:18px;line-height:1}.tv-icon{display:inline-block;width:14px;height:11px;border:1px solid currentColor;position:relative}.tv-icon:after{content:"";position:absolute;bottom:-4px;left:3px;width:6px;border-bottom:1px solid currentColor}.phone-icon{display:inline-block;width:8px;height:14px;border:1px solid currentColor}.transport{position:absolute;left:50%;bottom:68px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:14px;padding:4px 7px;background:#18181be8;border:1px solid #8b8b8e40;z-index:4;backdrop-filter:blur(8px)}.transport>button{min-height:40px;background:none;padding:0 10px;font-size:10px;letter-spacing:.08em;white-space:nowrap}.transport>button:hover{color:#f1e7ba}.transport #index-button[aria-pressed=true]{background:#49494c}.step-controls{display:flex;align-items:center;gap:9px;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 6px}.step-controls button{width:36px;min-height:36px;background:none;font-size:20px}.step-controls span{font-size:10px;white-space:nowrap;color:#c4c4c7}.room-footer{position:absolute;bottom:23px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--quiet);letter-spacing:.08em;font-size:9px;z-index:3}.effects-switch{display:flex;gap:8px;align-items:center;cursor:pointer;min-height:24px;position:relative}.effects-switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.toggle-track{display:inline-block;width:20px;height:10px;border:1px solid #a3a3a666;position:relative}.toggle-track:after{content:"";position:absolute;left:2px;top:2px;width:4px;height:4px;background:#767679;transition:transform .15s}.effects-switch input:checked+.toggle-track:after{background:#d0c38d;transform:translateX(10px)}.effects-switch input:focus-visible+.toggle-track{outline:2px solid var(--paper);outline-offset:4px}#loading{position:fixed;inset:0;z-index:40;background:#020304;color:#9f9fa2;overflow:hidden}#startup-video,#startup-frame,#startup-glitch{display:none!important}body:is([data-boot=playing],[data-boot=revealing]) #loading{background:transparent;pointer-events:none}body:is([data-boot=playing],[data-boot=revealing]) .startup-readout{display:none}#loading #skip-intro{pointer-events:auto}.startup-readout{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:9px;letter-spacing:.12em;color:#9b9b9e}.startup-readout>span:first-child{color:#cfcfd2}#startup-time{font-variant-numeric:tabular-nums;color:#8b8b8e}#skip-intro{position:absolute;top:max(26px,env(safe-area-inset-top));right:36px;padding:10px 0 10px 14px;min-height:44px;background:none;color:#b3b3b6;font-size:9px;letter-spacing:.1em}#skip-intro:hover{color:#ededf0}#skip-intro span{margin-left:8px}body[data-boot=preparing] #experience{visibility:hidden}#experience>:not(#room):not(noscript){transition:opacity .8s ease}body:is([data-boot=preparing],[data-boot=playing],[data-boot=revealing]) #experience>:not(#room):not(noscript){opacity:0!important;visibility:hidden!important;pointer-events:none!important}.load-dots{animation:loadblink 1.6s steps(2,end) infinite}#loading[data-phase=frozen] .load-dots{animation:none}@keyframes loadblink{50%{opacity:.25}}#loading.startup-error{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;font-size:10px;letter-spacing:.1em}.load-mark{font-size:20px;border:1px solid #b1b1b470;padding:13px 10px;margin-bottom:12px}@media(max-width:700px){.startup-readout{left:20px;right:20px;bottom:23px;font-size:8px;gap:10px;flex-wrap:wrap}.startup-readout #load-status{order:3;width:100%;font-size:8px}#skip-intro{right:20px;top:16px;font-size:8px}} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.sr-only:focus-within{clip-path:none;width:auto;height:auto;left:20px;top:100px;background:#2e2e31;z-index:30;padding:18px}.sr-only button{display:block;background:none;min-height:44px;padding:8px}.fallback{position:absolute;inset:20%;background:#2a2a2d;padding:30px}.fallback a{text-decoration:underline} dialog{border:1px solid #82828555;background:#19191c;color:var(--paper);padding:0;max-width:calc(100vw - 60px);max-height:calc(100dvh - 60px);box-shadow:0 20px 100px #0008}dialog::backdrop{background:#0c0c0fe6;backdrop-filter:blur(10px)}#viewer{width:calc(100vw - 60px);height:calc(100dvh - 60px)}#viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.dialog-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 22px;font-size:10px;letter-spacing:.07em;border-bottom:1px solid #89898c33}.dialog-bar h2{font-size:14px;font-weight:400;letter-spacing:.02em;margin:0 0 3px}.dialog-bar>div>span{color:#b5b5b8;font-size:9px}.dialog-bar button{min-height:40px;min-width:40px;background:none;padding:5px 10px;font-size:10px}.dialog-bar button:hover,.dialog-bar a:hover{color:#e7dfb7}.dialog-bar a{padding:10px 0}.original-image-wrap{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;background:#0e0e11;padding:12px}.original-image-wrap img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.dialog-bar:last-child{border-bottom:0;border-top:1px solid #89898c33}.dialog-steps{display:flex;gap:16px;align-items:center}.dialog-steps button{font-size:22px}.dialog-steps span{font-size:10px;color:#b5b5b8}#about{width:620px}.about-copy{padding:45px 38px 50px;max-width:550px}.about-copy h2{font:400 66px/1 Georgia,serif;letter-spacing:-.06em;margin:20px 0 25px}.about-copy p{font:14px/1.9 var(--mono);color:#bbbbbe;max-width:450px}.about-copy>a{display:inline-block;margin-top:25px;border-bottom:1px solid #9e9ea166;padding:10px 0;font-size:11px;letter-spacing:.04em}body[data-view=desk] .transport,body[data-view=desk] .view-heading{display:none}body:not([data-view=desk]) .room-caption,body:not([data-view=desk]) .device-label{opacity:0;pointer-events:none} @media(max-width:1100px){.transport{left:auto;right:36px;transform:none;gap:6px}.transport>button{padding:0 8px}.step-controls{gap:3px}}@media(max-width:700px){.masthead{left:20px;right:20px;top:18px}.wordmark{font-size:11px;gap:8px}.wordmark small{font-size:8px}.location{display:none}.top-links{gap:12px}.top-links button{font-size:10px}.room-caption{left:20px;bottom:154px}.room-caption h1{font-size:34px}.room-caption p{font-size:10px}.room-caption .eyebrow{font-size:9px}.device-label{padding:9px;gap:6px;font-size:9px}.device-label small{display:none}.device-nav{left:50%;bottom:69px;transform:translateX(-50%);white-space:nowrap}.device-nav button{min-height:39px;padding:0 19px}.transport{right:auto;left:50%;bottom:123px;transform:translateX(-50%);min-width:300px;justify-content:space-between;gap:5px;padding:3px}.transport>button{font-size:9px;padding:0 9px}.step-controls{gap:1px}.step-controls button{width:32px;min-height:40px}.room-footer{left:20px;right:20px;bottom:18px;font-size:8px;gap:10px}.footer-year{display:none}.effects-switch{font-size:8px;white-space:nowrap}.view-heading{top:84px;font-size:9px;gap:8px}.view-line{width:12px}.room-footer #interaction-hint{max-width:180px;font-size:8px}#viewer{width:calc(100vw - 20px);height:calc(100dvh - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}dialog{max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px)}.dialog-bar{padding:10px 12px;gap:8px;font-size:9px}.dialog-bar h2{font-size:12px}.dialog-bar button{font-size:9px}.dialog-bar a{font-size:9px}.about-copy{padding:30px 24px 35px}.about-copy h2{font-size:48px}.about-copy p{font-size:12px}.original-image-wrap{padding:0}#about>.dialog-bar:first-child>span{font-size:8px}.dialog-steps{gap:9px}}@media(max-height:600px) and (min-width:701px){.masthead{top:16px}.view-heading{top:65px}.room-caption{bottom:112px}.room-caption h1{font-size:36px}.device-nav,.transport{bottom:48px}.room-footer{bottom:12px}.room-caption p{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}} #viewer .viewer-body{display:grid;grid-template-columns:minmax(0,1fr) 270px;min-height:0;overflow:hidden}.viewer-body .original-image-wrap{position:relative;overflow:hidden;padding:12px}.viewer-notes{min-height:0;overflow:auto;border-left:1px solid var(--line);padding:22px 17px;background:#1c1c1f}.viewer-notes .eyebrow{font-size:9px;display:block;line-height:1.7}.viewer-notes p{font-size:11px;line-height:1.8;color:#c4c4c7;white-space:pre-line;margin:12px 0}.viewer-notes #collection-description p{font-size:10px;color:#a1a1a4}#viewer-media-label{letter-spacing:.06em;font-size:9px!important;border-top:1px solid var(--line);padding-top:15px}#gallery-thumbnails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:4px 0 12px}#gallery-thumbnails button{position:relative;aspect-ratio:1.1;background:#2b2b2e;padding:2px;border:1px solid transparent;overflow:hidden}#gallery-thumbnails button[aria-pressed=true]{border-color:#d3d3d6;background:#68686b}#gallery-thumbnails img{display:block;width:100%;height:100%;object-fit:cover}#gallery-thumbnails button>span{position:absolute;right:3px;bottom:3px;background:#161619dd;padding:0 4px;font-size:9px}#video-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0e0e11}#video-stage>img{width:100%;height:100%;object-fit:contain;opacity:.75}#video-player{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050805}#play-video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:52px;padding:13px 22px;border:1px solid #c0c0c377;background:#232326e8;letter-spacing:.1em;white-space:nowrap}#play-video:hover{background:#464649}#media-status{position:absolute;bottom:20px;left:20px;font-size:10px;background:#1b1b1ed9;padding:6px 10px}.original-image-wrap>img{object-fit:contain}#viewer .dialog-bar:last-child{gap:10px}#copy-link{font-size:9px}.sr-only:focus-within{max-height:70vh;overflow:auto}#accessible-projects button{text-align:left}#project-status{max-width:45vw;overflow:hidden;text-overflow:ellipsis} #about{width:740px;overflow:auto}.about-copy{max-width:none;padding-top:32px}.about-copy #portrait-link{float:right;width:36%;margin:0 0 20px 25px;border:0;padding:0}.about-copy #about-portrait{display:block;width:100%;height:auto;filter:none}.about-copy h3{font-size:11px;font-weight:400;letter-spacing:.06em;margin:24px 0 10px;color:#d5d5d8}.about-copy ul{padding-left:16px;color:#bbbbbe;font-size:11px;line-height:1.9}.contact-links{display:flex;gap:22px;margin-top:22px}.contact-links a{font-size:10px;padding:8px 0;border-bottom:1px solid #9d9da055}#contact-form{clear:both;display:grid;gap:12px;border-top:1px solid var(--line);padding-top:20px;margin-top:30px}#contact-form h3{margin:0 0 6px}#contact-form label{display:grid;gap:6px;color:#bababd;font-size:10px}#contact-form input,#contact-form textarea{background:#17171a;border:1px solid #8a8a8d4d;color:var(--paper);font:12px/1.6 var(--mono);padding:10px;width:100%;border-radius:0}#contact-form textarea{resize:vertical;min-height:100px}#contact-form button{justify-self:start;background:#424245;padding:13px 17px;font-size:10px;letter-spacing:.05em}.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}#contact-form #contact-status{font-size:10px;line-height:1.6;margin:0;color:#a1a1a4} @media(max-width:900px){#viewer .viewer-body{grid-template-columns:minmax(0,1fr) 220px}.viewer-notes{padding:14px 12px}}@media(max-width:700px){#viewer .viewer-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(78px,24%)}.viewer-notes{border-left:0;border-top:1px solid var(--line);padding:9px 12px;display:grid;grid-template-columns:1fr;gap:2px}.viewer-notes .eyebrow{font-size:8px}.viewer-notes p{font-size:10px;margin:5px 0}#gallery-thumbnails{display:flex;gap:6px;overflow-x:auto;min-height:59px;flex-shrink:0;padding:3px 1px 8px}#gallery-thumbnails button{flex:0 0 64px;height:52px;aspect-ratio:auto}#viewer-media-label{font-size:8px!important;padding-top:5px;margin-top:5px}#viewer .dialog-bar:last-child{padding:7px 9px;gap:4px}#viewer .dialog-steps{gap:3px}#copy-link{padding:4px 3px;min-width:0;font-size:8px}#project-link{font-size:8px}.about-copy #portrait-link{width:36%;margin-left:12px}.about-copy h2{font-size:43px}.name-fields{gap:9px}#play-video{font-size:10px;padding:11px 16px;min-height:46px}} .film-tip{position:absolute;right:36px;top:84px;width:min(320px,calc(100% - 40px));z-index:6;background:#242427;border:1px solid #99999c;box-shadow:5px 5px 0 #050805cc;font:11px/1.45 var(--mono);color:#e7e7ea} .film-tip .tip-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 4px 10px;background:linear-gradient(90deg,#4a4a4d,#303033);font-size:10px;letter-spacing:.1em} .film-tip .tip-bar button{width:22px;height:20px;padding:0;line-height:1;background:#3a3a3d;border:1px solid #99999c;color:#e7e7ea} .tip-body{display:flex;gap:12px;padding:12px;align-items:flex-start} .tip-mascot{width:52px;height:52px;flex:0 0 auto;animation:tipbob 2.4s ease-in-out infinite} .tip-bubble{position:relative;flex:1;background:#19191c;border:1px solid #828285;padding:9px 10px} .tip-bubble:before{content:"";position:absolute;left:-6px;top:18px;width:10px;height:10px;background:#19191c;border-left:1px solid #828285;border-bottom:1px solid #828285;transform:rotate(45deg)} .tip-bubble p{margin:0 0 10px;font-size:12px} .tip-bubble button{width:100%;min-height:36px;background:#59595c;border:1px solid #99999c;color:#f1ecd0;font-size:10px;letter-spacing:.06em} .tip-bubble button:hover{background:#6c6c6f} @keyframes tipbob{50%{transform:translateY(-3px)}} @media(prefers-reduced-motion:reduce){.tip-mascot{animation:none}} @media(max-width:700px){.film-tip{right:12px;top:72px}} .device-nav{left:12px;bottom:auto;top:50%;transform:translateY(-50%);flex-direction:column;gap:2px;padding:3px} .device-nav button{min-height:46px;width:54px;padding:0 2px;flex-direction:column;gap:2px;font-size:8px;letter-spacing:.04em} .device-nav button>span:not([class]){font-size:16px} /* Film playing on a device: the player is pinned to the screen; these layers give it the screen's own character. */ #screen-video{position:absolute;left:0;top:0;z-index:2;transform-origin:0 0;background:#000;overflow:hidden;will-change:transform;--bright:1;--tlr:150;--tlg:190;--tlb:195;--tlk:.8} #screen-video iframe{display:block;width:100%;height:100%;border:0} #screen-video .sv-fx,#screen-video .sv-scratch{position:absolute;inset:0;pointer-events:none} #screen-video .sv-scratch{display:none;left:0;top:0;inset:auto;width:var(--h);height:var(--w);transform-origin:0 0;transform:translate(var(--w),0) rotate(90deg);opacity:.9} #screen-video .sv-fx:before,#screen-video .sv-fx:after{content:"";position:absolute;pointer-events:none} /* TV: curved CRT glass, scanlines, RGB mask, glow, edge fringing, grain, slow sway, rolling bar, flicker */ #screen-video[data-device=tv]{border-radius:3% / 4%} #screen-video[data-device=tv] iframe{filter:contrast(1.12) saturate(1.15) brightness(var(--bright)) blur(.45px);animation:svsway 11s ease-in-out infinite} #screen-video[data-device=tv] .sv-fx{background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%),repeating-linear-gradient(0deg,rgba(0,8,3,.30) 0 2px,transparent 2px 5px),repeating-linear-gradient(90deg,rgba(255,40,40,.07) 0 1px,rgba(40,255,60,.07) 1px 2px,rgba(50,80,255,.07) 2px 3px),linear-gradient(115deg,rgba(220,235,225,.13),transparent 28%);box-shadow:inset 4px 0 8px rgba(255,60,60,.2),inset -4px 0 8px rgba(70,90,255,.2),inset 0 0 40px rgba(0,0,0,.45);animation:svflicker 6.3s steps(1) infinite} #screen-video[data-device=tv] .sv-fx:before{inset:-10%;background-image:var(--noise);opacity:.1;mix-blend-mode:overlay;animation:svgrain .6s steps(1) infinite} #screen-video[data-device=tv] .sv-fx:after{left:0;right:0;height:14%;background:linear-gradient(transparent,rgba(190,230,210,.08),transparent);animation:svroll 7s linear infinite} /* Phone: dulled LCD, haze and reflection lit by the TV, worn glass scratches */ #screen-video[data-device=phone] iframe{filter:saturate(.9) contrast(.96) brightness(.97) blur(.35px)} #screen-video[data-device=phone] .sv-fx{background:radial-gradient(ellipse at 0% 0%,rgb(var(--tlr) var(--tlg) var(--tlb)/calc(.30*var(--tlk))),transparent 75%),linear-gradient(118deg,transparent 33%,rgb(var(--tlr) var(--tlg) var(--tlb)/calc(.22*var(--tlk))) 42%,transparent 50%),linear-gradient(rgba(190,205,195,.07),rgba(190,205,195,.07))} #screen-video[data-device=phone] .sv-fx:before{inset:0;background-image:var(--noise);opacity:.05;mix-blend-mode:overlay} #screen-video[data-device=phone] .sv-scratch{display:block} @keyframes svroll{from{top:-15%}to{top:105%}} @keyframes svgrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}} @keyframes svsway{0%,100%{transform:translateX(0)}50%{transform:translateX(.35%)}} @keyframes svflicker{0%,100%{opacity:1}92%{opacity:.88}94%{opacity:1}} @media(prefers-reduced-motion:reduce){#screen-video *{animation:none!important}} #sv-exit{display:none;position:absolute;top:3%;right:2.5%;z-index:3;width:84px;height:64px;padding:8px 14px;background:rgba(10,16,12,.72);border:2px solid rgba(214,224,208,.6);color:#e7e7ea;cursor:pointer} #sv-exit svg{display:block;width:100%;height:100%} #screen-video[data-expanded="1"] #sv-exit{display:block} .scene-picker{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:flex;gap:3px;padding:4px;background:#151518d6;border:1px solid #85858840;z-index:5;backdrop-filter:blur(8px)} .scene-picker button{min-height:36px;padding:0 14px;background:none;color:#a1a1a4;font-size:10px;letter-spacing:.06em} .scene-picker button:hover{color:var(--paper)} .scene-picker button.selected{background:#454548b3;color:#e7e7ea} @media(max-width:700px){.scene-picker{bottom:44px;max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:center}.scene-picker button{padding:0 10px}} html:lang(zh-Hans){--mono:RoomMono,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","SFMono-Regular",Consolas,monospace} html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3,html:lang(zh-Hans) dialog{font-family:"Songti SC","Noto Serif CJK SC","SimSun",Georgia,serif} #lang-button{background:none;min-height:40px;padding:0;color:var(--quiet);letter-spacing:.06em} #lang-button span{margin-left:0} #lang-button .active{color:var(--paper);border-bottom:1px solid currentColor} #snow-toggle{margin-left:6px;border-left:1px solid #85858840} #snow-toggle[aria-pressed=true]{background:#454548b3;color:#dce8f4} /* Larger, more readable page text at the top and bottom */ .wordmark{font-size:16px}.wordmark small{font-size:11px;margin-top:5px} .top-links{font-size:13px}.location{font-size:12px} .room-footer{font-size:12px;bottom:22px} .device-nav button{font-size:10px;width:62px} .scene-picker button{font-size:12px} .film-tip .tip-bar{font-size:12px}.tip-bubble p{font-size:15px}.tip-bubble button{font-size:12px} /* The assistant pops up: the box springs open, the reel hops in, then the bubble fades in */ .film-tip{transform-origin:100% 0} .film-tip:not([hidden]){animation:tipPop .55s cubic-bezier(.2,1.5,.35,1) both} .film-tip:not([hidden]) .tip-mascot{animation:tipHop .6s .18s ease-out both,tipbob 2.4s .9s ease-in-out infinite} .film-tip:not([hidden]) .tip-bubble{animation:tipFade .35s .32s ease-out both} @keyframes tipPop{0%{opacity:0;transform:translateY(-14px) scale(.15)}60%{opacity:1;transform:translateY(2px) scale(1.06)}100%{opacity:1;transform:none}} @keyframes tipHop{0%{opacity:0;transform:translateY(18px) scale(.4)}70%{opacity:1;transform:translateY(-6px) scale(1.1)}100%{opacity:1;transform:none}} @keyframes tipFade{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.film-tip:not([hidden]),.film-tip:not([hidden]) *{animation:none!important}} @media(max-width:700px){.wordmark{font-size:14px}.top-links{font-size:11px;gap:16px}.room-footer{font-size:10px}} .dialog-steps button.named{font-size:12px;letter-spacing:.04em;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Intro overlay and popup windows: same readable sizes as the room's own text (13 to 20 px). */ .eyebrow,.viewer-notes .eyebrow,.room-caption .eyebrow{font-size:13px} .startup-readout,.startup-readout #load-status,#skip-intro,#loading.startup-error{font-size:14px} .dialog-bar{font-size:14px}.dialog-bar h2{font-size:20px}.dialog-bar>div>span{font-size:13px}.dialog-bar button,.dialog-bar a{font-size:14px} .dialog-steps span{font-size:14px}.dialog-steps button.named{font-size:14px} #about>.dialog-bar:first-child>span{font-size:14px} .about-copy p{font-size:16px}.about-copy h3{font-size:15px}.about-copy ul{font-size:15px}.about-copy>a,.contact-links a{font-size:14px} .viewer-notes p{font-size:15px}.viewer-notes #collection-description p{font-size:14px} #viewer-media-label{font-size:13px!important} #gallery-thumbnails button>span{font-size:12px} #media-status,#copy-link,#play-video{font-size:14px} #contact-form label,#contact-form button,#contact-form #contact-status{font-size:14px} #dvd-tip{position:fixed;z-index:9;pointer-events:none;padding:8px 12px;background:#d4d0c8;color:#101010;border:2px solid;border-color:#fff #404040 #404040 #fff;font:700 13px/1.3 var(--mono);letter-spacing:.04em;white-space:nowrap;box-shadow:3px 3px 0 #0008} #dvd-tip small{display:block;font-weight:400;font-size:11px;letter-spacing:.06em;color:#404040} /* Self-hosted films (R2): a