.screen-bezel{container-type:inline-size}
.artifact{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform:perspective(900px) rotateX(0deg) rotateY(0deg);transform-style:preserve-3d;touch-action:pan-y;cursor:grab;user-select:none}
.artifact.is-dragging{cursor:grabbing}
.scene-controls{position:absolute;top:11px;right:13px;display:flex;gap:6px;z-index:2}
.scene-controls button{background:#f4f5eee6;border:1px solid #cfd5c5;font-size:10px;padding:5px 9px;line-height:1.5}
.scene-controls button:hover{background:#fff}
.screen-bezel .desktop-screen{position:relative;overflow:hidden;background:#a5c6cc;container-type:inline-size;font-size:clamp(7px,2.2cqw,12px);font-family:var(--sans);color:#35483d;cursor:default;border-radius:4px;line-height:1.5}
.desktop-wallpaper{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.desktop-menubar{position:absolute;top:0;left:0;right:0;height:1.8em;background:#eeeee1;display:flex;align-items:center;justify-content:space-between;padding:0 1em;border-bottom:1px solid #596861;font:inherit}
.desktop-menubar strong{font-family:var(--mono);font-size:1em}
.desktop-icons{position:absolute;left:1.6em;top:3.2em;display:flex;flex-direction:column;gap:1em}
.desktop-icon{padding:.3em .5em;display:flex;align-items:center;flex-direction:column;gap:.5em;font:inherit;color:#fffdf0;min-width:4.3em;border:1px solid transparent}
.desktop-icon:hover,.desktop-icon:focus-visible{background:#f8f9e52b;border:1px dotted #f5f4df;color:#fff;outline-offset:1px}
.folder-icon{display:block;width:3em;height:1.9em;background:#efe1a8;border:1px solid #4b5443;position:relative;box-shadow:inset 1px 1px #fff4ce;margin-top:.4em}
.folder-icon:before{content:"";position:absolute;left:-1px;top:-.6em;height:.5em;width:1.5em;background:#dec886;border:1px solid #4b5443;border-bottom:0}
.document-icon{width:2.1em;height:2.6em;background:#f2f0df;border:1px solid #4b5443;display:block;position:relative}
.document-icon:after{content:"";position:absolute;inset:.65em .4em;background:repeating-linear-gradient(#809087 0 1px,transparent 1px .5em)}
.desktop-window{position:absolute;left:31%;top:25%;width:65%;background:#f1f0e2;border:1px solid #3f5148;box-shadow:3px 4px #254c4740;min-width:0}
.desktop-window[hidden]{display:none}
.desktop-titlebar{margin:2px;background:#6c8174;color:#fffdf1;display:flex;align-items:center;gap:.65em;padding:.3em .4em;cursor:move;touch-action:none;font-family:var(--mono);font-size:.95em}
.desktop-titlebar button{font:inherit;background:#efeddb;border:1px solid #3f5148;color:#405649;width:1.5em;height:1.5em;padding:0;display:grid;place-items:center;line-height:1}
.desktop-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.desktop-content{padding:1.2em;min-height:7.5em}
.desktop-content h2{font:1.7em/1.3 Georgia,serif;margin-bottom:.7em;white-space:nowrap}
.desktop-content p{font-size:.95em;padding-top:.6em;border-top:1px solid #ccd0c0}
.desktop-file{font:inherit;text-align:left;width:100%;display:flex;align-items:center;justify-content:space-between;gap:.7em;padding:.7em .4em;border-bottom:1px solid #d0d5c6;line-height:1.4}
.desktop-file:last-child{border:0}
.desktop-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desktop-file:hover{background:#dce4d4}
.desktop-taskbar{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:.6em;background:#dddfd0;border-top:1px solid #f7f7ea;height:2em;padding:.25em .5em}
.desktop-taskbar button{font:inherit;padding:0 .8em;background:#ebeddd;border:1px solid #809080;height:1.5em;line-height:1.3}
.desktop-taskbar button+button{background:#c2ccbd}
.desktop-taskbar .screen-light{margin-left:auto;width:.6em;height:.6em;background:#638966;margin-right:.7em}
.power{border:0;background:transparent;font:inherit;cursor:pointer;padding:0;color:inherit}
.monitor.is-off .desktop-screen{background:#222b28}
.monitor.is-off .desktop-screen>*{visibility:hidden}
.monitor.is-off .power:before{background:#979d90}
.notebook[data-open]{cursor:pointer}
.notebook[data-open]:hover .page{background:#fffdf6}
.notebook[data-open]:focus-visible{outline:2px solid var(--green);outline-offset:10px}
.archive-lid{width:calc(100% + 16px);display:block;position:relative;z-index:1;padding:0;transform-origin:50% 10%;transition:transform .35s;cursor:pointer}
.archive-lid:hover{background:#ce976d}
.file-tabs{transition:transform .35s}
.file-tabs button{background:#8b9981;padding:7px 14px 29px;font:11px var(--mono);color:#f6f8ed;transform:rotate(1deg);border:0}
.file-tabs button+button{background:#657762;padding-top:14px;transform:rotate(5deg)}
.archive-box.is-open .archive-lid{transform:translateY(-36px) rotate(-8deg)}
.archive-box.is-open .file-tabs{transform:translateY(-25px)}
.archive-box.is-open .file-tabs button:hover{background:#485d43}
dialog.inspection-mode{width:min(1000px,calc(100% - 28px));max-height:94dvh}
.inspection-mode .dialog-body{padding:0}
.inspection-stage{height:560px}
.inspection-stage .monitor{width:560px;max-width:82%}
.inspection-stage .desktop-screen{height:300px}
.inspection-stage .notebook{width:570px;height:350px}
.inspection-stage .page{padding:28px}
.inspection-stage .page h2{font-size:32px}
.inspection-stage .archive-box{width:400px;height:305px}
.interaction-hint{font-size:10px;color:#61705b;margin:0;position:absolute;bottom:43px;left:22px;pointer-events:none}
@media(max-width:720px){.scene-controls{top:10px;right:10px}.scene-controls button{font-size:9px;padding:5px 7px}.interaction-hint{font-size:9px;left:16px;bottom:34px}.desktop-icons{gap:.55em;top:2.7em;left:1em}.desktop-window{top:24%;left:30%;width:67%}.desktop-content{padding:.8em}.desktop-content h2{font-size:1.45em}.file-tabs button{font-size:9px;padding:5px 10px 20px}.file-tabs button+button{padding-top:10px}.inspection-stage{height:400px}.inspection-stage .monitor{width:340px;max-width:85%}.inspection-stage .desktop-screen{height:175px}.inspection-stage .notebook{width:300px;height:233px}.inspection-stage .page{padding:15px 13px}.inspection-stage .page h2{font-size:20px}.inspection-stage .archive-box{width:267px;height:226px}}
@media(max-width:720px){.desktop-icons{gap:.3em}.desktop-icon{padding:.2em .4em;gap:.3em}.desktop-file{min-height:24px}.desktop-window{top:21%}}
@media(prefers-reduced-motion:reduce){.archive-lid,.file-tabs{transition:none}}
