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 28px 8px oklch(.10 .01 190 / .6);border-radius:inherit;background:radial-gradient(ellipse at 20% 0%,oklch(.9 .013 130 / .07),transparent 55%)}
#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}.reading-link{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}.reading-link: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,.reading-link{transition:opacity 1.2s ease-out}body[data-startup=dark] .scene-header,body[data-startup=dark] .scene-status,body[data-startup=dark] .reading-link{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}.reading-link{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,.reading-link{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] .reading-link{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)}
.reading-link{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}.reading-link{font-size:11px}}
@media(max-width:600px){
 .reading-link{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}
}