browser+resize: implement proper faux browser + resizable windows per design handoff

Browser window (w-browser, Internet icon):
- Full aqua browser chrome: toolbar with back/fwd/reload/home SVG nav buttons,
  URL bar (lock + scheme + host + path + blinking caret), bookmark chips
  with colored 12x12 favicon squares, scrollable page surface, status bar
  with animated progress bar
- History stack (back/forward state, disable at ends)
- Delegated click handler via data-go attributes for in-page navigation
- Refresh button spins 700ms via CSS animation
- Address bar + title bar update on every navigation
- ARTICLES array with 4 entries (self-hosting, jazz, cooking, film) with
  drop-cap, Georgia body, IBM Plex Mono metadata, blockquotes, inline ilinks
- Chrome theme: brushed mercury toolbar, dark navy article surface with
  iridescent radial hotspots, Audiowide titles with chromeShimmer drop-cap,
  Michroma UI labels, iridescent progress bar, custom scrollbar

Resizable windows:
- makeResizable() in aero.js: appends .rs-e (right edge), .rs-s (bottom edge),
  .rs-se (SE grip) handles; tracks mousedown/move/up; enforces minW/minH
- .win.resized flex-column flip: body fills remaining height and scrolls
- Aero grip (3-stripe diagonal, blue); Chrome grip (iridescent purple/cyan/pink)
- Body cursor forced via body.rs-cursor-* classes during drag

CSS in aero.css: chrome overrides for resize handle + full browser window theme
CSS in index.html: resize handle rules, full browser/article reading styles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 201 insertions, 0 deletions

diff --git a/aero.css b/aero.css
index 0358954..f198061 100644
--- a/aero.css
+++ b/aero.css
@@ -1029,3 +1029,204 @@ body[data-theme="chrome"] .enter,
 body[data-theme="chrome"] .start {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><defs><linearGradient id='c' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23f4f6ff'/><stop offset='0.45' stop-color='%23808aa8'/><stop offset='0.55' stop-color='%232f3450'/><stop offset='1' stop-color='%23dbe2f0'/></linearGradient></defs><circle cx='11' cy='11' r='10' fill='none' stroke='%23c6a8ec' stroke-width='1' opacity='0.9'/><circle cx='11' cy='11' r='8' fill='url(%23c)' stroke='%23181a30' stroke-width='0.7'/><ellipse cx='8.6' cy='7.4' rx='2.8' ry='1.8' fill='white' opacity='0.95'/><circle cx='11' cy='11' r='1.4' fill='%23ffd4ff' opacity='1'/></svg>") 11 11, pointer;
 }
+
+/* ================================================================
+   CHROME THEME — Resize handles
+   ================================================================ */
+body[data-theme="chrome"] .rs-se {
+  background-image:
+    linear-gradient(135deg, transparent 0 38%, oklch(80% 0.18 290 / 0.85) 38% 48%, transparent 48% 60%, oklch(82% 0.16 200 / 0.85) 60% 70%, transparent 70%, oklch(85% 0.18 320 / 0.85) 82% 92%, transparent 92%) !important;
+  opacity: 0.8;
+}
+body[data-theme="chrome"] .rs-se:hover {
+  filter: drop-shadow(0 0 6px oklch(70% 0.20 290 / 0.9)) !important;
+  opacity: 1;
+}
+
+/* ================================================================
+   CHROME THEME — Browser ("Internet" window)
+   ================================================================ */
+
+body[data-theme="chrome"] .browser-toolbar {
+  background-image:
+    repeating-linear-gradient(0deg,
+      oklch(99% 0 0 / 0.05) 0px, oklch(99% 0 0 / 0.05) 1px,
+      transparent 1px, transparent 3px),
+    linear-gradient(180deg,
+      oklch(92% 0.01 240) 0%,
+      oklch(78% 0.01 240) 50%,
+      oklch(86% 0.01 240) 100%) !important;
+  border-bottom: 1px solid oklch(28% 0.03 250) !important;
+  box-shadow:
+    inset 0 1px 0 oklch(99% 0 0 / 0.7),
+    inset 0 -1px 0 oklch(99% 0.05 200 / 0.25);
+  position: relative;
+}
+body[data-theme="chrome"] .browser-toolbar::after {
+  content: "";
+  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
+  background: linear-gradient(90deg,
+    transparent 0%,
+    oklch(75% 0.18 200 / 0.7) 20%,
+    oklch(75% 0.18 290 / 0.8) 50%,
+    oklch(75% 0.18 320 / 0.7) 80%,
+    transparent 100%);
+  pointer-events: none;
+}
+
+body[data-theme="chrome"] .nav-btn {
+  background: linear-gradient(180deg,
+    oklch(96% 0.01 240) 0%,
+    oklch(72% 0.02 245) 50%,
+    oklch(40% 0.03 250) 51%,
+    oklch(78% 0.02 240) 100%) !important;
+  border: 1px solid oklch(28% 0.03 250) !important;
+  color: oklch(15% 0.02 250) !important;
+  box-shadow:
+    inset 0 1px 0 oklch(99% 0 0 / 0.85),
+    inset 0 -1px 0 oklch(99% 0.05 200 / 0.25),
+    0 1px 3px oklch(5% 0.03 270 / 0.5) !important;
+}
+body[data-theme="chrome"] .nav-btn:hover { filter: brightness(1.08) saturate(1.1); }
+
+body[data-theme="chrome"] .url-bar {
+  background: linear-gradient(180deg,
+    oklch(14% 0.04 260) 0%,
+    oklch(18% 0.04 260) 100%) !important;
+  border: 1px solid oklch(28% 0.04 260) !important;
+  box-shadow:
+    inset 0 1px 3px oklch(2% 0.02 270 / 0.7),
+    inset 0 -1px 0 oklch(75% 0.18 290 / 0.18),
+    0 0 8px oklch(60% 0.18 290 / 0.12) !important;
+  font-family: "IBM Plex Mono", monospace !important;
+  font-size: 11px !important;
+  color: oklch(80% 0.04 245) !important;
+  letter-spacing: 0.3px;
+}
+body[data-theme="chrome"] .url-bar .lock { color: oklch(78% 0.16 145) !important; filter: drop-shadow(0 0 4px oklch(80% 0.18 145 / 0.6)); }
+body[data-theme="chrome"] .url-bar .url-scheme { color: oklch(55% 0.08 280) !important; }
+body[data-theme="chrome"] .url-bar .url-host { color: oklch(85% 0.14 290) !important; text-shadow: 0 0 6px oklch(70% 0.20 290 / 0.55); font-weight: 500 !important; }
+body[data-theme="chrome"] .url-bar .url-path { color: oklch(82% 0.06 220) !important; }
+body[data-theme="chrome"] .url-bar .caret { background: oklch(85% 0.18 200) !important; box-shadow: 0 0 6px oklch(75% 0.20 200); }
+
+body[data-theme="chrome"] .nav-btn#br-go {
+  font-family: "Michroma", sans-serif !important;
+  font-size: 9px !important;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+body[data-theme="chrome"] .browser-bookmarks {
+  background: linear-gradient(180deg, oklch(28% 0.03 250) 0%, oklch(18% 0.03 255) 100%) !important;
+  border-bottom: 1px solid oklch(12% 0.03 260) !important;
+  box-shadow:
+    inset 0 1px 0 oklch(60% 0.04 250 / 0.4),
+    inset 0 -1px 0 oklch(2% 0.02 270 / 0.6);
+}
+body[data-theme="chrome"] .bm {
+  color: oklch(75% 0.04 245) !important;
+  font-family: "Michroma", sans-serif !important;
+  font-size: 9px !important;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  border: 1px solid transparent !important;
+}
+body[data-theme="chrome"] .bm:hover { background: oklch(35% 0.05 270 / 0.5) !important; border-color: oklch(60% 0.12 290 / 0.5) !important; color: oklch(95% 0.04 280) !important; }
+body[data-theme="chrome"] .bm.active {
+  background: linear-gradient(180deg, oklch(45% 0.10 290 / 0.6), oklch(28% 0.08 280 / 0.6)) !important;
+  border-color: oklch(70% 0.18 290 / 0.7) !important;
+  color: oklch(96% 0.04 290) !important;
+  box-shadow: inset 0 1px 0 oklch(85% 0.14 290 / 0.4), 0 0 8px oklch(70% 0.18 290 / 0.4);
+  text-shadow: 0 0 6px oklch(80% 0.18 290 / 0.6);
+}
+body[data-theme="chrome"] .bm .favicon { box-shadow: inset 0 1px 0 oklch(99% 0 0 / 0.4), 0 0 4px oklch(70% 0.18 290 / 0.4); }
+body[data-theme="chrome"] .bm.home .favicon { background: linear-gradient(135deg, oklch(85% 0.18 290), oklch(45% 0.16 290) 50%, oklch(72% 0.14 320)) !important; }
+
+body[data-theme="chrome"] .browser-page {
+  background:
+    radial-gradient(120% 60% at 100% 0%, oklch(28% 0.10 290 / 0.45) 0%, transparent 55%),
+    radial-gradient(80% 50% at 0% 100%, oklch(25% 0.10 220 / 0.4) 0%, transparent 55%),
+    linear-gradient(180deg, oklch(10% 0.03 265) 0%, oklch(7% 0.02 270) 100%) !important;
+  color: oklch(85% 0.02 245) !important;
+  font-family: "Space Grotesk", "Segoe UI", sans-serif !important;
+}
+body[data-theme="chrome"] .idx-hero,
+body[data-theme="chrome"] .art-page { position: relative; }
+body[data-theme="chrome"] .idx-hero::after,
+body[data-theme="chrome"] .art-page::after {
+  content: "";
+  position: absolute; inset: 0;
+  background: repeating-linear-gradient(0deg, oklch(99% 0 0 / 0.025) 0px, oklch(99% 0 0 / 0.025) 1px, transparent 1px, transparent 3px);
+  pointer-events: none;
+}
+body[data-theme="chrome"] .browser-page::-webkit-scrollbar-track { background: linear-gradient(to right, oklch(8% 0.02 270), oklch(14% 0.03 265)) !important; }
+body[data-theme="chrome"] .browser-page::-webkit-scrollbar-thumb { background: linear-gradient(to right, oklch(60% 0.04 250), oklch(35% 0.03 255)) !important; border: 2px solid oklch(10% 0.03 265) !important; box-shadow: 0 0 4px oklch(70% 0.18 290 / 0.5); }
+
+body[data-theme="chrome"] .idx-hero {
+  background:
+    radial-gradient(80% 100% at 100% 0%, oklch(40% 0.18 290 / 0.35) 0%, transparent 60%),
+    radial-gradient(60% 80% at 0% 100%, oklch(35% 0.14 200 / 0.3) 0%, transparent 60%),
+    linear-gradient(180deg, oklch(14% 0.04 265) 0%, oklch(10% 0.03 270) 100%) !important;
+  border-bottom: 1px solid oklch(30% 0.06 280 / 0.6) !important;
+  padding: 38px 40px 28px !important;
+}
+body[data-theme="chrome"] .idx-eyebrow { font-family: "Michroma", sans-serif !important; font-size: 9px !important; letter-spacing: 3px !important; color: oklch(75% 0.14 290) !important; text-shadow: 0 0 6px oklch(70% 0.18 290 / 0.4); }
+body[data-theme="chrome"] .idx-title { font-family: "Audiowide", "Space Grotesk", sans-serif !important; font-weight: 400 !important; font-size: 36px !important; letter-spacing: -0.5px !important; color: oklch(96% 0.02 240) !important; text-shadow: 0 1px 0 oklch(99% 0 0 / 0.15), 0 2px 12px oklch(40% 0.18 290 / 0.5); }
+body[data-theme="chrome"] .idx-title em {
+  font-family: "Audiowide", sans-serif !important; font-style: italic;
+  background: linear-gradient(135deg, oklch(85% 0.18 200) 0%, oklch(85% 0.18 290) 50%, oklch(85% 0.18 350) 100%) !important;
+  background-size: 200% 200% !important;
+  -webkit-background-clip: text !important; background-clip: text !important;
+  -webkit-text-fill-color: transparent !important; color: transparent !important;
+  animation: chromeShimmer 6s linear infinite;
+}
+body[data-theme="chrome"] .idx-sub { font-family: "Space Grotesk", sans-serif !important; font-style: normal !important; font-size: 13px !important; color: oklch(70% 0.04 250) !important; }
+body[data-theme="chrome"] .idx-list { padding: 24px 40px 48px !important; }
+body[data-theme="chrome"] .idx-art { border-bottom: 1px solid oklch(28% 0.04 270 / 0.6) !important; padding: 20px 0 !important; position: relative; z-index: 1; }
+body[data-theme="chrome"] .idx-art:hover { padding-left: 10px !important; }
+body[data-theme="chrome"] .idx-art:hover::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, oklch(80% 0.18 200), oklch(80% 0.18 290), oklch(80% 0.18 350)); box-shadow: 0 0 8px oklch(70% 0.18 290); }
+body[data-theme="chrome"] .idx-art-num { font-family: "IBM Plex Mono", monospace !important; font-weight: 500 !important; color: oklch(55% 0.10 280) !important; text-shadow: 0 0 8px oklch(50% 0.16 290 / 0.5); }
+body[data-theme="chrome"] .idx-art-title { font-family: "Audiowide", "Space Grotesk", sans-serif !important; font-weight: 400 !important; font-size: 17px !important; letter-spacing: -0.1px !important; color: oklch(94% 0.02 245) !important; }
+body[data-theme="chrome"] .idx-art:hover .idx-art-title { color: oklch(90% 0.14 290) !important; text-shadow: 0 0 10px oklch(70% 0.18 290 / 0.55); text-decoration-color: oklch(70% 0.18 290 / 0.7) !important; }
+body[data-theme="chrome"] .idx-art-excerpt { font-family: "Space Grotesk", sans-serif !important; font-size: 13px !important; color: oklch(68% 0.04 250) !important; }
+body[data-theme="chrome"] .idx-art-meta { font-family: "IBM Plex Mono", monospace !important; font-size: 10px !important; color: oklch(60% 0.06 270) !important; }
+body[data-theme="chrome"] .idx-art-tag { font-family: "Michroma", sans-serif !important; font-size: 8px !important; letter-spacing: 1.5px; text-transform: uppercase; background: linear-gradient(180deg, oklch(28% 0.08 290 / 0.6), oklch(18% 0.06 280 / 0.6)) !important; color: oklch(85% 0.12 290) !important; border: 1px solid oklch(55% 0.14 290 / 0.5); box-shadow: inset 0 1px 0 oklch(70% 0.16 290 / 0.3), 0 0 6px oklch(50% 0.16 290 / 0.3); padding: 2px 7px !important; }
+
+body[data-theme="chrome"] .art-page { padding: 44px 60px 64px !important; max-width: 640px; }
+body[data-theme="chrome"] .art-back { font-family: "Michroma", sans-serif !important; font-size: 9px !important; letter-spacing: 2.5px !important; color: oklch(72% 0.14 290) !important; text-shadow: 0 0 5px oklch(60% 0.18 290 / 0.4); }
+body[data-theme="chrome"] .art-back:hover { color: oklch(88% 0.16 290) !important; text-shadow: 0 0 8px oklch(70% 0.20 290 / 0.7); }
+body[data-theme="chrome"] .art-eyebrow { font-family: "Michroma", sans-serif !important; font-size: 9px !important; letter-spacing: 3px !important; color: oklch(75% 0.14 200) !important; text-shadow: 0 0 5px oklch(60% 0.18 200 / 0.4); }
+body[data-theme="chrome"] .art-title { font-family: "Audiowide", "Space Grotesk", sans-serif !important; font-weight: 400 !important; font-size: 30px !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; color: oklch(97% 0.02 240) !important; text-shadow: 0 1px 0 oklch(99% 0 0 / 0.15), 0 2px 10px oklch(40% 0.18 290 / 0.5); margin: 0 0 16px !important; }
+body[data-theme="chrome"] .art-title em {
+  font-family: "Audiowide", sans-serif !important; font-style: italic;
+  background: linear-gradient(135deg, oklch(85% 0.18 200) 0%, oklch(85% 0.18 290) 50%, oklch(85% 0.18 350) 100%) !important;
+  background-size: 200% 200% !important;
+  -webkit-background-clip: text !important; background-clip: text !important;
+  -webkit-text-fill-color: transparent !important; color: transparent !important;
+  animation: chromeShimmer 6s linear infinite;
+}
+body[data-theme="chrome"] .art-byline { font-family: "IBM Plex Mono", monospace !important; font-style: normal !important; font-size: 11px !important; color: oklch(60% 0.06 270) !important; border-bottom-color: oklch(28% 0.04 270 / 0.6) !important; letter-spacing: 0.3px; }
+body[data-theme="chrome"] .art-body { font-family: "Space Grotesk", sans-serif !important; font-size: 14.5px !important; line-height: 1.78 !important; color: oklch(82% 0.02 250) !important; }
+body[data-theme="chrome"] .art-body p:first-of-type::first-letter {
+  font-family: "Audiowide", sans-serif !important; font-size: 64px !important; line-height: 0.85 !important; padding: 8px 12px 0 0 !important;
+  background: linear-gradient(135deg, oklch(85% 0.18 200) 0%, oklch(85% 0.18 290) 50%, oklch(85% 0.18 350) 100%) !important;
+  background-size: 200% 200% !important;
+  -webkit-background-clip: text !important; background-clip: text !important;
+  -webkit-text-fill-color: transparent !important; color: transparent !important;
+  filter: drop-shadow(0 0 8px oklch(70% 0.18 290 / 0.6));
+  animation: chromeShimmer 6s linear infinite;
+}
+body[data-theme="chrome"] .art-body em { color: oklch(88% 0.10 285) !important; font-style: italic; }
+body[data-theme="chrome"] .art-body h2 { font-family: "Audiowide", sans-serif !important; font-weight: 400 !important; font-size: 18px !important; color: oklch(94% 0.04 270) !important; letter-spacing: 0 !important; margin: 36px 0 14px !important; text-shadow: 0 0 8px oklch(50% 0.16 290 / 0.3); }
+body[data-theme="chrome"] .art-body blockquote { border-left: 2px solid transparent !important; border-image: linear-gradient(180deg, oklch(80% 0.18 200), oklch(80% 0.18 290), oklch(80% 0.18 350)) 1; color: oklch(85% 0.06 280) !important; font-style: italic; background: linear-gradient(90deg, oklch(20% 0.06 280 / 0.35) 0%, transparent 100%); padding: 12px 0 12px 20px !important; margin: 28px 0 !important; }
+body[data-theme="chrome"] .art-body a,
+body[data-theme="chrome"] .art-body .ilink { color: oklch(82% 0.14 290) !important; text-decoration-color: oklch(70% 0.18 290 / 0.6) !important; text-shadow: 0 0 4px oklch(60% 0.18 290 / 0.4); }
+body[data-theme="chrome"] .art-body a:hover,
+body[data-theme="chrome"] .art-body .ilink:hover { color: oklch(92% 0.16 290) !important; text-shadow: 0 0 8px oklch(70% 0.20 290 / 0.7); }
+body[data-theme="chrome"] .art-body code { font-family: "IBM Plex Mono", monospace !important; background: linear-gradient(180deg, oklch(14% 0.04 270), oklch(10% 0.03 270)) !important; color: oklch(85% 0.14 200) !important; border: 1px solid oklch(28% 0.06 270); padding: 1px 6px !important; box-shadow: inset 0 1px 0 oklch(99% 0.05 200 / 0.06); }
+body[data-theme="chrome"] .art-foot { font-family: "IBM Plex Mono", monospace !important; font-size: 11px !important; color: oklch(60% 0.06 270) !important; border-top: 1px solid oklch(28% 0.04 270 / 0.6) !important; margin-top: 48px !important; padding-top: 22px !important; }
+body[data-theme="chrome"] .art-foot .more { color: oklch(82% 0.14 290) !important; text-shadow: 0 0 5px oklch(60% 0.18 290 / 0.4); }
+
+body[data-theme="chrome"] .browser-status { background: linear-gradient(180deg, oklch(85% 0.01 240) 0%, oklch(65% 0.02 245) 50%, oklch(78% 0.01 240) 100%) !important; border-top: 1px solid oklch(28% 0.03 250) !important; color: oklch(15% 0.02 250) !important; font-family: "Michroma", sans-serif !important; font-size: 9px !important; letter-spacing: 1.2px; text-transform: uppercase; box-shadow: inset 0 1px 0 oklch(99% 0 0 / 0.5); }
+body[data-theme="chrome"] .browser-status .progress { background: oklch(15% 0.04 265) !important; border: 1px solid oklch(28% 0.04 265) !important; box-shadow: inset 0 1px 2px oklch(2% 0.02 270 / 0.7); }
+body[data-theme="chrome"] .browser-status .progress-bar { background: linear-gradient(180deg, oklch(85% 0.18 200) 0%, oklch(70% 0.18 290) 50%, oklch(80% 0.18 320) 100%) !important; box-shadow: inset 0 1px 0 oklch(99% 0.05 200 / 0.5), 0 0 6px oklch(70% 0.18 290 / 0.8); }