html,body{width:100%;height:100%;overflow:hidden;background:oklch(.13 .011 175)}
.scene-page{line-height:1.5}
#scene-stage{position:fixed;inset:0;isolation:isolate}
#scene-stage canvas{display:block;position:absolute;inset:0;touch-action:none}
#scene-stage:after{content:"";position:absolute;inset:0;z-index:12;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 35%,oklch(.10 .019 200 / .18) 75%,oklch(.10 .019 200 / .58) 100%)}
#scene-stage:before{content:"";position:absolute;inset:0;z-index:13;pointer-events:none;background:url('../images/film-grain.svg');opacity:.055;mix-blend-mode:soft-light}
.css-scene{position:absolute;inset:0;pointer-events:none}
.monitor-surface{width:800px;height:600px;background:oklch(.13 .012 190);border-radius:24px;overflow:hidden;pointer-events:auto;box-shadow:inset 0 0 42px oklch(.1 .01 180 / .65);backface-visibility:hidden}
.monitor-surface:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;box-shadow:inset 0 0 24px 5px oklch(.10 .01 190 / .42);border-radius:inherit;background:radial-gradient(ellipse at 16% -12%,oklch(.9 .013 130 / .055),transparent 56%)}
.monitor-surface[data-projected-paint]:after{display:none}
.projected-glass{position:absolute;top:0;left:0;z-index:3;transform-origin:0 0;pointer-events:none;border-radius:24px;overflow:hidden}
#terminal-frame{display:block;width:100%;height:100%;border:0;background:var(--bg)}
.scene-header{position:fixed;z-index:20;top:0;left:0;right:0;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.scene-brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-family:var(--font-display);font-size:22px;color:oklch(.76 .016 120);pointer-events:auto}
.scene-brand span{font-family:var(--font-body);font-size:10px;line-height:1.7;letter-spacing:1px}
.scene-location{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:oklch(.59 .018 120);display:flex;gap:10px;align-items:center}
.scene-location .status-light{width:4px;height:4px;flex-basis:4px;background:oklch(.74 .07 115)}
.scene-caption{display:none}
.scene-status{position:fixed;z-index:20;bottom:36px;right:32px;font:9px var(--font-mono);color:oklch(.54 .021 135);letter-spacing:.5px;max-width:220px;text-align:right;pointer-events:none}
body[data-view=reading] .monitor-surface{position:fixed!important;z-index:25;transform:none!important;inset:76px 32px 88px!important;width:auto!important;height:auto!important;border:1px solid var(--line);border-radius:7px}
body[data-view=reading] #scene-stage canvas{visibility:hidden}
body[data-view=reading] #scene-stage:after,body[data-view=reading] #scene-stage:before{display:none}
body[data-view=reading] .css-scene{z-index:25}
body[data-view=reading] .css-scene>div,body[data-view=reading] .css-scene>div>div{transform:none!important;transform-style:flat!important}
body[data-view=reading] .monitor-surface:after{display:none}
.screen-off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:oklch(.12 .012 185);color:oklch(.47 .018 160);font-family:var(--font-mono);font-size:24px}
.screen-off small{font:14px var(--font-body)}
.scene-fallback{position:fixed;z-index:40;inset:30% 10%;text-align:center;background:var(--surface);padding:40px}
.scene-fallback p{margin-bottom:20px}
@media(max-width:1100px){.scene-status{bottom:80px;right:0;left:0;max-width:none;text-align:center;font-size:8px}}
@media(max-width:600px){
 .scene-header{padding:18px}.scene-brand{font-size:19px}.scene-brand span{font-size:9px;letter-spacing:0}
 .scene-location{font-size:8px;letter-spacing:0}
 .scene-status{bottom:12px;font-size:8px}
 body[data-view=reading] .monitor-surface{inset:68px 12px 94px!important}
}

/* Hardware controls sit on the model, rather than in a separate toolbar. */
.hardware-hit{position:fixed;z-index:24;transform:translate(-50%,-50%);padding:0;border:0;border-radius:0;background:transparent!important;color:transparent;cursor:pointer;touch-action:manipulation}
.hardware-hit:focus-visible{outline:1px solid oklch(.81 .08 95);outline-offset:3px}.power-hit{border-radius:50%}.bezel-hit:focus-visible:after{content:"点击边框靠近 / 返回";position:absolute;bottom:30px;left:0;color:oklch(.87 .025 110);font-size:11px;white-space:nowrap}
body[data-view=reading] .hardware-hit{display:none}.view-toggle{position:fixed;bottom:24px;right:28px;z-index:30;color:oklch(.62 .021 145);font-size:11px;padding:8px 0;background:none;border:0;border-bottom:1px solid oklch(.37 .019 150);border-radius:0}.view-toggle:hover{color:oklch(.85 .025 140)}
.scene-status{left:28px;right:auto;bottom:31px;max-width:340px;text-align:left;font-family:var(--font-body);font-size:10px;letter-spacing:0;color:oklch(.62 .025 160)}.scene-hint{display:none}
.scene-header{opacity:.7}.scene-location{color:oklch(.48 .018 170)}
.scene-header,.scene-status,.view-toggle{transition:opacity 1.2s ease-out}body[data-startup=dark] .scene-header,body[data-startup=dark] .scene-status,body[data-startup=dark] .view-toggle{opacity:0}
#terminal-frame{background:oklch(.10 .006 170)}.screen-off{background:oklch(.075 .006 165);z-index:9}.screen-off:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 10%,oklch(.42 .015 150 / .08),transparent 65%)}
.screen-warmup{position:absolute;inset:0;z-index:9;pointer-events:none;background:oklch(.075 .006 165);display:none}body[data-startup=warming] .screen-warmup{display:block;animation:crt-open .38s cubic-bezier(.16,1,.3,1) both}
@keyframes crt-open{0%{opacity:1}20%{background:oklch(.085 .005 165)}40%{background:linear-gradient(0deg,oklch(.10 .009 160) 49.6%,oklch(.91 .021 135) 50%,oklch(.10 .009 160) 50.4%)}75%{background:oklch(.54 .026 145)}100%{opacity:0}}
@media(max-width:600px){.scene-status{left:16px;bottom:27px;max-width:220px;font-size:9px}.view-toggle{right:16px;bottom:20px}.scene-header{padding:16px}.scene-location{display:none}}
@media(prefers-reduced-motion:reduce){.screen-warmup{animation:none!important}.scene-header,.scene-status,.view-toggle{transition:none}}

/* The page begins in complete darkness; only the room lamps reveal the set. */
.scene-blackout{position:fixed;inset:0;z-index:1000;background:oklch(0 0 0);opacity:0;pointer-events:none;transition:opacity .12s linear}body[data-intro=black] .scene-blackout{opacity:1;pointer-events:auto}body[data-intro] .scene-header,body[data-intro] .scene-status,body[data-intro] .view-toggle{opacity:0;pointer-events:none}body[data-intro] .hardware-hit{pointer-events:none}body[data-startup=warming] .screen-warmup{animation:screen-power .38s ease-out both}@keyframes screen-power{0%{opacity:1;background:oklch(.04 .004 170)}65%{background:oklch(.20 .015 150)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.scene-blackout{transition:none}}

/* Flatten iframe layers before projecting them onto the CRT glass. */
.monitor-surface{position:absolute;top:0;left:0;transform-origin:0 0;transform-style:flat;isolation:isolate}
#terminal-frame{backface-visibility:hidden}
.scene-brand img{display:block;width:116px;height:auto}
.scene-brand span{font-size:11px;letter-spacing:.2px}
.scene-status{font-size:12px;color:oklch(.72 .023 160)}
.view-toggle{font-size:12px;color:oklch(.72 .023 160)}
@media(max-width:600px){.scene-brand img{width:98px}.scene-brand span{font-size:10px}.scene-status{font-size:11px;max-width:220px}.view-toggle{font-size:11px}}
@media(max-width:600px){
 .view-toggle{font-size:14px;min-height:44px;padding:11px 14px;bottom:14px;right:12px;border:1px solid oklch(.40 .023 160);background:oklch(.17 .015 175);color:oklch(.85 .018 140)}
 .scene-status{max-width:210px;bottom:25px}
}

.orientation-notice{position:fixed;inset:0;margin:auto;width:min(330px,calc(100% - 48px));padding:32px 24px 24px;border:1px solid oklch(.35 .025 175);background:oklch(.16 .015 175);color:oklch(.92 .010 140);text-align:center;box-shadow:0 24px 80px oklch(.03 .004 175 / .4)}.orientation-notice::backdrop{background:oklch(.03 .004 175 / .94)}.orientation-notice svg{display:block;width:80px;height:64px;margin:0 auto 22px;fill:none;stroke:oklch(.77 .030 155);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.orientation-notice h2{font-size:22px;line-height:1.4;margin:0 0 10px}.orientation-notice p{font-size:14px;line-height:1.7;color:oklch(.72 .023 160);margin:0 0 24px}.orientation-notice button{font:14px var(--font-body);min-height:44px;width:100%;padding:10px 18px;border:1px solid oklch(.42 .030 155);background:oklch(.23 .025 175);color:oklch(.91 .013 145)}.orientation-notice button:hover{background:oklch(.29 .030 175)}.orientation-notice button:focus-visible{outline:2px solid oklch(.78 .035 145);outline-offset:3px}

/* Static phosphor/scanline layers follow the same physical screen projection. */
.crt-filter,.projected-glass:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(0deg,oklch(.02 .005 255 / var(--crt-line-alpha,.065)) 0 .45px,transparent .45px 1.5px),repeating-linear-gradient(90deg,oklch(.7 .13 25 / var(--crt-mask-alpha,.016)) 0 1px,oklch(.7 .13 145 / var(--crt-mask-alpha,.016)) 1px 2px,oklch(.7 .13 260 / var(--crt-mask-alpha,.016)) 2px 3px),radial-gradient(ellipse at center,transparent 58%,oklch(.06 .015 250 / .15) 90%,oklch(.04 .01 250 / .48) 100%);box-shadow:inset 0 0 20px 3px oklch(.06 .015 250 / .3)}
body:not([data-view=reading]) #terminal-frame{filter:contrast(1.025) saturate(.94) brightness(1.015)}
#terminal-frame:fullscreen{filter:none!important}
body[data-view=reading] .crt-filter,body[data-startup=off] .crt-filter,body[data-startup=dark] .crt-filter,body[data-intro] .crt-filter{display:none}
@media(max-width:600px) and (orientation:portrait){
 body[data-view=reading] .monitor-surface{inset:58px 0 58px!important;border:0;border-radius:0;box-shadow:none}
 body[data-view=reading] .scene-header{padding:12px 16px}
 body[data-view=reading] .view-toggle{bottom:6px;right:10px;padding:9px 13px;min-height:44px}
 body[data-view=reading] .scene-status{display:none}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){
 body[data-view=reading] .monitor-surface{inset:44px 0 50px!important;border:0;border-radius:0;box-shadow:none}
 body[data-view=reading] .scene-header{padding:7px 14px}
 body[data-view=reading] .scene-brand img{width:80px}
 body[data-view=reading] .scene-brand span{font-size:9px}
 body[data-view=reading] .scene-status{display:none}
 body[data-view=reading] .view-toggle{bottom:3px;right:10px;font-size:13px;min-height:44px;padding:10px 13px}
}
@media(max-width:600px), (pointer:coarse) and (max-width:1000px){
 body[data-view=reading] .monitor-surface{inset:0 0 48px!important}
 body[data-view=reading] .scene-header{display:none}
 body[data-view=reading] .view-toggle{bottom:2px;min-height:44px}
 body[data-view=focus] .scene-header{display:none}
}
@media(pointer:coarse) and (max-width:1000px){
 .view-toggle{font-size:14px;min-height:44px;padding:10px 14px;right:12px;bottom:8px;border:1px solid oklch(.40 .023 160);background:oklch(.17 .015 175);color:oklch(.85 .018 140)}
 body[data-view=reading] .view-toggle{bottom:2px}
}

/* Expand the existing live desktop, without a second textual navigation bar. */
body[data-view=reading] .monitor-surface{inset:0 0 48px!important;border:0;border-radius:0;box-shadow:none}
body[data-view=reading] .scene-status{display:none}
.view-toggle,body[data-view=reading] .view-toggle{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));border:1px solid oklch(.40 .023 160);border-radius:3px;background:oklch(.17 .015 175);color:oklch(.85 .018 140)}
.view-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.view-toggle:hover{background:oklch(.24 .018 175);color:oklch(.95 .010 140)}
.view-toggle .view-collapse{display:none}body[data-view=reading] .view-toggle .view-collapse{display:block}body[data-view=reading] .view-toggle .view-expand{display:none}
@media(max-width:600px),(pointer:coarse) and (max-width:1000px){.view-toggle,body[data-view=reading] .view-toggle{right:max(10px,env(safe-area-inset-right));bottom:max(2px,env(safe-area-inset-bottom))}}

/* A wall print has its own plane and links, independent of the CRT desktop. */
.room-notice{position:absolute;left:0;top:0;z-index:14;width:380px;height:321px;padding:17px;transform-origin:0 0;backface-visibility:hidden;background:oklch(.79 .026 92);color:oklch(.27 .021 153);box-sizing:border-box;box-shadow:inset 0 0 25px oklch(.39 .02 90 / .11);font-family:var(--font-body)}
.room-notice>img{display:block;width:100%;height:202px;object-fit:cover;filter:brightness(.84) saturate(.8)}
.notice-links{display:flex;gap:12px;margin-top:15px;align-items:stretch}
.notice-links a{flex:1;display:grid;place-items:center;text-align:center;min-height:67px;padding:7px;font-size:18px;font-weight:600;line-height:1.4;text-decoration:none;color:inherit;background:oklch(.71 .044 91);box-shadow:0 2px 3px oklch(.25 .014 120 / .15);transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s}
.notice-links a:nth-child(2){background:oklch(.76 .026 91)}
.notice-links a:nth-child(3){background:oklch(.74 .024 142)}
.notice-links a:hover{transform:translateY(-2px);background:oklch(.85 .04 94)}
.notice-links a:active{transform:translateY(1px)}
.notice-links a:focus-visible{outline:2px solid oklch(.29 .033 160);outline-offset:3px}
.notice-hit:focus-visible:after,.lamp-hit:focus-visible:after,.paper-hit:focus-visible:after,.drawer-hit:focus-visible:after{content:attr(aria-label);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:5px 9px;background:oklch(.17 .015 175);color:oklch(.9 .015 140);font-size:13px;white-space:nowrap}
.notice-return{left:max(16px,env(safe-area-inset-left));right:auto}
body[data-view=wall] #reading-mode,body[data-view=wall] .hardware-hit{display:none}
body[data-view=paper] #reading-mode,body[data-view=paper] .hardware-hit{display:none}
body[data-view=drawer] #reading-mode,body[data-view=drawer] .hardware-hit:not(.drawer-hit){display:none}
.desk-application{position:absolute;left:0;top:0;z-index:14;transform-origin:0 0;backface-visibility:hidden;box-shadow:0 1px 5px oklch(.12 .016 165 / .16);overflow:hidden}
.desk-application:focus{outline:none}
body[data-scene-unavailable=true] .monitor-surface{inset:0!important}
.desk-application iframe{display:block;width:100%;height:100%;border:0;opacity:0;transition:opacity .2s ease-out}
.desk-application[data-ready=true] iframe{opacity:1}
.paper-recovery{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:oklch(.91 .025 92);color:oklch(.29 .024 142);font:14px/1.6 var(--font-body)}
.paper-recovery button{min-height:44px;padding:8px 24px;color:inherit;background:transparent;border:1px solid currentColor;font:inherit;cursor:pointer}
@media(prefers-reduced-motion:reduce){.desk-application iframe{transition:none}}
@media(prefers-reduced-motion:reduce){.notice-links a{transition:none}.notice-links a:hover{transform:none}}