:root{color-scheme:light;--screen-height:100dvh;--screen-top:0px;font-family:Tahoma,"MS Sans Serif",Arial,sans-serif;color:#111;background:#008080}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#008080}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}[hidden]{display:none!important}:focus-visible{outline:2px dotted #111;outline-offset:3px}.system-desktop{position:fixed;inset:var(--screen-top) 0 auto;height:var(--screen-height);padding:22px 24px 36px;background:#008080}.system-brand{margin:0;color:#fff;font:bold 17px Tahoma,Arial;letter-spacing:2px}.desktop-objects{display:flex;flex-direction:column;gap:17px;width:142px;margin-top:28px}.desktop-object{display:grid;justify-items:center;gap:5px;width:142px;padding:4px;color:white;text-align:center;text-decoration:none;font-size:13px;line-height:1.2;border:1px solid transparent}.desktop-object{user-select:none;-webkit-tap-highlight-color:transparent}.desktop-object:hover .object-label,.desktop-object[aria-current=true] .object-label{text-decoration:underline;text-underline-offset:3px}.desktop-object:focus-visible{outline:none}.desktop-object:focus-visible .object-label{outline:1px dotted #fff;outline-offset:2px}.object-label{padding:2px 4px}.object-art{width:76px;height:76px;object-fit:contain;display:block;image-rendering:pixelated;filter:none}.machine-snapshot{width:76px;height:60px;background:#050605;border:7px ridge #aaa;color:#67ae64;display:flex;flex-direction:column;justify-content:center;font:8px "Courier New"}.machine-snapshot i{font-style:normal;color:#80bf76}.machine-snapshot b{font-size:11px}.machine-snapshot em{font-style:normal}.days-object{position:relative}.days-object .room-note{position:absolute;left:90px;top:3px;width:76px;height:34px;font-size:11px;z-index:-1}.days-object .object-art{filter:drop-shadow(4px 5px 2px rgba(0,0,0,.35))}.room-note{width:104px;height:64px;background:#fff09a;color:#222;display:flex;flex-direction:column;justify-content:center;gap:4px;transform:rotate(-3deg);font:14px Georgia,serif}.room-note b{font:bold 23px "Courier New",monospace}.system-status{position:absolute;inset:auto 0 0;min-height:28px;padding:5px 12px;background:#c0c0c0;border-top:2px outset #fff;color:#111;font-size:11px;letter-spacing:1px}.window-slot,.viewer:not(.embedded .viewer),.machine-view:not(.embedded .machine-view){position:fixed;left:190px;top:calc(var(--screen-top) + 62px);width:min(880px,calc(100% - 218px));height:calc(var(--screen-height) - 108px);max-height:670px}.window-slot{border:0;display:block;background:transparent}.window-slot iframe{border:0;width:100%;height:100%;display:block;background:transparent}.embedded{background:transparent}.embedded .viewer{position:fixed;inset:0;width:100%;height:var(--screen-height);max-height:none}.embedded .system-desktop{display:none}@media(min-width:1400px){.window-slot,.viewer:not(.embedded .viewer),.machine-view:not(.embedded .machine-view){left:calc(50% - 390px)}}@media(max-width:700px){.system-desktop{padding:12px 10px 26px}.system-brand{font-size:14px}.desktop-objects{flex-direction:row;gap:3px;width:100%;margin-top:9px;justify-content:space-between}.desktop-object{width:24%;font-size:10px;padding:2px;gap:2px}.object-art{width:40px;height:36px}.room-note{width:64px;height:36px;font-size:10px;gap:0}.room-note b{font-size:15px}.window-slot,.viewer:not(.embedded .viewer),.machine-view:not(.embedded .machine-view){left:5px;top:calc(var(--screen-top) + 131px);width:calc(100% - 10px);height:calc(var(--screen-height) - 162px);max-height:none}.system-status{font-size:10px;min-height:25px}}@media(max-height:530px){.system-desktop{padding-top:6px}.desktop-objects{margin-top:9px;gap:5px}.object-art{width:44px;height:35px}.desktop-object{font-size:11px}.room-note{height:42px}.window-slot,.viewer:not(.embedded .viewer),.machine-view:not(.embedded .machine-view){top:calc(var(--screen-top) + 30px);height:calc(var(--screen-height) - 62px)}}@media(max-width:700px) and (max-height:530px){.system-brand{display:none}.desktop-objects{margin:0;align-items:center}.object-art,.room-note{display:none}.desktop-object{min-height:44px;align-content:center;font-size:11px}.window-slot,.viewer:not(.embedded .viewer),.machine-view:not(.embedded .machine-view){top:calc(var(--screen-top) + 52px);height:calc(var(--screen-height) - 79px)}}
/* A6: keep every desktop object inside the mobile viewport. */
.machine-snapshot{width:64px;height:52px;border-width:5px}
@media(max-width:700px){.machine-snapshot{width:40px;height:36px;border-width:3px;font-size:5px}.machine-snapshot b{font-size:7px}.days-object .room-note{position:static;order:3;z-index:auto;width:100%;max-width:76px;height:16px;font-size:9px;transform:rotate(-2deg)}}
@media(max-width:700px) and (max-height:530px){.machine-snapshot{display:none}}
/* A7: give the mobile Machine its full control area above the status bar. */
@media(max-width:700px){.window-slot[data-view-program="machine"]{top:calc(var(--screen-top) + 34px);height:calc(var(--screen-height) - 65px)}}
/* A8: the note is a link label, not a room, and never sits behind the calculator icon. */
@media(min-width:701px){.days-object .room-note{left:112px;top:8px;width:132px;height:42px;z-index:0;padding:4px}}
@media(max-width:700px){.days-object .room-note{max-width:88px;height:28px;font-size:8px;line-height:1.1;padding:2px}}
/* A9: browser controls and the keyboard consume real space, never hide objects. */
.system-tools{position:absolute;top:5px;right:6px;display:flex;gap:5px;z-index:3}
.system-tools button{font:11px Tahoma,Arial;min-height:26px;padding:3px 7px;border:2px outset #fff;background:#c0c0c0;color:#111}
.days-object .room-note{display:flex;gap:4px;text-align:center;align-items:center;justify-content:center}
.note-arrow{display:block;font:15px/1 Arial,sans-serif}
@media(min-width:701px){.days-object .room-note{position:static;order:3;width:132px;max-width:100%;height:36px}}
@media(max-width:700px){.system-brand{font-size:12px}.system-tools button{font-size:10px}.note-arrow{font-size:12px}}
.touch-landscape .system-desktop{padding:8px 12px 0}
.touch-landscape .system-brand{font-size:15px}
.touch-landscape .system-status{display:none}
.touch-landscape .desktop-objects{display:grid;grid-template-columns:repeat(3,106px);align-content:start;gap:8px;width:auto;margin-top:36px}
.touch-landscape .desktop-object{width:106px;font-size:11px;gap:3px}
.touch-landscape .object-art,.touch-landscape .machine-snapshot{display:block;width:44px;height:38px}
.touch-landscape .machine-snapshot{display:flex;font-size:5px;border-width:3px}
.touch-landscape .machine-snapshot b{font-size:8px}
.touch-landscape .days-object{position:absolute;right:12px;bottom:8px}
.touch-landscape .days-object .room-note{position:static;order:3;width:106px;max-width:100%;height:36px;font-size:9px}
.touch-landscape .window-slot,.touch-landscape .viewer:not(.embedded .viewer){left:5px;top:calc(var(--screen-top) + 32px);width:calc(100% - 10px);height:calc(var(--screen-height) - 37px);max-height:none}
.touch-landscape .window-slot[data-view-program=machine],.touch-landscape .machine-view:not(.embedded .machine-view){inset:var(--screen-top) 0 auto;width:100%;height:var(--screen-height);max-height:none}
.touch-landscape[data-active-program=machine] .system-tools{display:none}
.keyboard-open .window-slot[data-view-program=haiku],.keyboard-open .viewer:not(.embedded .viewer){top:var(--screen-top);height:var(--screen-height);max-height:none}
.keyboard-open .system-tools{display:none}
/* Fine-pointer PCs give Machine the complete content viewport. Touch keeps A9 geometry. */
@media (hover:hover) and (pointer:fine){
 .window-slot[data-view-program=machine],.machine-view:not(.embedded .machine-view){left:0;top:var(--screen-top);width:100%;height:var(--screen-height);max-height:none}
 [data-active-program=machine] .system-tools{display:none}
}