#computer-view{position:fixed;inset:0;z-index:22;overflow:hidden;opacity:0;touch-action:manipulation}
#computer-plane{position:absolute;left:50%;top:50%;transform-origin:center;line-height:0;container-type:inline-size;will-change:transform}
#computer-detail{position:relative;z-index:1;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
#computer-screen{position:absolute;left:0;top:0;width:411px;height:347px;transform-origin:0 0;border-radius:4.5%/5%;overflow:hidden;background:#132922;color:#d8dac6;line-height:1.5;opacity:0;transition:opacity .45s ease;font:14.85px/1.5 'Courier New','Songti SC',serif;box-shadow:inset 0 0 24px #0006}
#computer-screen::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,#0002 2px 3px),linear-gradient(135deg,#d6e7cc0a,transparent 65%);opacity:.42;pointer-events:none}
body[data-computer-state="inspecting"] #computer-screen{opacity:.96}
/* Slow phosphor drift only inside the opened computer; the room photo stays static. */
#computer-screen{animation:crt-breathe 11.8s ease-in-out infinite;animation-play-state:paused}
body[data-computer-state="inspecting"] #computer-screen{animation-play-state:running}
body[data-page-hidden="true"] #computer-screen{animation-play-state:paused}
@keyframes crt-breathe{0%,100%{filter:brightness(1)}28%{filter:brightness(.991)}53%{filter:brightness(1.009)}78%{filter:brightness(.997)}}
#computer-desktop{position:absolute;inset:0;padding:8% 6%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6% 4%;background:radial-gradient(ellipse at 18% 80%,#4e8270,transparent 65%)}
#computer-desktop button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:4px;min-width:0;min-height:44px;text-shadow:0 1px 3px #000;font-size:.9em}
.desktop-folder{flex:none}
.desktop-folder{display:block;width:30px;height:22px;background:#b7ad77;position:relative;box-shadow:inset 0 1px 0 #e9dfac;transform:skewY(-3deg)}
.desktop-folder::before{content:'';position:absolute;width:13px;height:5px;top:-4px;left:0;background:#9b9469}
#computer-work{position:absolute;inset:0;padding:0 4%;display:flex;flex-direction:column}
.computer-workbar{display:flex;align-items:center;gap:2%;height:13%;min-height:32px;flex-shrink:0;color:#bacbb8}
#computer-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9em}
#computer-home,#computer-info-toggle{width:36px;height:32px;padding:6px;flex-shrink:0}
#computer-info-toggle{font-family:Georgia,serif;font-size:17px}
#computer-home svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3}
.computer-content{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#computer-picture,#computer-video{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;display:block}
#computer-video{background:#0b1714}
#computer-site{width:100%;height:100%;min-height:0;display:flex;align-items:center;gap:6%;overflow:auto;padding:3% 1%;scrollbar-width:thin}
#computer-site-cover{width:30%;height:auto;max-height:78%;object-fit:contain;flex-shrink:0;opacity:.94}
.computer-site-copy{min-width:0;flex:1;line-height:1.65}
.computer-site-copy h3{font-size:1.12em;font-weight:400;margin:0 0 8px;color:#e1e1c8}
.computer-site-copy p{font-size:.84em;color:#b9c8b1}
#computer-site-open{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-top:12px;color:#e0dbb5;text-underline-offset:4px;font-size:.92em}
#computer-site-open:hover{color:#fff1c5}
#computer-site-open:focus-visible{outline:1px dotted #c5d1b9;outline-offset:2px}
.computer-site-copy small{display:block;font-size:.7em;line-height:1.6;color:#9eaf98;margin-top:5px}
#computer-collection-bar{height:28px;flex-shrink:0;display:flex;align-items:center;margin-bottom:4px}
#computer-screen select{color:#d8dac6;background:#20382e;border:1px solid #a6b39a40;border-radius:2px;font:inherit;max-width:100%;min-width:0;padding:3px 5px;color-scheme:dark}
#computer-collection{width:100%;font-size:.84em!important;cursor:pointer}
#computer-screen select:focus-visible{outline:1px solid #b7c8af;outline-offset:1px}
.computer-pages{height:12%;min-height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:2%}
.computer-pages button{width:36px;min-height:32px;font-size:20px;flex-shrink:0}.computer-pages span{font-size:.72em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;min-width:0}
#computer-thumbnails{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;gap:9px 7px;padding:3px 3px 12px;scrollbar-width:thin;scrollbar-color:#779980 #12251e}
#computer-thumbnails button{min-width:0;min-height:44px;text-align:left;padding:0;display:flex;flex-direction:column;gap:3px}
#computer-thumbnails img{width:100%;aspect-ratio:1;object-fit:contain;background:#0d201a;display:block;opacity:.92}
#computer-thumbnails button:hover img{opacity:1}
#computer-thumbnails span{font-size:.65em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
#computer-info{height:100%;width:100%;overflow:auto;overscroll-behavior:contain;padding:4% 2%;font-size:.88em;line-height:1.8;scrollbar-width:thin}
#computer-info h3{font-size:1.1em;font-weight:400;color:#e1e1c8;margin:0 0 12px}
#computer-info p+p{margin-top:12px}
#computer-ledger{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;font-family:system-ui,'PingFang SC',sans-serif;font-size:.85em;padding:0 2% 6px}
.ledger-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.ledger-heading small{font-size:.75em;color:#b4bba1;margin-left:6px}
.ledger-heading button{font-size:.85em;padding:7px}
.ledger-metrics{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:6px 0}
.ledger-metrics small{font-size:.8em;margin-right:7px;color:#a5b6a1}
.ledger-metrics strong{font-size:1.5em;font-weight:500;font-variant-numeric:tabular-nums}
#ledger-summary{font-size:.7em;max-width:47%;line-height:1.6}
.ledger-filters{display:flex;gap:10px;padding:4px 0;border-block:1px solid #afc4a526}
.ledger-filters button{font-size:.85em;min-height:28px;padding:2px 8px;opacity:.6}
.ledger-filters button[aria-pressed="true"]{opacity:1;background:#bfd9ae12}
.ledger-row{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:8px;min-height:44px;padding:6px 0;border-bottom:1px solid #afc4a51a}
.ledger-row small{display:block;font-size:.75em;color:#a5b6a1;margin-top:2px}
.ledger-row>span:last-child{font-variant-numeric:tabular-nums}
#ledger-editor{padding:8px 0;display:grid;gap:8px;font-size:.92em}
#ledger-editor label{display:flex;align-items:center;gap:15px}
#ledger-editor select{flex:1}
#ledger-editor>div{display:flex;justify-content:flex-end;gap:12px}
#ledger-editor button{min-height:32px;padding:4px 8px;background:#bfd9ae12}
#ledger-notice,.ledger-empty{font-size:.75em;color:#a5b6a1;padding:9px 0}
#computer-desktop button:hover{background:#d2e2be10}#computer-screen button:focus-visible{outline:1px dotted #c5d1b9;outline-offset:1px}
body[data-computer-state="entering"] .scene,body[data-computer-state="inspecting"] .scene,body[data-computer-state="exiting"] .scene{transition:none!important}
body[data-computer-state="entering"] #computer-view,body[data-computer-state="exiting"] #computer-view{pointer-events:none}
@media(orientation:portrait){#computer-view{width:100dvh;height:100vw;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg)}}
@container(max-width:1000px){#computer-desktop{gap:4%;padding:8% 4%}#computer-desktop button{gap:9px;font-size:.9em}#computer-thumbnails{grid-template-columns:repeat(4,minmax(0,1fr))}.computer-workbar{min-height:28px}#computer-collection-bar{height:25px}.computer-pages{min-height:28px}.computer-pages button{min-height:28px}.ledger-heading small{display:block;margin:0}}
@media(prefers-reduced-motion:reduce){#computer-screen{transition:none}#computer-plane{will-change:auto}}

/* All atmospheric layers share the photo plane and its rotated mobile camera. */
#computer-window-base,#computer-window-layers,#computer-sunlight,#computer-curtains,#computer-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
#computer-window-base,#computer-window-layers{z-index:0}
#computer-sunlight{z-index:2}
#computer-curtains{z-index:3}
#computer-screen{z-index:4}
#computer-dust{z-index:5;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,30.77% 27.33%,30.77% 68.87%,58.65% 69%,58.65% 28.8%,30.77% 27.33%,0 0)}
.computer-curtain-hit{position:absolute;inset:0;width:100%;height:100%;padding:0;background:transparent;z-index:2;cursor:grab;touch-action:none}
.computer-curtain-hit:disabled{pointer-events:none}
.computer-curtain-hit[data-held="true"]{cursor:grabbing}
.computer-curtain-left{clip-path:polygon(10.85% 0,63.1% 0,63.1% 20%,24% 19.6%,23.6% 40.5%,20.5% 47.3%,20.7% 68.3%,24% 69.6%,24% 80%,13.6% 80%,13.6% 70.5%,10.85% 70.5%)}
.computer-curtain-right{clip-path:polygon(63.2% 0,83.3% 0,83.3% 76%,80.7% 76%,74% 79%,63.2% 80%)}
.computer-curtain-hit:focus-visible{outline:0;background:linear-gradient(90deg,transparent,#f0d39816,transparent)}