/* =====================================================================
   HeySwaey — the "desks" world: a Mac desktop living on a real sky over a
   grassy hill. Aqua-era Mac chrome (glossy jelly buttons, pinstripes) set
   in pixel type, pixel people, classic Mac error dialogs, pinned boards,
   and live mini Mac screens with the real island. Used by the homepage's
   "who's at the mac" and "the board" sections and by /students/,
   /vibe-coders/ and /developers/. The rest of the site stays in
   base.css / sections.css.
   ===================================================================== */

:root {
  --r-sky: #3f93e8;
  --r-horizon: #bfdcf7;
  --r-paper: #f3f4f1;
  --r-aqua: #2f80f5;
  --r-aqua-deep: #0d3b9c;
  --r-select: #1d5fd8;
  --r-pin: #2f6bff;
  --r-marker: #ffe94d;
  --r-sage: #8db36b;
  --r-pinstripe: repeating-linear-gradient(180deg, #f6f6f6 0 2px, #ececec 2px 4px);
  --r-dither: repeating-conic-gradient(rgba(0, 0, 0, .055) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
  --font-pixel: "Pixelify Sans", "Silkscreen", ui-monospace, monospace;
  --font-pad: "Times New Roman", Times, "Liberation Serif", serif;
  --font-hand: "Chalkboard SE", "Bradley Hand", "Comic Sans MS", "Marker Felt", cursive;
}

/* ---------- Sky + meadow scene ---------- */
.sky-scene { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--r-sky) 0%, var(--r-horizon) 70%); }
.sky-scene > canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -4; }
.sky-scene > canvas.meadow { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--hill-h, 46%); z-index: -3; pointer-events: none; }
.sky-scene::after { /* film grain, like a scanned photo */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain); background-size: 160px; opacity: .14; mix-blend-mode: soft-light;
}
/* Bleeds: the scene melts into the sections around it instead of starting at a hard edge. */
.fade-top, .fade-bottom { position: absolute; left: 0; right: 0; z-index: -2; pointer-events: none; }
.fade-top { top: 0; height: var(--fade-top-h, 260px); background: linear-gradient(180deg, var(--fade-from, var(--paper)) 0%, color-mix(in srgb, var(--fade-from, var(--paper)) 55%, transparent) 40%, transparent 100%); }
.fade-bottom { bottom: 0; height: var(--fade-bottom-h, 240px); background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--fade-to, var(--r-paper)) 60%, transparent) 55%, var(--fade-to, var(--r-paper)) 100%); }

/* ---------- Pixel type ---------- */
.px { font-family: var(--font-pixel); letter-spacing: 0; font-weight: 500; }
.px-title {
  margin: 0; font-family: var(--font-pixel); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(42px, 6.4vw, 92px); line-height: .95; color: #0b0b12;
  text-wrap: balance;
}
.px-title--light { color: #fff; text-shadow: 0 2px 0 rgba(10, 36, 106, .55), 0 10px 30px rgba(10, 36, 106, .35); }
.px-sub { margin: 18px 0 0; max-width: 34em; font-size: 18px; line-height: 1.5; letter-spacing: -0.02em; color: rgba(0,0,0,.62); text-wrap: pretty; }
.px-sub--light { color: #fff; text-shadow: 0 1px 2px rgba(10, 36, 106, .45), 0 1px 14px rgba(10, 36, 106, .5); }

/* =====================================================================
   The Mac window: Aqua pinstripes and gloss, traffic-light jelly buttons,
   a pixel-type title. (.mw = mac window)
   ===================================================================== */
.mw {
  position: relative;
  color: #1d1d1f;
  font: 400 14px/1.45 var(--font-sans);
  letter-spacing: -0.01em;
  background: var(--r-pinstripe);
  border-radius: 11px 11px 8px 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(0,0,0,.12), 0 30px 64px -26px rgba(8, 24, 60, .6);
  overflow: hidden;
}
.mw-bar {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 27px; padding: 0 76px;
  font: 600 13px/1 var(--font-pixel); color: #303033; letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.4) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, #fdfdfd 0%, #ebebeb 46%, #d9d9d9 54%, #e2e2e2 100%);
  border-bottom: 1px solid #8c8c8c;
  user-select: none;
}
.mw-bar::after { content: ""; position: absolute; inset: 0; background: var(--r-dither); pointer-events: none; }
.mw-bar > span:not(.mw-ctl) { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-ctl { position: absolute; left: 10px; top: 50%; z-index: 2; transform: translateY(-50%); display: flex; gap: 7px; }
.mw-ctl > * {
  display: block; width: 13px; height: 13px; padding: 0; border-radius: 50%;
  --jelly: #ff5f57; --rim: rgba(130, 20, 10, .6);
  background:
    radial-gradient(ellipse 58% 40% at 50% 26%, rgba(255,255,255,.95) 0 40%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 82%, rgba(255,255,255,.55) 0 18%, transparent 55%),
    var(--jelly);
  box-shadow: inset 0 0 0 1px var(--rim), 0 1px 1px rgba(0,0,0,.2);
  font-size: 0; cursor: default;
}
.mw-ctl > :nth-child(2) { --jelly: #febc2e; --rim: rgba(140, 90, 0, .6); }
.mw-ctl > :nth-child(3) { --jelly: #28c840; --rim: rgba(10, 100, 20, .6); }
.mw-ctl > button { cursor: pointer; }
.mw-ctl > button:hover { filter: brightness(.9); }
.mw-ctl > button:focus-visible { outline: 2px solid var(--r-aqua); outline-offset: 2px; border-radius: 50%; }
.mw-body { position: relative; padding: 16px; }
.mw-inset { position: relative; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.24), inset 0 1px 2px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.9); overflow: hidden; }
.mw-status {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; height: 23px; padding: 0 14px;
  font: 500 12px/1 var(--font-pixel); color: #555;
  background: linear-gradient(180deg, #ededed, #d8d8d8); border-top: 1px solid #a3a3a3;
}
.mw-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aqua jelly buttons: white, and blue for the one that matters */
.mw-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px; padding: 0 18px; border-radius: 999px;
  font: 500 14.5px/1 var(--font-pixel); color: #111; letter-spacing: .01em; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 46%, #dddddd 54%, #f5f5f5 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 -2px 4px rgba(255,255,255,.8), 0 2px 4px rgba(0,0,0,.14);
  cursor: pointer; user-select: none;
  transition: transform .15s var(--ease-spring), filter .15s;
}
.mw-btn::before { /* the gloss */
  content: ""; position: absolute; z-index: -1; left: 9px; right: 9px; top: 2px; height: 44%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.25));
}
.mw-btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
.mw-btn:active, .mw-btn.is-down { filter: brightness(.88); transform: none; box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 2px 5px rgba(0,0,0,.25); }
.mw-btn:focus-visible { outline: 3px solid rgba(47, 128, 245, .55); outline-offset: 2px; }
.mw-btn--go, .mw-btn--default {
  color: #fff; text-shadow: 0 1px 1px rgba(0, 30, 90, .55);
  background: linear-gradient(180deg, #cfe3ff 0%, #8ec0ff 30%, #2f80f5 52%, #4a98ff 78%, #9ed0ff 100%);
  box-shadow: 0 0 0 1px #1a4fa8, inset 0 -3px 6px rgba(170, 220, 255, .7), 0 3px 8px -2px rgba(20, 80, 200, .5);
}
.mw-btn--default { animation: r-throb 1.8s ease-in-out infinite; }
@keyframes r-throb { 50% { filter: brightness(1.12) saturate(1.1); } }
.mw-btn .apple { width: 14px; height: 16px; margin-top: -2px; }
.mw-btn q { quotes: "“" "”"; }

/* ---------- Mac OS 9 "Platinum" window (MyPad) ---------- */
.os9 {
  position: relative; background: #dcdcdc; padding: 0 4px 4px;
  border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,.35), 0 26px 50px -26px rgba(8,24,60,.6);
}
.os9-bar {
  position: relative; display: flex; align-items: center; justify-content: center; height: 22px;
  font: 600 12.5px/1 var(--font-pixel); color: #000; user-select: none;
  background: repeating-linear-gradient(180deg, #e8e8e8 0 1px, #b9b9b9 1px 2px) center / calc(100% - 12px) 12px no-repeat;
}
.os9-bar span { padding: 0 8px; background: #dcdcdc; white-space: nowrap; }
.os9-bar::before, .os9-bar::after {
  content: ""; position: absolute; top: 5px; width: 11px; height: 11px; background: #dcdcdc;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #8a8a8a, 0 0 0 1px #000;
}
.os9-bar::before { left: 6px; }
.os9-bar::after { right: 6px; }
.os9-body { position: relative; background: #fff; box-shadow: inset 1px 1px 0 #8a8a8a, 0 0 0 1px #000; overflow: hidden; }
.os9-body::after { /* the grow box */
  content: ""; position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  background: linear-gradient(135deg, transparent 50%, #d9d9d9 50%); border-left: 1px solid #bbb; border-top: 1px solid #bbb;
}
.pad-text { margin: 0; padding: 4px 18px 10px; font: 400 clamp(40px, 6vw, 84px)/1.02 var(--font-pad); letter-spacing: -0.035em; color: #000; white-space: nowrap; }

/* ---------- Classic Mac system error ("the bomb") ---------- */
.mac-bomb {
  position: relative; padding: 22px 24px 18px; background: #fff; color: #000;
  border: 2px solid #000; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #000, 7px 7px 0 rgba(0,0,0,.28), 0 30px 60px -30px rgba(0,0,40,.6);
  font: 500 15px/1.45 var(--font-pixel);
}
.mac-bomb .mb-row { display: flex; gap: 18px; align-items: flex-start; }
.mac-bomb .px-art { flex: none; width: 52px; }
.mac-bomb .px-art svg { width: 52px; height: auto; shape-rendering: crispEdges; }
.mac-bomb p { margin: 0 0 8px; }
.mac-bomb .mb-code { font: 400 12.5px/1.5 var(--font-mono); color: #333; letter-spacing: 0; }
.mac-bomb .mb-btns { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.blink::after { content: "_"; animation: r-caret 1s steps(1) infinite; }

/* ---------- Desktop icons (pixel people), Mac style: on the right ---------- */
.px-avatar {
  display: grid; place-items: center; width: 74px; height: 74px;
  background: var(--r-sage); border-radius: 16px;
  box-shadow: inset 0 0 0 3px rgba(30, 42, 22, .14), inset 0 10px 14px -8px rgba(255,255,255,.55), 0 6px 12px -4px rgba(30,42,22,.45);
  image-rendering: pixelated;
}
.px-avatar svg { width: 54px; height: auto; shape-rendering: crispEdges; }
.px-art svg { display: block; shape-rendering: crispEdges; }

.desk-icon {
  display: grid; justify-items: center; gap: 6px; width: 112px; padding: 6px 4px;
  color: #fff; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.desk-icon .px-avatar { transition: transform .25s var(--ease-spring), box-shadow .2s; }
.desk-icon .di-label {
  padding: 2px 7px; border-radius: 5px; font: 500 14px/1.25 var(--font-pixel); letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 8px rgba(0,0,0,.35);
}
.desk-icon:hover .px-avatar { transform: translateY(-3px); }
.desk-icon[aria-pressed="true"] .px-avatar { box-shadow: 0 0 0 4px rgba(0, 0, 0, .3), inset 0 0 0 3px rgba(30, 42, 22, .14), 0 6px 12px -4px rgba(30,42,22,.45); }
.desk-icon[aria-pressed="true"] .di-label { background: var(--r-select); text-shadow: none; }
.desk-icon:focus-visible { outline: none; }
.desk-icon:focus-visible .di-label { box-shadow: 0 0 0 2px #fff; }

/* ---------- The Aqua Dock ---------- */
.aqua-dock {
  position: absolute; left: 50%; bottom: 22px; z-index: 4; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 10px; padding: 9px 16px 7px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.22));
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 34px -14px rgba(0, 30, 80, .55);
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
}
.aqua-dock .dk { position: relative; width: 52px; height: 52px; transition: transform .22s var(--ease-spring); }
.aqua-dock .dk img { width: 100%; height: 100%; filter: drop-shadow(0 5px 4px rgba(0,0,0,.25)); }
.aqua-dock .dk:hover, .aqua-dock .dk:focus-visible { transform: translateY(-10px) scale(1.2); outline: none; }
.aqua-dock .dk.on::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(130, 200, 255, .95); }
.aqua-dock .dk[data-label]:hover::before, .aqua-dock .dk[data-label]:focus-visible::before {
  content: attr(data-label); position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 999px; background: rgba(24, 24, 34, .78); color: #fff;
  font: 500 12px/1 var(--font-pixel); white-space: nowrap;
}
.aqua-dock .sep { width: 1px; height: 44px; align-self: center; background: rgba(255,255,255,.6); box-shadow: 1px 0 0 rgba(0,0,0,.08); }

/* ---------- Glass chips + prompt bar ---------- */
.chip-glass {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px;
  font: 500 14px/1 var(--font-sans); letter-spacing: -0.02em; color: #12203a;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(236,242,255,.62));
  border: 1px solid rgba(255,255,255,.9); border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px -10px rgba(10, 40, 100, .45);
  backdrop-filter: blur(12px) saturate(170%); -webkit-backdrop-filter: blur(12px) saturate(170%);
  white-space: nowrap;
}
.chip-glass i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c, #6c5ce7); color: #fff; font-style: normal; font-size: 12px; }

.prompt-bar {
  display: flex; align-items: center; gap: 12px; width: min(640px, 100%); min-height: 54px; padding: 8px 8px 8px 18px;
  background: rgba(16, 20, 32, .82); color: #eef3ff; border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px -20px rgba(4, 16, 48, .7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font: 400 16px/1.35 var(--font-sans); letter-spacing: -0.02em;
}
.prompt-bar .pb-plus { opacity: .6; font-size: 20px; line-height: 1; }
.prompt-bar .pb-text { flex: 1; min-height: 1.35em; }
.prompt-bar .pb-text::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: #8ec5ff; animation: r-caret 1s steps(1) infinite; }
.prompt-bar .pb-mic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #0b0b12; flex: none; }
.prompt-bar .pb-mic svg { width: 18px; height: 18px; }
.prompt-bar.is-listening .pb-mic { background: var(--electric); color: #fff; box-shadow: 0 0 0 6px rgba(15,127,255,.25); }
@keyframes r-caret { 50% { opacity: 0; } }

/* ---------- Pixel dialog (game "pause menu" box) ---------- */
.px-dialog {
  position: relative; padding: 22px 26px 20px; background: #d8d5ca; color: #1a1a1a;
  border: 4px solid #000; border-radius: 18px;
  box-shadow: 0 0 0 4px #fff inset, 6px 6px 0 0 rgba(0,0,0,.25);
  font: 500 15px/1.45 var(--font-sans);
}
.px-dialog::before, .px-dialog::after { /* the brass rivets */
  content: ""; position: absolute; width: 8px; height: 8px; background: #b39a3c; top: -6px; left: 30%;
  box-shadow: 160px 0 0 #b39a3c;
}
.px-dialog::after { top: auto; bottom: -6px; left: 22%; box-shadow: 220px 0 0 #b39a3c; }
.px-dialog h4 { margin: 0 0 8px; font: 600 18px/1.2 var(--font-pixel); }
.px-dialog .pxd-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.px-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 36px; padding: 0 18px;
  background: #bdbab0; color: #111; border: 3px solid #000; border-radius: 999px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.18);
  font: 600 14px/1 var(--font-pixel); cursor: pointer;
}
.px-pill:hover { background: #cfccc2; }
.px-pill[aria-pressed="true"].right { background: #9be37a; }
.px-pill[aria-pressed="true"].wrong { background: #ffb3a7; }
.pxd-why { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: #333; }

/* ---------- Scripted demos (retro.js Seq) ---------- */
[data-seq] .sq { opacity: 0; transform: translateY(5px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
[data-seq] .sq.on { opacity: 1; transform: none; }
.mini-isl[data-fadein].on { opacity: 1 !important; }

/* ---------- Aqua progress bar (the candy stripes) ---------- */
.mac-progress { height: 14px; margin: 12px 0 2px; border-radius: 999px; background: linear-gradient(180deg, #dcdcdc, #fafafa); box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 1px 0 #fff; overflow: hidden; }
.mac-progress i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.3) 100%), repeating-linear-gradient(-45deg, #2f80f5 0 7px, #6fb1ff 7px 14px);
  background-size: 100% 100%, 20px 20px; animation: r-candy .7s linear infinite;
}
.mac-progress i.on { width: 100%; transition: width 3.6s linear; }
@keyframes r-candy { to { background-position: 0 0, 20px 0; } }

/* ---------- Sticky notes, pins, hand-drawn notes ---------- */
.r-sticky { padding: 14px 16px 16px; background: var(--r-marker); color: #2b2400; font: 400 15px/1.35 var(--font-hand); transform: rotate(var(--r, -2deg)); box-shadow: 0 14px 22px -14px rgba(60,48,0,.55); }
.hand { font-family: var(--font-hand); color: #1f3fbf; font-size: 16px; line-height: 1.25; letter-spacing: 0; }
.hand--green { color: #2e8b2e; }
.hand--red { color: #d4321f; }
.pin { display: inline-grid; place-items: center; width: 26px; height: 32px; color: var(--r-pin); filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.pin svg { width: 26px; height: 32px; }

/* =====================================================================
   Live mini Mac screens (.scr): wallpaper, menu bar, notch, the real island
   and app windows rebuilt in HTML. Driven by retro.js scenes.
   ===================================================================== */
.scr {
  position: relative; aspect-ratio: 16 / 10.4; margin: 7px; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: #1a1a1a var(--wp) center / cover no-repeat;
  box-shadow: 0 0 0 6px #0b0b0c, 0 0 0 7px #3a3b40, 0 26px 50px -24px rgba(10, 20, 60, .5);
  font: 400 11px/1.4 var(--font-sf); letter-spacing: 0; color: #1d1d1f;
  container-type: inline-size;
}
.scr-mb { position: absolute; inset: 0 0 auto 0; z-index: 4; display: flex; align-items: center; gap: 11px; height: 19px; padding: 0 10px; font-size: 10px; color: #fff; background: rgba(20, 20, 50, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; }
.scr-mb svg { width: 10px; height: 11px; }
.scr-mb b { font-weight: 700; }
.scr-mb .r { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.scr-notch { position: absolute; top: 0; left: 50%; z-index: 5; width: 104px; height: 19px; transform: translateX(-50%); background: #000; border-radius: 0 0 8px 8px; }
.island-host--scr { left: 50%; top: 0; width: 0; height: 0; font-size: min(9.2px, 2.1cqw); z-index: 6; } /* the island scales with the little screen */
.island-host--scr .island { --w-closed: 11.3em; --h-closed: 2.06em; }
.scr-win { position: absolute; z-index: 2; background: #fff; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0,0,0,.28), 0 18px 40px -16px rgba(0,0,0,.6); }
.scr-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 22px; padding: 0 10px; background: linear-gradient(#f3f3f3, #e6e6e6); border-bottom: .5px solid rgba(0,0,0,.14); font: 600 10px/1 var(--font-sf); color: #555; white-space: nowrap; }
.scr-bar .tl { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 5px; }
.scr-bar .tl i { width: 8.5px; height: 8.5px; border-radius: 50%; background: var(--tl-red); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.scr-bar .tl i:nth-child(2) { background: var(--tl-yellow); } .scr-bar .tl i:nth-child(3) { background: var(--tl-green); }
.scr-bar .url { display: inline-flex; align-items: center; gap: 5px; height: 14px; padding: 0 30px; border-radius: 5px; background: rgba(0,0,0,.06); font-weight: 500; color: #333; }
.scr-cursor { position: absolute; z-index: 9; width: 14px; height: 14px; left: 70%; top: 80%; opacity: 0; transition: left .8s var(--ease-out), top .8s var(--ease-out), opacity .3s, transform .15s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5v17.2l4.3-4.1 2.7 6.2 2.9-1.3-2.7-6.1h6z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.scr-cursor.on { opacity: 1; }

/* vibe: Safari with a builder (chat on the left, live preview on the right) */
.lv { position: absolute; inset: 22px 0 0 0; display: grid; grid-template-columns: 46% 1fr; background: #fbfaf8; }
.lv-chat { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-right: .5px solid rgba(0,0,0,.1); overflow: hidden; }
.lv-head { display: flex; align-items: center; gap: 5px; font: 700 9.5px/1 var(--font-sf); color: #222; }
.lv-head i { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #ff6a88, #ff99ac 50%, #a28bff); }
.lv-msg { max-width: 100%; padding: 6px 8px; border-radius: 8px; font: 400 8.6px/1.45 var(--font-mono); white-space: pre-wrap; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.lv-msg.on { opacity: 1; transform: none; }
.lv-you { align-self: flex-end; background: #f0edff; color: #2a1f66; }
.lv-you b { color: #6c3fd6; }
.lv-ai { align-self: flex-start; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); font-family: var(--font-sf); font-size: 9px; }
.lv-input { margin-top: auto; min-height: 28px; padding: 6px 8px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.16), 0 2px 6px -3px rgba(0,0,0,.2); font: 400 8.6px/1.45 var(--font-mono); color: #333; white-space: pre-wrap; max-height: 96px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; } /* a long prompt scrolls up as it's typed */
.lv-input span:empty::before { content: "Ask Lovable to create…"; color: #aaa; font-family: var(--font-sf); }
.lv-you { max-height: 62%; overflow-y: auto; scrollbar-width: none; flex-shrink: 0; }
.lv-you::-webkit-scrollbar { display: none; }
.lv-prev { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #f4f2ef 0 6px, #efece8 6px 12px); }
.lv-phone { width: 58%; aspect-ratio: 9 / 17; padding: 8px 7px; border-radius: 14px; background: #111; box-shadow: 0 0 0 2px #2a2a2a, 0 12px 24px -10px rgba(0,0,0,.5); color: #f2f2f2; display: flex; flex-direction: column; gap: 5px; opacity: .25; transition: opacity .4s; }
.lv-phone.on { opacity: 1; }
.lv-phone h6 { margin: 2px 0 2px; font: 700 10px/1 var(--font-sf); }
.lv-phone .hb { display: flex; align-items: center; gap: 5px; padding: 5px; border-radius: 6px; background: #1f1f22; font-size: 8px; opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; }
.lv-phone .hb.on { opacity: 1; transform: none; }
.lv-phone .hb i { width: 9px; height: 9px; border-radius: 3px; border: 1.2px solid #6b6b70; }
.lv-phone .hb.done i { background: #4cd964; border-color: #4cd964; }
.lv-phone .hb em { margin-left: auto; font-style: normal; color: #ff9f0a; transition: transform .25s; }
.lv-phone .hb em.pop { transform: scale(1.35); }
.lv-phone .hb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-phone .hb i { flex-shrink: 0; transition: background .2s, border-color .2s; }
.lp-head { display: flex; align-items: center; justify-content: space-between; }
.lp-head small { display: block; font: 500 6.5px/1 var(--font-sf); color: #8e8e93; margin-bottom: 2px; }
.lp-head h6 { margin: 0; }
.lp-ring { position: relative; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#4cd964 calc(var(--ring) * 360deg), #2c2c2e 0); transition: --ring .6s; }
.lp-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #111; }
.lp-ring b { position: relative; font: 700 6.5px/1 var(--font-sf); color: #f2f2f2; }
.lp-week { display: flex; justify-content: space-between; gap: 2px; margin: 1px 0 2px; }
.lp-week i { flex: 1; display: grid; place-items: center; height: 14px; border-radius: 4px; background: #1f1f22; font: 600 6px/1 var(--font-sf); font-style: normal; color: #6b6b70; }
.lp-week i.d { background: rgba(76,217,100,.18); color: #4cd964; }
.lp-week i.now { box-shadow: inset 0 0 0 1px #ff9f0a; color: #ff9f0a; }
.lp-tabs { margin-top: auto; display: flex; justify-content: space-around; padding-top: 5px; border-top: .5px solid #2c2c2e; font: 600 6.5px/1 var(--font-sf); color: #6b6b70; }
.lp-tabs b { color: #4cd964; }
@property --ring { syntax: "<number>"; inherits: false; initial-value: 0; }

/* The developer desk: the trust check over the terminal, and a message typed to the agent */
.tc-panel { position: absolute; right: 8px; top: 36%; width: 56%; border-radius: 7px; background: #fff; color: #1c1c1e;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 14px 30px -12px rgba(0,0,0,.6); font: 400 8.6px/1.35 var(--font-sf);
  opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .35s, transform .35s; overflow: hidden; }
.tc-panel.on { opacity: 1; transform: none; }
.tc-bar { padding: 4px 8px; background: linear-gradient(#f1f1f1, #e1e1e1); border-bottom: .5px solid #c7c7c7; font: 700 8px/1.2 var(--font-sf); color: #444; text-align: center; }
.tc-row { display: grid; gap: 1px; padding: 5px 8px 5px 22px; position: relative; border-bottom: .5px solid #eee; opacity: .2; transition: opacity .3s; }
.tc-row.on { opacity: 1; }
.tc-row::before { position: absolute; left: 8px; top: 5px; font-weight: 700; }
.tc-row.bad::before { content: "✗"; color: #d70015; } .tc-row.ok::before { content: "✓"; color: #1b7f3a; }
.tc-row b { font: 600 8.6px/1.2 var(--font-mono); } .tc-row small { color: #6e6e73; font-size: 8px; }
.cc-term .cc-you { color: #e6edf3; }

/* student: Preview with a lecture slide, and Swaey's board */
.slide { position: absolute; inset: 22px 0 0 0; padding: 14px 16px; background: #fdfcf8; font-family: Georgia, "Times New Roman", serif; color: #222; }
.slide h5 { margin: 0; font: 700 17px/1.1 Georgia, serif; }
.slide .sub { margin: 3px 0 9px; font-size: 10px; color: #666; }
.slide ul { margin: 0; padding-left: 14px; font-size: 10px; line-height: 1.55; }
.slide .eq { position: absolute; left: 16px; bottom: 12px; padding: 5px 9px; background: #f3ead2; font-size: 11px; }
.slide .pg { position: absolute; right: 10px; bottom: 8px; font: 500 8px/1 var(--font-sf); color: #999; }
.mini-board svg { display: block; width: 100%; height: auto; }
.mini-board .ink { fill: none; stroke: #1c1c1e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-out); }
.mini-board .ink.thin { stroke-width: 1.2; stroke: #8e8e93; }
.mini-board .ink.on { stroke-dashoffset: 0; }
.mini-board text { font: 500 9px var(--font-sf); fill: #333; opacity: 0; transition: opacity .5s; }
.mini-board text.small { fill: #8e8e93; font-size: 8px; }
.mini-board text.on { opacity: 1; }

/* developer: Terminal running Claude Code */
.scr-term { background: #16181e; }
.scr-term .scr-bar { background: linear-gradient(#3a3b40, #2c2d31); border-bottom-color: #000; color: #c9c9cf; }
.scr-term .mini-term { min-height: 0; height: calc(100% - 22px); padding: 9px 11px; background: transparent; font-size: 9.6px; line-height: 1.55; }

/* everyone: Mail compose */
.mail-f { display: flex; gap: 6px; padding: 5px 10px; border-bottom: .5px solid rgba(0,0,0,.1); font-size: 10px; color: #888; }
.mail-f b { font-weight: 500; color: #1d1d1f; }
.mail-f .chip { padding: 0 6px; border-radius: 4px; background: #e8f0ff; color: #1d4ed8; }
.mail-body { padding: 10px 10px 0; font-size: 10.5px; line-height: 1.5; color: #1d1d1f; white-space: pre-wrap; min-height: 60px; }
.mail-sent { position: absolute; inset: 22px 0 0 0; display: grid; place-items: center; background: rgba(255,255,255,.92); font: 600 13px/1 var(--font-sf); color: #1b7f3a; opacity: 0; transition: opacity .3s; }
.mail-sent.on { opacity: 1; }

/* =====================================================================
   Homepage — "who's at the mac today?" (the desks)
   ===================================================================== */
.desks { --hill-h: 54%; --fade-from: var(--paper); --fade-to: var(--r-paper); min-height: 1040px; padding: calc(var(--menubar-h) + 120px) var(--gutter) 150px; color: #fff; }
.desks-head { position: relative; max-width: var(--max); margin: 0 auto; }
.desks-head .px-title { color: #fff; text-shadow: 0 3px 0 rgba(10,36,106,.5), 0 18px 40px rgba(10,36,106,.35); }
.desks-row {
  position: relative; max-width: var(--max); margin: 56px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 24px 34px; align-items: start;
}
.desk-icons { display: grid; gap: 12px; justify-items: center; padding-top: 4px; }
.desks-stage { position: relative; min-height: 520px; }
.persona-win { position: relative; max-width: 1010px; transform-origin: 30% 0; }
.persona-win[hidden] { display: none; }
.persona-win.opening { animation: r-genie .42s var(--ease-out); }
@keyframes r-genie { from { opacity: 0; transform: scale(.94) translateY(14px); filter: blur(2px); } }
.persona-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.persona-copy h3 { margin: 2px 0 10px; font: 600 27px/1.12 var(--font-pixel); letter-spacing: -0.01em; color: #111; }
.persona-copy p { margin: 0 0 12px; font-size: 15px; color: #2c2c2e; }
.persona-copy ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.persona-copy li { position: relative; padding-left: 22px; font-size: 14.5px; color: #1d1d1f; }
.persona-copy li::before { /* a tiny aqua jelly */
  content: ""; position: absolute; left: 2px; top: .38em; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse 60% 40% at 50% 28%, rgba(255,255,255,.95), transparent), var(--r-aqua); box-shadow: inset 0 0 0 1px rgba(10,50,140,.5);
}
.persona-copy li q { quotes: "“" "”"; font-weight: 600; }
.persona-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.persona-shot { position: relative; }

/* little live demos */
.mini-term { height: 100%; min-height: 280px; padding: 14px 16px; background: #0d1117; color: #c9d1d9; font: 400 12.5px/1.6 var(--font-mono); letter-spacing: 0; }
.mini-term .t-dim { color: #6e7681; } .mini-term .t-ok { color: #3fb950; } .mini-term .t-ask { color: #e3b341; } .mini-term b { color: #fff; font-weight: 500; }
.mini-term p { margin: 0; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.mini-term p.on { opacity: 1; transform: none; }
.mini-isl {
  position: absolute; left: 50%; top: 0; z-index: 2; width: min(92%, 340px); transform: translateX(-50%) translateY(-110%);
  padding: 10px 14px 12px; border-radius: 0 0 20px 20px; background: #000; color: #fff;
  font: 500 13px/1.35 var(--font-sf); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), 0 12px 26px -12px rgba(var(--electric-rgb), .5);
  transition: transform .5s var(--ease-island);
}
.mini-isl.on { transform: translateX(-50%) translateY(0); }
.mini-isl .mi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: rgba(255,255,255,.6); font-size: 11.5px; }
.mini-isl .mi-top [data-face] { color: #fff; }
.mini-isl .mi-reply { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); color: #9be37a; }

/* =====================================================================
   The board — the drawing explainer, as a live, steerable demo
   ===================================================================== */
.board-sec { position: relative; padding: 110px var(--gutter) 130px; background: var(--r-paper); overflow: hidden; }
.board-head { position: relative; max-width: var(--max); margin: 0 auto 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.board-head .px-title { font-size: clamp(38px, 5.2vw, 72px); }
.board-head .px-sub { margin-top: 14px; }

.board {
  position: relative; max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 230px; gap: 26px; align-items: start;
}
.board-topics { display: grid; gap: 10px; padding-top: 112px; }
/* Each lesson's card: a little sketch of its own board, its subject, and the question it answers. */
.topic-pin {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 11px; align-items: center; padding: 9px 12px 9px 9px; text-align: left;
  background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 10px 22px -16px rgba(20,40,80,.5);
  color: #1d1d1f; transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.topic-pin:hover { transform: translateX(3px); }
.tc-thumb { width: 64px; height: 47px; border-radius: 8px; background: #f5f6f8; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); color: #aab1bf; transition: color .25s, background .25s; }
.tc-thumb path, .tc-thumb circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tc-thumb .a { stroke: var(--tc); stroke-width: 2; }
.tc-thumb .f { fill: currentColor; stroke: none; } .tc-thumb .fa { fill: var(--tc); stroke: none; }
.tc-thumb rect.g { fill: #d5d9e0; } .tc-thumb rect.fr { fill: #ff3b30; } .tc-thumb rect.fy { fill: #ffb800; }
.tc-thumb text.t { font: 600 8px/1 var(--font-sf); fill: currentColor; text-anchor: middle; }
.tc-txt b { display: block; margin-bottom: 4px; font: 600 11px/1 var(--font-pixel); letter-spacing: .02em; color: var(--tc); }
.tc-q { display: block; font: 600 14px/1.25 var(--font-sans); color: #3a3a3c; text-wrap: balance; }
.topic-pin[aria-selected="true"] { box-shadow: 0 0 0 2px var(--tc), 0 16px 28px -16px rgba(20,40,120,.55); transform: translateX(6px); }
.topic-pin[aria-selected="true"] .tc-thumb { color: #1c1c1e; background: #fff; }
.topic-pin[aria-selected="true"] .tc-q { color: #1d1d1f; }

.board-main { position: relative; padding-top: 104px; }
.board-isl {
  position: absolute; top: 0; left: 50%; z-index: 3; transform: translateX(-50%);
  width: min(100%, 520px); min-height: 92px; padding: 12px 18px 14px; border-radius: 0 0 26px 26px;
  background: #000; color: #fff; box-shadow: 0 18px 40px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
}
.board-isl::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 18px; border-radius: 50%; background: radial-gradient(ellipse at 50% 100%, rgba(80, 150, 255, .55), transparent 70%); pointer-events: none; }
.bi-top { display: flex; align-items: center; gap: 10px; height: 18px; margin-bottom: 6px; }
.bi-top [data-face] { color: #fff; }
.bi-wave { display: flex; align-items: center; gap: 2px; height: 14px; flex: 1; }
.bi-wave i { flex: 1; max-width: 3px; height: 100%; border-radius: 2px; background: #fff; opacity: .9; transform: scaleY(.2); transition: transform .12s; }
.bi-step { font: 500 11px/1 var(--font-mono); color: rgba(255,255,255,.45); letter-spacing: 0; }
.bi-say { margin: 0; font: 500 15px/1.4 var(--font-sf); letter-spacing: -0.01em; min-height: 2.8em; }
.bi-say span { color: rgba(255,255,255,.38); transition: color .18s; }
.bi-say span.said { color: #fff; }
.board-isl.paused .bi-wave i { transform: scaleY(.15) !important; }
.board-isl.paused .bi-step::after { content: " · waiting"; color: var(--r-marker); }

.board-win { position: relative; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 30px 60px -28px rgba(20, 40, 80, .55); }
.board-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; background: #ececec; border-bottom: 1px solid #d6d6d6; font: 600 13px/1 var(--font-sf); color: #4a4a4a; }
.board-bar .tl { position: absolute; left: 12px; display: flex; gap: 7px; }
.board-bar .bw-title { padding: 0 72px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* clear of the traffic lights */
.board-bar .tl i { width: 12px; height: 12px; border-radius: 50%; background: var(--tl-red); } .board-bar .tl i:nth-child(2) { background: var(--tl-yellow); } .board-bar .tl i:nth-child(3) { background: var(--tl-green); }
.board-svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 380; }
.board-svg .ink { fill: none; stroke: #1c1c1e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.board-svg .ink.thin { stroke-width: 1.4; stroke: #8e8e93; }
.board-svg .ink.blue { stroke: #0a84ff; }
.board-svg .ink.dash { stroke-dasharray: 7 6; }
.board-svg .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur, .7s) var(--ease-out); }
.board-svg .draw.on { stroke-dashoffset: 0; }
.board-svg .draw.dash.on { stroke-dasharray: 7 6; stroke-dashoffset: 0; }
.board-svg text { font: italic 400 21px "Times New Roman", "STIX Two Text", Times, serif; fill: #1c1c1e; }
.board-svg text.sans { font: 500 15px var(--font-sf); font-style: normal; }
.board-svg text.small { font: 400 12.5px var(--font-sf); font-style: normal; fill: #8e8e93; }
.board-svg text.blue { fill: #0a84ff; font: 600 14.5px var(--font-sf); font-style: normal; }
.board-svg text.amber { fill: #b07a00; font: 600 14.5px var(--font-sf); font-style: normal; }
.board-svg text.red { fill: #d70015; font: 600 14.5px var(--font-sf); font-style: normal; }
.board-svg .ink.fine { stroke-width: 1.5; }
.board-svg .fade { opacity: 0; transition: opacity .5s var(--ease-out); }
.board-svg .fade.on { opacity: 1; }
.board-svg .wash { stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: 0; transition: opacity .6s; }
.board-svg .wash.on { opacity: .32; }
.board-svg .fill { opacity: 0; transition: opacity .6s; }
.board-svg .fill.on { opacity: 1; }
.board-svg .dot { fill: #0a84ff; }

.board-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.board-ctl .mw-btn { height: 32px; padding: 0 15px; font-size: 13.5px; }

.board-side { position: relative; display: grid; gap: 22px; padding-top: 128px; }
.board-note { position: relative; }
.board-note .hand { display: block; }
.board-note svg.arrow { position: absolute; left: -64px; top: 6px; width: 60px; height: 40px; overflow: visible; }
.board-note svg.arrow path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.board-check { margin-top: 20px; }
.board-check[hidden] { display: none; }
.board-check.in { animation: r-pop .4s var(--ease-spring); }
@keyframes r-pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }
.board-sec .board-foot { position: relative; max-width: var(--max); margin: 54px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }

/* =====================================================================
   Audience pages: /students/, /vibe-coders/, /developers/
   ===================================================================== */
.rp-body { background: var(--r-paper); }
.rp-hero { --hill-h: 40%; --fade-bottom-h: 130px; --fade-to: var(--r-paper); min-height: min(980px, 100svh); padding: calc(var(--menubar-h) + 70px) var(--gutter) 150px; display: grid; align-content: center; }
.rp-hero-in { position: relative; max-width: var(--max); width: 100%; margin: 0 auto; }
.rp-hero .px-title { font-size: clamp(40px, 5.2vw, 74px); }
.rp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.rp-cta .mw-btn { height: 42px; padding: 0 22px; font-size: 16px; }
.rp-micro { margin: 12px 0 0; font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 14px rgba(10,36,106,.6); }

.rp-sec { position: relative; padding: 110px var(--gutter); }
.rp-sec--paper { background: var(--r-paper); }
.rp-sec--white { background: #fff; }
.rp-sec--aqua { color: #fff; isolation: isolate; padding-block: 150px; }
.rp-sec--aqua::before { /* the Aqua desktop blue with a pinstripe sheen, melting into the paper above and below */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    radial-gradient(70% 60% at 50% 100%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(120% 90% at 18% 0%, #66a9ff 0%, #2a73e6 40%, var(--r-aqua-deep) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}
.rp-wrap { position: relative; max-width: var(--max); margin: 0 auto; }
.rp-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.rp-split--flip > :first-child { order: 2; }
.rp-h2 { margin: 0; font: 600 clamp(32px, 3.8vw, 52px)/1.04 var(--font-pixel); letter-spacing: -0.01em; text-wrap: balance; }
.rp-p { margin: 16px 0 0; max-width: 33em; font-size: 18px; line-height: 1.55; color: rgba(0,0,0,.66); text-wrap: pretty; }
.rp-sec--aqua .rp-p { color: rgba(255,255,255,.88); }
.rp-says { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.rp-says q { quotes: "“" "”"; display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); font-size: 14.5px; color: #1d1d1f; }
.rp-sec--aqua .rp-says q { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.25); color: #fff; }

.rp-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 46px; }
.rp-tool .mw-body { min-height: 196px; }
.rp-tool h3 { margin: 0 0 6px; font: 600 19px/1.2 var(--font-pixel); }
.rp-tool p { margin: 0 0 12px; font-size: 14.5px; color: #2c2c2e; }
.rp-tool code { display: block; padding: 8px 10px; font: 400 12.5px/1.45 var(--font-mono); background: #fff; color: #1d4fa8; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.14), inset 0 1px 2px rgba(0,0,0,.08); letter-spacing: 0; }

.rp-faq { max-width: 860px; margin: 40px auto 0; }
.rp-faq details { margin-bottom: 10px; border-radius: 10px; background: var(--r-pinstripe); box-shadow: 0 0 0 1px rgba(0,0,0,.2), inset 0 1px 0 #fff, 0 6px 16px -10px rgba(0,0,0,.3); overflow: hidden; }
.rp-faq summary { cursor: pointer; padding: 14px 18px 14px 40px; font: 600 16px/1.3 var(--font-pixel); list-style: none; position: relative; }
.rp-faq summary::-webkit-details-marker { display: none; }
.rp-faq summary::before { content: ""; position: absolute; left: 18px; top: 50%; border: 5px solid transparent; border-left: 7px solid #555; transform: translateY(-50%); transition: transform .2s; transform-origin: 3px 50%; }
.rp-faq details[open] summary::before { transform: translateY(-30%) rotate(90deg); }
.rp-faq .ans { margin: 0 8px 8px; padding: 14px 16px; background: #fff; border-radius: 7px; font-size: 15.5px; line-height: 1.55; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.rp-faq .ans p { margin: 0; }

.rp-final { --hill-h: 58%; --fade-bottom-h: 120px; --fade-top-h: 200px; padding: 150px var(--gutter) 260px; text-align: center; }
.rp-final .px-title { color: #fff; text-shadow: 0 3px 0 rgba(10,36,106,.5), 0 18px 40px rgba(10,36,106,.35); }
.rp-plan { display: inline-block; min-width: min(460px, 100%); margin: 34px auto 0; text-align: left; }
.rp-plan .mw-body { display: grid; grid-template-columns: auto auto; gap: 8px 30px; align-items: baseline; }
.rp-plan b { font: 600 22px/1 var(--font-pixel); }
.rp-plan span { font-size: 14px; color: #333; }

/* page-specific heroes */
.pad-stack { position: relative; height: 420px; }
.pad-stack .os9 { position: absolute; }
.pad-stack .os9:nth-child(1) { left: 2%; top: 0; }
.pad-stack .os9:nth-child(2) { left: 14%; top: 118px; }
.pad-stack .os9:nth-child(3) { left: 30%; top: 236px; }
.pad-stack .pad-text { min-width: 6ch; }
.pad-stack .pad-x { overflow: hidden; width: min(440px, 70vw); }
.pad-stack .pad-x .pad-text { margin-left: -0.6em; }

.big-word {
  margin: 0; font: 800 clamp(84px, 15vw, 210px)/.9 var(--font-sans); letter-spacing: -0.07em; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.72)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 30px rgba(10, 40, 100, .35));
}

/* the agent demo on /developers/ */
.agent-demo { position: relative; }
.agent-demo .mini-isl { position: relative; left: auto; transform: none; margin: 0 auto -4px; width: min(96%, 460px); font-size: 14.5px; }
.cc-term { min-height: 330px; }
.cc-term .cc-box { margin: 8px 0; padding: 8px 10px; border: 1px solid #3a4250; border-radius: 6px; }
.cc-term .cc-opt.sel { color: #fff; } .cc-term .cc-opt.sel::before { content: "❯ "; color: #8ec5ff; }
.cc-term .cc-opt:not(.sel)::before { content: "  "; white-space: pre; }
.cc-term .cc-opt { display: block; }
.mw > .mini-term { border-radius: 0; }

.scan-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 14px; }
.scan-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); opacity: .35; transition: opacity .3s; }
.scan-list li.on { opacity: 1; }
.scan-list li .st { margin-left: auto; font: 600 12px/1 var(--font-pixel); white-space: nowrap; }
.scan-list li.bad .st { color: #c42b1c; } .scan-list li.ok .st { color: #1b7f3a; }

.typed-prompt { margin: 0; padding: 16px 18px; min-height: 300px; font: 400 13px/1.6 var(--font-mono); letter-spacing: 0; white-space: pre-wrap; color: #1d1d1f; background: #fff; }
.typed-prompt .po-h { color: #6c3fd6; font-weight: 600; }
.mw .typed-prompt { border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.18), inset 0 1px 2px rgba(0,0,0,.1); }

.hero-chips { position: absolute; inset: 0; pointer-events: none; }
.hero-chips .chip-glass { position: absolute; transform: rotate(var(--r, 0deg)); }

/* the steering table on /students/ */
.steer { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; font-size: 14.5px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(0,0,0,.16); overflow: hidden; }
.steer th, .steer td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #e8e8e8; }
.steer tr:nth-child(even) th, .steer tr:nth-child(even) td { background: #f3f7ff; } /* Aqua list stripes */
.steer th { width: 42%; font: 600 14px/1.35 var(--font-pixel); white-space: nowrap; }
.steer q { quotes: "“" "”"; }
.steer tr:last-child th, .steer tr:last-child td { border-bottom: 0; }

/* the system-check list on /developers/ */
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); font-size: 14.5px; color: #1d1d1f; }
.checks li::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; background: radial-gradient(ellipse 60% 40% at 50% 28%, rgba(255,255,255,.95), transparent), #28c840; box-shadow: inset 0 0 0 1px rgba(10,100,20,.55); }

/* other desks, at the foot of each audience page */
.also { padding: 70px var(--gutter) 30px; background: var(--r-paper); }
.also > p { max-width: var(--max); margin: 0 auto 14px; font-size: 15px; color: rgba(0,0,0,.5); }
.also-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: var(--max); margin: 0 auto; }
.also-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: var(--r-pinstripe); box-shadow: 0 0 0 1px rgba(0,0,0,.2), inset 0 1px 0 #fff, 0 8px 18px -12px rgba(0,0,0,.35); transition: transform .2s var(--ease-spring); }
.also-card:hover { transform: translateY(-2px); }
.also-card .px-avatar { width: 54px; height: 54px; flex: none; border-radius: 12px; } .also-card .px-avatar svg { width: 38px; }
.also-card b { display: block; font-size: 16px; }
.also-card small { display: block; margin-top: 3px; font-size: 13.5px; color: #333; }

/* stuck moments: each card opens with the moment in the person's own words, then what swaey does about it.
   The say-line sits at the foot so a row of cards lines up. */
.rp-tool .mw-body { display: flex; flex-direction: column; }
.rp-tool code { margin-top: auto; }
.rp-tool h3.when { margin-bottom: 10px; font: 400 23px/1.14 var(--font-pad); letter-spacing: -0.015em; text-wrap: balance; }

/* "where did i go wrong?" on /students/: a student's own working on ruled paper, the slip ringed in swaey's
   blue ink (the real overlay's colour, with its white halo) while the other lines dim */
.slip-demo { display: grid; gap: 14px; }
.slip-page {
  position: relative; min-height: 292px; padding: 16px 22px 18px;
  background: #fff repeating-linear-gradient(180deg, transparent 0 35px, #d9e6f6 35px 36px) 0 52px / 100% 36px no-repeat;
  font: 400 23px/36px var(--font-hand); color: #1b2a4a;
}
.slip-page::before { content: ""; position: absolute; top: 0; bottom: 0; left: 46px; width: 1px; background: #f2b8b8; }
.slip-q { margin: 0 0 4px 36px; font-size: 16px; line-height: 36px; color: #6b7280; }
.slip-lines { margin: 0; padding: 0 0 0 36px; list-style: none; }
.slip-lines li { transition: opacity .4s; }
.slip-lines:has(.slip-ring.on) li:not(.slip-bad) { opacity: .38; }
.slip-w { position: relative; display: inline-block; }
.slip-ring { position: absolute; left: -16px; top: -9px; width: calc(100% + 34px); max-width: none; height: calc(100% + 16px); overflow: visible; pointer-events: none; }
.slip-ring path {
  fill: none; stroke: #2161ff; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease-out);
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);
}
.slip-ring.on path { stroke-dashoffset: 0; }
.slip-note {
  display: inline-block; margin-left: 26px; padding: 2px 10px; vertical-align: 3px; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 4px 12px -4px rgba(0,0,0,.2); font: 600 14px/1.5 var(--font-sf); color: #2161ff;
}
.slip-fix { margin: 6px 0 0 36px; color: #2161ff; }
.slip-fix span { white-space: nowrap; }
.slip-demo .mini-isl { position: relative; left: auto; transform: none; width: auto; border-radius: 18px; font-size: 14.5px; opacity: 0; transition: opacity .4s; }
.slip-demo .mini-isl.on { opacity: 1; }
.slip-demo .px-dialog { font-size: 14.5px; }

/* ---------- A spoken back-and-forth with an agent: Swaey's bubble, what you said, the reply ---------- */
.talk-demo { display: grid; gap: 12px; }
.talk-demo .mini-isl { position: relative; left: auto; transform: none; width: auto; border-radius: 18px; font-size: 14.5px; opacity: 0; transition: opacity .4s; }
.talk-demo .mini-isl .warn { color: #ffb340; font-weight: 600; }
.talk-demo .you {
  justify-self: end; max-width: 82%; padding: 8px 14px; border-radius: 18px 18px 4px 18px; background: #2161ff; color: #fff;
  font: 500 14.5px/1.35 var(--font-sf); opacity: 0; transition: opacity .4s;
}
.talk-demo .you::before { content: "you: "; opacity: .72; }
.talk-demo .on { opacity: 1; }
.stack-wins { display: grid; gap: 18px; }

.builders-sec .board-head { margin-bottom: 0; }
.builders-sec .rp-tool p { color: #2c2c2e; }
.builders-sec .talk-demo { gap: 8px; }
.builders-sec .talk-demo .mini-isl, .builders-sec .talk-demo .you { font-size: 13px; }
.builders-skills { margin: 0; padding: 10px 12px; font: 400 12.5px/1.55 var(--font-mono); background: #fff; color: #1d1d1f; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); white-space: pre; overflow-x: auto; }

.typed-prompt--long { position: relative; max-height: 430px; overflow-y: auto; scrollbar-width: thin; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .board-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 0; }
  .board-topics .topic-pin { grid-template-columns: minmax(0, 1fr); justify-items: stretch; text-align: center; padding: 8px; gap: 7px; }
  .board-topics .tc-thumb { display: block; width: 100%; height: auto; aspect-ratio: 60 / 44; }
  .board-topics .tc-txt b { margin: 0; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .board-topics .tc-q { display: none; }
  .board-topics .topic-pin[aria-selected="true"] { transform: translateY(-3px); }
  .board-side { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0; }
  .board-note svg.arrow { display: none; }
  .rp-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .persona-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .desks-row { grid-template-columns: minmax(0, 1fr); }
  .desk-icons { order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rp-split--flip > :first-child { order: 0; }
  .board-head { grid-template-columns: minmax(0, 1fr); }
  .pad-stack { height: 330px; }
  .pad-stack .os9:nth-child(2) { top: 96px; } .pad-stack .os9:nth-child(3) { top: 192px; left: 18%; }
  .aqua-dock .dk { width: 42px; height: 42px; }
}
@media (max-width: 640px) {
  .desk-icon { width: auto; }
  .px-avatar { width: 58px; height: 58px; border-radius: 13px; } .px-avatar svg { width: 42px; }
  .desk-icon .di-label { font-size: 12px; }
  .board-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-side { grid-template-columns: minmax(0, 1fr); }
  .rp-tools { grid-template-columns: minmax(0, 1fr); }
  .also-row { grid-template-columns: minmax(0, 1fr); }
  .steer th { white-space: normal; }
  .aqua-dock { gap: 6px; padding: 7px 10px 6px; }
  .aqua-dock .dk { width: 36px; height: 36px; }
  .aqua-dock .sep, .aqua-dock .dk--extra { display: none; }
  .bi-say { font-size: 14px; }
  .pad-stack .os9:nth-child(1) { left: 0; } .pad-stack .os9:nth-child(2) { left: 6%; } .pad-stack .os9:nth-child(3) { left: 10%; }
  .rp-sec { padding: 80px var(--gutter); }
  .slip-page { padding-inline: 14px; font-size: 20px; }
  .slip-note { margin-left: 18px; font-size: 13px; }
  .mw-bar { padding: 0 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .persona-win.opening, .board-check.in { animation: none; }
  .board-svg .draw, .mini-board .ink, .slip-ring path { transition: none; }
  .mw-btn--default, .mac-progress i { animation: none; }
}