aero: quiet-web nostalgia pass (sticky note, webring, neighbors, uptime)

Implements the Frutiger Aero "Quiet Web" design handoff, merged into the
existing site without touching content:
- aero.css: append AERO — DEEPER POLISH (glass sheen, icon halo, horizon
  ripple, plus aero+chrome styles for all new widgets)
- index.html: Neighbors icon + #w-neighbors window, #webring pill, #sticky
  note, #uptime ribbon, Caveat font, sticky-drag + webring JS
- enter.html: welcome droplets, indie-pledge strip, footer webring, Caveat
  font (gate sheen + logo halo via CSS)

aero.js left unchanged (current version newer than handoff's).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

1 files changed, 604 insertions, 0 deletions

diff --git a/aero.css b/aero.css
index f198061..0781382 100644
--- a/aero.css
+++ b/aero.css
@@ -1230,3 +1230,607 @@ body[data-theme="chrome"] .art-foot .more { color: oklch(82% 0.14 290) !importan
 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); }
+
+/* ================================================================
+   AERO — DEEPER POLISH (Frutiger / web-2.0 indie nostalgia)
+   Glossy holographic shimmer on glass, water ripple at the
+   horizon, breathing icon halos, plus widgets that capture the
+   pre-corporate-internet feel: a sticky note, a webring strip,
+   and a "Neighbors" buddy list.
+   ================================================================ */
+
+/* Slow holographic sweep across every glass panel (aero only) */
+/* (.win is already position: absolute — don't re-set position here or
+   it'll override the inline drag positioning logic.) */
+body[data-theme="aero"] .glass::after {
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(115deg,
+    transparent 30%,
+    oklch(99% 0.04 200 / 0.20) 47%,
+    oklch(96% 0.10 145 / 0.10) 50%,
+    oklch(99% 0.04 200 / 0.20) 53%,
+    transparent 70%);
+  background-size: 250% 100%;
+  animation: aeroSheen 11s ease-in-out infinite;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  border-radius: inherit;
+  /* clip the gradient to the rounded panel without breaking
+     resize handles which sit outside the panel bounds */
+  overflow: hidden;
+}
+@keyframes aeroSheen {
+  0%, 100% { background-position: 200% 0%; }
+  50%      { background-position: -40% 0%; }
+}
+
+/* don't apply sheen to inner glass children like the browser window's
+   inner page (they're already inside .glass) */
+body[data-theme="aero"] .glass .glass::after { display: none; }
+
+/* Icon halo — gentle breathing glow + brighter specular */
+body[data-theme="aero"] .icon .glyph {
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.95),
+    inset 0 -3px 6px rgba(40,80,140,0.4),
+    0 4px 14px rgba(40,80,140,0.38),
+    0 0 0 1px rgba(255,255,255,0.25);
+  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
+}
+body[data-theme="aero"] .icon:hover .glyph {
+  transform: translateY(-3px) scale(1.05);
+  filter: saturate(1.15) brightness(1.05);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,1),
+    inset 0 -3px 6px rgba(40,80,140,0.45),
+    0 8px 22px rgba(40,80,140,0.45),
+    0 0 22px oklch(85% 0.14 200 / 0.5);
+}
+body[data-theme="aero"] .icon .glyph::before {
+  background: linear-gradient(to bottom,
+    rgba(255,255,255,0.95) 0%,
+    rgba(255,255,255,0.35) 60%,
+    transparent 100%);
+}
+
+/* Horizon water-ripple at the bottom of the desktop — reflection vibe */
+body[data-theme="aero"] .desk::before {
+  content: "";
+  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
+  background:
+    radial-gradient(120% 60% at 50% 110%, oklch(86% 0.08 165 / 0.45) 0%, transparent 70%),
+    repeating-linear-gradient(0deg,
+      oklch(99% 0.02 200 / 0.06) 0px, oklch(99% 0.02 200 / 0.06) 1px,
+      transparent 1px, transparent 5px);
+  pointer-events: none;
+  z-index: 0;
+  mask-image: linear-gradient(180deg, transparent 0%, black 60%, black 100%);
+  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 60%, black 100%);
+}
+body[data-theme="aero"] .desk::after {
+  content: "";
+  position: absolute; left: 0; right: 0; bottom: -5%; height: 22%;
+  background:
+    radial-gradient(80% 100% at 25% 100%, oklch(94% 0.08 145 / 0.35) 0%, transparent 60%),
+    radial-gradient(80% 100% at 75% 100%, oklch(90% 0.10 200 / 0.35) 0%, transparent 60%);
+  filter: blur(8px);
+  pointer-events: none;
+  z-index: 0;
+  animation: aeroHorizon 16s ease-in-out infinite alternate;
+}
+@keyframes aeroHorizon {
+  0%   { transform: translateX(-2%); }
+  100% { transform: translateX(2%); }
+}
+
+/* Aqua buttons — add tasty iridescent rim in aero */
+body[data-theme="aero"] .aqua::after {
+  content: "";
+  position: absolute; inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg,
+    oklch(98% 0.04 200 / 0.4),
+    oklch(96% 0.10 145 / 0.3) 50%,
+    oklch(98% 0.04 200 / 0.4));
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  pointer-events: none;
+}
+
+/* ============= STICKY NOTE (pinned to desktop) ============= */
+.sticky-note {
+  position: absolute;
+  width: 200px;
+  padding: 18px 16px 22px;
+  background: linear-gradient(180deg, oklch(96% 0.07 95) 0%, oklch(92% 0.11 92) 100%);
+  border: 1px solid oklch(85% 0.10 92);
+  box-shadow:
+    inset 0 1px 0 oklch(99% 0.04 95),
+    0 1px 0 oklch(80% 0.08 90),
+    0 18px 30px -10px rgba(80,60,20,0.35),
+    0 4px 8px rgba(80,60,20,0.15);
+  font-family: "Caveat", "Comic Sans MS", "Marker Felt", cursive;
+  font-size: 17px;
+  line-height: 1.35;
+  color: oklch(35% 0.08 60);
+  transform: rotate(-3.2deg);
+  z-index: 8;
+  cursor: grab;
+  user-select: none;
+}
+.sticky-note::before {
+  /* tape strip across the top */
+  content: "";
+  position: absolute;
+  left: 50%; top: -10px; transform: translateX(-50%) rotate(-2deg);
+  width: 70px; height: 18px;
+  background: linear-gradient(180deg,
+    oklch(96% 0.02 200 / 0.55) 0%,
+    oklch(92% 0.04 200 / 0.5) 100%);
+  border: 1px solid oklch(85% 0.05 200 / 0.5);
+  border-top-color: oklch(99% 0.02 200 / 0.7);
+  box-shadow: 0 2px 4px rgba(40,80,140,0.15);
+}
+.sticky-note::after {
+  /* faint torn edge at the bottom */
+  content: "";
+  position: absolute;
+  left: 4px; right: 4px; bottom: 0; height: 4px;
+  background: linear-gradient(180deg, transparent, oklch(80% 0.10 90 / 0.4));
+  border-radius: 0 0 2px 2px;
+}
+.sticky-note .sn-head {
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 800;
+  font-size: 9px;
+  letter-spacing: 1.6px;
+  text-transform: uppercase;
+  color: oklch(50% 0.12 60);
+  border-bottom: 1px dashed oklch(70% 0.10 70);
+  padding-bottom: 4px;
+  margin-bottom: 6px;
+  text-align: center;
+}
+.sticky-note .sn-sig {
+  display: block;
+  margin-top: 8px;
+  font-size: 14px;
+  color: oklch(45% 0.12 50);
+  opacity: 0.85;
+  text-align: right;
+}
+.sticky-note .sn-underline {
+  text-decoration: underline;
+  text-decoration-color: oklch(55% 0.16 30);
+  text-decoration-thickness: 1.5px;
+}
+/* chrome theme — sticky note becomes silver foil */
+body[data-theme="chrome"] .sticky-note {
+  background: linear-gradient(180deg,
+    oklch(90% 0.01 240) 0%,
+    oklch(78% 0.01 240) 50%,
+    oklch(88% 0.01 240) 100%);
+  border: 1px solid oklch(35% 0.03 250);
+  color: oklch(15% 0.02 250);
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 11px;
+  letter-spacing: 0.3px;
+  box-shadow:
+    inset 0 1px 0 oklch(99% 0 0),
+    inset 0 -1px 0 oklch(45% 0.02 250),
+    0 18px 30px -10px oklch(5% 0.03 270 / 0.6);
+}
+body[data-theme="chrome"] .sticky-note::before {
+  background: linear-gradient(180deg,
+    oklch(80% 0.06 290 / 0.7),
+    oklch(60% 0.10 290 / 0.6));
+  border-color: oklch(35% 0.10 290 / 0.7);
+}
+body[data-theme="chrome"] .sticky-note .sn-head {
+  font-family: "Michroma", sans-serif;
+  color: oklch(75% 0.14 290);
+  border-bottom-color: oklch(45% 0.06 270);
+}
+body[data-theme="chrome"] .sticky-note .sn-sig {
+  font-family: "IBM Plex Mono", monospace;
+  color: oklch(70% 0.10 290);
+}
+
+/* ============= WEBRING STRIP ============= */
+.webring {
+  position: absolute;
+  left: 50%; transform: translateX(-50%);
+  top: 16px;
+  z-index: 150;
+  display: flex; align-items: center; gap: 0;
+  padding: 4px 6px;
+  border-radius: 999px;
+  background: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(210,232,250,0.45));
+  backdrop-filter: blur(16px) saturate(170%);
+  -webkit-backdrop-filter: blur(16px) saturate(170%);
+  border: 1px solid rgba(255,255,255,0.85);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.95),
+    inset 0 -1px 0 rgba(120,160,200,0.25),
+    0 8px 24px rgba(40,80,140,0.28);
+  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  color: oklch(28% 0.06 240);
+  user-select: none;
+}
+.webring .wr-label {
+  padding: 0 12px 0 14px;
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: oklch(38% 0.13 220);
+  border-right: 1px solid rgba(120,160,200,0.35);
+  white-space: nowrap;
+}
+.webring .wr-label .wr-flower { font-size: 12px; margin-right: 4px; }
+.webring .wr-btn {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 6px 12px; border-radius: 999px;
+  border: 0; background: transparent;
+  font: inherit; color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+}
+.webring .wr-btn:hover {
+  background: rgba(255,255,255,0.55);
+  color: oklch(40% 0.16 230);
+}
+.webring .wr-btn.middle {
+  font-family: "IBM Plex Mono", monospace;
+  font-weight: 500;
+  font-size: 10px;
+  opacity: 0.75;
+  padding: 6px 8px;
+  cursor: default;
+}
+.webring .wr-btn.middle:hover { background: transparent; color: inherit; }
+
+body[data-theme="chrome"] .webring {
+  background: linear-gradient(180deg,
+    oklch(90% 0.01 240),
+    oklch(62% 0.02 250),
+    oklch(80% 0.01 240));
+  border: 1px solid oklch(35% 0.03 250);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  color: oklch(15% 0.02 250);
+  box-shadow:
+    inset 0 1px 0 oklch(99% 0 0),
+    inset 0 -1px 0 oklch(40% 0.02 250),
+    0 8px 24px oklch(5% 0.03 270);
+}
+body[data-theme="chrome"] .webring .wr-label {
+  font-family: "Michroma", sans-serif;
+  color: oklch(35% 0.18 290);
+  border-right-color: oklch(35% 0.03 250);
+  letter-spacing: 2.5px;
+}
+body[data-theme="chrome"] .webring .wr-btn {
+  font-family: "Michroma", sans-serif;
+  font-size: 9px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+body[data-theme="chrome"] .webring .wr-btn:hover {
+  background: oklch(45% 0.10 290 / 0.5);
+  color: oklch(96% 0.04 290);
+}
+
+/* ============= NEIGHBORS / BUDDY LIST ============= */
+.bud-list { display: flex; flex-direction: column; gap: 0; }
+.bud-row {
+  display: grid;
+  grid-template-columns: 12px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 4px;
+  border-bottom: 1px dotted oklch(72% 0.05 220);
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 120ms;
+}
+.bud-row:last-child { border-bottom: 0; }
+.bud-row:hover {
+  background: rgba(255,255,255,0.55);
+  padding-left: 8px;
+}
+.bud-led {
+  width: 8px; height: 8px; border-radius: 50%;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
+}
+.bud-led.on  {
+  background: radial-gradient(circle at 30% 30%, oklch(96% 0.18 145), oklch(60% 0.18 150));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 6px oklch(72% 0.18 145 / 0.7);
+}
+.bud-led.idle {
+  background: radial-gradient(circle at 30% 30%, oklch(95% 0.16 85), oklch(70% 0.18 75));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 6px oklch(75% 0.18 80 / 0.5);
+}
+.bud-led.off {
+  background: radial-gradient(circle at 30% 30%, oklch(78% 0.02 230), oklch(55% 0.03 235));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
+}
+.bud-name {
+  font-weight: 700;
+  color: oklch(25% 0.06 230);
+  letter-spacing: -0.1px;
+}
+.bud-host {
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 10px;
+  opacity: 0.6;
+  font-weight: 500;
+}
+.bud-mood {
+  font-size: 11px;
+  font-style: italic;
+  color: oklch(45% 0.10 235);
+  text-align: right;
+  max-width: 130px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bud-foot {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px dotted oklch(72% 0.05 220);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 10px;
+  font-family: "IBM Plex Mono", monospace;
+  opacity: 0.7;
+  color: oklch(35% 0.06 230);
+}
+.bud-foot a {
+  color: oklch(45% 0.14 230);
+  text-decoration: none;
+  border-bottom: 1px dotted oklch(55% 0.14 230);
+}
+
+body[data-theme="chrome"] .bud-row { border-bottom-color: oklch(50% 0.03 250 / 0.4); }
+body[data-theme="chrome"] .bud-name { color: oklch(12% 0.02 250); font-family: "Audiowide", "Space Grotesk", sans-serif; font-weight: 400; }
+body[data-theme="chrome"] .bud-host { color: oklch(60% 0.10 280); }
+body[data-theme="chrome"] .bud-mood { color: oklch(70% 0.10 290); }
+body[data-theme="chrome"] .bud-foot { border-top-color: oklch(50% 0.03 250 / 0.4); color: oklch(60% 0.08 280); }
+body[data-theme="chrome"] .bud-row:hover { background: oklch(35% 0.05 270 / 0.4); }
+
+/* ============= "LAST UPDATED" + UPTIME RIBBON ============= */
+.uptime-ribbon {
+  position: absolute;
+  left: 20px;
+  bottom: 88px;
+  z-index: 7;
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 14px 6px 10px;
+  border-radius: 999px;
+  background: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(210,235,250,0.45));
+  backdrop-filter: blur(12px) saturate(160%);
+  -webkit-backdrop-filter: blur(12px) saturate(160%);
+  border: 1px solid rgba(255,255,255,0.85);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.95),
+    0 6px 16px rgba(40,80,140,0.25);
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 10px;
+  letter-spacing: 0.4px;
+  color: oklch(32% 0.06 235);
+  user-select: none;
+  white-space: nowrap;
+}
+.uptime-ribbon .ur-led {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, oklch(96% 0.18 145), oklch(60% 0.18 150));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 6px oklch(72% 0.18 145 / 0.7);
+  animation: led-pulse 2.4s ease-in-out infinite;
+}
+.uptime-ribbon .ur-sep { opacity: 0.4; }
+
+body[data-theme="chrome"] .uptime-ribbon {
+  background: linear-gradient(180deg,
+    oklch(88% 0.01 240),
+    oklch(62% 0.02 250),
+    oklch(80% 0.01 240));
+  border: 1px solid oklch(35% 0.03 250);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  color: oklch(15% 0.02 250);
+  box-shadow:
+    inset 0 1px 0 oklch(99% 0 0),
+    0 6px 16px oklch(5% 0.03 270);
+}
+
+/* ============= WELCOME — WEBRING + INDIE STRIP ============= */
+.welcome-webring {
+  position: fixed;
+  left: 50%; transform: translateX(-50%);
+  bottom: 64px;
+  z-index: 4;
+  display: flex; align-items: center; gap: 0;
+  padding: 5px 6px;
+  border-radius: 999px;
+  background: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(210,232,250,0.45));
+  backdrop-filter: blur(16px) saturate(170%);
+  -webkit-backdrop-filter: blur(16px) saturate(170%);
+  border: 1px solid rgba(255,255,255,0.85);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.95),
+    0 8px 24px rgba(40,80,140,0.28);
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 700;
+  font-size: 11px;
+  color: oklch(28% 0.06 240);
+}
+.welcome-webring .wr-label {
+  padding: 0 12px;
+  font-size: 9px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: oklch(38% 0.13 220);
+  white-space: nowrap;
+}
+.welcome-webring a {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 6px 11px;
+  border-radius: 999px;
+  text-decoration: none;
+  color: inherit;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+}
+.welcome-webring a:hover {
+  background: rgba(255,255,255,0.55);
+  color: oklch(40% 0.16 230);
+}
+.welcome-webring .wr-sep { width: 1px; height: 16px; background: rgba(120,160,200,0.3); }
+
+/* Water droplet decorations on welcome */
+.welcome-drops {
+  position: fixed; inset: 0; pointer-events: none; z-index: 0;
+}
+.welcome-drops .drop {
+  position: absolute;
+  border-radius: 50% 50% 48% 52% / 60% 60% 40% 40%;
+  background: radial-gradient(circle at 35% 28%,
+    rgba(255,255,255,0.92) 0%,
+    rgba(220,245,255,0.45) 18%,
+    rgba(180,225,250,0.18) 55%,
+    rgba(140,200,240,0.1) 100%);
+  border: 1px solid rgba(255,255,255,0.55);
+  box-shadow:
+    inset -4px -6px 12px rgba(80,140,200,0.2),
+    inset 3px 4px 8px rgba(255,255,255,0.5),
+    0 4px 14px rgba(120,180,240,0.18);
+}
+.welcome-drops .drop::after {
+  content: "";
+  position: absolute;
+  left: 22%; top: 18%;
+  width: 22%; height: 16%;
+  background: rgba(255,255,255,0.85);
+  border-radius: 50%;
+  filter: blur(0.4px);
+}
+
+/* "Made with love" indie strip — at the top of welcome */
+.indie-strip {
+  position: fixed; top: 22px; left: 26px;
+  z-index: 4;
+  display: flex; gap: 8px; flex-direction: column;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 10px;
+  letter-spacing: 0.4px;
+  color: oklch(28% 0.06 235);
+  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
+}
+.indie-strip .is-line {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.5);
+  border: 1px solid rgba(255,255,255,0.8);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
+  width: fit-content;
+  backdrop-filter: blur(10px);
+  white-space: nowrap;
+}
+.indie-strip .is-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, oklch(96% 0.18 145), oklch(60% 0.18 150));
+  box-shadow: 0 0 4px oklch(70% 0.18 145 / 0.8);
+}
+
+body[data-theme="chrome"] .indie-strip { color: oklch(85% 0.02 245); text-shadow: 0 1px 2px oklch(5% 0.03 270); }
+body[data-theme="chrome"] .indie-strip .is-line {
+  background: oklch(15% 0.04 270 / 0.6);
+  border: 1px solid oklch(50% 0.10 290 / 0.4);
+  backdrop-filter: blur(10px);
+}
+body[data-theme="chrome"] .welcome-webring {
+  background: linear-gradient(180deg,
+    oklch(90% 0.01 240),
+    oklch(62% 0.02 250),
+    oklch(80% 0.01 240));
+  border: 1px solid oklch(35% 0.03 250);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  color: oklch(15% 0.02 250);
+  font-family: "Michroma", sans-serif;
+  font-size: 9px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+body[data-theme="chrome"] .welcome-webring .wr-label {
+  color: oklch(35% 0.18 290);
+  letter-spacing: 2.5px;
+}
+body[data-theme="chrome"] .welcome-webring a:hover {
+  background: oklch(45% 0.10 290 / 0.5);
+  color: oklch(96% 0.04 290);
+}
+body[data-theme="chrome"] .welcome-drops .drop {
+  background: radial-gradient(circle at 35% 28%,
+    rgba(220,200,255,0.7) 0%,
+    rgba(160,140,220,0.25) 30%,
+    rgba(80,60,140,0.12) 80%);
+  border: 1px solid rgba(200,180,255,0.4);
+  box-shadow:
+    inset -4px -6px 12px rgba(40,20,100,0.4),
+    inset 3px 4px 8px rgba(220,200,255,0.4),
+    0 4px 14px oklch(40% 0.16 290 / 0.3);
+}
+
+/* Caveat for handwritten sticky */
+/* (Imported in HTML head — kept here so the file documents the dep) */
+
+/* Welcome gate — aero holographic sheen */
+body[data-theme="aero"] .gate {
+  overflow: hidden;
+}
+body[data-theme="aero"] .gate::after {
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(115deg,
+    transparent 28%,
+    oklch(99% 0.04 200 / 0.22) 45%,
+    oklch(96% 0.12 145 / 0.12) 50%,
+    oklch(99% 0.04 200 / 0.22) 55%,
+    transparent 72%);
+  background-size: 260% 100%;
+  animation: aeroSheen 9s ease-in-out infinite;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  border-radius: inherit;
+}
+
+/* Welcome mark — gentle floating ring of light (aero) */
+body[data-theme="aero"] .mark::after {
+  content: "";
+  position: absolute; inset: -6px;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg,
+    oklch(96% 0.10 145 / 0.0),
+    oklch(96% 0.14 145 / 0.55),
+    oklch(96% 0.10 200 / 0.55),
+    oklch(96% 0.12 145 / 0.0));
+  mask: radial-gradient(circle, transparent 56%, black 58%, black 64%, transparent 66%);
+  -webkit-mask: radial-gradient(circle, transparent 56%, black 58%, black 64%, transparent 66%);
+  animation: spin 18s linear infinite;
+  pointer-events: none;
+  opacity: 0.8;
+}