Windows 95 desktop · particle-1

Let me write the index.html. Design carefully: Windows 95 chrome with beveled borders, desktop icons, taskbar, start menu, clock, drag windows, focus, close, taskbar buttons, start menu dismiss.

Let me write it fully.

Key implementation details:
- Icons drawn with CSS/inline SVG (inline SVG is fine, no external requests).
- Window manager: windows are DOM elements created on launch, with a template. Use single Notepad instance? Requirement: closing and reopening must work. Could allow multiple instances or reuse. Simpler: single instance per app — clicking again focuses existing window, or if closed creates new. But taskbar requires each open app appears; single instance is fine.

Let me allow multiple instances? "Each open application appears in the taskbar." Single instance simplifies. I'll do single-instance per app: launching when open focuses it.

Drag: mousedown on titlebar, compute offsets, clamp so titlebar stays reachable within desktop (top >= 0, keep 60px visible horizontally and title bar within screen). Use pointer events for touch support.

Focus: z-index counter, add active class to taskbar button.

Start menu: button toggles, click outside closes, launching closes.

Clock updates every second, showing local time like "3:45 PM".

Desktop icons: double-click opens. Also single-click selects (visual). Need double click and Start menu item both.

Let me write CSS Win95 palette: #c0c0c0 face, #ffffff/#dfdfdf highlight, #808080/#000 shadow. Font: "Pixelated MS Sans Serif" unavailable; use Tahoma/MS Sans Serif fallback, sans-serif. Use font-size 12px.

Icons: draw with inline SVG or CSS. I'll do inline SVG for notepad (page with lines) and About (info/computer icon).

Window structure:

```html
<div class="window" style="left:..;top:..;width:..;height:..">
  <div class="titlebar">
    <span class="icon">...</span>
    <span class="title">Untitled - Notepad</span>
    <div class="buttons"><button class="btn-close">×</button></div>
  </div>
  <div class="win-body">...</div>
  <div class="resize-handle"></div> (optional, skip or implement simple)
</div>
```

Resizing optional; skip? Could add simple resize handle bottom-right for polish, but keep time. Maybe implement basic resize — easy enough but risk of bugs. I'll implement it with clamping, low risk. Actually required functionality priority; I'll add a resize grip since it's small.

Taskbar: start button, window buttons container (flex), clock area at right.

Window maximize? Not required. Keep close only (maybe minimize as well? Taskbar entries handle it; minimize not required). I'll include close button only, maybe also minimize doing nothing? Skip.

Window position cascade for multiple windows of different apps.

Menu bar in Notepad: "File Edit Search Help" with functional File > New/Exit? Optional. Could add simple menu that opens? Skip complexity; just static labels or a minimal File menu. I'll add static menu bar text for the look; not required to be functional. Actually a non-functional menu can be confusing; I'll add File menu with New (clears text) and Exit (closes). Small effort. Hmm, maybe skip menus and just have textarea with scrollbars look (win95 inset border). I'll include static menu bar (File Edit Search Help) with no dropdown — acceptable visual detail. Better: make them do nothing but look authentic. Fine.

About window: info panel with icon, title "About Windows 95", text, OK button that closes.

Start menu: header sidebar "Windows 95" vertical text? Classic Win95 start menu has vertical band. I'll do the modern-ish 95 start menu: items with icons: Programs (skip submenu?), Notepad, About, separator, Shut Down... Let's include "Notepad", "About", separator, "Shut Down..." which shows a dialog? Could be fun but not required. Include programs items directly for simplicity. Maybe add "Programs" with submenu — not required. Keep it simple with items: Notepad, About, separator, Shut Down... (opens a small dialog "It is now safe to turn off your computer" styled). That adds charm; but must ensure clicking start menu item dismisses menu. I'll add shut down dialog as a window? It's a dialog within desktop. Simpler: omit or make it a window with message and restart button reloading? Avoid reload. I'll just include a "Shut Down..." item that opens a small centered window with text and OK. Actually adds complexity; keep, small.

Let me be careful about start menu closing on outside click: add document mousedown listener that closes if click outside menu and start button.

Focus by clicking anywhere in window: mousedown on window brings to front.

Taskbar buttons: clicking toggles focus (bring front). If window is already focused, maybe minimize? Not needed.

Clock: update every second; format "h:mm AM/PM".

Also double-clicking icon: use dblclick event on icon; additionally maybe single click selects. Drag icons? Not required. Skip.

Show taskbar-only when window open.

Z-index base 100, increment.

Title bar buttons: win95 style close with X.

Also add desktop background teal (#008080).

Let's write it.

Clamping during drag: 
```
const maxLeft = deskW - 40; // keep 40px visible
const minLeft = -(el.offsetWidth - 40);
left clamp; top clamp between 0 and deskH - titlebarHeight
```
But also ensure not above 0 (titlebar reachable). Use desk = desktop area (viewport minus taskbar). Actually simpler: clamp top >= 0 and top <= window.innerHeight - taskbarH - 24 so title bar visible.

Drag using pointer events with setPointerCapture.

Notepad state: persist text in variable/instance so reopening keeps text? Optional. I'll keep per-app state in JS object so text retained after close/reopen — "retaining optional" and it's nice. Since single instance, store `appState.notepad.text`.

Also About window size ~420x300; Notepad 480x340.

Window positions: cascade based on open count, clamp.

Let's also implement bringing fresh window on top + activating taskbar.

Write code now.

HTML skeleton:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Windows 95</title>
<style>...</style>
</head>
<body>
<div id="desktop">
  <div id="icons">
    <div class="desk-icon" data-app="notepad" tabindex="0">...</div>
    <div class="desk-icon" data-app="about" ...>
  </div>
  <div id="windows"></div>
  <div id="startMenu">...</div>
  <div id="taskbar">
    <button id="startBtn">...</button>
    <div id="tasks"></div>
    <div id="clock"></div>
  </div>
</div>
<script>...</script>
</body>
```

Wait, start menu is above taskbar, fixed bottom.

Taskbar height 36px? Win95 taskbar 28px. Use 30px.

Desktop icons positioned at top-left via flex column with fixed positions. Use absolute positions? Simple flex column with gap, top-left 12px. Double-click highlight.

Icon drawings with inline SVG 32x32-ish. Let's create:
- Notepad icon: white page with folded corner + blue lines. SVG.
- About: computer monitor icon (gray box, blue screen) or info bubble. Since it's "About", use info icon with blue circle and i? Classic "About Windows" uses Windows flag. Use small computer.

Start button icon: Windows logo approximated with 4 colored squares (CSS grid).

Taskbar window buttons with mini icons.

Now CSS Win95 bevels:
```
.outset { border: 2px solid; border-color:#fff #000 #000 #fff; box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080; }
```
Careful with box-shadow approach. Use classic:
```
border: 2px solid;
border-color: #ffffff #000000 #000000 #ffffff;
box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
```
That works for buttons with background #c0c0c0.

Pressed: border-color reversed and box-shadow inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf, with content shift.

Inset (text area): border-color #808080 #fff #fff #808080; box-shadow inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf.

Windows: background #c0c0c0; border 2px outset; padding 3px.

Title bar: background #000080; color white; font-weight bold; height 18px; padding 2px; display flex; gap 4px; align-items center; user-select none; cursor default.

Inactive title bar: background #808080.

Window body padding 4px.

Textarea: font "Courier New", monospace 13px; border inset style; resize none; width 100%; height 100%.

Notepad layout use flex column: menubar row, textarea flex 1.

Menu bar items with underline letters? Skip underline, just text.

Buttons: min-width 70px, height 22px, font 12px.

Clock: inset panel with padding.

Let me now write the JS.

```js
const desktop = document.getElementById('desktop');
const windowsLayer = document.getElementById('windows');
const tasksEl = document.getElementById('tasks');
const startMenu = document.getElementById('startMenu');
const startBtn = document.getElementById('startBtn');

const APPS = {
  notepad: { title: 'Untitled - Notepad', w: 460, h: 320, icon: notepadSVG, build: buildNotepad },
  about: { title: 'About Windows 95', w: 400, h: 280, icon: aboutSVG, build: buildAbout }
};

let zTop = 100;
let cascade = 0;
const state = { notepad: { text: '' } };
const open = {}; // app -> {el, taskBtn}
```

createWindow(app):
- if open[app] -> focusWindow, return
- el = div.window, style width/height and left/top (cascade).
- titlebar with icon, title, close button
- body by app
- append, add task button
- focus

Focus: set z-index, active class on task button, deactivate others, also set titlebars active/inactive.

Closing: remove el and task button, delete open[app]. Focus next topmost remaining window? Win95 focuses next. Implement pick highest z remaining and focus.

Drag: attach on titlebar pointerdown (ignore if target is button).

Clamp function.

Resize: add grip bottom-right for windows with `resizable`. Implement pointerdown on grip.

Window buttons text: for taskbar, width ~ 160px, truncate.

Start menu HTML:

```html
<div id="startMenu" class="start-menu hidden">
  <div class="start-band"><span>Windows<span class="tm">95</span></span></div>
  <div class="start-items">
    <button class="start-item" data-app="notepad"><svg>...</svg>Notepad</button>
    <button class="start-item" data-app="about">...About</button>
    <div class="menu-sep"></div>
    <button class="start-item" id="shutdownItem">...Shut Down...</button>
  </div>
</div>
```

Use start-menu positioned bottom: taskbar height + 2, left 2.

For the shut down dialog: reuse window system as a special app? Simpler: create a dialog window "Shut Down Windows" with content and OK/Cancel; clicking OK closes the dialog and... maybe shows overlay screen "It is now safe..." with a restart button. Hmm, too much. I'll implement "Shut Down..." opening a small modal-styled window prompting and OK closes (no actual shutdown). Actually to reduce risk, just make shut down item open About? No. I'll implement a simple window app `shutdown` with text "It is now safe to turn off your computer." and a Restart button reloading? reload resets state — maybe fine but risky in test. Skip shutdown item entirely? Start menu without shutdown is acceptable but less authentic. I'll include it, opening a shutdown window (centered) with message and a "Restart" button; clicking restart closes window (simulating). Hmm, "Restart" that does nothing is weird. Use "OK" button to close.

Actually keep focus: required items are Notepad and About. I'll include a "Shut Down..." item that opens a window with the classic message and an OK button. Fine.

Desktop icons double-click: attach dblclick listener; also keyboard Enter. Also single click select.

Prevent text selection during drags: CSS user-select none on windows' chrome and desktop; textarea selectable.

Mobile: double-click hard on touch — add touch support? Could add single click opens on touch? The dblclick works on browsers for touch? No. Not needed for tests. But add pointer-based double tap? Skip, since desktop app.

Clock: 
```js
function updateClock(){
  const d = new Date();
  let h = d.getHours(), m = d.getMinutes();
  const ap = h >= 12 ? 'PM' : 'AM';
  h = h % 12 || 12;
  clock.textContent = `${h}:${String(m).padStart(2,'0')} ${ap}`;
}
setInterval(updateClock, 1000); updateClock();
```
Maybe show date in title attr.

Focus handling when clicking taskbar entry: e.stopPropagation? Taskbar click outside start menu should close start menu — that's fine.

Start menu closes when clicking a start item; event handlers.

Outside click closing: document.addEventListener('pointerdown', e => { if menu open and !menu.contains(e.target) && !startBtn.contains(e.target) closeStart(); });

Since startBtn click toggles, pointerdown outside check would fire before click toggling. If clicking startBtn while open: pointerdown sees startBtn contains -> don't close, then click toggles -> closes. Good.

Also clicking on desktop empty area closes menu.

Let me also blur focused window when clicking desktop? Optional; keep.

Keyboard: Escape closes start menu.

Now write SVG icons.

Notepad SVG (32x32 viewBox 0 0 32 32):
```svg
<svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
 <rect x="5" y="2" width="22" height="28" fill="#fff" stroke="#000"/>
 <path d="M21 2 H27 V8 Z" fill="#c0c0c0" stroke="#000"/> maybe fold
 <line x1="8" y1="10" x2="24" y2="10" stroke="#000080" stroke-width="1.5"/>
 ...
</svg>
```
Simplify: white page, folded corner triangle, blue lines, black border.

About icon: info circle: circle fill #000080? Classic info icon uses white page with i. Use yellow lightbulb? I'll do a blue circle with white "i" — clear representation of About/info.

Computer icon for About might be nicer. Use a monitor: gray body, teal screen with "i"? I'll do info circle.

Start menu items icons 20px same SVG scaled.

Windows logo: 4 squares skewed? Use SVG with 4 red/green/blue/yellow quads. Simple grid of 4 squares with classic colors: red top-left, green top-right, blue bottom-left, yellow bottom-right. Actually Win95 flag colors: red, green, blue, yellow. Good.

Let me write full CSS carefully.

Fonts: font-family: "MS Sans Serif", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size 12px.

Body margin 0; overflow hidden; height 100vh.

Desktop: position fixed inset 0, background #008080, overflow hidden, user-select none.

Desktop icons: position absolute top 10 left 10, width 80, display flex column gap 18. Each icon 76px wide, text centered white 11px, padding 4, text-shadow 1px 1px #000? Win95 icons text white with black transparent bg; selected state: background #000080 with dotted border around label.

Icon image 32x32 centered. label with 2px padding; selected label bg #000080 outline dotted #fff.

Taskbar: position fixed left 0 right 0 bottom 0 height 30, bg #c0c0c0, border-top 2px outset? Win95 taskbar has raised top border: border-top: 1px solid #dfdfdf + 1px solid #fff? Use box-shadow inset 0 1px 0 #fff, inset 0 2px 0 #dfdfdf and background #c0c0c0. Simpler: border-top: 2px solid; border-color: #fff transparent transparent #fff? Eh. I'll do:
```
#taskbar{ background:#c0c0c0; border-top:2px solid #dfdfdf; box-shadow: inset 0 2px 0 #fff; }
```
Hmm border-top #dfdfdf then inset white line. Fine.

Start button: display flex align-items center gap 4, padding 2px 6px, font-weight bold, height 24px, margin 2px 2px; raised bevel; active/pressed state.

Tasks: flex 1, display flex, gap 2px, overflow hidden, padding 2px 0, margin-left 4.

Task button: max-width 160px, min-width 100px (flex: 0 1 160px), height 24px, text align left, padding 2px 6px, white-space nowrap, overflow hidden, text-overflow ellipsis, display flex, gap 4, align-items center, background #c0c0c0, raised bevel. Active: pressed bevel + dotted outline + bg #c0c0c0 with pattern? Win95 pressed task bg with light dither. Use background-image repeating linear? Just use #dfdfdf-ish and inset shadow.

Clock: margin 2px, padding 2px 10px, inset bevel, font 11px? use 12.

start menu width 200px, bg #c0c0c0, border 2px outset, box-shadow 2px 2px 0 rgba(0,0,0,0.35)? position fixed bottom 32 left 2, z-index 100000, display flex.

Band: width 24, background #000080? Classic band is dark gray/black gradient with vertical text "Windows 95". Use background linear-gradient(#000080,#1084d0)? Actually band color gradient from #000080 to #1084d0 vertically. Text rotated: writing-mode vertical-rl; transform rotate(180deg); color #c0c0c0; font-weight bold; letter-spacing 1px; padding 8px 4px; display flex align-items flex-end.

start items flex column padding 2.

start-item button: display flex; gap 8; width 100%; padding 4px 8px; text-align left; background transparent; border: none; font-size 12px. hover bg #000080 color #fff.

menu-sep: height 2px; border-top 1px solid #808080; border-bottom 1px solid #fff; margin 3px 2px.

Window CSS:
```
.window { position:absolute; background:#c0c0c0; border:2px solid; border-color:#dfdfdf #000 #000 #dfdfdf; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, 1px 1px 0 rgba(0,0,0,.35); padding:2px; display:flex; flex-direction:column; min-width:220px; min-height:120px; }
```
Hmm outer shadow offset conflicts with bevel. Use box-shadow: inset 1px 1px #fff, inset -1px -1px #808080 only, plus filter drop-shadow? Skip outer shadow; authentic win95 has slight shadow. Add `filter: drop-shadow(2px 2px 0 rgba(0,0,0,.25))`? Might slow drag. Keep simple.

Titlebar: height 20px, bg #000080, color #fff, font-weight bold, display flex, align-items center, gap 3px, padding 1px 2px, user-select none, cursor default, flex 0 0 auto.
Inactive: bg #808080 (and buttons still).

Title text: flex 1, overflow hidden, white-space nowrap, text-overflow ellipsis, font-size 12px.

Titlebar buttons: width 16 height 14, background #c0c0c0, border 1px solid; border-color #fff #000 #000 #fff; box-shadow inset 1px 1px #dfdfdf, inset -1px -1px #808080; font-size 10px; line-height 1; display grid; place-items center; padding 0; color #000; cursor default. Active: pressed style.

Close button "×" bold.

Body: flex 1, display flex, flex-direction column, overflow hidden, background #c0c0c0; padding? For notepad, menu bar then textarea.

Menubar: display flex; gap 2px; padding 1px 0 2px; font-size 12px. Item padding 1px 6px.

textarea: flex 1; width 100%; border inset; background #fff; font: 13px "Courier New", monospace; padding 2px; resize none; outline none; box-sizing border-box.

Note height: window is flex with fixed height (e.g. 320). If user resizes, flex works.

About body: padding 10px; display flex column; gap 8; align-items flex-start; background #c0c0c0.

About content: h2-ish "Windows 95" bold, text lines, OK button aligned right.

Resize grip: position absolute right 2 bottom 2 width 14 height 14 cursor nwse-resize; draw with repeating-linear-gradient? Use background image of diagonal lines via linear-gradient 2 colors? Could just leave transparent with cursor. Add subtle lines:
```
.resize-grip{ background-image: repeating-linear-gradient(135deg, transparent 0 2px, #fff 2px 3px, #808080 3px 4px); }
```
Maybe ugly; keep small dotted corners via CSS gradients. I'll add a simple grip using two borders? Use background:
```
background:
 repeating-linear-gradient(135deg, #fff 0 1px, #808080 1px 2px);
opacity:.9;
```
Hmm might look like static. I'll use classic diagonal handle: `background-image: linear-gradient(135deg, transparent 45%, #808080 45%, #808080 55%, transparent 55%)` scaled? Simpler: skip resize entirely for reliability and no visual clutter? Resizing isn't required. But resizable windows are nice. I'll include grip but only for notepad maybe. Let's include for all windows, implemented carefully.

Clamping after resize: width min 260 max viewport-20; height min 140 max desktop height.

Also dragging must keep within desktop bounds horizontally at least 60px visible.

Let me write the code file now. I'll aim for clean implementation and test.

Taskbar entries ordering: append in launch order.

Also should taskbar buttons display window title updated? Notepad title static "Untitled - Notepad". Fine.

Double-click desktop icon also on start menu? done.

Sound? no.

Let's implement.

For focusWindow, need refresh of active states: iterate open entries, set el.classList.toggle('active', key===app) — title bars. Use CSS `.window.active .titlebar{background:#000080}` vs default #808080. Wait default inactive should be gray; active navy. Set .titlebar background gray, .window.focused .titlebar navy.

Buttons on titlebar remain same.

Task button active class.

Also "blur" when clicking desktop: not necessary.

Window dblclick on titlebar could maximize — skip.

Now code:

```js
const appDefs = {
  notepad: {
    title: 'Untitled - Notepad',
    width: 480, height: 340,
    icon: notepadIcon(16),
    build(body, win){ ... }
  },
  about: {...}
};
```

Easier: icon markup strings defined as functions with size param.

I'll write icon strings as template functions:

```js
function notepadIcon(size){ return `<svg class="icon-svg" width="${size}" height="${size}" viewBox="0 0 32 32">...</svg>`; }
```

Need `aria-hidden="true"` and `focusable="false"`.

Notepad icon drawing:
```
<rect x="6" y="2" width="20" height="28" fill="#fff" stroke="#404040"/>
<path d="M20 2h6v6z" fill="#e0e0e0" stroke="#404040"/>  // fold at top right
lines: <path d="M9 11h14M9 15h14M9 19h14M9 23h9" stroke="#000080" stroke-width="1.5"/>
```
Add blue header? Classic notepad icon is white page with blue lines. Fine. Maybe add a blue pen? keep.

About icon: 
```
<circle cx="16" cy="16" r="13" fill="#ffffe1"? 
```
Let me do info circle: `<circle cx="16" cy="16" r="13" fill="#000080" stroke="#000"/>` then white "i" as rects: dot at (16,9) r=2 white; bar rect x=14.5 y=13 w=3 h=9 fill white. Looks good.

Computer icon? For About, maybe monitor: `<rect x="3" y="5" width="26" height="19" fill="#c0c0c0" stroke="#000"/> <rect x="5" y="7" width="22" height="13" fill="#008080"/> <rect x="12" y="26" width="8" height="3" fill="#808080"/>`. Teal screen might blend with desktop. Use navy gradient? I'll use info circle — simple and clear.

Windows flag for start button:
```
<svg width="18" height="18" viewBox="0 0 18 18">
 <path d="M1 3l7-1v7H1z" fill="#ff3b30"?? 
```
Classic: red top-left, green top-right, blue bottom-left, yellow bottom-right:
```
<rect x="1" y="2" width="7" height="6" fill="#f34e4e"/>
<rect x="9.5" y="1" width="7" height="7" fill="#3cbf3c"/>
<rect x="1" y="9.5" width="7" height="6" fill="#4a82e0"/>
<rect x="9.5" y="9" width="7" height="7" fill="#f2c744"/>
```
With slight slant? Add transform skew? Keep rects slanted using polygons for authenticity:
Actually simple 4 rects fine.

Let me write it all.

Drag implementation details:

```js
function makeDraggable(win, handle){
  handle.addEventListener('pointerdown', e => {
    if (e.button !== 0) return;
    if (e.target.closest('.titlebar-btn')) return;
    const rect = win.getBoundingClientRect();
    const deskRect = desktop.getBoundingClientRect();
    const startX = e.clientX, startY = e.clientY;
    const startLeft = parseFloat(win.style.left) || 0;
    const startTop = parseFloat(win.style.top) || 0;
    focusWindow(win.dataset.app);
    handle.setPointerCapture(e.pointerId);
    let moved = false;
    function move(ev){
      let dx = ev.clientX - startX, dy = ev.clientY - startY;
      let nl = clamp...
    }
  });
}
```

Since desktop is fixed at 0,0, client coords relative to viewport are fine. Desktop height = window.innerHeight - taskbarHeight.

Constraints:
```
const minVisible = 80;
const maxLeft = window.innerWidth - minVisible;
const minLeft = -(win.offsetWidth - minVisible);
const maxTop = window.innerHeight - TASKBAR_H - 22; // title bar height visible above taskbar
const minTop = 0;
```
Apply clamp.

Store window position left/top in style after each move.

Focus on pointerdown anywhere in window: win.addEventListener('pointerdown', () => focusWindow(app), true) — but for task focus already. Fine.

Resize:
```
grip.addEventListener('pointerdown', e => {
  e.preventDefault(); e.stopPropagation();
  const startW = win.offsetWidth, startH = win.offsetHeight;
  const sx = e.clientX, sy = e.clientY;
  grip.setPointerCapture(e.pointerId);
  ...
});
```
Need max height = innerHeight - taskbarH - top; max width = innerWidth - left + maybe allow offscreen? clamp to visible.

Set win.style.width/height.

Focus order: maintain zTop counter increments.

Closing: recompute focus.

Taskbar button build:
```js
const btn = document.createElement('button');
btn.className = 'task-btn';
btn.type='button';
btn.innerHTML = iconMini + `<span>${title}</span>`;
btn.addEventListener('click', () => { if focused? maybe minimize : focus });
```
Minimize behavior: clicking active task button minimizes? In Win95 clicking active task button minimizes. Requirement only says brings front. Implement toggle: if focused and visible, keep focused (simpler). But minimize could cause test confusion if they click taskbar entry of focused window expecting front. Keep simple: always focus.

Notepad content:
```js
body.innerHTML = `<div class="menubar"><span>File</span>...</div><textarea ...></textarea>`;
const ta = body.querySelector('textarea');
ta.value = state.notepad.text;
ta.addEventListener('input', () => state.notepad.text = ta.value);
```
Add spellcheck=false.

About content:
```html
<div class="about-body">
 <div class="about-head"><svg .../> <div><strong>Windows 95</strong><div>Microsoft Windows 95</div></div></div>
 <p>Version 4.00.950</p>
 <p>This is a small Windows 95-style desktop built with HTML, CSS, and JavaScript.</p>
 <div class="about-actions"><button class="win-btn" data-close>OK</button></div>
</div>
```
Wait, About "short information panel" — fine.

OK button closes window: add listener in build with win param; need reference to close function. build(body, win) can call closeWindow(app).

Window creation:

```js
function openWindow(app){
  if (openApps[app]) { focusApp(app); return; }
  const def = apps[app];
  const win = document.createElement('div');
  win.className = 'window';
  win.dataset.app = app;
  win.style.width = def.width+'px';
  win.style.height = def.height+'px';
  const pos = nextPosition(def);
  win.style.left = pos.left+'px';
  win.style.top = pos.top+'px';
  win.innerHTML = `
    <div class="titlebar">
      <span class="tb-icon">${def.icon(16)}</span>
      <span class="title-text">${def.title}</span>
      <span class="tb-buttons">
        <button class="titlebar-btn close-btn" type="button" aria-label="Close"><span>×</span></button>
      </span>
    </div>
    <div class="win-body"></div>
    <div class="resize-grip" aria-hidden="true"></div>
  `;
  ...
}
```

Close button aria-label includes title maybe. Use `aria-label="Close ${def.title}"`.

Add click listener close.

Then def.build(body, win).

Then append, set drag, focus, task button.

Next position: cascade starting 40,40 with step 24, wrap after 5:
```
let cascadeIndex = 0;
const offset = (cascadeIndex++ % 6) * 26;
left = 40 + offset; top = 30 + offset;
```
Clamp to fit window within viewport: left max innerWidth - width - 10; top max innerHeight - taskbar - 40. Use Math.max(4, Math.min(...)).

Focus: zTop++, el.style.zIndex = zTop; for each other open remove 'focused'; task buttons active toggle.

Ensure start menu z-index above windows: 5000. Taskbar 4000, windows layer z auto with child z-index 100+. Start menu and taskbar fixed with high z-index.

Desktop icons z-index 1.

Also clicking desktop empty area deselect icons? minor.

Double click icon: `dblclick` event. Add `click` for selection. Also Enter key.

Start menu items: data-app attributes; add click listener -> openWindow(app); closeStart(). Shutdown item -> open shutdown window? Let me include a shutdown window via app defs but not in taskbar? Simpler: add app 'shutdown' with title 'Shut Down Windows' and content message + OK. It'd appear in taskbar which is weird but harmless. Actually classic shutdown dialog appears in taskbar? It's a modal dialog, not in taskbar. I could create dialog without task button via option `taskbar:false`. Add def.taskbar = false; skip task button. Cascade center-ish.

Hmm extra complexity, but manageable. Let's include.

Shutdown def width 340 height 170, content:
```
<div class="about-body"><p>Are you sure you want to shut down the computer?</p><div class="about-actions"><button OK closes>OK</button><button Cancel closes>Cancel</button></div></div>
```
OK could show "It is now safe..." — skip.

Actually maybe rename item "Shut Down..." fine.

Window title "Shut Down Windows".

Now start menu markup. Generate start items in HTML directly with JS icons? Icons need JS functions. I'll build start menu items via HTML with placeholder then set icon innerHTML on load, or just write inline SVG in HTML duplicates. Simpler: render start menu items via JS to reuse icon functions.

HTML:
```html
<div id="startMenu" class="start-menu" hidden>
  <div class="start-band"><span>Windows 95</span></div>
  <div class="start-items" id="startItems"></div>
</div>
```
Use `hidden` attribute plus CSS? `[hidden]{display:none!important}`. Or class. Use `hidden`.

JS populate:
```js
const startItems = document.getElementById('startItems');
function startItem(app, label){...}
```

Add separators.

Also opening start menu should place above and maybe focus. Use startBtn aria-expanded.

Escape key closes.

Now clock area shows time; title attr with full date.

Also handle window resize: clamp existing windows on resize (optional). Add listener to keep titlebars reachable.

Potential issue: pointerdown outside closes start menu also when clicking a start item? Items are inside menu, so contains -> fine.

Double-click on desktop icon: ensure not opening twice due to dblclick and click both? Only dblclick opens. Single click selects.

Also double-click on start menu item? click handler fires twice? Double clicking would click once (first click closes menu, second click hits desktop). Fine.

Icon selection visual: `.desk-icon.selected .label {background:#000080; outline:1px dotted #fff}`.

Click desktop clears selection.

Let me now write the final HTML file.

One tricky bit: `win.style.left` uses px parse. getBoundingClientRect for clamping. Since desktop is full viewport fixed, coordinate consistent.

Titlebar reachable after drag: constrain top between 0 and desktopHeight - 24; also if window taller than desktop, top could be negative... constrain top >= 0 so titlebar always visible (may push bottom below viewport, but height constrained by resize max; initial heights fit). Fine.

Edge: dragging with pointer capture on titlebar - clicking close button after pointer capture? close button is within titlebar; we check e.target.closest('.titlebar-btn') and skip, so pointerdown on button doesn't start drag. Also button click still works.

Focus on window body click: add listener to win 'pointerdown' with capture, call focusApp(app) unless dialog? All.

But dragging calls focus too (double call harmless).

Now write.

CSS details for bevel helper classes:

```css
.bevel-out {
  border: 2px solid;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
```
Wait classic: outer border top/left white, bottom/right black; inner top/left #dfdfdf, bottom/right #808080. Order: border-color: top right bottom left = #fff #000 #000 #fff. Then inset shadows add #dfdfdf top-left and #808080 bottom-right. Good.

Buttons:
```css
.win-btn {
  min-width: 72px;
  padding: 3px 10px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  font: inherit;
  font-size: 12px;
  color: #000;
  cursor: default;
}
.win-btn:active, .win-btn.pressed {
  border-color: #000 #fff #fff #000;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
  padding: 4px 9px 2px 11px;
}
```
Padding shift may cause layout jitter; fine.

Focus outline for keyboard accessibility: `:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }`.

Start button active when menu open: class 'active' pressed style.

Titlebar close button:
```css
.titlebar-btn {
  width: 17px; height: 15px;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  font-family: "Times New Roman", serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: default;
  color: #000;
}
.titlebar-btn:active { border-color: #000 #fff #fff #000; box-shadow: inset 1px 1px 0 #808080; }
```
The × character vertical alignment; use span with margin-top -1px maybe. Use text "×" font-size 14 and line-height 0.

Now build and test with browser tool. Let's write file.

For textarea maybe add win95 scrollbar styling? Optional; browsers default scrollbars fine. Could add custom scrollbar CSS for WebKit to look retro. Nice touch:

```css
textarea::-webkit-scrollbar { width: 16px; background: #dfdfdf; }
textarea::-webkit-scrollbar-thumb { background: #c0c0c0; border: 2px solid; border-color:#fff #000 #000 #fff; }
textarea::-webkit-scrollbar-track { background: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0/2px 2px; }
```
Maybe keep simple; skip or light.

Add "desktop" pattern none (teal solid).

Clock updates, timezone local.

Write the code.

Also consider adding double-click title bar to maximize? no.

For focus ordering initial: first window z=101.

Pick next focus after close: among remaining open windows find max z-index and focus.

Store element references; `openApps = new Map()`.

Implement:

```js
const openApps = new Map();

function focusApp(app){
  const rec = openApps.get(app);
  if(!rec) return;
  zTop += 1;
  rec.el.style.zIndex = zTop;
  for (const [key, r] of openApps) {
    const active = key === app;
    r.el.classList.toggle('focused', active);
    if (r.btn) r.btn.classList.toggle('active', active);
  }
}
```

Task button active styling pressed look.

Closing:

```js
function closeApp(app){
  const rec = openApps.get(app);
  if(!rec) return;
  rec.el.remove();
  if (rec.btn) rec.btn.remove();
  openApps.delete(app);
  // focus topmost
  let best = null, bestZ = -1;
  for (const [key, r] of openApps){
    const z = parseInt(r.el.style.zIndex)||0;
    if(z > bestZ){ bestZ = z; best = key; }
  }
  if(best) focusApp(best);
}
```

Window inner button close calls closeApp(app).

Shutdown dialog app maps key 'shutdown'.

Taskbar button creation only if def.taskbar !== false.

Also start menu item for shutdown opens dialog.

Drag attach after append to DOM so measurements valid.

One more detail: pointer events with `touch-action: none` on titlebar and grip to allow dragging on touch.

Let me write final code.

For window shake: nothing.

Now about "Double-clicking an icon or selecting its Start-menu item opens the corresponding window." OK.

Also ensure double-click on desktop icon text works.

Add desktop icon labels "Notepad", "About".

Let me write the file now. I'll be thorough and test.

Now run browser, inspect.

The initial desktop looks right. The taskbar clock shows "11:44 PM". Let's test Start menu.

The Start menu looks good. The band text "Windows95" vertical; fine. Now click Notepad item.

No window opened and the DOM doesn't show a window. Why? The click handler was on the button, but the start menu item click: on pointerdown document handler, startMenu contains target so it doesn't close. Then click fires... but wait, the screenshot after clicking shows the menu closed and no Notepad window. Hmm, DOM shows only Notepad About Start 11:44 PM — window isn't present.

Maybe the click coordinate hit the item and closed menu but openApp failed with an error? Console shows no errors. Wait, perhaps the click was on the menu band area? x=106 is within item text, item extends from x=27 to 212, y=678 between 665 and 692. Should be fine.

Maybe an exception was thrown in openApp silently? Console empty. Hmm.

Wait — maybe the browser click happened on the document, but first pointerdown closes menu because the check `startMenu.contains(e.target)` — e.target could be the span inside button, contained. Fine.

Then click listener: `closeStartMenu(); openApp(entry.app);` closeStartMenu calls startBtn.focus() — that shouldn't block. openApp builds window... but DOM after shows "Notepad About Start" — the first two are desktop icons; taskbar label missing. So window wasn't created at all?

Unless openApp threw. Console should show. Let me inspect DOM more thoroughly.

The window isn't opening. Why? Maybe `e.target.closest is not a function`? No, that's for element targets.

Let me check via evaluating in console... browser tool doesn't have eval. I can add temporary script? Or use the inspect action which shows DOM text. Let me open the page in a headless check via node? Simpler: add console.log? Hmm.

Wait — maybe the issue is the `document.addEventListener('pointerdown', ...)` handler closing menu and the click never reaching the button? Because clicking caused menu to close before click? No, the pointerdown handler checks `startMenu.contains(e.target)` first, so menu stays open until click.

But wait: closeStartMenu called inside click handler after pointerdown... Actually maybe the pointerdown handler closes because e.target is the `<span>` inside start item — contained. Fine.

Could the issue be that openApp throws "def.icon is not a function"? def.icon = notepadIcon function, fine.

Hmm, maybe the window WAS created but immediately removed? DOM text doesn't include window titles. The taskbar would show "Untitled - Notepad" though. Not shown.

Wait, maybe my click coordinate 106,678 landed on the menu's "About" row? The menu is at bottom: items at y ~666 (Notepad), 691 (About), 743 (shutdown). y=678 might be between rows or on padding. Regardless, either should open a window. But no window.

Maybe the click command just clicks (mousedown+mouseup) but my document pointerdown handler runs and closes the menu because... hmm, if e.target isn't in menu? If menu closed on pointerdown, then click target would be desktop, so no app. That matches: menu closed and no app opened. So the pointerdown outside check triggered. Why would target not be inside startMenu? The click at (106,678)... screenshot shows menu spanning x 0..218, y 647..770, so inside.

Unless the pointerdown handler runs with e.target being something else due to... `startMenu.contains(e.target)` — if e.target is an SVG element inside the button, contains works fine.

Hmm wait, maybe closeStartMenu was called by the click handler after openApp? Order: closeStartMenu(); openApp(). openApp should still run. Unless openApp threw before creating.

Let me check for runtime errors by testing click on desktop icon double click.

Icon selection works. Double-click: use two clicks quickly. browser click twice maybe registers dblclick? Let me do key Enter which is defined. But that also goes through openApp. Let's test Enter? Browser tool has key action requires text? Use click twice quickly.

Actually, let me check if openApp itself fails: The shutdown dialog also would fail. Let me test double click via two rapid clicks.

Not dblclick. Something is broken in openApp likely. Let me check JS syntax/errors by running in node? We can extract the script and run with node with a fake DOM? Better: check console errors via browser tool; console was empty. Perhaps an error thrown during window creation is caught? No.

Let me test with a minimal harness: use node to parse syntax.

Syntax fine. So why no window? Maybe error at runtime like `String.prototype.padStart` fine. `e.target.closest` on text? fine.

Maybe an error in `openApp`: when app built, `def.icon(16)` fine. createElement... `win.querySelector('.close-btn').setAttribute(...)`. fine.

Wait... maybe openApp is defined as a function declaration inside the IIFE but referenced by handlers; fine.

Hmm, maybe dblclick didn't trigger because two separate click tool calls are too slow (>500ms). That explains icon result. But start menu click should definitely work.

Maybe the start menu item click handler didn't fire because closeStartMenu() inside handler... no, handler body runs sequentially.

Let me think about document pointerdown: When clicking menu item, `startMenu.contains(e.target)`. The browser tool click dispatches events maybe via CDP where target at coordinates is computed. Menu at (106,678) is inside. Should be contained.

Alternatively, maybe the issue is that after pointerdown the document handler closes the menu because it checks `!startBtn.contains(e.target)` in the desktop handler? The desktop `pointerdown` handler: `if (!e.target.closest('.desk-icon') && !e.target.closest('.window')) {... if (isStartOpen() && !startBtn.contains(e.target)) closeStartMenu(); }`. Clicking menu item: it is not desk-icon nor window, so it closes start menu on pointerdown! Then target is removed from DOM, and click never fires on the button (since the element is detached before mouseup, click may not dispatch). That's the bug. Start menu is a child of #desktop, so the desktop handler fires.

Fix: in desktop pointerdown handler, check `e.target.closest('#startMenu')` or startMenu.contains(e.target) before closing. Also change condition: if click within start menu, do nothing.

Also the desktop handler clears icon selection when clicking menu — harmless.

Change:
```js
desktop.addEventListener('pointerdown', function(e){
  if (startMenu.contains(e.target)) return;
  if (!e.target.closest('.desk-icon') && !e.target.closest('.window')){
    clearIconSelection();
    if (isStartOpen()) closeStartMenu();
  }
});
```
But then need close menu when clicking elsewhere on desktop—yes that's handled.

Also ensure clicking the window doesn't close menu; currently closeStartMenu called only within else branch, so clicking a window doesn't close start menu. Actually Win95 clicking a window while start menu open closes menu. Add: document pointerdown handler already closes if target not in menu/startBtn, which handles that (fires before desktop's). Good; the document handler is the main one. So desktop handler should not close the menu at all; the document handler covers it. Simplify desktop handler: only clear selection, and don't close start.

But wait: document pointerdown handler did close when clicking menu item?? It checks contains -> skip. Then desktop handler closed it — yes that's the culprit.

Remove start-menu closing from desktop handler.

Also the click that opened the menu: startBtn click toggles; pointerdown doc skips. fine.

Fix now.

Start menu looks good. Now click Notepad item at ~(102, 680).

Notepad opened via Start menu, and taskbar entry appears. The textarea auto-focus likely has caret. Note the window was created at left 90, top 26 — okay. Slight gap between titlebar and menubar/textarea looks fine.

Now type text.

Text entered. Now drag title bar from (300,40) to (550,300).

Drag works. Text preserved. Now open About via double-click desktop icon. Use two quick clicks at (44,119). Browser clicks may not register as dblclick depending on timing. Let's try with double click via two click actions quickly; the tool calls take time. Alternatively, verify start menu path (already done). Test double-click behavior — could dispatch dblclick by clicking twice rapidly? The harness likely has small delay. Try clicks on icon coordinates.

Click selection. Now second click quickly for dblclick.

Double-click didn't register (clicks too slow or not a dblclick). The icon is selected. I should verify double-click works. The browser tool may not support dblclick directly. I can simulate via JS? No eval tool. Could temporarily add an auto-test script? Better: trust the dblclick listener; but that's a key requirement — need verification. The `dblclick` event is standard. However, potential issue: dblclick fires after two clicks and selection works; openApp should be called. It should work in a real browser.

I could verify by using keyboard Enter (tests openApp path but not dblclick). Or add a small script that programmatically dispatches dblclick after load for validation, then remove it. Let's do that temporarily: append a script that after 600ms dispatches a dblclick on the About icon, then take a screenshot, then check. Then remove the script.

Actually simpler: use a separate temp test page? The browser tool loads index.html only. Add temporary code guarded by URL hash? e.g., if (location.hash === '#test-dblclick') dispatch dblclick. Then reload with hash not supported by tool (reload just reloads current URL). Could set location.hash via... no eval.

Simplest: create a temporary copy test.html with a script that dispatches dblclick and point browser? The tool always loads index.html presumably. Let me check if browser can open arbitrary file — it says "Run index.html". Probably fixed.

Alternative: temporarily add the dispatch at end of body, reload, screenshot, then remove. Do that.

The dblclick dispatch didn't open a window either! And the desktop is empty now because it reloaded fresh. So maybe openApp fails at runtime. The DOM after reload shows no window. The dispatch should have opened About.

So openApp throws an error somewhere. But console empty? Maybe console only captures after action? Let me check console via inspect.

It did open; the earlier screenshot was taken before the 400ms timer fired. So dblclick wiring works. Good.

Now remove temp script, restore backup (backup is pre-temp, same as current minus test). Restore from backup.

Then test remaining: open Notepad (start menu), open About, focus switching via taskbar, close removal, start menu dismissal.

Let me restore and reload, then do a flow:
1. Open Notepad via start menu.
2. Type text.
3. Open About via dblclick? Can't reliably dblclick via tool. Open About via start menu.
4. Click Notepad taskbar entry -> Notepad to front.
5. Close About via its close button -> taskbar entry gone.

For focus verification, z-index/DOM: inspect doesn't show z-index. Screenshots show titlebar active color. Test.

Also verify closing and reopening Notepad retains text (optional).

Restore file now.

Clean reload (fresh state, text cleared — fine, optional).

Now full flow test:
1. Start menu -> Notepad. Click start (35,785), then Notepad item (102,679).
2. Type text.
3. Start menu -> About.
4. Click Notepad taskbar entry (~180, 785) -> should focus Notepad to front.
5. Click About's close (480,36) -> taskbar entry removed.

Note after opening Notepad via start menu, positions: cascade index 0 -> left 90 top 26. Then About cascade 1 -> left 114 top 50. Title bars: Notepad from y26 to 48, About from y50 to 72 — overlapping slightly? About at x114..518 covers Notepad's title, so Notepad's titlebar mostly hidden; but taskbar focus works. Close About at x~480+.

Actually maybe position windows with more offset for better look (not required).

Proceed.

The start menu looks good, though the vertical band text "Windows95" is at the bottom (align-items flex-end with rotate 180 makes it read bottom-to-top starting at bottom). It's at bottom instead of spanning. Fine. Also there's a weird dark shadow region to the right of the menu (drop shadow). Ok.

Click Notepad item at (98,678).

Notepad opened, focused (navy titlebar), taskbar entry active (pressed look). Textarea appears focused? The border looks inset; caret not visible but focus set via setTimeout. Let me type.

Text works. Now drag titlebar from (200,40) to (600,250).

Drag works, text retained. Now open About via Start menu.

The Start menu is open with the vertical band "Windows95" (rotated text reads bottom-up). Good enough.

Click About at (79,706).

About open and focused (navy titlebar, active taskbar entry with dotted outline). Notepad inactive gray titlebar and taskbar entry raised. About overlaps Notepad's titlebar partially; Notepad titlebar still partially visible on right.

Now click Notepad taskbar entry (~181,785) to bring to front.

Taskbar click focused Notepad (navy titlebar; About grayed inactive; Notepad taskbar active with dotted label). Good.

Now close About via its × at (505,66). Check taskbar entry removal.

About closed, its taskbar entry removed. Notepad remains focused and text retained.

Notice the Notepad titlebar starts at x=490 but window body extends left to 490 — window dragged to x=490. Fine.

Now close Notepad, then reopen via Start menu and confirm text retained (optional) and close/reopen works.

Close Notepad at (951,260).

Notepad closed, taskbar entry removed, clock updated from 11:44 to 11:45. Good.

Test start menu dismissal without launching: click Start, then click desktop. Also test reopening Notepad retains text.

Also test dragging constraint: drag far left/up and check titlebar stays reachable. And resize maybe.

Reopen Notepad via Start menu: Start at (35,785), Notepad item at (98,678).

Start menu is open. Now dismiss it by clicking desktop background (e.g., 400,400), then click Start again and open About to verify. Actually test dismiss first.

Menu dismissed properly. Now reopen Notepad via Start menu and verify text retained and close/reopen works.

Reopened Notepad retains text from session. Looks clean and authentic. Small nit: title bar text baseline, fine.

Now test drag constraint: drag Notepad title bar far bottom-right beyond bounds and confirm titlebar remains visible. Also test resize grip. And About OK button, shutdown dialog maybe.

Drag from titlebar (300,89) to (1150, 780).

Uh oh — dragged far bottom-right and the window is now almost entirely below the desktop, with only a sliver of titlebar visible at the bottom right. Title bar y is around 748-770, and taskbar at 770. So titlebar is reachable (visible) but the close button is barely reachable at the right edge (window left ~1018, width 480 => right edge 1498, off-screen). Horizontal clamp keeps only 72px visible at left edge, but here window's left is clamped to b.w - 72? Wait drag to 1180 causing left = 1018, and maxLeft = 1200-72=1128. Hmm, the window left appears ~1018, so not at max; because the cursor started at 300 → dx 880; startLeft 140 → 1020. Fine.

Vertical: maxTop = b.h - 24 = (800-30) - 24 = 746. Titlebar at 748? close. So titlebar visible above taskbar, but window body entirely below/offscreen. Requirement "Keep title bars reachable within the desktop." Titlebar is reachable, but only 20px strip visible — close button is at x = 1018+480-25 ≈ 1473, off screen to the right! So the close button isn't reachable; and since only ~2px of title bar bottom... Actually titlebar y 748-770, above taskbar 770, so full titlebar height visible. But right part offscreen means close button inaccessible.

I should improve clamping: keep at least, say, 160px of the titlebar visible horizontally and full titlebar vertically. Horizontally minLeft = -(width - 160), maxLeft = b.w - 160. Vertical maxTop = b.h - 26 (titlebar visible), which is what we have. The horizontal should ensure the window's titlebar right edge is reachable... The close button sits at right end; keeping right edge on screen would require maxLeft = b.w - width. But then the user can't drag windows partly off the right. Typically Win95 allowed offscreen but kept title bar. A reasonable compromise: keep 120px of titlebar visible AND ensure at least the titlebar's left portion visible; close button may go offscreen but the window can be dragged back. Requirement only says title bars reachable, which is satisfied: user can grab the visible titlebar strip and drag back.

But better UX: clamp so that at least 40px of window remains on right side too? Simplest: maxLeft = b.w - minVisible where minVisible = 120; minLeft = -(width - minVisible). Then when dragged right, at least 120px of the left side of the titlebar is on-screen; drag back possible. Close offscreen but reachable via taskbar? no. It's acceptable, but let me reduce vertical: maxTop should keep the titlebar and maybe nothing else; it's fine.

However, in this screenshot, the window nearly disappeared; user can still drag the visible titlebar. I think it's acceptable but a nicer approach is to prevent horizontal overflow entirely on right: maxLeft = b.w - width + 60? Hmm classic behavior allowed.

I'll keep 72px clamp but maybe increase visible to 140px so title text and drag area clearly visible. Fine as is per requirement.

But there's a bug worth noting: vertical maxTop = b.h - 24 leaves only the titlebar visible; dragging by the titlebar will work. Good.

Now test that I can drag it back — drag from visible titlebar at (1060,759) to (500,300).

Recovered fine. Now test resize grip: drag from (933,615) to (1150,750).

Resize works. Now test About OK button and Start menu shutdown maybe, and click window focus by body click. Also verify the About via OK closes. Let's open About via start menu then click its OK.

Start button (35,785) → About (79,706).

The start menu looks decent. One issue: the notepad window now overlaps nothing; fine.

Click About at (79,707).

About opened and centered fine. The taskbar entries both present; About is active (pressed).

One design nit: About window overlaps Notepad; Notepad title bar visible at right. Fine.

Now click the Notepad window's body (visible portion, e.g., 700,500) to focus it by clicking — requirement "focused by clicking". Do that and verify titlebar turns navy and taskbar active.

Clicking Notepad's textarea brought it to front (titlebar navy, About titlebar gray, taskbar entry active with dotted label). 

Now close About via OK button at (505,360) — it's now behind Notepad? No, About window still at x163..564, y102..385; Notepad at x456..1156, y282..760. About's OK at (505,360) is behind Notepad now (Notepad covers y>=282, x>=456). So clicking OK would hit Notepad. Use taskbar to focus About then OK. Taskbar About entry at (318,785).

Actually to test clicking a background window directly: About's visible area at x200,y200 is uncovered — click it to bring front. Do that then OK.

About focused via click. Now click OK at (505,360).

About closed via OK, taskbar entry removed; Notepad becomes focused automatically. Everything works.

Remaining checks: shutdown dialog opens/dismisses (minor), titlebar clamps after resizing, Escape closing menu, clock format 12h with AM/PM (11:45 PM ✓).

One concern: initial window open positions overlap cascade 90/114 with different heights — okay.

Also, the start menu band text: shows "Windows95" near bottom; okay.

Let's test the shutdown dialog quickly to make sure no JS error: Start -> Shut Down.

The Shut Down dialog is a bit tall (empty area below buttons) but acceptable. Note the About content wraps fine. The dialog's OK/Cancel return to close (Cancel button at 719,426).

Let me click Cancel to close.

Also final check: Escape closes start menu, and start menu preserving keyboard. Not critical.

One improvement: the shutdown dialog body content doesn't use available space; the empty area is from `.about-actions { margin-top:auto }` and a 176px height. Fine.

One potential improvement: the About window text about "click a window to bring it to the front" — verified.

Click Cancel.

All working. A few polish items I might improve:

1. Start menu dismissal already verified via outside click; verify menu closes after launching (verified, since window opened and menu disappeared).
2. Clock updates (changed 11:44 → 11:45).
3. Window focus verified.

Minor visual: desktop icon spacing 18px is wide; fine.

Potential issue: When Notepad is opened immediately and textarea focused, typing works. Verified.

Edge: after closing all windows, taskbar empty (verified).

Edge: Start menu button toggles open state and it visually pressed when open (screenshot shows pressed-ish? In screenshot, Start button is raised, not pressed. CSS `#startBtn.open` should apply pressed style. In the screenshot the Start button appears normal... Look at latest start menu screenshot: Start button at bottom left looks raised with white top? Hard to tell. The rule sets `border-color: var(--black) var(--light) var(--light) var(--black)` which makes it look pressed. In the screenshot, it appears the button is pressed? There's a dark top edge... Possibly fine.

Let me improve one thing: initial window placement for About/Notepad overlapping in cascade at 24px offsets — with Notepad height 340 and About height 288, About's title bar at top+24 lands inside Notepad body, covering Notepad content. That's authentic-ish but can look bad. It's fine; taskbar switching works.

Now one risk: `.about-body` uses `overflow:auto` and `user-select:text`; About window resizable. Fine.

Another check: resizing Notepad smaller than titlebar width? min-width 240.

Check titlebars remain accessible when window dragged up: top clamp 0.

I could check the console for errors — console is empty throughout.

Final file has no external resources. Verify no network refs.

No external references. Final verification done. Let me do one last check that double-click desktop icon opens Notepad in the final (non-temp) file — earlier verified About via temporary dispatch and the same code path. The dblclick handler is on each icon. Fine.

Maybe improve icon spacing and the start button pressed state? Not necessary.

One last small improvement: the start menu's vertical band text is bottom-aligned, which looks authentic-ish. Good.

Report.