@font-face {
  font-family: 'W95FA';
  src: url('../fonts/w95f.woff2') format('woff2'),
       url('../fonts/w95f.woff') format('woff'),
       url('../fonts/W95F.otf') format('opentype');
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: 'Reenie Beanie';
  src: url('../fonts/ReenieBeanie.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; background: #6f9fc7; }
.cmdbar {
  position: sticky; top: 0; z-index: 100;
  background:  #000080; color: #eaeaea;
  font-family: 'W95FA', ui-monospace, monospace;
  font-size: clamp(15px, 1.5vw, 22px); line-height: 1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em;
  padding: 0.5em 1em;
}
.cmdbar a, .sitefoot a { color: #eaeaea; text-decoration: none; }
.cmdbar a:hover, .sitefoot a:hover { background: #eaeaea; color: #000; }
.cmdbar a, .sitefoot a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #ffd23f; outline-offset: 3px;
}
.cmdbar .cmd-prompt, .sitefoot .cmd-prompt { color: yellow; }
.cmdbar .cmd-sep, .sitefoot .cmd-sep { color: #7a7a7a; }
.cmdbar .cmd-cur, .sitefoot .cmd-cur { color: yellow; animation: blink 1s steps(1) infinite; margin-left: -0.2em; }
body {
  font-family: 'W95FA', ui-monospace, monospace;
  color: #10202e;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
/* screen-reader-only — used for page h1s the visual design carries as artwork instead */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.stage {
  position: relative;
  width: 100%;
  max-width: 2500px;
  margin: 0 auto;
  aspect-ratio: 1925 / 4300;
  background-image: url('../img/sky-planet-master.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  font-size: clamp(9px, 1.06vw, 20.4px); /* ~ 20.4px at 1925 stage width */
  container-type: size; /* lets children offset in cqw/cqh = % of the stage (used by the shared star nudge) */
}
.obj { position: absolute; }
.obj img { width: 100%; height: 100%; object-fit: contain; }
.cap {
  position: absolute;
  color:  #000080; font-family: 'Reenie Beanie', cursive; z-index: 14;
  pointer-events: none;
  font-size: 2em; line-height: 1.1;
}
.cap.c1 { left: 55%;  top: 3%; width: 100%;  }
.cap.c2 { left: 58%; top: 23%; width: 100%; }
.cap.c3 { left: 15%;  top: 81%; width: 100%; }
.cap.c4 { left: 10%; top: 17%; width: 100%; }
.cap.c5 { left: 68%; top: 67%; width: 100%; }
.cap.c6 { left: 70%; top: 98%; width: 100%; }
.o-cursortrail { left: 10%; top: 11%; width: 7%; aspect-ratio: 1/1; z-index: 99; pointer-events: none; }
.cloud { z-index: 0; pointer-events: none; }
.cloud-a { left: -5%; top: -5%; width: 50%; aspect-ratio: 1178/1528; }
.cloud-b { left: 40%;  top: 5%;   width: 80%; aspect-ratio: 1178/1528; }
.cloud-c { left: -5%;  top: 30%;  width: 60%; aspect-ratio: 1178/1528; }
.lift { will-change: transform; }
.lift.lifted { filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.o-sticky   { left: 74.75%; top: 13.28%; width: 18.13%; aspect-ratio: 349/344; z-index: 99; }
.o-sticky > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.o-sticky .sticky-copy {
  position: absolute; left: 12%; top: 16%; right: 12%; bottom: 12%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Reenie Beanie', cursive; color: #000080;
  font-size: 1.7em; line-height: 1.5; transform: rotate(12deg);
}

.win95 {
  position: absolute;
  background: #bfbfbf;
  border: 1px solid #000;
  box-shadow: inset 2px 2px 0 #fff, inset -1px -1px 0 #808080;
  color: #000;
  font-family: 'W95FA', monospace;
  z-index: 0;
}
.win95 .titlebar {
  position: absolute; left: 4px; top: 4px; right: 4px; height: 1.3em; min-height: 21px;
  background: linear-gradient(90deg, #000080, #0f388c);
  display: flex; align-items: center; padding: 0 0.2em;
}
.win95 .titlebar .t-title { color: #fff; font-size: 1.1em; line-height: 1; padding-left: 0.2em; padding-top: 0.2em; letter-spacing: .02em; }
.win95 .titlebar .t-btns { margin-left: auto; display: flex; gap: 2px; }
.win95 .t-btn {
  width: 1.15em; height: 1em; min-width: 16px; min-height: 16px;
  background: #bfbfbf; border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff;
  display: grid; place-items: center; font-size: 0.75em; color: #000; cursor: default;
  font-family: 'W95FA', monospace; font-weight: 700;
}
.win95 .win-body { position: absolute; left: 4px; right: 4px; top: calc(1.3em + 21px); bottom: 6px; }
.w95btn {
  background: #bfbfbf; border: 1px solid #000;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #808080;
  font-family: 'W95FA', monospace; font-weight: 700; font-size: 1em; color: #000;
  padding: 0.7em 1em; cursor: pointer;
}
.w95btn:active { box-shadow: inset -2px -2px 0 #fff, inset 2px 2px 0 #808080; }
.faq-win { z-index: 0; }
.faq-win .win-body {
  position: static; inset: auto;
  padding: calc(1.4em + 21px) 1.5em 1.5em 4em; /* top clears the title bar; left clears the error icon */
}
.faq-win .err-icon {
  position: absolute; left: 1.3em; top: calc(1.3em + 22px); width: 2em; height: 2em; border-radius: 50%;
  background: #d43d2f; display: grid; place-items: center;
}
.faq-win .err-icon::before { content: "×"; color: #fff; font-family: 'W95FA', monospace; font-weight: 700; font-size: 1.5em; line-height: 1; }
.faq-win h3 { font-family: 'W95FA', monospace;  text-transform: uppercase; font-size: 1.3em; margin: 0 0 0.8em; }
.faq-win .a { font-family: 'W95FA', monospace; font-weight: 700; font-size: 1.4em; line-height: 1.35; color: #000; }
.faq-win .btn-row { position: static; margin-top: 0.8em; display: flex; gap: 0.55em; justify-content: center; }
.faq-plan    { left: 13.09%; top: 4.92%;  width: 33.14%; }
.faq-morning { left: 30.13%; top: 7.94%;  width: 33.14%; }
.faq-wrap    { left: 45.97%; top: 10.91%; width: 33.14%; }
.o-monitor .screen label { font-size: 1.5em; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 0.5em;}
.o-monitor .screen form { display: flex; flex-direction: column; gap: 0.9em; }
.o-monitor .screen input {
  background: rgba(0,0,0,.35); border: 1px solid  #000080; color: #d9f7c4;
  font-family: 'W95FA', monospace; font-size: 1.3em; padding: 0.4em 0.4em; width: 100%;
}
.o-monitor .screen button {
  background:  #000080; border: 1px solid #5c7a52; color: #cfe6c8; 
  font-family: 'W95FA', monospace; text-transform: uppercase; font-size: 1.3em; padding: 0.4em 0.4em; cursor: pointer;
}
.o-monitor .screen {
  position: absolute; left: 42%; top: 45%; width: 18%; height: 42%;
  color: #cfe6c8; font-family: 'W95FA', monospace; display: flex; flex-direction: column; gap: 0.4em;
  pointer-events: auto; /* form stays clickable even though the monitor art passes clicks through */
}
.o-monitor  { left: -25%; top: 6%; width: 110%; aspect-ratio: 1016/1139; z-index: 20; pointer-events: none; }
.o-mouse    { left: 41.20%; top: 20%; width: 80%; aspect-ratio: 1353/902;  z-index: 1; touch-action: none; pointer-events: none; } /* z:1 = above note/paint-win/clouds (all z:0) so the whole mouse stays grabbable; still below monitor (z:20) so the wire sits behind it */
/* mouse.png's transparent box is ~2× the visible cutout, so the figure used to intercept clicks on empty sky.
   Hit-test only the mouse+cord shape instead: the figure passes events through, the IMG takes them and clips
   its hit area to the cutout's alpha hull. The clip sits on the img (not the figure) because pages rotate/flip
   the img — clip-path applies before transform, so the hit shape rides along. Drag still works (events bubble
   from img to the Draggable figure; cursor:grab inherits down). */
.o-mouse img {
  pointer-events: auto; touch-action: none;
  clip-path: polygon(22% 20%, 54% 19%, 61% 27%, 66% 40%, 70% 55%, 70% 85%, 66% 94%, 59% 99%, 49% 97%, 42% 87%, 36% 65%, 32% 55%, 16% 58%, 0% 60%, 0% 42%, 10% 40%, 20% 28%);
}
/* MOVE BOTH STARS TOGETHER: change --star-x / --star-y below (in cqw/cqh = % of the stage). Same distance for both, so the pair moves as one. Each star keeps its own left/top. */
.o-star2, .o-star1 { --star-x: 22cqw; --star-y: 4cqh; translate: var(--star-x) var(--star-y); }
.o-star2    { left: 62%; top: 41%; width: 5%;  aspect-ratio: 160/148; z-index: 22; pointer-events: none; }
.o-star1    { left: 60%; top: 40%; width: 3%;  aspect-ratio: 93/82;   z-index: 22; pointer-events: none; }
.paint-win { left: 8%; top: 47%; width: 41.4%; aspect-ratio: 799/860; z-index: 0; }
.paint-content {
  position: absolute; left: 11.5%; top: 9%; right: 4%; bottom: 8%;
  overflow: auto; color: #00008b;
  font-family: 'W95FA', monospace;
}
/* paint-window type scale unified with the subpage va-* scale 2026-07-11 (h4 = subpage h1, p = subpage body) */
.paint-content h4, .paint-content .paint-heading { font-size: 3.8em; margin-bottom: 0.3em; font-weight: 400; }
.paint-content p { font-size: 1.3em; line-height: 1.4; margin-bottom: 0.6em; }
.paint-content a { color: #00008b; font-size: 1em; }
/* win95 scrollbar inside the paint window (all pages — the OS-default bar broke the retro look) */
.paint-content { scrollbar-width: thin; scrollbar-color: #bfbfbf #f4f4f4; }
.paint-content::-webkit-scrollbar { width: 14px; }
.paint-content::-webkit-scrollbar-track { background: #f4f4f4; border-left: 1px solid #000; }
.paint-content::-webkit-scrollbar-thumb {
  background: #bfbfbf; border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
/* loopstack demo window inside the homepage paint window — a win95 console the
   typewriter runs in (motion-build.js); with motion off the lines just show. */
.pd-win { background: #fff; border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,.22); margin: 0.4em 0 0.8em; font-family: 'W95FA', monospace; }
.pd-bar { display: flex; align-items: center; gap: 0.35em; background: linear-gradient(90deg, #000080, #0f388c); padding: 0.15em 0.3em; }
.pd-title { color: #fff; font-size: 0.95em; } /* = subpage .va-win-title */
.pd-btns { margin-left: auto; display: flex; gap: 2px; }
.pd-btns .t-btn { width: 1.15em; height: 1em; min-width: 15px; min-height: 13px; background: #bfbfbf; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff; display: grid; place-items: center; font-size: 0.75em; color: #000; font-weight: 700; }
.pd-body { padding: 0.6em 0.7em; min-height: 8em; }
.pd-body p { font-size: 1.02em; line-height: 1.45; margin: 0; color: #10202e; } /* = subpage .va-stats li */
.pd-cmd { color: #000080; font-weight: 700; }
.pd-ok { color: #0a6b28; font-weight: 700; }
.pd-price { font-size: 1.3em; } /* = paint-content p */
.pd-mark { background: #ffd23f; color: #1a1a1a; padding: 0 0.2em; font-weight: 700; }
.pd-body .cur { animation: blink 1s steps(1) infinite; }
.folder-grid { display: contents; }
.o-folder   { width: 29%; aspect-ratio: 1/1; z-index: 24;}
.o-folder > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.o-folder.tl { left: 48%; top: 46.5%; }
.o-folder.tr { left: 70%; top: 46.5%; }
.o-folder.bl { left: 48%; top: 55.5%; }
.o-folder.br { left: 70%; top: 55.5%; }
.o-folder .folder-name {
  position: absolute; left: 44%; top: 49%;
  font-family: 'Reenie Beanie', cursive; color: #000080;
  font-size: 2.5em; line-height: 1; transform: rotate(-8deg);
  pointer-events: none;
}
.folders-label { left: 55%; top: 45%; width: 40%; z-index: 25; }
.folders-label a { font-family: 'Reenie Beanie', cursive; font-size: 3em; color: white; text-decoration: none; }
.o-wordmark { left: -15%;  top: 60%; width: 100%; aspect-ratio: 1402/987; z-index: 15; pointer-events: none; }
.o-note { left: 43%; top: 60%; width: 70%; aspect-ratio: 743/1074; z-index: 0; }
.o-note > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.note-copy {
  position: absolute; left: 29%; top: 33%;
  color:  #000080; font-family: 'Reenie Beanie', cursive;
  font-size: 2.2em; line-height: 1.35; /* unified note size, all pages 2026-07-11 */
  text-align: right;
}
.note-sig { display: block; margin-top: 1em; }
.bsod {
  position: absolute;
  left: 52.0%; top: 85%; width: 40.05%; aspect-ratio: 771/500;
  background:  #000080; color: #dfe7ff; font-family: 'W95FA', monospace;
  padding: 1.1em 1.3em; z-index: 29; display: flex; flex-direction: column; gap: 0.5em;
  box-shadow: 0 6px 26px rgba(0,0,20,.4);
}
.bsod .chip { align-self: center; background: #dfe7ff; color:  #000080; padding: 0 0.8em; font-size: 1.5em; }
.bsod .body { font-size: 1.4em; line-height: 1.28; margin-top: 5%;}
.bsod .cta { margin-top: auto; }
.bsod .cta a { color: #fff; font-size: 2em; text-decoration: none; letter-spacing: .03em; }
.bsod .cta a:hover { background: #dfe7ff; color:  #000080; }
.bsod .cur { animation: blink 1s steps(1) infinite; }
/* signup state: JS swaps the CTA link for `> [input]_ ......... ✓` */
.bsod .cta.is-signup { display: flex; align-items: baseline; font-size: 2em; color: #fff; letter-spacing: .03em; }
.bsod .cta .bsod-mail {
  background: transparent; border: 0; border-bottom: 2px solid rgba(255,255,255,.55); outline: none; padding: 0 0 0.05em;
  font: inherit; color: inherit; letter-spacing: inherit;
  caret-color: transparent; /* the blinking _ after the input is the caret */
  margin-left: 0.5ch; min-width: 14ch;
}
.bsod .cta .bsod-mail.is-invalid { color: #ffb3b3; }
.bsod .cta.is-signup .cur { margin-left: 0.1ch; }
.bsod .cta .bsod-ok {
  margin-left: auto; background: transparent; border: 0; padding: 0 0.2em;
  font: inherit; color: inherit; cursor: pointer;
}
.bsod .cta .bsod-ok:hover { background: #dfe7ff; color: #000080; }
.faq-b1 { left: 4.16%;  top: 83.7%; width: 35%; }
.faq-b2 { left: 13.77%; top: 87.5%; width: 35%; }
.faq-b3 { left: 8.57%;  top: 91.5%; width: 35%; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 760px) {
  .cmdbar {
  font-size: clamp(12px, 1vw, 18px); line-height: 1;
}
  .stage {
    width: 100%; max-width: 760px;
    margin: 0 auto;
    aspect-ratio: 440 / 2208;
    background-size: cover; background-position: top center;
    overflow: hidden;
    font-size: clamp(7px, 2.4vw, 10.5px);
  }
  .o-cursortrail { left: 6%; top: 1%; width: 10%; aspect-ratio: 1/1; z-index: 99; pointer-events: none; }
  .cloud-a { left: -20%;  top: 10%;   width: 90%; aspect-ratio: 1178/1528; }
.cloud-b { left: 40%;  top: -5%;   width: 90%; aspect-ratio: 1178/1528; }
.cloud-c {display: none; }
  .cap.c2, .cap.c3, .cap.c4, .cap.c5, .cap.c6 { display: none; }
  .cap.c1 { left: 25%; top: 1%; width: 68%; font-size: 1.5em; z-index: 14; }
  .faq-wrap  { left: 5%;  top: 4%;  width: 90%; z-index: 0; }   /* Session Wrap window */
  .o-sticky  { left: 65%; top: 11%; width: 30%; aspect-ratio: 349/344; z-index: 99; }
  .o-mouse   { left: -10%;  top: 11%; width: 70%; aspect-ratio: 1353/902; z-index: 0; }
  .o-mouse img { transform: scaleX(-1); rotate: 24deg;}
  .o-monitor { left: -11%; top: 8%; width: 150%; aspect-ratio: 1016/1139; z-index: 20; pointer-events: none; }
  .folders-label { display: none;}
  .folder-grid {
    position: absolute; left: 0%; top: 20.5%; width: 58%; z-index: 24;
    display: flex; flex-direction: column; gap: 0;}
  .folder-grid > .o-folder { position: relative; left: auto; top: auto; width: 60%; aspect-ratio: 1/1; }
  .folder-grid > .o-folder + .o-folder { margin-top: -12%; }
  .o-note   { left: 50%; top: 77%;  width: 60%; aspect-ratio: 743/1074; z-index: 0; }
  .paint-win{ left: 5%; top: 43%;  width: 90%; aspect-ratio: 799/860; z-index: 0; }
  .o-wordmark { left: -25%; top: 27%; width: 150%; aspect-ratio: 1402/987; z-index: 15; pointer-events: none; }
  .bsod { left: 5%;  top: 64%;  width: 90%; aspect-ratio: 750/450; z-index: 29; }
  .bsod .body { font-size: 1.5em; line-height: 1.28; margin-top: 5%;}
  .folder-grid > .o-folder.tl,
  .folder-grid > .o-folder.br { display: none; }
  .faq-plan, .faq-morning,
  .o-star1, .o-star2 { display: none; }
  .faq-b1 { top: 77%; left: 6%; width: 55%; }
  .faq-b2 { top: 82%; left: 6%; width: 55%; }
  .faq-b3 { top: 87%; left: 6%; width: 55%; }
  .o-sticky .sticky-copy { font-size: 1.6em; }
  .o-note .note-copy { font-size: 1.6em; left: 26%;  width: 48%; text-align: right;} /* unified note size, all pages 2026-07-11 */
  .note-br { display: none; }
  .o-folder .folder-name { font-size: 1.5em; }
  .folders-label a { font-size: 1.9em; }
  .faq-win { aspect-ratio: auto; }
  /* paint-window interior text — one consistent mobile step-down; same rule on
     all 4 pages' mobile blocks (starting value, tune freely) */
  .paint-content { font-size: 1em; }
}
.o-monitor .screen label { font-size: 1.3em; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 0.5em;}
.o-monitor .screen form { display: flex; flex-direction: column; gap: 0.9em; }
.o-monitor .screen input {
  background: rgba(0,0,0,.35); border: 1px solid  #000080; color: #d9f7c4;
  font-family: 'W95FA', monospace; font-size: 1.3em; padding: 0.4em 0.4em; width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .bsod .cur { animation: none; }

}

/* ===== site footer — the cmdbar's bottom mirror, black bg (Lucky's call), all pages ===== */
.sitefoot {
  background: #000080; color: #eaeaea;
  font-family: 'W95FA', ui-monospace, monospace;
    font-size: clamp(12px, 1vw, 18px); line-height: 1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em;
  padding: 0.5em 1em;
}

/* Controls keep the desktop-art proportions, but their interactive boxes meet
   the 44px pointer target used for touch and motor-accessibility review. */
.w95btn, .pw-icon, .copy-btn, .pw-back, .va-btn, .va-tab,
.o-monitor .screen input, .o-monitor .screen button,
.bsod .cta a, .bsod .cta button {
  min-width: 44px; min-height: 44px;
}
.paint-content a, .bsod .cta a {
  display: inline-flex; align-items: center;
  min-width: 44px; min-height: 44px;
}