.stage {
  position: relative;
  width: 100%;
  max-width: 1925px;
  margin: 0 auto;
  aspect-ratio: 1925 / 2800;
  overflow: hidden;
  font-size: clamp(9px, 1.06vw, 20.4px);
  container-type: size;
  background-image: url('../img/sky-planet-master.webp');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.cap.c6 { left: 80%; top: 98%; width: 40%; }
.cap.c5 { left: 25%; top: 22%; width: 100%; }
.o-cursortrail { left: 20%; top: 4%; width: 5%; aspect-ratio: 1/1; z-index: 99; pointer-events: none; }
.faq-wrap    { left: 8%; top: 8%;  width: 45%; }
.faq-plan    { left: 50%;   top: 8.5%;  width: 45%; }
.faq-morning { left: 30.13%; top: 3%;  width: 45%; }
.note-copy {
  position: absolute; left: 27%; top: 33%; width: 45%;
  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;
}
.o-note { left: 56%; top: 12%; width: 50%; aspect-ratio: 743/1074; z-index: 0; }
.o-star2, .o-star1 { --star-x: 35cqw; --star-y: 43cqh; translate: var(--star-x) var(--star-y); }
.o-star2       { left: 56%; top: 27%; }
.o-star1       { left: 54%; top: 26%; }
.paint-win   { left: 3%; top: 25%; width: 60%; z-index: 24; } 
.o-mouse     { left: 60%; top: 42%; width: 40%;}
.o-mouse img { rotate: -5deg;}
.o-sticky   { left: 18%; top: 82%; width: 25%; aspect-ratio: 349/344; z-index: 90; }
.o-sticky2  { left: 2%; top: 73%; width: 25%; aspect-ratio: 349/344; z-index: 90; }
.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: #1c2233;
  font-size: 2.8em; line-height: 1.5; transform: rotate(12deg);
}
.o-sticky2 .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: #1c2233;
  font-size: 2.8em; line-height: 1.5; transform: rotate(12deg);
}

/* FAQ sticky hover-flip: question at rest, answer on hover/keyboard focus; JS toggles .is-flipped on tap (touch) */
.o-sticky, .o-sticky2 { cursor: help; }
.o-sticky .sticky-copy, .o-sticky2 .sticky-copy { display: grid; place-items: center; }
.sticky-copy .q, .sticky-copy .a { grid-area: 1 / 1; transition: opacity 0.25s ease; }
.sticky-copy .a { opacity: 0; font-size: 0.8em; line-height: 1.45; }
.o-sticky:hover .q,  .o-sticky:focus-visible .q,  .o-sticky.is-flipped .q,
.o-sticky2:hover .q, .o-sticky2:focus-visible .q, .o-sticky2.is-flipped .q { opacity: 0; }
.o-sticky:hover .a,  .o-sticky:focus-visible .a,  .o-sticky.is-flipped .a,
.o-sticky2:hover .a, .o-sticky2:focus-visible .a, .o-sticky2.is-flipped .a { opacity: 1; }
/* hovered/flipped sticky comes to front of its pair (base z:90; stays under nav z:100) */
.o-sticky:hover,  .o-sticky:focus-visible,  .o-sticky.is-flipped,
.o-sticky2:hover, .o-sticky2:focus-visible, .o-sticky2.is-flipped { z-index: 95; }

.bsod        { left: 46%; top: 75%; width: 50%; z-index: 0; }
.bsod .body { font-size: 1.4em; line-height: 1.28; margin-top: 5%;} /* unified with homepage bsod 2026-07-11 */
/* ============================================================
   PAINT-WINDOW CONTENT — retro-desktop containers
   The va-* block below is carried verbatim from loopstack.css
   (va-* is page-scoped; each subpage carries its own copy).
   Only the .pw-* rules at the bottom are new to prompts.
   ============================================================ */

/* Section eyebrow — yellow block label (2026-07-11 treatment, matches loopstack/vibe) */
.va-eyebrow {
  display: inline-block;
  font-family: 'W95FA', monospace;
  font-size: 1.2em; letter-spacing: .06em;
  background: #ffd23f; color: #1a1a1a;
  padding: 0.1em 0.1em; margin-bottom: 0.6em;
}

/* Section rhythm — space between the stacked containers */
.va-sec { margin: 0 0 2.2em; }
.va-sec h1, .va-sec .pw-title { font-size: 3.8em; line-height: 0.95; margin: 0.1em 0 0.3em; font-weight: 400; } /* .pw-title = the detail-view h2s (demoted from h1 for heading structure; every sizing property set so h1->h2 renders identical) */
.va-sec h2 { font-size: 2.2em; line-height: 1.1; margin: 0 0 0.5em; font-weight: 400; }
.va-hero p, .va-sec > p { font-size: 1.3em; line-height: 1.4; margin: 0 0 0.7em; }

/* Boxed win95 button (CTA links) — gray bevel (matches loopstack) */
.va-btn {
  display: inline-block;
  font-family: 'W95FA', monospace; font-size: 1.2em; letter-spacing: .02em;
  color: #000; text-decoration: none;
  background: #bfbfbf; border: 1px solid #000;
  box-shadow: inset 2px 2px 0 #d4d4d4, inset -2px -2px 0 #a2a2a2;
  padding: 0.5em 1.1em; margin: 0.3em 0 0.9em;
}
.va-btn:active { box-shadow: inset -2px -2px 0 #d4d4d4, inset 2px 2px 0 #a2a2a2; }

/* ---- WHAT YOU GET / DON'T = mini Notepad windows ---- */
.va-pad {
  background: #fff; border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
  font-family: 'W95FA', monospace;
}
.va-pad-bar {
  display: flex; align-items: center; gap: 0.35em;
  background: linear-gradient(90deg, #000080, #0f388c); padding: 0.15em 0.3em;
}
.va-pad-ico { color: #dfe7ff; font-size: 0.9em; }
.va-pad-title { color: #fff; font-size: 0.95em; }
.va-pad-btns { margin-left: auto; display: flex; gap: 2px; }
.va-pad-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.7em; color: #000; font-weight: 700;
}
.va-pad-body { padding: 0.6em 0.7em; background: #fff; }
.va-pad-body p { font-size: 1.15em; line-height: 1.4; color: #000; margin: 0 0 0.45em; }
.va-pad-body p:last-child { margin-bottom: 0; }

/* ---- code inline (used in wrap's automation section) ---- */
.va-sec code {
  font-family: 'W95FA', monospace; background: #fdf6e0; border: 1px solid #c9a52f;
  padding: 0 0.2em; color: #000080;
}

/* ============================================================
   PROMPT ICON-BROWSER — grid → detail views (prompts only)
   To add a prompt later: 1 .pw-icon button + 1 .pw-detail block.
   No JS change needed (handlers delegate by class + data-attr).
   ============================================================ */

/* View switching — grid vs one detail */
.pw-view[hidden] { display: none; }

/* the icon grid */
.pw-grid h4 { font-size: 2.2em; margin: 0 0 0.15em; font-weight: 400; }
.pw-grid > p { font-size: 1.3em; line-height: 1.35; margin: 0 0 1em; }
.pw-icons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2em 0.4em; margin-top: 0.6em;
}
.pw-icon {
  display: flex; flex-direction: column; align-items: center; gap: 0.5em;
  background: none; border: 0; padding: 0.4em 0.2em; cursor: pointer;
  font: inherit; color: inherit; text-align: center;
}
.pw-icon:focus-visible { outline: 2px dotted #000080; outline-offset: 3px; }
/* the W95 icon — original 32px pixel-art document, scaled crisp (no anti-alias) */
.pw-ico {
  width: 40px !important; height: 40px !important; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
/* desktop-shortcut feel: pressing dips the icon a touch */
.pw-icon:active .pw-ico { transform: translate(1px, 1px); }
.pw-label {
  font-family: 'W95FA', monospace; font-size: 1.05em; line-height: 1.15;
  color: #000080; max-width: 8em;
}
.pw-icon:hover .pw-label { text-decoration: underline; }

/* back button on a detail view */
.pw-back {
  display: inline-block; margin: 0 0 1em;
  font-family: 'W95FA', monospace; font-size: 1.1em; letter-spacing: .02em;
  color: #000; cursor: pointer;
  background: #bfbfbf; border: 1px solid #000;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #808080;
  padding: 0.35em 0.8em;
}
.pw-back:active { box-shadow: inset -2px -2px 0 #fff, inset 2px 2px 0 #808080; }

/* the prompt text inside its Notepad window */
.pw-prompt {
  margin: 0; font-family: 'W95FA', monospace; font-size: 0.92em; line-height: 1.5;
  color: #000; white-space: pre-wrap; word-break: break-word;
  max-height: 22em; overflow: auto;
  scrollbar-width: thin; scrollbar-color: #bfbfbf #f4f4f4;
}
/* win95 scrollbar on the prompt pane (matches .paint-content in build.css) */
.pw-prompt::-webkit-scrollbar { width: 14px; }
.pw-prompt::-webkit-scrollbar-track { background: #f4f4f4; border-left: 1px solid #000; }
.pw-prompt::-webkit-scrollbar-thumb {
  background: #bfbfbf; border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
/* copy button — styled like a va-btn pill (reuses .copy-btn[data-copy] JS) */
.pw-detail .copy-btn {
  display: inline-block; margin: 0.7em 0 0; cursor: pointer;
  font-family: 'W95FA', monospace; font-size: 1.05em; letter-spacing: .04em;
  text-transform: uppercase; color: #000;
  background: #bfbfbf; border: 1px solid #000;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #808080;
  padding: 0.4em 1em;
}
.pw-detail .copy-btn:active { box-shadow: inset -2px -2px 0 #fff, inset 2px 2px 0 #808080; }
.pw-detail .copy-btn.copied { background: #000080; color: #dfe7ff; }
.pw-note { font-size: 1.15em; line-height: 1.4; color: #00008b; margin: 0.6em 0 0; }

/* ---- education section under the icon grid (real content, reuses va-* widgets) ---- */
.pw-edu {
  margin-top: 1.8em;
}
.pw-edu h4 { font-size: 2.2em; line-height: 1.05; margin: 0.3em 0 0.5em; font-weight: 400; }
.pw-edu p { font-size: 1.25em; line-height: 1.45; margin: 0 0 0.7em; }
.pw-edu code {
  font-family: 'W95FA', monospace; background: #fdf6e0; border: 1px solid #c9a52f;
  padding: 0 0.2em; color: #000080;
}
.pw-edu .va-pad { margin-top: 1em; max-width: 22em; }
.pw-edu .va-pad-body p { margin: 0 0 0.3em; font-size: 1em; }
.pw-edu .va-pad-body p:last-child { margin-bottom: 0; }

/* ============================================================
   MOBILE — subpage stack (structure mirrors build.css's
   homepage 760px block; starting values, tune freely)
   ============================================================ */
@media (max-width: 760px) {
  .stage {
    width: 100%; max-width: 760px;
    margin: 0 auto;
    aspect-ratio: 440 / 1610;
    background-size: cover; background-position: bottom;
    overflow: hidden;
    font-size: clamp(7px, 2.4vw, 10.5px);
  }
  .o-cursortrail { left: 6%; top: 14%; width: 10%; z-index: 99; }
  .cap.c6 { display: none; }
  .cap.c5 { display: block; left: 11%; top: 2%; width: 84%; font-size: 1.5em; z-index: 14; }
  .faq-wrap  { left: 5%;  top: 4%;  width: 90%; z-index: 0; }   /* Session Wrap window */
  .faq-plan, .faq-morning,
  .o-star1, .o-star2 { display: none; }
  .o-note { left: 35%; top: 13%; width: 75%; z-index: 1; }
  .o-note .note-copy { font-size: 2em; left: 27%; width: 48%; text-align: left; } /* unified note size, all pages 2026-07-11 */
  .paint-win { left: 5%; top: 41%; width: 90%; aspect-ratio: 799/860; z-index: 24; }
  .o-mouse { left: -10%; top: 13%; width: 75%; aspect-ratio: 1353/902; z-index: 0; }
  .o-mouse img { transform: none; rotate: 28deg; transform:scaleX(-1); }

  .o-sticky  { left: 5%; top: 25%; width: 34%; }
  .o-sticky2 { left: 16%; top: 30%; width: 34%; }
  .o-sticky .sticky-copy, .o-sticky2 .sticky-copy { font-size: 1.6em; }
  .bsod { left: 5%; top: 70%; width: 90%; aspect-ratio: 750/450; z-index: 29; }
  .bsod .body { font-size: 1.5em; line-height: 1.28; margin-top: 5%;}
  .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; }
}