:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #191919; }
button { font: inherit; }
.widget { position: relative; width: 100%; height: 100%; height: 100svh; overflow: hidden; isolation: isolate; }
.computer {
  position: absolute; left: 50%; top: 50%;
  width: min(calc(100vw - 24px), calc((100svh - 24px) * 1610 / 1646));
  aspect-ratio: 1610 / 1646; transform: translate(-50%, -50%);
  transition: opacity 240ms ease; pointer-events: none;
}
.computer img { width: 100%; height: 100%; display: block; user-select: none; }
.browser {
  position: absolute; visibility: hidden; display: flex; flex-direction: column;
  padding: 2px; border: 1px solid; border-color: #fff #272727 #272727 #fff;
  background: #c0c0c0; box-shadow: 1px 1px 0 #000;
}
.browser.ready { visibility: visible; }
.browser.animate { transition: left 360ms cubic-bezier(.22,.75,.25,1), top 360ms cubic-bezier(.22,.75,.25,1), width 360ms cubic-bezier(.22,.75,.25,1), height 360ms cubic-bezier(.22,.75,.25,1); }
.titlebar { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 14px; min-height: 0; background: linear-gradient(90deg, #000080, #1084d0); }
.window-title { display: none; color: white; font-size: 13px; font-weight: 700; padding-left: 8px; }
.window-control {
  position: relative; order: -1; display: grid; place-items: center; margin: 1px; width: 16px; height: 12px; padding: 0;
  color: #000; background: #c0c0c0; border: 1px solid; border-color: #fff #202020 #202020 #fff;
  box-shadow: inset -1px -1px #808080; cursor: pointer;
}
.window-control::before { content: ''; position: absolute; inset: -8px; }
.window-icon { width: 8px; height: 7px; border: 1px solid currentColor; border-top-width: 2px; }
.board { position: relative; flex: 1; min-height: 0; margin-top: 2px; background: #1e1e1e; box-shadow: inset 1px 1px #111; }
.open-board { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); color: #d5d5d5; font-size: 11px; white-space: nowrap; padding: 6px 9px; background: #1e1e1ecc; border-radius: 3px; opacity: 0; transition: opacity 180ms ease; }
.open-board:hover .hint, .open-board:focus-visible .hint { opacity: 1; }
button:focus-visible { outline: 2px solid #fff69a; outline-offset: -3px; }
.widget.expanded .computer { opacity: 0; }
.widget.expanded .titlebar { flex-basis: 30px; justify-content: flex-start; }
.widget.expanded .window-title { display: inline; }
.widget.expanded .window-control { width: 30px; height: 26px; margin: 2px; }
.widget.expanded .window-icon { position: relative; width: 10px; height: 8px; margin-left: -3px; margin-top: 3px; background: #c0c0c0; z-index: 0; }
.widget.expanded .window-icon::before { content: ''; position: absolute; width: 10px; height: 8px; border: 1px solid #000; border-top-width: 2px; left: 2px; top: -5px; z-index: -1; }
.widget.expanded .open-board { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .computer, .browser.animate, .hint { transition: none; } }