: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; } }
@font-face{font-family:LazyDog;src:url('assets/lazy_dog.ttf') format('truetype');font-display:swap}
.collage-fit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#collage{display:block;width:100%;height:100%;object-fit:contain}
#loading{position:absolute;inset:45% 0 auto;text-align:center;color:white;font-size:12px}
.edit-tools{display:none;align-items:center;gap:12px;margin-left:auto;padding-right:4px;color:white;font-size:11px}
.expanded .edit-tools{display:flex}
#edit-selector{font:12px Arial;background:#ddd;color:#111;border:1px solid #444;max-width:110px}
#editor{color-scheme:light;width:min(480px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow:auto;border:2px solid #ddd;border-right-color:#444;border-bottom-color:#444;padding:18px;background:#ece8e1;color:#26232c;box-shadow:5px 5px #0009}
#editor::backdrop{background:#0008}
#editor h2{font:28px LazyDog;margin:0 0 12px}
#editor label{display:block;font-size:13px}
#editor textarea{display:block;width:100%;font:26px LazyDog;padding:10px;background:#fffaf0;color:#252329;border:1px solid #b5aa98;margin:10px 0}
#editor small{font-size:12px;color:#625c53}
#editor input[type=range]{display:block;width:100%;accent-color:#605394;margin:4px 0 10px}
#editor input[type=file]{display:block;max-width:100%;margin-top:8px;font-size:12px}
.crop-wrap{height:min(30svh,240px);display:flex;align-items:center;justify-content:center;background:#29272b;margin:12px 0;overflow:hidden}
#crop-preview{max-width:100%;max-height:100%;object-fit:contain;touch-action:none;cursor:grab}
#editor footer{display:flex;gap:8px;justify-content:flex-end}
#editor button{padding:8px 18px;border:1px solid #777;background:#fffaf0;color:#222;cursor:pointer}
#save-slot{background:#d5c9e6!important}
#editor-message{font-size:12px;min-height:16px;margin:8px 0}
#editor [hidden]{display:none!important}
#editor button:focus-visible,#editor input:focus-visible,#editor textarea:focus-visible{outline:2px solid #69568d;outline-offset:2px}
@media(max-width:480px){#save-status{display:none}.window-title{font-size:11px}}
/* Keep editing controls away from Notion's upper-right embed menu. */
.edit-tools{margin-left:12px;margin-right:auto}
@media(max-width:760px){#save-status{display:none}}

/* The collage runs edge to edge below the browser toolbar. */
#collage{width:100%;height:100%;object-fit:fill}
.board{margin-top:0;box-shadow:none}
.browser{border-color:#fff #666 #666 #fff}
.edit-tools{font-size:12px;color:#fff;white-space:nowrap;min-width:0}
.crop-note{font-size:12px;color:#625c53;margin:6px 0 12px}
#zoom-value{float:right;font-variant-numeric:tabular-nums}
#paper-controls{position:absolute;inset:0;pointer-events:none}
.paper-access{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.paper-access:focus-visible{width:auto;height:auto;clip-path:none;left:8px;top:8px;padding:8px;background:#fffaf0;color:#222;pointer-events:auto;z-index:2}
@media(max-width:480px){.expanded .window-title{display:none}.edit-tools{font-size:11px;margin-left:6px}}

#paper-controls{display:none}.expanded #paper-controls{display:block}

.dream-preview-wrap{height:min(24svh,170px);display:flex;align-items:center;justify-content:center;background:#29272b;margin:12px 0;overflow:hidden}
#dream-preview{max-width:100%;max-height:100%;object-fit:contain;touch-action:none;cursor:grab}
#dream-zoom-value{float:right;font-variant-numeric:tabular-nums}
#reset-dream{font-size:12px;padding:5px 9px!important;margin-bottom:6px}

.type-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:12px}
#dream-font{display:block;width:100%;height:32px;margin-top:5px;font:13px Arial;background:#fffaf0;color:#222;border:1px solid #b5aa98}
.color-options{display:flex;align-items:center;gap:6px;margin-top:5px}
#dream-color{width:38px;height:32px;padding:2px;border:1px solid #b5aa98;background:#fffaf0;cursor:pointer;flex:none}
#dream-color-hex{width:85px;min-width:0;height:32px;font:13px monospace;background:#fffaf0;color:#222;border:1px solid #b5aa98;padding:4px}
#dream-rotation-value,#photo-rotation-value{float:right;font-variant-numeric:tabular-nums}
#reset-photo-rotation{font-size:12px;padding:5px 9px!important}
#editor footer{position:sticky;bottom:-18px;background:#ece8e1;padding:10px 0;margin-bottom:-8px;z-index:3}
.dream-preview-wrap{height:min(20svh,140px)}

.taskbar-clock{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.start-desktop{position:absolute;z-index:2;padding:0;border:0;background:transparent;cursor:pointer;min-width:36px;min-height:24px}
.start-expanded{display:none;order:-1;margin:2px 4px;padding:3px 7px;font:bold 12px Arial;border:1px solid;border-color:#fff #444 #444 #fff;background:#c0c0c0;color:#111;cursor:pointer}
.expanded .start-desktop{display:none}.expanded .start-expanded{display:block}
.expanded .window-control{order:-2}
.info-dialog{width:min(500px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow:auto;margin:auto;padding:18px;background:#ece8e1;color:#26232c;border:2px solid;border-color:#fff #444 #444 #fff;box-shadow:5px 5px #0009;font:14px/1.5 Arial,sans-serif}
.info-dialog::backdrop{background:#0008}.info-dialog [hidden]{display:none!important}
.info-dialog h2{font:28px LazyDog;margin:0}.info-dialog h3{font-size:16px;margin:18px 0 8px}.info-dialog p{margin:10px 0}
.info-header{display:flex;align-items:center;justify-content:space-between;gap:15px}.info-header button{font-size:22px;padding:0 10px!important}
.info-dialog button{color:#222;background:#fffaf0;border:1px solid #777;padding:8px 12px;cursor:pointer}.info-dialog button:disabled{opacity:.5;cursor:wait}
.info-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0;border-bottom:1px solid #c0b6ca;padding-bottom:12px}.info-tabs button{font-size:13px;padding:6px 10px}.info-tabs button[aria-pressed=true]{background:#d5c9e6}
.info-dialog a{color:#54417d;text-underline-offset:3px}.info-dialog button:focus-visible,.info-dialog a:focus-visible{outline:2px solid #69568d;outline-offset:2px}
.credits-list{list-style:none;padding:0}.credits-list li{margin:15px 0}.storage-note{color:#625c53;font-size:13px}
.info-dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}#confirm-clear{background:#ebd3d0}
#start-message:empty,#clear-message:empty{display:none}
@media(max-width:480px){.expanded .edit-tools{white-space:normal;font-size:10px;margin-left:4px}.start-expanded{font-size:11px;padding:3px 5px}.info-dialog{padding:14px}}

.backup-actions{display:flex;gap:10px;flex-wrap:wrap}.info-dialog #restore-preview{width:100%;height:auto;display:block;border:1px solid #777}.info-dialog footer{flex-wrap:wrap}