/* ══════════════════════════════════════════════════════════════════
   Myna — scroll tour
   One committed identity. This is a brand asset shown on a screen
   share, so it never follows the viewer's light/dark setting.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Stage — warm near-black, not blue-black. Reads as film, not tech. */
  --stage:      #0a0709;
  --stage-2:    #120d10;

  /* A card lifted off the page, and a panel laid over everything.
     Everything built after the light theme existed hard-coded these as
     near-black, which is why those pieces stayed dark when the rest of
     the page turned. They are tokens now and flip with it. */
  --surface:    var(--surface);
  --surface-2:  #0c0809;
  --sunk:       #0b0709;   /* the inside of a screen, always dark */
  --cast:       #000;      /* what a shadow is made of */
  --stage-3:    #1b1418;
  --hairline:   #2a2126;
  --hairline-2: #3a2f35;

  /* Ink on stage */
  --on:         #f7f2f0;
  --on-2:       #a6979b;
  --on-3:       #6e6165;

  /* Brand */
  --coral:      #e2544c;
  --coral-lit:  #ff6f62;
  --coral-deep: #c53b33;
  --amber:      #ed9035;
  --mint:       #4cc9a0;
  --violet:     #8b7cf0;

  /* Light band — used once, for the contrast beat */
  --paper:      #fbf8f6;
  --paper-ink:  #1c1517;
  --paper-2:    #7d7173;
  --paper-line: #e6dfdc;

  --sans:  "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --gut: clamp(20px, 5vw, 80px);

  /* Mobile defaults: a slim top bar, no rail. */
  --nav-h: 56px;
  --rail-w: 0px;

  /* Every section is meant to read as one screen. The padding has to
     carry the fixed nav's height, or the top of each section sits
     underneath it — which is what made them feel a screen too tall. */
  --slide-pad: clamp(20px, 3.4svh, 52px);

  /* One knob for every phone on the page. Short windows shrink them
     all together, so a section's height tracks the window instead of
     spilling past it. */
  --pw-k: 1;
}
/* Desktop: the rail replaces the top bar, so nothing is stolen from the
   top of a slide and every section gains that height back. */
@media (min-width: 901px) {
  :root {
    --nav-h: 0px;
    --rail-w: 200px;
    /* The rail already separates the content from the window edge, so
       the page gutter can be tighter than it was under a top bar. */
    --gut: clamp(26px, 3.2vw, 56px);
  }
}

@media (max-height: 900px) { :root { --pw-k: .90; } }
@media (max-height: 820px) { :root { --pw-k: .80; } }
@media (max-height: 740px) { :root { --pw-k: .70; } }

*, *::before, *::after { box-sizing: border-box; }

/* Class rules like .vslot { display: grid } outrank the UA sheet's
   [hidden] { display: none }, so state it explicitly. */
[hidden] { display: none !important; }

html {
  /* Not scroll-behavior: smooth — its duration is not controllable, and
     the phone's flight between sections is meant to be watched. tour.js
     animates the scroll itself. */
  background: var(--stage);
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  padding-left: var(--rail-w);
  background: var(--stage);
  color: var(--on);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--coral); color: #fff; }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* ── Type scale ─────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.028em; line-height: 1.04; }

/* Sized so "Your AI-Powered" holds one line in the hero's left column.
   Any larger and it breaks on the hyphen in "AI-Powered". */
.t-hero  { font-size: clamp(2.15rem, 4.9vw, 4.3rem); font-weight: 800; letter-spacing: -0.04em; }
/* min(vw, svh) so a wide-but-short laptop gets the small size too —
   width alone was sizing these for a screen that wasn't there. */
.t-xl    { font-size: clamp(1.75rem, min(4.4vw, 6svh), 3.1rem); font-weight: 800; letter-spacing: -0.035em; }
.t-lg    { font-size: clamp(1.55rem, min(3.2vw, 4.6svh), 2.3rem); font-weight: 700; }

.lede {
  font-size: clamp(.96rem, min(1.35vw, 1.9svh), 1.14rem);
  line-height: 1.58;
  color: var(--on-2);
  max-width: 54ch;
  margin: clamp(12px, 1.8svh, 20px) 0 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--coral);
  flex: none;
}

.hl { color: var(--coral); font-style: normal; }

/* ── Shell ──────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gut); }

section { position: relative; }

/* The slide: one section, one screen. */
.band {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + var(--slide-pad)) var(--slide-pad);
}
.band > .wrap { width: 100%; }

.band-paper { background: var(--paper); color: var(--paper-ink); }
.band-paper .lede { color: var(--paper-2); }
.band-paper .eyebrow { color: var(--coral-deep); }
.band-paper .eyebrow::before { background: var(--coral-deep); }

/* Scroll snapping was removed. With one beat every 522px inside a 900px
   window, almost every scroll position is "near" an anchor, so proximity
   snapping pulled the page back to wherever the gesture started. Measured:
   from beat 06, ten wheel notches moved the page zero pixels; from the top
   of "The four skills", six upward gestures also moved it zero. The last
   point was unreachable from either direction.

   Nothing visual depended on it — a beat is a discrete state, so stopping
   part way through one still shows exactly one beat, fully. Landing
   squarely on a beat is now something you ASK for, with the arrow keys or
   a rail link, rather than something the browser imposes on every gesture. */

/* ── The rail ───────────────────────────────────────────────────── */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 30px 20px 26px;
  background: color-mix(in srgb, var(--stage) 90%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-right: 1px solid var(--hairline);
}

.mark {
  display: flex;
  align-items: center;
  flex: none;
  width: max-content;
  margin: -6px 0 clamp(18px, 3.6svh, 36px) 6px;
  transition: transform .25s var(--ease);
}
.mark img { display: block; width: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .25)); }
.mark .mark-full { height: 66px; }
.mark .mark-bird { display: none; height: 40px; }
.mark:hover { transform: translateY(-1px) rotate(-4deg); }

.nav-links { display: flex; flex-direction: column; gap: 2px; }
.nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  /* Height-responsive: four more branches took the link list to 489px,
     which met the CTA in a 620px-tall window. The rail cannot be made
     to scroll instead — overflow would clip the module panels. */
  padding: clamp(6px, 1.1svh, 10px) 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--on-2);
  transition: color .2s, background .2s, box-shadow .2s;
}
.nl-ic { flex: none; width: 17px; height: 17px; color: rgb(255 255 255 / .9); transition: color .2s; }
.nl-t { min-width: 0; }
.nav-links a i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--on-3);
  transition: color .2s;
}
/* Hover, a tap, and the section you are on: the brand coral as a
   gradient, white on top. Hover is the softer of the two. */
.nav-links a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgb(255 125 99 / .55), rgb(226 84 76 / .55));
  box-shadow: inset 0 0 0 1px rgb(255 170 150 / .35);
}
.nav-links a:active { transform: scale(.98); }
.nav-links a.on {
  color: #fff;
  background: linear-gradient(135deg, #ff7d63, #e2544c 60%, #c9433c);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 10px 22px -12px rgb(0 0 0 / .55);
}
.nav-links a:hover .nl-ic, .nav-links a.on .nl-ic { color: #fff; }

/* ── branch lines under Beyond practice ─────────────────────────── */
.nav-group { display: flex; flex-direction: column; }
.nav-sub {
  display: flex;
  flex-direction: column;
  margin: 1px 0 3px 20px;
  padding-left: 13px;
  border-left: 1px solid var(--hairline);
}
.nav-sub a {
  position: relative;
  padding: clamp(4px, .75svh, 6px) 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--on-3);
  border-radius: 7px;
  border-left: 0;
  transition: color .2s, background .2s;
}
/* the tick joining each branch to the trunk */
.nav-sub a::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--hairline);
  transition: background .2s, width .2s;
}
.nav-sub a:hover { color: #fff; background: linear-gradient(135deg, rgb(255 125 99 / .4), rgb(226 84 76 / .4)); box-shadow: none; }
.nav-sub a.on { color: #fff; font-weight: 700; background: none; box-shadow: none; }
.nav-sub a.on::before { background: #ff9a82; width: 11px; }

/* parent stays lit while you are anywhere in the chapter */
.nav-group.in > a { color: #fff; }
/* Every chapter keeps its branches open, on any height. Shorter windows
   tighten the rail rather than fold it; and if even that runs out of room
   the list scrolls on its own (thin, out of the way), keeping the link
   you are on in view. Folded to a strip it never scrolls — its names
   pop out beside it. */
.nav-links { flex: 0 1 auto; min-height: 0; margin: 0 -10px 0 -4px; padding: 0 10px 6px 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .16) transparent; }
.nav-links::-webkit-scrollbar { width: 4px; }
.nav-links::-webkit-scrollbar-thumb { border-radius: 4px; background: rgb(255 255 255 / .16); }
:root.rail-shut .nav-links { overflow: visible; margin: 0; padding: 0; }
/* only the section you are in opens its subtopics; the others stay folded into their trunk */
.nav-sub { max-height: 190px; overflow: hidden; transition: max-height .45s var(--ease), opacity .3s var(--ease), margin .45s var(--ease); }
.nav-group:not(.in) > .nav-sub { max-height: 0; margin-top: 0; margin-bottom: 0; opacity: 0; }
.nav-sub a.nav-hot::after { content: "\2726"; margin-left: 6px; font-size: 10px; color: #ffb08f; }
@media (max-height: 960px) and (min-width: 901px) {
  .rail { padding-top: 24px; padding-bottom: 20px; }
  .mark { margin-bottom: 14px; }
  .mark .mark-full { height: 54px; }
  .nav-links a { padding-block: 5px; }
  .nav-sub { margin-top: 0; margin-bottom: 2px; }
  .nav-sub a { padding-block: 3px; font-size: 11.5px; }
}
@media (max-height: 820px) and (min-width: 901px) {
  .rail { padding-top: 18px; padding-bottom: 16px; }
  .mark { margin-bottom: 10px; }
  .mark .mark-full { height: 46px; }
  .nav-links { gap: 1px; }
  .nav-links a { padding-block: 4px; font-size: 13px; }
  .nav-sub a { padding-block: 2px; font-size: 11px; }
  .rail .rail-cta { padding-block: 7px; }
}
@media (max-height: 700px) and (min-width: 901px) {
  .rail { padding-top: 12px; padding-bottom: 12px; }
  .mark { margin-bottom: 6px; }
  .mark .mark-full { height: 40px; }
  .rail-fold { top: 18px; }
  .nav-links { gap: 0; }
  .nav-links a { padding-block: 3px; font-size: 12.5px; }
  .nav-sub { margin-bottom: 1px; }
  .nav-sub a { padding-block: 1px; font-size: 10.5px; }
  .rail .rail-cta { padding-block: 6px; }
}

/* ════ the rail, v2: room between the sections, each icon on its own tile, a coral glider that
   slides to the section you are in, and the open chapter's branch filling down to where you are ════ */
:root:not(.rail-shut) .nav-links { position: relative; gap: clamp(3px, .6svh, 6px); }
:root:not(.rail-shut) .nav-links a, :root:not(.rail-shut) .nav-links > .nav-group { position: relative; z-index: 1; }
:root:not(.rail-shut) .nav-links > a, :root:not(.rail-shut) .nav-group > a { gap: 12px; padding: clamp(4px, .8svh, 7px) 10px; border-radius: 12px; }
:root:not(.rail-shut) .nl-ic { box-sizing: content-box; width: 15px; height: 15px; padding: 6px; border-radius: 9px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); transition: color .25s, background .25s, box-shadow .25s, transform .4s var(--ease-out); }
:root:not(.rail-shut) .nav-links a:hover .nl-ic { transform: rotate(-8deg) scale(1.06); background: rgb(255 255 255 / .16); }
:root:not(.rail-shut) .nav-links > a.on .nl-ic, :root:not(.rail-shut) .nav-group.in > a .nl-ic { color: #d9453d; background: #fff; box-shadow: 0 6px 14px -6px rgb(0 0 0 / .55); transform: none; }
:root:not(.rail-shut) .nav-links.glides > a.on, :root:not(.rail-shut) .nav-links.glides .nav-group > a.on, :root:not(.rail-shut) .nav-links.glides .nav-group.in > a { background: none; box-shadow: none; }
.nav-glide { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #ff7d63, #e2544c 60%, #c9433c); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 12px 24px -12px rgb(0 0 0 / .6); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.22, 1, .36, 1), width .4s var(--ease-out), height .4s var(--ease-out), opacity .3s; }
.nav-glide.on { opacity: 1; }
.nav-glide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); translate: -110% 0; }
.nav-glide.shine::after { animation: glShine .9s var(--ease) .3s; }
@keyframes glShine { to { translate: 110% 0; } }
:root.rail-shut .nav-glide { display: none; }
/* a chapter's trunk shows it opens */
:root:not(.rail-shut) .nav-group > a::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 4px 0 auto; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: -45deg; opacity: .45; transition: rotate .35s var(--ease-out), opacity .25s; }
:root:not(.rail-shut) .nav-group.in > a::after { rotate: 45deg; opacity: .9; }
/* the branch: a coral line filling down to the subtopic you are on */
:root:not(.rail-shut) .nav-sub { position: relative; gap: 1px; margin: 4px 0 6px 24px; }
.nav-sub::after { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: var(--sf, 0px); border-radius: 2px; background: linear-gradient(180deg, rgb(255 154 130 / .3), #ff9a82); transition: height .5s var(--ease-out); pointer-events: none; }
.nav-sub a.on::before { box-shadow: 0 0 0 3px rgb(255 154 130 / .18); }
/* the rail arrives: one section after another */
@keyframes navIn { from { opacity: 0; translate: -16px 0; } }
.nav-links > a, .nav-links > .nav-group { animation: navIn .6s var(--ease-out) backwards; animation-delay: calc(.15s + var(--k, 0) * 55ms); }
.nav-links > :nth-child(2) { --k: 1; } .nav-links > :nth-child(3) { --k: 2; } .nav-links > :nth-child(4) { --k: 3; }
.nav-links > :nth-child(5) { --k: 4; } .nav-links > :nth-child(6) { --k: 5; } .nav-links > :nth-child(7) { --k: 6; } .nav-links > :nth-child(8) { --k: 7; }
@media (max-height: 760px) and (min-width: 901px) {
  :root:not(.rail-shut) .nl-ic { padding: 5px; }
  :root:not(.rail-shut) .nav-sub { margin: 2px 0 4px 22px; }
}
@media (max-height: 660px) and (min-width: 901px) {
  :root:not(.rail-shut) .nav-links { gap: 1px; }
  :root:not(.rail-shut) .nav-links > a, :root:not(.rail-shut) .nav-group > a { padding-block: 2px; }
  :root:not(.rail-shut) .nl-ic { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) { .nav-links > a, .nav-links > .nav-group { animation: none; } .nav-glide.shine::after { animation: none; } }

.rail-cta { margin-top: auto; justify-content: center; gap: 7px; padding-inline: 10px; font-size: 12.5px; white-space: nowrap; }
.rail .rail-cta { color: #c53b33; background: #fff; box-shadow: 0 10px 22px -12px rgb(0 0 0 / .6); font-size: 12px; padding-inline: 8px; gap: 6px; width: 100%; }
:root.rail-shut .rail .rail-cta { width: 42px; }
@media (max-width: 900px) {
  .rail .rail-cta, :root.rail-shut .rail .rail-cta { width: auto; height: auto; padding: 8px 14px; }
  :root.rail-shut .nl-t { display: inline; }
}
:root.rail-shut .rail-cta .nl-ic { color: #c53b33; }
:root.rail-shut .rail-cta:hover .nl-ic { color: #fff; }
.rail .rail-cta:hover { color: #fff; background: linear-gradient(135deg, #ff7d63, #e2544c); }
.rail-cta .nl-ic { width: 16px; height: 16px; color: currentColor; }

/* Progress runs down the rail's own edge. */
.progress {
  position: absolute;
  inset: 0 -1px 0 auto;
  width: 2px;
  z-index: 1;
  pointer-events: none;
}
.progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--coral-deep), var(--coral-lit));
  transform-origin: 50% 0;
  transform: scaleY(var(--sp, 0));
}

/* Below this the rail folds back into a top bar. */
@media (max-width: 900px) {
  .rail {
    inset: 0 0 auto 0;
    width: auto;
    height: var(--nav-h);
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0 var(--gut);
    border-right: 0;
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease);
  }
  .rail.is-stuck { border-bottom-color: var(--hairline); }
  .mark { margin: 0; }
  .mark .mark-full { height: 38px; }
  :root.rail-shut .mark .mark-full { display: block; }
  :root.rail-shut .mark .mark-bird { display: none; }
  .nav-links, .nav-sub { display: none; }
  .rail-cta { margin: 0 0 0 auto; }
  .progress {
    inset: auto 0 -2px 0;
    width: auto;
    height: 2px;
  }
  .progress i { transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; }
}

/* ── Buttons ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding-inline: 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--coral-lit); }
.btn-ghost { border: 1px solid var(--hairline-2); color: var(--on); }
.btn-ghost:hover { border-color: var(--on-3); background: var(--stage-3); }
.btn-sm { height: 38px; padding-inline: 18px; font-size: 13.5px; }

.band-paper .btn-ghost { border-color: var(--paper-line); color: var(--paper-ink); }
.band-paper .btn-ghost:hover { background: #fff; border-color: #c9bfbb; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ══ PHONE ═══════════════════════════════════════════════════════
   The component the whole site is built around. Everything inside
   it is hand-built HTML, so it stays crisp at any size and can be
   animated — screenshots could do neither.
   ═════════════════════════════════════════════════════════════════ */

/* --pwn is the phone's width as a bare number. It has to be unitless
   because .phone-screen divides by it to work out its own scale, and
   calc() cannot divide by a length. */
/* 9 / 19.51 is the real iPhone 15/16 screen ratio (1179 x 2556). It has
   to match exactly, or object-fit: cover crops the status bar and the
   tab bar off a real screenshot — the two strips that sell it as an
   actual app. */
.phone {
  --pw-base: 306;
  --pwn: calc(var(--pw-base) * var(--pw-k));
  position: relative;
  width: calc(var(--pwn) * 1px);
  aspect-ratio: 9 / 19.51;
  flex: none;
}

.phone-glow {
  position: absolute;
  inset: -16% -30%;
  background: radial-gradient(
    50% 42% at 50% 50%,
    color-mix(in srgb, var(--accent, var(--coral)) 38%, transparent),
    transparent 72%);
  filter: blur(58px);
  opacity: var(--glow, .72);
  transition: opacity .6s var(--ease), background .6s var(--ease);
  pointer-events: none;
}

.phone-body {
  position: absolute;
  inset: 0;
  border-radius: 13.5% / 6.4%;
  background: linear-gradient(155deg, #4a4247 0%, #161216 34%, #100c10 66%, #443c41 100%);
  box-shadow:
    0 2px 2px rgba(255,255,255,.14) inset,
    0 0 0 1px rgba(0,0,0,.6),
    0 46px 90px -24px rgba(0,0,0,.85),
    0 14px 30px -12px rgba(0,0,0,.6);
}

/* Side buttons — small detail, big realism payoff */
.phone-body::before,
.phone-body::after {
  content: "";
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3d363a, #221d21);
}
.phone-body::before { left: -2px;  top: 22%; height: 7%;  }
.phone-body::after  { right: -2px; top: 26%; height: 12%; }

/* The app mock is laid out once at a fixed 286.4 x 614.3 — the screen
   area of a 306px phone — and then scaled as a whole. Reflowing it
   instead would mean every font size, padding and radius inside had
   to be fluid, and 11px type would end up at 7px on a phone. Scaling
   keeps the mock pixel-identical at every size. */
.phone-screen {
  position: absolute;
  top: 3.2%;
  left: 3.2%;
  width: 286.4px;                       /* 306 * (1 - 2 * 0.032)     */
  height: 620.9px;                      /* 286.4 * 2556/1179         */
  transform: scale(calc(var(--pwn) / 306));
  transform-origin: 0 0;
  border-radius: 31.5px / 34.4px;
  overflow: hidden;
  background: #0d0a0c;
  isolation: isolate;
}

.phone-notch {
  position: absolute;
  top: 1.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  height: 3.1%;
  border-radius: 999px;
  background: #060406;
  z-index: 12;
}

/* ── The hero tap-through ────────────────────────────────────────
   Menu → Home → Progress on one phone. These are the real app
   screens rebuilt in HTML rather than screenshots, so they stay
   sharp at any size and cost nothing to download. */

.shots {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #fff;
}
/* A tab switch is a cut, not a dissolve — so no slide, and quick. */
.shots .screen,
.shots .shot {
  transform: none;
  transition: opacity .2s var(--ease);
}

/* The real screenshots. tour.js adds .use-img once all three have
   decoded; until then they stay hidden and the hand-built stand-in
   shows instead, so a missing file never leaves an empty phone. */
.shots .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.shots .shot.is-on { opacity: 1; }
/* Whichever of the pair lost — the image or its stand-in — is taken
   out of the stack entirely. */
.shots .is-off { display: none; }

/* The ripple lands on the tab that is about to be selected. */
.shots .tap {
  position: absolute;
  left: var(--tx, 50%);
  top: 92.4%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  background: color-mix(in srgb, var(--coral) 20%, transparent);
  opacity: 0;
  pointer-events: none;
}
.shots .tap.go { animation: tap .62s var(--ease-out); }
@keyframes tap {
  0%   { opacity: 0; transform: scale(.25); }
  22%  { opacity: 1; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.55); }
}

.screen[hidden] { display: none; }

/* ── A scene screen that holds one image (or, later, one video) ──
   The <img> wins when the file exists; otherwise the labelled slot
   underneath shows, naming the file it is waiting for. */
.screen.media { padding: 0; background: #fff; }
.screen.media .mshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screen.media .mfall .st { text-transform: none; letter-spacing: .06em; opacity: .85; }
.screen.media .mfall .st::before { content: "assets/img/"; opacity: .55; }
.screen.media .mfall .st::after { content: ".png"; opacity: .55; }

/* Two beats that show the same screenshot: crossfade with no slide,
   or the identical image appears to jump. */
.screen.hold, .screen.hold.is-past { transform: none; }

/* ── Tapping the skill tiles ─────────────────────────────────────
   Same ripple language as the hero's tab taps, fired in sequence over
   the four cards. Positions are set per-tile in the markup because
   they belong to that particular screenshot. */
.taps { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.taps i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  display: block;
  border-radius: 50%;
  border: 2px solid var(--coral);
  background: color-mix(in srgb, var(--coral) 15%, transparent);
  opacity: 0;
}
.taps i.go { animation: tap .78s var(--ease-out); }

/* ══ LIGHT APP SCREENS ═══════════════════════════════════════════
   Rebuilt from the real app: white ground, coral headings, soft
   card shadows. Everything below is namespaced under .lite so it
   cannot leak into the dark mocks used later in the page.
   ═════════════════════════════════════════════════════════════════ */

/* .screen.lite, not .lite — .screen sets a dark background further
   down the file and would win on source order at equal specificity. */
.screen.lite {
  --lc:    #e8553f;                  /* the app's coral */
  --lc-2:  #fdeeea;                  /* its wash */
  --l-ink: #2f2f2f;
  --l-dim: #7d7d7d;
  --l-line:#f0efef;
  --l-sh:  0 2px 8px rgba(30, 20, 20, .055);
  background: #fff;
  color: var(--l-ink);
}
.lite .sb { color: #131313; padding: 5.5% 7% 0; }
.lite .sb-icons { color: #131313; }

.lite-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 3.5% 6.5% 0;
  overflow: hidden;
}

/* ── wordmark ──────────────────────────────────────────────────
   An approximation of the hand-lettered logo. Drop the real mark in
   and swap it — see README. */
.wm { display: inline-flex; align-items: flex-end; gap: 1px; }
.wm i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -.02em;
  color: #121212;
}
.wm i::after {
  content: "";
  display: block;
  height: 1.1px;
  background: #121212;
  border-radius: 2px;
  margin-top: 1px;
}
.wm svg { width: 14px; height: 16px; color: #121212; margin-bottom: 2px; }
.wm.sm i { font-size: 13px; }
.wm.sm svg { width: 11px; height: 13px; }

.lite-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.pts { display: inline-flex; align-items: center; gap: 4px; }
.pts b {
  background: var(--lc); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: -.02em;
  padding: 2.5px 9px; border-radius: 999px;
}
.pts svg { width: 12px; height: 12px; color: var(--lc); }

/* ── menu: the four skill cards ───────────────────────────────── */
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sk {
  position: relative;
  overflow: hidden;
  height: 98px;
  padding: 11px 11px 0;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 14px;
  box-shadow: var(--l-sh);
}
.sk .n { position: relative; z-index: 2; font-size: 13px; font-weight: 800; color: var(--lc); letter-spacing: -.025em; }
/* :not(.wv) — the wave is also a direct child svg, and would otherwise
   pick up this rule's top/right and sit in the middle of the card. */
.sk > svg:not(.wv) { position: absolute; z-index: 2; top: 10px; right: 10px; width: 21px; height: 21px; color: var(--lc); }
.sk .wv { position: absolute; z-index: 1; top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 54px; }

.pt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pt {
  height: 44px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--l-line); border-radius: 14px;
  box-shadow: var(--l-sh);
}
.pt span { display: inline-flex; align-items: center; gap: 6px; }
.pt em {
  font-style: normal; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; color: #1a1a1a;
}

.lite-h { font-size: 13px; font-weight: 800; color: #4f4f4f; letter-spacing: -.02em; margin: 13px 0 7px; }

.tip {
  display: flex; align-items: stretch;
  background: #fff; border: 1px solid var(--l-line); border-radius: 12px;
  box-shadow: var(--l-sh); padding: 3px;
}
.tip .ic { width: 50px; display: grid; place-items: center; color: var(--lc); flex: none; }
.tip .ic svg { width: 26px; height: 26px; }
.tip .b { flex: 1; background: var(--lc); color: #fff; border-radius: 9px; padding: 9px 10px; }
.tip .b strong { display: block; font-size: 9.5px; font-weight: 800; line-height: 1.2; }
.tip .b span { display: block; font-size: 7.5px; line-height: 1.4; margin-top: 3px; opacity: .92; }

.cdots { display: flex; gap: 5px; justify-content: center; align-items: center; margin-top: 11px; }
.cdots i { width: 6px; height: 6px; border-radius: 999px; background: #c9c7c7; display: block; }
.cdots i.on { width: 22px; background: var(--lc); }


/* ── the modules, in the glass ──────────────────────────────────
   The app's own menu for whichever skill is at the front, built out
   of the .lite kit the other screens use — white ground, coral, soft
   cards — so it belongs to the app rather than to the page around it.

   Tapping a tile is what starts the sequence: the bubble above the
   phone answers what the module is, and the demo follows once that
   answer has finished arriving. */
.mdl-ct {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--l-dim);
}
.mdl-h {
  margin: 10px 0 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--l-ink);
}
.mdl-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 12px;
  /* the last tiles fade rather than stop dead at the bezel */
  mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}
.mdl-list::-webkit-scrollbar { display: none; }

/* A tile, not a row. The index sits in its own chip, there is a hair
   of colour down the leading edge, and the whole thing lifts a little
   under the cursor — enough that it reads as something you can press
   rather than a line of text with a chevron after it. */
.mdl {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px 9px 10px;
  background: linear-gradient(#fff, #fdfcfc);
  border: 1px solid var(--l-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(30, 20, 20, .05), 0 3px 10px -6px rgba(30, 20, 20, .14);
  font: inherit;
  text-align: left;
  color: var(--l-ink);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color .2s var(--ease),
    box-shadow .24s var(--ease),
    transform .22s var(--ease-out);
  animation: mdlIn .42s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * .035s);
}

@keyframes mdlIn { from { opacity: 0; transform: translateY(8px); } }

/* the hair of colour down the leading edge */
.mdl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--lc);
  opacity: 0;
  transition: opacity .22s var(--ease), top .24s var(--ease-out), bottom .24s var(--ease-out);
}

.mdl-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--lc-2);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  color: var(--lc);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.mdl-t {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdl svg {
  width: 13px;
  height: 13px;
  color: #cfcccc;
  flex: none;
  transition: color .22s var(--ease), transform .24s var(--ease-out);
}

.mdl:hover,
.mdl.on {
  border-color: color-mix(in srgb, var(--lc) 42%, transparent);
  box-shadow: 0 2px 4px rgba(232, 85, 63, .07), 0 8px 18px -10px rgba(232, 85, 63, .32);
  transform: translateX(2px);
}
.mdl:hover::before,
.mdl.on::before { opacity: 1; top: 12%; bottom: 12%; }
.mdl:hover .mdl-n,
.mdl.on .mdl-n { background: var(--lc); color: #fff; }
.mdl:hover svg,
.mdl.on svg { color: var(--lc); transform: translateX(2px); }
.mdl.on .mdl-t { color: var(--lc); }
.mdl:active { transform: translateX(2px) scale(.987); }

/* ── the clip, and the list over it ─────────────────────────────
   Two layers, both permanent. The film is underneath and the menu
   over it; hovering a module cross-fades between them rather than
   rebuilding the screen, which is what stops the cursor's target
   disappearing out from under it.

   Resting gives the clip the whole screen. Moving brings the list
   back over it — the same bargain a video player makes with its
   controls — and going still again clears it. */
.mdl-film {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--sunk);
  transition: opacity .32s var(--ease);
}
.screen.is-film .mdl-film { opacity: 1; }

.screen.is-film .lite-body {
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / .93);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s var(--ease);
}
.screen.is-film.show-list .lite-body { opacity: 1; pointer-events: auto; }

.pv-stand { position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--c) 26%, transparent), transparent 66%), var(--sunk); }
.pv-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-art { width: 58%; display: block; }
.pv-art .dk-svg { opacity: .74; }
/* out in the deck these only move on the front card; in here they are
   the clip, so they always run */
.pv-art .dk-svg-listen .w { animation: artRing 2.6s var(--ease-out) infinite; }
.pv-art .dk-svg-listen .w2 { animation-delay: .22s; }
.pv-art .dk-svg-listen .w3 { animation-delay: .44s; }
.pv-art .dk-svg-listen .w4 { animation-delay: .66s; }
.pv-art .dk-svg-speak .b { animation: artBar 1.5s ease-in-out infinite alternate; }
.pv-art .dk-svg-speak .b2 { animation-duration: 1.1s; animation-delay: -.35s; }
.pv-art .dk-svg-speak .b3 { animation-duration: 1.8s; animation-delay: -.8s; }
.pv-art .dk-svg-speak .b4 { animation-duration: 1.25s; animation-delay: -.15s; }
.pv-art .dk-svg-speak .b5 { animation-duration: 1.65s; animation-delay: -.6s; }
.pv-art .dk-svg-speak .b6 { animation-duration: 1.35s; animation-delay: -1s; }
.pv-art .dk-svg-read .specs > * { animation: artSpecs 5s var(--ease-out) infinite; }
.pv-art .dk-svg-read .bridge { animation-delay: .34s; }
.pv-art .dk-svg-read .arm { animation-delay: .5s; }
.pv-art .dk-svg-read .ln { animation: artDraw 5s var(--ease-out) infinite; }
.pv-art .dk-svg-read .l1 { animation-delay: .8s; }
.pv-art .dk-svg-read .l2 { animation-delay: 1.15s; }
.pv-art .dk-svg-write .tx { animation: artType 4.6s steps(16, end) infinite; }
.pv-art .dk-svg-write .t2 { animation-delay: .5s; }
.pv-art .dk-svg-write .t3 { animation-delay: 1s; }
.pv-art .dk-svg-write .caret { animation: artCaret 4.6s steps(16, end) infinite; }

.pv-note {
  position: absolute;
  bottom: 26%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .34);
}
.pv-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 7% 8%;
  background: linear-gradient(transparent, rgb(0 0 0 / .78) 44%);
}
.pv-now { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.pv-bar { height: 2.5px; border-radius: 999px; background: rgb(255 255 255 / .2); overflow: hidden; }
.pv-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px; background: #fff;
  animation: pvPlay 13s linear infinite;
}
@keyframes pvPlay { from { width: 0 } to { width: 100% } }

@media (prefers-reduced-motion: reduce) {
  .pv-bar i { animation: none; width: 38%; }
  .pv-art .dk-svg * { animation: none !important; }
}

/* ── the AI Myna button ───────────────────────────────────────── */
.aim {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 5px;
  margin: auto 0 9px;
  padding: 8px 15px;
  border-radius: 999px;
  background: linear-gradient(95deg, #f2764f, #e8503c);
  color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: -.02em;
  box-shadow: 0 5px 14px rgba(232, 85, 63, .38);
}
.aim svg { width: 13px; height: 13px; }

/* ── home: greeting + summary ─────────────────────────────────── */
.lite-hdr { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.av {
  width: 29px; height: 29px; flex: none;
  border: 1.5px solid var(--lc); border-radius: 50%;
  display: grid; place-items: center; color: var(--lc);
}
.av svg { width: 13px; height: 13px; }
.lite-hdr .t { flex: 1; }
.lite-hdr .t b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.025em; }
.lite-hdr .t span { display: block; font-size: 10.5px; font-weight: 800; color: #5d5d5d; }

.sum {
  background: #fff; border: 1px solid var(--l-line); border-radius: 13px;
  box-shadow: var(--l-sh); overflow: hidden;
}
.sum-top { display: flex; align-items: stretch; }
.sum-top .lg { flex: 1; display: grid; place-items: center; padding: 8px 0; }
.lsrw { display: flex; flex: none; }
.lsrw b {
  width: 27px; display: grid; place-items: center;
  color: #fff; font-size: 13.5px; font-weight: 800;
}
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 6px; padding: 11px 12px 13px; }
.mt { display: flex; align-items: center; gap: 8px; }
.mt > svg { width: 16px; height: 16px; color: #3d3d3d; flex: none; }
.mt .k { display: block; font-size: 9.5px; font-weight: 800; color: #5d5d5d; line-height: 1.2; }
.mt .v { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: -.03em; margin-top: 1px; }

.srows { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.srow {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--l-line); border-radius: 12px;
  padding: 10px 12px; box-shadow: var(--l-sh);
}
.srow > svg { width: 21px; height: 21px; color: var(--lc); flex: none; }
.srow .n { display: block; font-size: 12px; font-weight: 800; color: var(--lc); letter-spacing: -.025em; }
.srow .d { display: block; font-size: 9.5px; font-weight: 800; color: #444; margin-top: 2px; }

/* ── progress: the level table ────────────────────────────────── */
.ptab {
  border: 1px solid #ebeaea; border-radius: 12px; overflow: hidden;
  box-shadow: var(--l-sh);
}
.ptab .r { display: grid; grid-template-columns: 1fr 1fr 1fr .9fr .9fr .7fr; }
.ptab .r > * {
  padding: 5.5px 2px; text-align: center;
  font-size: 9px; font-weight: 800; color: var(--l-ink);
  border-top: 1px solid #f3f2f2;
}
.ptab .r.hd > * {
  background: var(--lc); color: #fff; border-top: 0;
  font-size: 9.5px; padding-block: 7px;
}

.lvcfg {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 9px 11px;
  background: #fff; border: 1px solid var(--l-line); border-radius: 11px;
  box-shadow: var(--l-sh);
}
.lvcfg > svg { width: 14px; height: 14px; color: #e8873f; flex: none; }
.lvcfg .t { flex: 1; }
.lvcfg b { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: -.02em; }
.lvcfg span { display: block; font-size: 9px; font-weight: 700; color: #5d5d5d; }
.lvcfg .ch { color: #7d7d7d; font-size: 11px; }

.stk {
  margin-top: 8px; padding: 10px 11px;
  background: #fff; border: 1px solid var(--l-line); border-radius: 12px;
  box-shadow: var(--l-sh);
}
.stk-top { display: flex; align-items: center; gap: 7px; }
.stk-top .fire { font-size: 15px; line-height: 1; }
.stk-top .t { flex: 1; }
.stk-top b { font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.stk-top .z {
  background: var(--lc); color: #fff; border-radius: 999px;
  font-size: 8px; font-weight: 800; padding: 1px 5px;
}
.stk-top .mx { display: block; font-size: 9.5px; font-weight: 800; color: #5d5d5d; }
.stk-top > svg { width: 14px; height: 14px; color: var(--lc); }

.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 9px; }
.days .d {
  border-radius: 7px; background: #f1f0f0; color: var(--l-ink);
  text-align: center; font-size: 10.5px; font-weight: 800; padding: 6px 0;
}
.days .d.hot { background: #fbdcd6; }
.days .lb { text-align: center; font-size: 8.5px; font-weight: 800; color: #3a3a3a; margin-top: 4px; }

.stk-ft { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.stk-ft > svg { width: 13px; height: 13px; color: #e8873f; flex: none; }
.stk-ft .t { flex: 1; }
.stk-ft b { display: block; font-size: 10px; font-weight: 800; }
.stk-ft span { display: block; font-size: 8.5px; font-weight: 700; color: #5d5d5d; }
.stk-ft .live { text-align: center; }
.stk-ft .live i {
  display: grid; place-items: center; margin-inline: auto;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--lc); color: #fff; font-size: 8px; font-weight: 800; font-style: normal;
}
.stk-ft .live u { display: block; text-decoration: none; font-size: 8px; font-weight: 800; margin-top: 2px; }

/* ── light tab bar ────────────────────────────────────────────── */
.tabs.lite {
  background: #fff; border-top: 1px solid #efeded;
  padding: 7px 0 11px;
}
.tabs.lite span { color: #9b9898; font-size: 9px; font-weight: 800; gap: 2px; }
.tabs.lite span::before { display: none; }
.tabs.lite svg { width: 17px; height: 17px; }
.tabs.lite span.on { color: var(--lc); }

/* ── App screens ────────────────────────────────────────────────── */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: #f6f1ef;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.985);
  transition: opacity .5s var(--ease), transform .55s var(--ease-out);
  pointer-events: none;
  will-change: opacity, transform;
}
.screen.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* A stage the crossfade has finished with is still lying there at
   opacity 0, and an invisible element still takes a click. The one
   that flies into the four-skills section parks exactly over the
   phone it handed to — whose module tiles are tappable — and
   swallowed every tap. Written as a class so it outranks the rule
   above, which turns pointer-events back on for video controls. */
.scene-stage.is-gone,
.scene-stage.is-gone .screen.is-on { pointer-events: none; }
/* Screens already scrolled past leave upward, so the stack reads as
   forward motion through the app rather than a crossfade pile. */
.screen.is-past { transform: translate3d(0, -14px, 0) scale(.985); }

.sb {                                    /* status bar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7% 8% 2%;
  font-size: 9.5px;
  font-weight: 600;
  color: #fff;
  flex: none;
}
.sb-icons { display: flex; gap: 4px; align-items: flex-end; opacity: .9; }
.sb-icons i { width: 3px; background: currentColor; border-radius: 1px; display: block; }
.sb-icons i:nth-child(1) { height: 4px; }
.sb-icons i:nth-child(2) { height: 6px; }
.sb-icons i:nth-child(3) { height: 8px; }
.sb-icons b {
  width: 16px; height: 8px; border: 1px solid currentColor; border-radius: 2px;
  position: relative; opacity: .8;
}
.sb-icons b::after {
  content: ""; position: absolute; inset: 1.5px; right: 5px;
  background: currentColor; border-radius: 1px;
}

/* A column flex, so a screen can pin its primary action to the
   bottom the way a real app does — which is also what stops the
   mock ending halfway down a very tall phone. */
.sc-body { flex: 1; padding: 4% 8% 8%; overflow: hidden; display: flex; flex-direction: column; }
/* Child selectors so these beat the margin-top a component like
   .note or .cefr sets on itself — same specificity otherwise, and
   source order would win. */
.sc-body > .push { margin-top: auto; }    /* sits on the bottom edge */
.sc-body > .mid  { margin-block: auto; }  /* centres in whatever is left */

.sc-lbl {
  font-family: var(--mono); font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; color: #8e8084; margin: 13px 0 6px;
}

/* compact recent-activity rows */
.mini { display: flex; flex-direction: column; gap: 4px; }
.mini .r {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; background: #1a1418; border: 1px solid #241d21; border-radius: 9px;
}
.mini .r .nm { font-size: 9.5px; font-weight: 600; flex: 1; letter-spacing: -.01em; }
.mini .r .dt { font-size: 8px; color: #6b5f63; }
.mini .r .sc { font-size: 10.5px; font-weight: 800; letter-spacing: -.03em; color: var(--c, var(--coral)); }

/* in-app primary action */
.sbtn {
  border-radius: 10px; padding: 9px; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: -.01em;
  background: var(--coral); color: #fff;
}
.sbtn.ghost { background: transparent; border: 1px solid #2e2529; color: #b3a5a9; }

/* question progress */
.qdots { display: flex; gap: 3px; justify-content: center; margin-bottom: 9px; }
.qdots i { width: 100%; height: 2.5px; border-radius: 3px; background: #2b2328; display: block; }
.qdots i.d { background: var(--coral); }
.qdots i.c { background: #5d4a4d; }

.sc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sc-back {
  width: 20px; height: 20px; border-radius: 50%;
  background: #241d21; display: grid; place-items: center;
  font-size: 11px; color: #bdadb1; flex: none;
}
.sc-title { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.sc-sub { font-size: 9.5px; color: #9b8c90; margin-top: 1px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700;
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber);
}

/* skill tiles — home screen */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.tile { background: #1a1418; border: 1px solid #241d21; border-radius: 11px; padding: 9px 9px 10px; }
.tile .nm { font-size: 10.5px; font-weight: 700; letter-spacing: -.01em; }
.tile .ct { font-size: 8.5px; color: #8e8084; margin-top: 1px; }
.tile .bar { height: 3px; border-radius: 3px; background: #2b2328; margin-top: 8px; overflow: hidden; }
.tile .bar i { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--coral)); }

.cont {
  margin-top: 10px; border-radius: 12px; padding: 10px 11px;
  background: linear-gradient(135deg, var(--coral-deep), #8f2a24);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cont .k { font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.cont .v { font-size: 12px; font-weight: 700; margin-top: 2px; }
.cont .go {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 11px;
}

/* module rows */
.rows { display: flex; flex-direction: column; gap: 5px; }
.rows .row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  background: #1a1418; border: 1px solid #241d21; border-radius: 10px;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.rows .row .ic {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  background: color-mix(in srgb, var(--c, var(--coral)) 18%, transparent);
  color: var(--c, var(--coral));
}
.rows .row .nm { font-size: 10.5px; font-weight: 600; flex: 1; letter-spacing: -.01em; }
.rows .row .ch { font-size: 10px; color: #6b5f63; }
.rows .row.sel {
  background: color-mix(in srgb, var(--coral) 15%, #1a1418);
  border-color: color-mix(in srgb, var(--coral) 45%, transparent);
}
.rows .row.sel .ch { color: var(--coral); }

/* task screen */
.prompt-card { background: #1a1418; border: 1px solid #241d21; border-radius: 12px; padding: 11px 12px; }
.prompt-card .k {
  font-family: var(--mono); font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; color: #8e8084;
}
.prompt-card .s {
  font-size: 12.5px; font-weight: 600; line-height: 1.42; margin-top: 6px; letter-spacing: -.01em;
}

.wave { display: flex; align-items: center; justify-content: center; gap: 2.5px; height: 46px; }
.wave i {
  width: 2.5px; border-radius: 2px; background: var(--coral);
  height: calc(6px + var(--h, .3) * 34px);
  opacity: .9;
}
.wave.idle i { background: #3a3035; }

.screen.is-on .wave.live i { animation: vu .9s var(--ease) infinite alternate; }
.wave.live i:nth-child(3n)   { animation-delay: .12s; }
.wave.live i:nth-child(3n+1) { animation-delay: .26s; }
.wave.live i:nth-child(4n)   { animation-delay: .38s; }
@keyframes vu {
  from { height: calc(5px + var(--h, .3) * 12px); }
  to   { height: calc(6px + var(--h, .3) * 40px); }
}

.rec {
  width: 52px; height: 52px; border-radius: 50%; margin: 6px auto 0;
  background: var(--coral); display: grid; place-items: center;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--coral) 20%, transparent);
}
.rec::after { content: ""; width: 15px; height: 15px; border-radius: 4px; background: #fff; }
.rec.idle::after { border-radius: 50%; width: 17px; height: 17px; }
.screen.is-on .rec.live { animation: pulse 1.5s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 5px  color-mix(in srgb, var(--coral) 22%, transparent); }
  50%      { box-shadow: 0 0 0 13px color-mix(in srgb, var(--coral) 6%, transparent); }
}

.timer {
  text-align: center; font-family: var(--mono); font-size: 11px;
  color: var(--coral); margin-top: 9px; letter-spacing: .06em;
}
.hint { text-align: center; font-size: 9px; color: #8e8084; margin-top: 4px; }

/* score screen */
.score-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ring { width: 66px; height: 66px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 19px; font-weight: 800; letter-spacing: -.04em;
}
.ring .n small { font-size: 8px; font-weight: 600; color: #8e8084; margin-left: 1px; }
.screen.is-on .ring circle.v { animation: draw 1.1s var(--ease-out) both .15s; }
@keyframes draw { from { stroke-dashoffset: 170; } }

.verdict .g {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  background: color-mix(in srgb, var(--mint) 16%, transparent); color: var(--mint);
}
.verdict .t { font-size: 11px; font-weight: 700; margin-top: 5px; letter-spacing: -.01em; }
.verdict .d { font-size: 9px; color: #8e8084; margin-top: 2px; line-height: 1.4; }

.params { display: flex; flex-direction: column; gap: 7px; }
.param .l { display: flex; justify-content: space-between; font-size: 9px; color: #b3a5a9; margin-bottom: 3px; }
.param .l b { color: #f6f1ef; font-weight: 700; }
.param .t { height: 3px; border-radius: 3px; background: #2b2328; overflow: hidden; }
.param .t i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--c, var(--coral));
  width: var(--w, 50%);
  transform-origin: 0 50%;
}
.screen.is-on .param .t i { animation: grow .8s var(--ease-out) both; }
.screen.is-on .param:nth-child(2) .t i { animation-delay: .08s; }
.screen.is-on .param:nth-child(3) .t i { animation-delay: .16s; }
.screen.is-on .param:nth-child(4) .t i { animation-delay: .24s; }
@keyframes grow { from { transform: scaleX(0); } }

.note {
  margin-top: 10px; padding: 8px 9px; border-radius: 9px;
  background: #1a1418; border: 1px solid #241d21;
  font-size: 9px; color: #b3a5a9; line-height: 1.5;
}
.note b { color: var(--coral); font-weight: 700; }

/* progress screen */
.chart { height: 72px; margin: 4px 0 12px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.screen.is-on .chart .ln { animation: draw2 1.3s var(--ease-out) both .1s; }
@keyframes draw2 { from { stroke-dashoffset: 420; } }

.dots { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin-top: 8px; }
.dots i { aspect-ratio: 1; border-radius: 3px; background: #241d21; display: block; }
.dots i.d { background: color-mix(in srgb, var(--amber) 70%, transparent); }

.cefr {
  margin-top: 11px; border-radius: 11px; padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--violet) 38%, transparent);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  display: flex; align-items: center; gap: 9px;
}
.cefr .lv {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--violet); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.cefr .t { font-size: 10px; font-weight: 700; }
.cefr .d { font-size: 8.5px; color: #a99fc6; }

/* tab bar */
.tabs {
  flex: none; display: flex; justify-content: space-around;
  padding: 7px 0 11px;
  border-top: 1px solid #211a1e; background: #140f13;
}
.tabs span { font-size: 8px; color: #6b5f63; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tabs span::before {
  content: ""; width: 13px; height: 13px; border-radius: 4px;
  background: currentColor; opacity: .55;
}
.tabs span.on { color: var(--coral); }
.tabs span.on::before { opacity: 1; }

/* ── Video slot — what gets replaced with a real <video> ────────── */

.vslot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--accent, var(--coral)) 20%, transparent), transparent 70%),
    linear-gradient(170deg, #1d1620, #0c090c);
  text-align: center;
  padding: 8%;
  overflow: hidden;
}
.vslot::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(247,242,240,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,242,240,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 75%);
}
.vslot > * { position: relative; }
.vslot .play {
  width: 54px; height: 54px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent, var(--coral)) 92%, #000);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--coral)) 40%, transparent),
              0 0 34px color-mix(in srgb, var(--accent, var(--coral)) 42%, transparent);
  margin-inline: auto;
}
.vslot .play svg { width: 19px; height: 19px; margin-left: 3px; }
.vslot .nm { font-size: 12.5px; font-weight: 700; margin-top: 14px; letter-spacing: -.02em; }
.vslot .st {
  font-family: var(--mono); font-size: 8px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-3); margin-top: 6px;
}

/* A real <video> drops straight in with the same class. It needs an
   explicit size: a replaced element with height:auto uses its own
   intrinsic dimensions and ignores inset:0, so it would otherwise
   sit at its default 300x150 in the middle of the phone. */
video.vslot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  background: #0d0a0c;
}

/* ══ SCENE — the sticky scroll mechanic ══════════════════════════ */

.scene { position: relative; }

.scene-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  /* No overflow: hidden — the phone flies out of this box on its way to
     the next section, and clipping cuts it in half mid-flight. Nothing
     else here overflows: beats are stacked in one grid cell, and the app
     screens are clipped by the phone itself. */
}

.scene-grid {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px);
  align-items: center;
  gap: clamp(32px, 7vw, 110px);
}
.scene-grid.flip { grid-template-columns: minmax(0, 340px) 1fr; }
.scene-grid.flip .scene-copy { order: 2; }

.scene-stage { display: flex; justify-content: center; position: relative; }

/* The hero phone flies into the next section, so it has to paint above
   it. .hero sets no z-index of its own, so this lands in the root
   stacking context — over #what, under the nav (60). */
.hero .scene-stage { z-index: 30; }
/* A stage can be the target of one hop and the source of the next, so
   the two fades are separate variables multiplied together rather than
   both writing `opacity`. */
.scene-stage {
  opacity: calc(var(--ho-in, 1) * var(--ho-out, 1));
  will-change: transform, opacity;
  transition: none;
}
#what .scene-stage { z-index: 20; }

/* Full size here. This was held at 272 while the scene carried
   pointer labels in the gutters either side of the phone — the fixed
   rail is opaque to 200px, so those labels had about 62px to live in.
   The word field does not use the gutters, so the phone gets its width
   back and matches the hero it flies in from. */

/* An ambient wash behind the whole scene, retinting with --accent —
   the same variable the label, ticks and ghost numeral already use.
   Two colour-mix()-driven radial gradients with identical structure
   interpolate their colour smoothly on a plain transition; no
   @property registration needed, and no browser support gap. Sits on
   the section itself, behind the grid, never above the phone. */
#what { position: relative; }
#what::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 60% at 82% 38%, color-mix(in srgb, var(--accent, var(--coral)) 20%, transparent), transparent 72%),
    radial-gradient(38% 46% at 14% 82%, color-mix(in srgb, var(--accent, var(--coral)) 10%, transparent), transparent 74%);
  transition: background 1.1s var(--ease);
  pointer-events: none;
  z-index: 0;
}
/* z-index only — .scene-pin already sets position: sticky, and
   `#what .scene-pin` has higher specificity than that base rule, so
   repeating position here overrode it to relative. The pin stopped
   sticking; every beat scrolled past instead of holding on screen. */
#what .scene-pin { z-index: 1; }
/* On a phone the glow and the cloud round the four-skills phone, and
   the fan in "What Myna is", are wider than the screen; unclipped they
   widened the whole page and the browser zoomed it out to fit. */
@media (max-width: 900px) {
  #what .scene-pin, #skills .sk-stage { overflow-x: clip; }
}

/* Beats stack in one grid cell; only one is visible at a time. */
.scene-copy { display: grid; }
.beat {
  position: relative;
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .45s var(--ease), transform .6s var(--ease-out);
  pointer-events: none;
  will-change: opacity, transform;
}
.beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.beat.is-past { transform: translate3d(0, -26px, 0); }

/* The ordinal, made a feature instead of a small mono suffix. Behind
   the heading and bleeding into the whitespace the copy column has to
   spare — this is what stopped the section reading as a bare label
   and a paragraph on black. */
.beat-ghost {
  position: absolute;
  top: -0.34em;
  right: 0;
  z-index: -1;
  font-family: var(--sans);
  font-size: clamp(5.4rem, 9vw, 8.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--accent, var(--coral)) 20%, transparent);
  -webkit-user-select: none;
  user-select: none;
  transition: color .6s var(--ease);
}

/* --accent is set on the scene by tour.js, so the eyebrow, the ticks
   and the phone glow all retint together when a beat changes it. */
.beat-n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--accent, var(--coral)); margin-bottom: 14px; transition: color .5s var(--ease); }
.beat h3 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); letter-spacing: -.035em; }
.beat p {
  margin: 16px 0 0;
  color: var(--on-2);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  max-width: 42ch;
  line-height: 1.6;
}

/* Beat ticks — shows the viewer how long the scene runs. */
/* The coral one-liner under each heading, straight off the flyer. */
/* .beat .beat-sub, not .beat-sub — `.beat p` is (0,1,1) and would
   otherwise win and paint this the muted body colour. */
.beat .beat-sub {
  margin: 12px 0 0;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--accent, var(--coral));
  transition: color .5s var(--ease);
}
.beat .beat-sub + p { margin-top: 12px; }

.beat-ticks { display: flex; gap: 6px; margin-top: 30px; }
.beat-ticks i {
  width: 26px; height: 3px; border-radius: 3px;
  background: var(--hairline-2);
  transition: background .35s var(--ease), width .35s var(--ease);
  display: block;
}
.beat-ticks i.on { background: var(--accent, var(--coral)); width: 40px; }



/* ══ THE FOUR SKILLS — the selector, the modules and the phone ═══
   One control for the four skills with a thumb that slides under the
   chosen one, the modules of that skill beneath it, and an upright
   phone showing the app itself — the skill's screen, and over it
   whichever module is open.

   Everything is Myna coral. The phone's screen is laid out once at
   the phone's fixed 286 x 621 and scaled as a whole, like every other
   phone on the page, so its type never goes soft or reflows.
   ═════════════════════════════════════════════════════════════════ */
#skills { height: auto; min-height: 0; }
/* The deck block this section used to be makes its pin static with
   deep padding on short screens; this one is one screen at every
   height. */
#skills .scene-pin {
  position: relative;
  height: 100svh;
  padding-block: 0;
  align-items: center;
}
#skills .sk-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  height: 100%;
  padding-block: clamp(20px, 4.5svh, 52px);
}

/* ── the words ──────────────────────────────────────────────────── */
.sk-col {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.5svh, 26px);
  min-width: 0;
}
.sk-head { position: relative; z-index: 3; }
.sk-sub {
  max-width: 46ch;
  margin: 12px 0 0;
  color: var(--on-2);
  font-size: clamp(.9rem, 1.05vw, 1.02rem);
  line-height: 1.55;
}

/* ── the selector ───────────────────────────────────────────────── */
.sk-select {
  display: flex;
  align-items: center;
  gap: clamp(8px, .9vw, 12px);
}
.sk-step {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface);
  color: var(--on-2);
  box-shadow: 0 6px 14px -10px var(--cast);
  cursor: pointer;
  transition: color .22s var(--ease), border-color .22s var(--ease),
              transform .22s var(--ease-out), box-shadow .3s var(--ease);
}
.sk-step svg { width: 18px; height: 18px; }
.sk-step:hover {
  color: var(--coral);
  border-color: color-mix(in srgb, var(--coral) 45%, transparent);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--coral) 70%, transparent);
  transform: scale(1.06);
}
.sk-step:active { transform: scale(.93); }
.sk-step:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.sk-seg {
  --pad: 5px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--pad);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: color-mix(in srgb, var(--on) 3.5%, var(--surface));
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .05);
}
/* One element, moved by --at. It overshoots a touch on the way in,
   which is what makes it read as travelling rather than jumping. */
.sk-thumb {
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  left: var(--pad);
  width: calc((100% - var(--pad) * 2) / 4);
  border-radius: 17px;
  background:
    radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / .22), transparent 60%),
    linear-gradient(160deg, #ef6b53, var(--coral) 55%, #cf433b);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .3),
    0 14px 26px -14px color-mix(in srgb, var(--coral) 85%, transparent);
  transform: translateX(calc(var(--at, 0) * 100%));
  transition: transform .56s cubic-bezier(.3, 1.28, .4, 1);
}
.sk-tab {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px 11px;
  border: 0;
  border-radius: 17px;
  background: none;
  font: inherit;
  color: var(--on-2);
  cursor: pointer;
  transition: color .3s var(--ease);
}
.sk-tab-i {
  width: clamp(21px, 1.9vw, 25px);
  height: clamp(21px, 1.9vw, 25px);
  color: var(--coral);
  transition: transform .45s var(--ease-out), color .3s var(--ease);
}
.sk-tab-n {
  font-size: clamp(.8rem, .92vw, .9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--on);
  transition: color .3s var(--ease);
}
.sk-tab-c {
  font-size: .68rem;
  color: var(--on-3);
  transition: color .3s var(--ease);
}
.sk-tab:hover .sk-tab-i { transform: translateY(-2px); }
.sk-tab.on .sk-tab-i,
.sk-tab.on .sk-tab-n { color: #fff; }
.sk-tab.on .sk-tab-c { color: rgb(255 255 255 / .82); }
.sk-tab.on .sk-tab-i { transform: scale(1.1); }
.sk-tab:focus-visible { outline: 2px solid var(--coral); outline-offset: -3px; }

.sk-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: -4px;
}
.sk-list-k {
  margin: 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-3);
}
/* Until a module has been looked at, a cue says where to look. */
.sk-cue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 auto 0 0;
  padding: 6px 10px 6px 13px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ff7d63, #e2544c);
  box-shadow: 0 10px 20px -12px rgba(226, 84, 76, .9);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.sk-cue svg { width: 15px; height: 15px; animation: skCue 1.1s ease-in-out infinite; }
@keyframes skCue { 50% { transform: translateY(3px); } }
#skills.sk-tried .sk-cue { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.sk-hint {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--on-3);
}
.sk-hint kbd {
  font: 600 .66rem/1 var(--mono);
  padding: 4px 6px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--hairline);
  color: var(--on-2);
}

/* ── the modules ────────────────────────────────────────────────── */
/* Four rows are always reserved. Speaking has twelve modules and
   Listening two, and without the reserve the whole column changed
   height on every switch and the heading jumped up and down with it. */
#skills .sk-grid {
  --row: 58px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--row);
  gap: 10px;
  align-content: start;
  min-height: calc(var(--row) * 4 + 30px);
}
.skc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 8px 12px 8px 9px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / .03), 0 10px 20px -18px var(--cast);
  font: inherit;
  text-align: left;
  color: var(--on);
  cursor: pointer;
  transition: transform .3s var(--ease-out), border-color .25s var(--ease),
              box-shadow .3s var(--ease), background .25s var(--ease);
}
.skc:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--coral) 34%, transparent);
  box-shadow: 0 16px 28px -20px color-mix(in srgb, var(--coral) 60%, var(--cast));
}
.skc.on {
  border-color: color-mix(in srgb, var(--coral) 58%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--coral) 8%, var(--surface)), var(--surface) 70%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--coral) 12%, transparent),
    0 16px 28px -20px color-mix(in srgb, var(--coral) 60%, var(--cast));
}
.skc:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* The icon tile. A fixed box with the drawing inset inside it: the
   icons come from the app with padding that varies a lot, and the
   box is what makes twelve of them read as one set. */
.skc-ic,
.ps-row-ic,
.ps-card-ic {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.skc-ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--coral) 9%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coral) 14%, transparent);
  transition: background .25s var(--ease);
}
.skc.on .skc-ic { background: color-mix(in srgb, var(--coral) 17%, #fff); }
.skc-ic b,
.ps-row-ic b,
.ps-card-ic b {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--coral);
  transition: opacity .25s var(--ease);
}
.skc-ic b { font-size: .72rem; }
.skc-ic img,
.ps-row-ic img,
.ps-card-ic img {
  position: absolute;
  object-fit: contain;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.skc-ic img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.has-icon > img { opacity: 1; }
.has-icon > b { opacity: 0; }

.skc-t {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(.74rem, .84vw, .82rem);
  font-weight: 650;
  letter-spacing: -.012em;
  line-height: 1.22;
  padding-right: 10px;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Out of the flow. Invisible until hover but still holding its 15px,
   it squeezed the name until single long words — Questionnaire,
   Description — were clipped mid-word on narrower screens. Now it
   floats over the card's right edge and the name has the room. */
.skc-go {
  position: absolute;
  right: 9px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  color: var(--coral);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s var(--ease), transform .3s var(--ease-out);
  pointer-events: none;
}
.skc:hover .skc-go,
.skc.on .skc-go { opacity: 1; transform: none; }

/* The deal: the row slides in from the side the choice moved towards,
   one card behind the next. */
@keyframes skcNext {
  from { opacity: 0; transform: translateX(26px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes skcPrev {
  from { opacity: 0; transform: translateX(-26px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
#skills .sk-grid.deal-next .skc { animation: skcNext .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 34ms); }
#skills .sk-grid.deal-prev .skc { animation: skcPrev .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 34ms); }
#skills:not(.deck-live) .skc { opacity: 0; }

@keyframes skOpen { from { opacity: 0; transform: translateY(6px); } }

/* ── the phone's side ───────────────────────────────────────────── */
#skills .sk-stage,
#skills #deck-phone { --pw-base: 330; }
#skills .sk-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
}
#skills #deck-phone { filter: none; }

/* A disc of light and a ring behind the phone, and a contact shadow
   under it. The phone stands on the page, not on furniture. */
.sk-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120%, calc(var(--pw-base) * var(--pw-k) * 2.3px));
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--coral) 17%, transparent),
    color-mix(in srgb, var(--coral) 6%, transparent) 62%,
    transparent 74%);
  pointer-events: none;
}
.sk-halo::after {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--coral) 20%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 30%, transparent 78%);
}
.sk-floor {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--pw-base) * var(--pw-k) * 1.084px - 12px);
  width: calc(var(--pw-base) * var(--pw-k) * .92px);
  height: 26px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(70 30 30 / .3), transparent);
  filter: blur(5px);
  pointer-events: none;
}

/* The cloud, off the phone's shoulder: its right edge half the
   phone's width out from the middle, just touching the frame. Any
   further in and it sits on the glass — over the clock and the back
   button, which is the one place on the screen it must not be. */
#skills .think {
  left: auto;
  right: calc(50% + var(--pw-base) * var(--pw-k) * .5px - 6px);
  top: 14%;
  width: 224px;
  z-index: 5;
}

/* The glass catches a little light across its top corner. */
.ps-glare {
  position: absolute;
  inset: 3.2%;
  border-radius: 10.9% / 5.1%;
  background: linear-gradient(118deg,
    rgb(255 255 255 / .2) 0%, rgb(255 255 255 / .05) 26%, transparent 40%);
  pointer-events: none;
  z-index: 20;
}

/* ── the app on the phone ───────────────────────────────────────── */
.ps {
  --c: var(--coral);
  display: block;
  background: linear-gradient(180deg, #fff 0%, #fbf6f4 100%);
  color: #1d1517;
  font-family: var(--sans);
}
.ps p { margin: 0; }

.ps-sb {
  position: absolute;
  inset: 0 0 auto 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 22px 0 28px;
  font-size: 12.5px;
  z-index: 6;
}
.ps-sb b { font-weight: 650; letter-spacing: -.01em; }
.ps-sb-i { display: flex; align-items: center; gap: 5px; }
.ps-sb-i svg { height: 10px; width: auto; fill: #1d1517; }
.ps-batt {
  position: relative;
  display: block;
  width: 22px;
  height: 11px;
  padding: 1.5px;
  border: 1.2px solid rgb(29 21 23 / .42);
  border-radius: 3.5px;
}
.ps-batt::after {
  content: "";
  position: absolute;
  right: -3.5px;
  top: 3px;
  width: 1.6px;
  height: 3.6px;
  border-radius: 0 1px 1px 0;
  background: rgb(29 21 23 / .42);
}
.ps-batt i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: #1d1517; }

.ps-views {
  position: absolute;
  inset: 44px 0 64px 0;
  overflow: hidden;
}
.ps-view {
  position: absolute;
  inset: 0;
  padding: 4px 16px 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s var(--ease);
}
.ps-mod {
  transform: translateX(104%);
  background: linear-gradient(180deg, #fff, #fbf6f4);
  box-shadow: -20px 0 30px -22px rgb(0 0 0 / .3);
}
.ps.is-mod .ps-mod { transform: none; }
.ps.is-mod .ps-skill { transform: translateX(-22%); opacity: .5; }
.ps-skill.in-next { animation: psInNext .5s cubic-bezier(.2, .8, .2, 1); }
.ps-skill.in-prev { animation: psInPrev .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes psInNext { from { opacity: 0; transform: translateX(34px); } }
@keyframes psInPrev { from { opacity: 0; transform: translateX(-34px); } }
@keyframes psUp { from { opacity: 0; transform: translateY(10px); } }
/* One module straight to the next: the screen is already up, so the
   new one fades in where it stands instead of replaying the staggered
   entrance — that replay, on every card the pointer crossed, was the
   flicker. */
.ps-mod.quick .ps-card,
.ps-mod.quick .ps-desc,
.ps-mod.quick .ps-film,
.ps-mod.quick .ps-steps,
.ps-mod.quick .ps-cta { animation-duration: .22s; animation-delay: 0s; }
.ps-mod.quick .ps-prog i { animation-duration: .35s; animation-delay: 0s; }

.ps-app { display: flex; align-items: center; gap: 9px; height: 40px; }
.ps-round {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f4ecea;
}
.ps-round svg { width: 15px; height: 15px; }
.ps-title { flex: 1 1 auto; font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.ps-pill {
  font-size: 9.5px;
  font-weight: 650;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);
}
.ps-count { font-size: 11px; font-weight: 650; color: #8c7c7f; }

/* The skill's card. */
.ps-hero {
  position: relative;
  margin-top: 8px;
  padding: 14px 14px 13px;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 100% at 100% 0%, rgb(255 255 255 / .24), transparent 55%),
    linear-gradient(145deg, #f0725b, var(--c) 55%, #c63f39);
  box-shadow: 0 16px 28px -18px rgb(226 84 76 / .85);
}
.ps-hero::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgb(255 255 255 / .1);
}
.ps-hero-i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgb(255 255 255 / .2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .26);
}
.ps-hero-i svg { width: 20px; height: 20px; }
.ps-hero-n { margin-top: 10px !important; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.ps-hero-l {
  margin-top: 3px !important;
  font-size: 10.5px;
  line-height: 1.4;
  opacity: .92;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ps-hero-f {
  position: relative;
  z-index: 1;
  margin-top: 9px !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / .18);
  font-size: 9.5px;
  font-weight: 650;
}
.ps-hero-f svg { width: 11px; height: 11px; }

.ps-label {
  margin: 16px 2px 8px !important;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 750;
}
.ps-label span { font-size: 10px; font-weight: 600; color: #9b8c8f; }

/* The list runs off the foot of the screen the way a real one does,
   fading out rather than ending in a hard line. */
.ps-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 76%, transparent 98%);
}
.ps-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  border: 1px solid #f1e8e6;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 14px -12px rgb(60 30 30 / .35);
  animation: psUp .45s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms + 80ms);
}
.ps-row-ic {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 10%, #fff);
}
.ps-row-ic b { font-size: 9.5px; }
.ps-row-ic img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.ps-row-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ps-row-t b {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-row-t i { font-style: normal; font-size: 9.5px; color: #9b8c8f; }
.ps-row-go { flex: none; width: 13px; height: 13px; color: #c5b7b9; }

/* A module, pushed over the skill. */
.ps-prog {
  height: 4px;
  margin: 4px 2px 12px;
  border-radius: 4px;
  background: #f2e7e4;
  overflow: hidden;
}
.ps-prog i {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0725b, var(--c));
  transform-origin: left center;
  animation: psGrow .8s cubic-bezier(.2, .8, .2, 1) both .2s;
}
@keyframes psGrow { from { transform: scaleX(0); } }
.ps-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid #f1e8e6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 24px -20px rgb(60 30 30 / .5);
  animation: psUp .5s var(--ease-out) both .12s;
}
.ps-card-ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--c) 17%, #fff), color-mix(in srgb, var(--c) 7%, #fff));
}
.ps-card-ic b { font-size: 11px; }
.ps-card-ic img { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.ps-card-t { min-width: 0; }
.ps-card-k {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c);
}
.ps-card-n { margin-top: 2px !important; font-size: 15.5px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.ps-desc {
  margin: 10px 2px 0 !important;
  font-size: 10.5px;
  line-height: 1.5;
  color: #6e5f62;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  animation: psUp .5s var(--ease-out) both .22s;
}

/* ── the phone at rest: the skill, and where to look ── */
.ps-rest {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 26px;
  padding: 0 10px;
  text-align: center;
}
.ps-rest-i {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(145deg, #ff8a6e, var(--c) 60%, #c9433c);
  box-shadow: 0 22px 36px -18px var(--c), inset 0 2px 0 rgb(255 255 255 / .28);
  animation: psUp .5s var(--ease-out) both .05s;
}
.ps-rest-i svg { width: 46px; height: 46px; }
.ps-rest-n { margin-top: 18px !important; font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: #1c1517; }
.ps-rest-l { margin-top: 8px !important; max-width: 24ch; font-size: 12px; line-height: 1.5; color: #6e5f62; }
.ps-rest-c { margin-top: 14px !important; padding: 5px 11px; border-radius: 999px; font-size: 9.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.ps-rest-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 44px !important;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  color: #3d3033;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, transparent), 0 12px 22px -18px rgb(60 30 30 / .5);
}
.ps-rest-h svg { width: 14px; height: 14px; color: var(--c); animation: psNudge 1.2s ease-in-out infinite; }
@keyframes psNudge { 50% { transform: translateX(-4px); } }

/* ── a module on the phone: its skill, its icon, its name, one line ── */
.ps-mcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
  padding: 16px 14px 14px;
  border-radius: 20px;
  text-align: center;
  background: #fff;
  box-shadow: inset 0 0 0 1px #f1e8e6, 0 14px 26px -22px rgb(60 30 30 / .5);
  animation: psUp .45s var(--ease-out) both .06s;
}
.ps-mchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, #fff);
}
.ps-mchip svg { width: 12px; height: 12px; }
.ps-mic {
  width: 76px;
  height: 76px;
  margin-top: 12px;
  border-radius: 22px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 16%, #fff), color-mix(in srgb, var(--c) 6%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
}
.ps-mic b { font-size: 16px; }
.ps-mic img { inset: 13px; width: calc(100% - 26px); height: calc(100% - 26px); }
.ps-mname { margin-top: 12px !important; font-size: 17px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: #1c1517; }
.ps-mdesc { margin-top: 6px !important; max-width: 26ch; font-size: 11px; line-height: 1.5; color: #6e5f62; }
.ps-mod .ps-film { height: 176px; margin-top: 12px; }
.ps-mod.quick .ps-mcard { animation-duration: .22s; animation-delay: 0s; }

/* The clip. Ready first, with a play button breathing; it starts once
   the cloud beside the phone has finished its sentence. */
.ps-film {
  position: relative;
  margin-top: 12px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #3b2629, #140d0f 72%);
  animation: psUp .5s var(--ease-out) both .32s;
}
.ps-film-art {
  width: 64px;
  height: 64px;
  color: rgb(255 255 255 / .17);
  transition: color .5s var(--ease), transform .8s var(--ease-out);
}
.ps-film-art svg { width: 100%; height: 100%; }
.ps-film.is-playing .ps-film-art { color: rgb(255 255 255 / .09); transform: scale(1.12); }
.ps-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-wave {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.ps-wave i {
  width: 3.5px;
  height: 30%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--c) 80%, #fff);
}
.ps-film.is-playing .ps-wave { opacity: 1; }
.ps-film.is-playing .ps-wave i { animation: psWave .9s ease-in-out infinite alternate; }
.ps-wave i:nth-child(2n) { animation-duration: .7s !important; animation-delay: -.2s !important; }
.ps-wave i:nth-child(3n) { animation-duration: 1.1s !important; animation-delay: -.4s !important; }
.ps-wave i:nth-child(5n) { animation-duration: .6s !important; animation-delay: -.1s !important; }
@keyframes psWave { to { height: 100%; } }
.ps-play {
  position: absolute;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 8px rgb(226 84 76 / .2);
  animation: psPulse 1.6s ease-in-out infinite;
  transition: opacity .3s var(--ease), transform .35s var(--ease-out);
}
.ps-play svg { width: 18px; height: 18px; margin-left: 3px; }
.ps-film.is-playing .ps-play { opacity: 0; transform: scale(.7); }
@keyframes psPulse { 50% { box-shadow: 0 0 0 15px rgb(226 84 76 / .05); } }
.ps-hud {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.ps-film.is-playing .ps-hud { opacity: 1; }
.ps-hud b { font-size: 9.5px; font-weight: 650; color: #fff; }
.ps-hud > i { display: block; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .2); overflow: hidden; }
.ps-hud > i > i {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
.ps-film.is-playing .ps-hud > i > i { animation: psRun 9s linear forwards; }
@keyframes psRun { to { transform: scaleX(1); } }

.ps-steps {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  animation: psUp .5s var(--ease-out) both .42s;
}
.ps-steps p {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: #3d3033;
}
.ps-steps b {
  flex: none;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);
  font-size: 9.5px;
  font-weight: 750;
}
.ps-cta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  background: linear-gradient(145deg, #ef6b53, var(--c));
  color: #fff;
  font-size: 12.5px;
  font-weight: 750;
  box-shadow: 0 12px 22px -12px rgb(226 84 76 / .9);
  animation: psUp .5s var(--ease-out) both .5s;
}
.ps-cta svg { width: 14px; height: 14px; }

.ps-tabs {
  position: absolute;
  inset: auto 0 0 0;
  height: 64px;
  display: flex;
  justify-content: space-between;
  padding: 9px 30px 18px;
  border-top: 1px solid #f1e8e6;
  background: rgb(255 255 255 / .96);
  z-index: 5;
}
.ps-tabs span { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; color: #a99b9d; }
.ps-tabs svg { width: 19px; height: 19px; }
.ps-tabs i { font-style: normal; font-size: 8.5px; font-weight: 650; }
.ps-tabs .on { color: var(--c); }
.ps-bar {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 96px;
  height: 4px;
  translate: -50% 0;
  border-radius: 4px;
  background: #1d1517;
  opacity: .85;
  z-index: 6;
}

@media (prefers-reduced-motion: reduce) {
  .sk-thumb, .ps-view { transition-duration: 1ms; }
  #skills .sk-grid.deal-next .skc, #skills .sk-grid.deal-prev .skc,
  .ps-skill.in-next, .ps-skill.in-prev, .ps-row, .ps-card, .ps-desc,
  .ps-film, .ps-steps, .ps-cta, .ps-prog i, .ps-play { animation: none; }
  .ps-film.is-playing .ps-wave i, .ps-film.is-playing .ps-hud > i > i { animation: none; }
}

/* ── shorter screens ────────────────────────────────────────────── */
@media (max-height: 860px) {
  #skills .sk-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
  #skills .sk-grid { --row: 52px; gap: 8px; }
  .skc-ic { width: 36px; height: 36px; border-radius: 11px; }
  .sk-tab { padding: 10px 4px 9px; }
}
@media (max-height: 760px) {
  #skills .sk-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
  .sk-sub { font-size: .86rem; margin-top: 8px; }
  #skills .sk-grid { --row: 48px; gap: 7px; }
  .skc-ic { width: 32px; height: 32px; border-radius: 10px; }
  .skc-ic img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
  .sk-tab-c { display: none; }
}

/* ── narrower screens ───────────────────────────────────────────── */
/* Below this there is no room beside the phone without reaching the
   heading, so the cloud goes above it instead — inside the phone's own
   width, tail pointing down at the glass. */
@media (max-width: 1240px) {
  #skills .think {
    right: calc(50% - var(--pw-base) * var(--pw-k) * .5px);
    top: auto;
    bottom: calc(50% + var(--pw-base) * var(--pw-k) * 1.084px + 12px);
    width: min(224px, calc(var(--pw-base) * var(--pw-k) * 1px));
    border-radius: 17px 17px 5px 17px;
  }
  #skills .think::before { right: 30px; top: auto; bottom: -11px; }
  #skills .think::after  { right: 24px; top: auto; bottom: -21px; }
  .sk-hint { display: none; }
  /* The cards' column takes more of the width here. Three columns of
     module names need it more than the phone does, which is sized by
     the window's height, not its width, and fits in the rest. */
  #skills .sk-wrap { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); gap: clamp(20px, 3vw, 40px); }
  .skc { gap: 9px; padding-left: 8px; }
  .skc-ic { width: 34px; height: 34px; border-radius: 10px; }
  .skc-ic img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
}
/* Two columns only when three would squeeze the names to a word a
   line. Speaking is then six rows, so the rows get shorter with it. */
@media (max-width: 1100px) {
  .skc-t { font-size: .72rem; letter-spacing: -.018em; }
  .skc-ic { width: 32px; height: 32px; }
}
@media (max-width: 1040px) {
  #skills .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --row: 46px; min-height: calc(var(--row) * 6 + 40px); }
}
@media (max-width: 900px) {
  #skills .scene-pin {
    height: auto;
    min-height: 100svh;
    padding-block: calc(var(--nav-h) + 24px) 40px;
  }
  #skills .sk-wrap { grid-template-columns: 1fr; height: auto; }
  #skills .sk-stage { order: -1; height: auto; padding-block: 28px; }
  #skills .sk-stage,
  #skills #deck-phone { --pw-base: 250; }
  #skills .think { display: none; }
  #skills .sk-grid { min-height: 0; }
  .sk-tab-c { display: none; }
}
@media (max-width: 560px) {
  .sk-step { display: none; }
  .sk-tab-n { font-size: .74rem; }
  #skills .sk-grid { grid-template-columns: 1fr; }
}

/* ══ THE FOUR SKILLS — the deck ═══════════════════════════════════
   Four cards on one pile and nothing else in the section. Everything
   about a module is two steps away in the sheet below; putting any of
   it out here is what made this section a wall of text before.

   The pile is driven by one number per card. --d is how far back it
   sits, and every rule below reads it: the lift, the tilt, the scale,
   the fade, the stacking order. The script never positions a card, it
   only ever changes --d.

   Throwing the top card off uses two more: --dx and --rot while a
   finger is on it, then .is-out to send it the rest of the way. It
   rejoins at the back of the pile in a frame with transitions off, so
   the return is never seen.

   Three transform channels, never crossed:
     transform  the pile — lift, tilt, scale, and the throw
     translate  the deal-in, so the entrance cannot fight the pile
     the art    animates inside the card, on its own elements
   ═════════════════════════════════════════════════════════════════ */

.deck-scene { height: 150svh; min-height: 900px; }

/* An ambient wash behind the whole section, retinting with whichever
   card is at the front — the same move "What Myna is" makes, and the
   reason this section looked plain beside it: it had none. Two
   colour-mix() radials of identical structure, so the tint
   interpolates on a plain transition with no @property needed. */
.deck-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(54% 62% at 82% 42%, color-mix(in srgb, var(--c, var(--coral)) 24%, transparent), transparent 70%),
    radial-gradient(46% 54% at 14% 76%, color-mix(in srgb, var(--c, var(--coral)) 12%, transparent), transparent 74%);
  transition: background 1.1s var(--ease);
  pointer-events: none;
  z-index: 0;
}
/* z-index only. .scene-pin is already position: sticky and this rule
   out-specifies that base one — re-declaring position here would turn
   it relative and the section would stop pinning. */
.deck-scene .scene-pin { z-index: 1; align-items: center; }
.deck-scene .wrap {
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 66px);
}
/* The phone is a fixed block beside the column, never part of its
   flow — sharing a grid with the heading stretched every row it
   spanned to its own 600-odd pixels. */
.deck-col { flex: 1 1 auto; min-width: 0; }
.deck-stage { flex: 0 0 auto; justify-content: flex-end; }
/* No size of its own. The phone that lands here is the one that
   flew in from the section above, and the two have to be the same
   width at every window height or the outgoing screen shows around
   the incoming one through the crossfade. Both take the global
   --pw-base and the same --pw-k. */

/* No entrance of its own. The phone flies in here from the section
   above and the crossfade is the entrance; anything written to
   opacity or transform here fights the flight painter for the same
   properties and lands the phone in the wrong place. */
.deck-scene .deck-stage { position: relative; }
.deck-scene .eyebrow { margin-bottom: 14px; }
.deck-scene h2 { max-width: none; }

.deck {
  --cw: min(540px, 45vw);
  --ch: clamp(330px, 48svh, 438px);
  --lift: 78px;
  position: relative;
  height: calc(var(--ch) + var(--lift));
  margin: clamp(20px, 3.4svh, 38px) 0 0;
  /* room either side for a card to be thrown out of frame */
  padding-inline: 0;
  cursor: grab;
  touch-action: pan-y;
  perspective: 1600px;
}
.deck.dragging { cursor: grabbing; }

.deck-stack { position: absolute; inset: 0; }

.dk {
  position: absolute;
  top: var(--lift);
  left: 0;
  width: var(--cw);
  height: var(--ch);
  padding: clamp(26px, 3.4svh, 38px) clamp(26px, 2.6vw, 38px);
  border-radius: 24px;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(120% 90% at 82% 92%, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%),
    linear-gradient(152deg, color-mix(in srgb, var(--c) 12%, transparent), transparent 54%),
    var(--surface);
  box-shadow: 0 40px 80px -42px var(--cast), 0 2px 0 0 rgb(255 255 255 / .03) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  user-select: none;

  /* the pile */
  transform-origin: 50% 50%;
  transform:
    translate3d(calc(var(--dx, 0px) + var(--d, 0) * 32px), calc(var(--d, 0) * -15px), 0)
    rotate(calc(var(--rot, 0deg) + var(--d, 0) * var(--tilt, 1.15deg)))
    scale(calc(1 - var(--d, 0) * .05));
  opacity: 0;
  z-index: calc(20 - var(--d, 0));

  /* the deal-in rides on `translate`, a property of its own, so it can
     never overwrite the pile above */
  translate: 0 56px;

  transition:
    transform .55s var(--ease-out),
    opacity .45s var(--ease),
    translate .85s var(--ease-out),
    border-color .4s var(--ease);
}
/* Alternate the tilt so the pile fans rather than leans. */
.dk:nth-child(even) { --tilt: -1.3deg; }

.deck-live .dk {
  translate: 0 0;
  opacity: calc(1 - min(var(--d, 0), 2) * .22);
  transition-delay: calc(var(--i, 0) * .085s), calc(var(--i, 0) * .085s), calc(var(--i, 0) * .085s), 0s;
}
/* Once dealt, the delays must not linger or every later move inherits
   them — the class is added once and this rule is what un-staggers it. */
.deck-live.dealt .dk { transition-delay: 0s; }

.dk.on { border-color: color-mix(in srgb, var(--c) 42%, transparent); }
/* Only the front card carries its words. All that shows of the ones
   behind is an 11px sliver at the top, and a half-letter of somebody
   else’s heading in it reads as a fault rather than as depth. */
.dk > :not(.dk-art) { transition: opacity .35s var(--ease); }
.dk:not(.on) > :not(.dk-art) { opacity: 0; }
.dk:not(.on) .dk-art { opacity: 0; }
.deck-live .dk.on { opacity: 1; }
.dk:focus-visible { outline: 1px solid var(--c); outline-offset: 6px; }

/* While a finger is on the card it tracks the finger exactly — a
   transition here would make it lag behind the pointer. */
.deck.dragging .dk.on { transition: none; }

/* Thrown. Out of frame in the direction it was pushed, then it rejoins
   the back of the pile during .no-anim. */
.dk.is-out {
  transform:
    translate3d(calc(var(--out, 1) * 132%), -10px, 0)
    rotate(calc(var(--out, 1) * 17deg))
    scale(.94);
  opacity: 0 !important;
  transition: transform .48s var(--ease-out), opacity .4s var(--ease);
}
.dk.no-anim { transition: none !important; }

/* ── the drawing ────────────────────────────────────────────────── */
.dk-art {
  position: absolute;
  right: clamp(16px, 1.8vw, 26px);
  bottom: clamp(14px, 1.6vw, 22px);
  width: clamp(200px, 23vw, 272px);
  aspect-ratio: 7 / 6;
  pointer-events: none;
}
.dk-svg { width: 100%; height: 100%; overflow: hidden; }
.dk-svg [stroke], .dk-svg line, .dk-svg path, .dk-svg rect, .dk-svg circle {
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.dk-svg .pt, .dk-svg .b, .dk-svg .mark, .dk-svg .caret { fill: var(--c); stroke: none; }
.dk-svg { opacity: .3; transition: opacity .5s var(--ease); }
.dk.on .dk-svg { opacity: .62; }

/* Listening — sound arriving, one ring after another. */
.dk-svg-listen .w { opacity: 0; }
.dk.on .dk-svg-listen .w { animation: artRing 2.6s var(--ease-out) infinite; }
.dk.on .dk-svg-listen .w2 { animation-delay: .22s; }
.dk.on .dk-svg-listen .w3 { animation-delay: .44s; }
.dk.on .dk-svg-listen .w4 { animation-delay: .66s; }
@keyframes artRing {
  0%   { opacity: 0; transform: translateX(-7px); }
  28%  { opacity: 1; }
  70%  { opacity: .5; }
  100% { opacity: 0; transform: translateX(5px); }
}

/* Speaking — a voice being measured. */
.dk-svg-speak .b { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.28); }
.dk.on .dk-svg-speak .b { animation: artBar 1.5s ease-in-out infinite alternate; }
.dk.on .dk-svg-speak .b2 { animation-duration: 1.1s; animation-delay: -.35s; }
.dk.on .dk-svg-speak .b3 { animation-duration: 1.8s; animation-delay: -.8s; }
.dk.on .dk-svg-speak .b4 { animation-duration: 1.25s; animation-delay: -.15s; }
.dk.on .dk-svg-speak .b5 { animation-duration: 1.65s; animation-delay: -.6s; }
.dk.on .dk-svg-speak .b6 { animation-duration: 1.35s; animation-delay: -1s; }
@keyframes artBar { from { transform: scaleY(.2) } to { transform: scaleY(1) } }

/* Reading — the specs draw themselves on, then a line of reading
   runs underneath. The lenses come first so the pair reads as one
   object arriving rather than four strokes appearing at once. */
.dk-svg-read .specs > * { stroke-dasharray: 190; stroke-dashoffset: 190; }
.dk.on .dk-svg-read .specs > * { animation: artSpecs 5s var(--ease-out) infinite; }
.dk.on .dk-svg-read .bridge { animation-delay: .34s; }
.dk.on .dk-svg-read .arm { animation-delay: .5s; }
@keyframes artSpecs {
  0%       { stroke-dashoffset: 190; }
  22%      { stroke-dashoffset: 0; }
  86%      { stroke-dashoffset: 0; opacity: 1; }
  100%     { stroke-dashoffset: 0; opacity: 0; }
}
.dk-svg-read .ln { stroke-dasharray: 120; stroke-dashoffset: 120; }
.dk.on .dk-svg-read .ln { animation: artDraw 5s var(--ease-out) infinite; }
.dk.on .dk-svg-read .l1 { animation-delay: .8s; }
.dk.on .dk-svg-read .l2 { animation-delay: 1.15s; }
@keyframes artDraw {
  0%, 12%  { stroke-dashoffset: 120; }
  34%      { stroke-dashoffset: 0; }
  86%      { stroke-dashoffset: 0; opacity: 1; }
  100%     { stroke-dashoffset: 0; opacity: 0; }
}
/* A slow focus, so the pair is never quite still. */
.dk-svg-read .specs { transform-box: fill-box; transform-origin: 50% 50%; }
.dk.on .dk-svg-read .specs { animation: artFocus 5s ease-in-out infinite; }
@keyframes artFocus {
  0%, 100% { transform: scale(.985); }
  46%      { transform: scale(1.015); }
}

/* Writing — type landing on the line, a row at a time. steps() is
   the whole trick: the same draw with a smooth ease reads as a pen,
   and with steps it reads as a keyboard. */
.dk-svg-write .tx { stroke-dasharray: 120; stroke-dashoffset: 120; }
.dk.on .dk-svg-write .tx { animation: artType 4.6s steps(16, end) infinite; }
.dk.on .dk-svg-write .t2 { animation-delay: .5s; }
.dk.on .dk-svg-write .t3 { animation-delay: 1s; }
@keyframes artType {
  0%        { stroke-dashoffset: 120; opacity: 1; }
  24%       { stroke-dashoffset: 0;   opacity: 1; }
  86%       { stroke-dashoffset: 0;   opacity: 1; }
  100%      { stroke-dashoffset: 0;   opacity: 0; }
}
/* The caret runs along the row being typed, then blinks where it
   stopped. */
.dk-svg-write .caret { transform-box: fill-box; }
.dk.on .dk-svg-write .caret { animation: artCaret 4.6s steps(16, end) infinite; }
@keyframes artCaret {
  0%       { transform: translate(0, -44px);   opacity: 1; }
  22%      { transform: translate(96px, -44px); opacity: 1; }
  24%      { transform: translate(0, -22px);   opacity: 1; }
  46%      { transform: translate(80px, -22px); opacity: 1; }
  48%      { transform: translate(0, 0);       opacity: 1; }
  70%      { transform: translate(54px, 0);    opacity: 1; }
  76%, 84% { transform: translate(54px, 0);    opacity: 0; }
  92%      { transform: translate(54px, 0);    opacity: 1; }
  100%     { transform: translate(54px, 0);    opacity: 0; }
}

/* ── around the phone ───────────────────────────────────────────
   The phone on its own was a dark rectangle on a dark page. A bloom
   in the front card's accent and two rings turning against each other
   give it somewhere to sit. All of it is behind the glass and none of
   it takes a pointer. */
.deck-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250%;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--c, var(--coral)) 40%, transparent) 0%,
    color-mix(in srgb, var(--c, var(--coral)) 17%, transparent) 26%,
    color-mix(in srgb, var(--c, var(--coral)) 5%, transparent) 46%,
    transparent 68%);
  filter: blur(26px);
  opacity: 1;
  animation: haloBreathe 7.5s ease-in-out infinite;
  transition: background .5s var(--ease);
}
.deck-halo::before,
.deck-halo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c, var(--coral)) 20%, transparent);
  animation: haloTurn 34s linear infinite;
}
.deck-halo::before { inset: 26%; }
.deck-halo::after {
  inset: 15%;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--c, var(--coral)) 13%, transparent);
  animation-duration: 52s;
  animation-direction: reverse;
}
@keyframes haloBreathe {
  0%, 100% { transform: scale(1);    opacity: .82; }
  50%      { transform: scale(1.07); opacity: 1; }
}
@keyframes haloTurn { to { rotate: 360deg; } }
.deck-stage .phone { position: relative; z-index: 1; }

/* The phone was standing on nothing. A pool beneath it reads as the
   light it is throwing, and gives the whole right-hand side a floor. */
.deck-scene .deck-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7%;
  width: 165%;
  height: 26%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--c, var(--coral)) 34%, transparent),
    transparent 68%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
  animation: haloBreathe 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .deck-halo, .deck-halo::before, .deck-halo::after { animation: none; }
}

/* ── the words on the card ──────────────────────────────────────── */
.dk > :not(.dk-art) { position: relative; z-index: 1; }

.dk-n {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c);
}
.dk-n i { width: 22px; height: 1px; background: currentColor; flex: none; }

.dk-name {
  margin: clamp(16px, 2.6svh, 28px) 0 0;
  font-size: clamp(2.3rem, 4.6vw, 3.7rem);
  letter-spacing: -.042em;
  line-height: .98;
}
.dk-line {
  margin: clamp(12px, 1.8svh, 18px) 0 0;
  font-size: clamp(.98rem, 1.3vw, 1.1rem);
  line-height: 1.5;
  color: var(--on-2);
  max-width: 24ch;
}
.dk-ct {
  margin: auto 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-3);
}
.dk-ct b { color: var(--c); font-weight: 500; }

/* The way in, on the card rather than under it — the card is the
   target, so the invitation belongs on it. */
.dk-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--c);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease-out);
}
.dk-go svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.dk.on .dk-go { opacity: 1; transform: none; transition-delay: .12s; }
.dk.on:hover .dk-go svg { transform: translateX(4px); }


/* ── the cloud ──────────────────────────────────────────────────
   Pinned off the phone's top-left corner, tail pointing at the glass,
   so it never covers the clip. It thinks before it speaks and types
   at reading pace, because the point is that the sentence is read.

   Built in layers rather than as a flat panel: a bloom of the front
   card's accent behind the top-left, a hairline in the same accent,
   and a light catch along the top edge. That is what stops it looking
   like a tooltip. */
/* Off the phone's shoulder, on whichever side has the room. With the
   phone on the left of the board there is none to its left — the rail
   is there — so the cloud goes to its right and its tail corner
   changes ends with it. */
/* Beside the glass, not beside the column. The offset is half the
   phone's own width out from the middle of the rig — the rig is as
   wide as its column and the phone is centred in it, so anything
   measured off the rig's edge lands out in the open. */
.think {
  position: absolute;
  right: calc(50% + (var(--pw-base, 306) * var(--pw-k)) * 0.5px + 18px);
  top: 6%;
  width: 226px;
  z-index: 4;
  padding: 13px 15px 14px;
  border: 1px solid color-mix(in srgb, var(--c, var(--coral)) 30%, transparent);
  border-radius: 17px 17px 17px 5px;
  background:
    radial-gradient(120% 90% at 8% 0%, color-mix(in srgb, var(--c, var(--coral)) 22%, transparent), transparent 62%),
    linear-gradient(color-mix(in srgb, var(--on) 6%, var(--surface)), var(--surface));
  box-shadow:
    0 22px 46px -24px var(--cast),
    0 0 0 1px rgb(255 255 255 / .02) inset,
    0 1px 0 0 rgb(255 255 255 / .06) inset;
  animation: thinkIn .42s var(--ease-out);
}
.think[hidden] { display: none; }
@keyframes thinkIn { from { opacity: 0; transform: translate(8px, -6px) scale(.95); } }

/* The tail: two shrinking bubbles toward the glass, the way a thought
   bubble is drawn. */
.think::before,
.think::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c, var(--coral)) 28%, transparent);
  background: var(--surface);
}
.think::before { right: -10px; top: 26px; width: 9px; height: 9px; }
.think::after  { right: -21px; top: 34px; width: 5.5px; height: 5.5px; }

/* Who is speaking, and about what. */
.think-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c, var(--coral));
}
.think-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.think-spark { width: 13px; height: 13px; flex: none; animation: sparkPulse 3.4s ease-in-out infinite; }
@keyframes sparkPulse {
  0%, 100% { opacity: .75; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.12) rotate(8deg); }
}

/* Three dots while it works out what to say. */
.think-dots { display: none; align-items: center; gap: 5px; height: 1.4em; }
.think.thinking .think-dots { display: inline-flex; }
.think.thinking .think-txt { display: none; }
.think-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c, var(--coral));
  animation: thinkDot 1.15s ease-in-out infinite;
}
.think-dots i:nth-child(2) { animation-delay: .16s; }
.think-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes thinkDot {
  0%, 60%, 100% { opacity: .26; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

.think-txt {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  letter-spacing: -.008em;
  color: var(--on);
  min-height: 1.55em;
}
/* the caret, only while it is being written */
.think.typing .think-txt::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-left: 2px;
  translate: 0 2px;
  background: var(--c, var(--coral));
  animation: thinkCaret .9s steps(1) infinite;
}
@keyframes thinkCaret { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* ── under the pile ─────────────────────────────────────────────── */
.deck-foot {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
  margin-top: clamp(22px, 3.6svh, 38px);
}
.deck-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-3);
  margin: 0;
}
.deck-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.dk-dot {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 15px;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--on-3);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.dk-dot:hover { color: var(--on-2); }
.dk-dot.on { color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .dk-svg * { animation: none !important; }
  .dk { translate: 0 0; transition-duration: 1ms; }
}
@media (max-height: 880px) {
  .deck-scene { height: auto; min-height: 0; }
  .deck-scene .scene-pin { position: static; height: auto; padding-block: 96px 80px; }
}
@media (max-width: 760px) {
  .deck { --cw: 88vw; --ch: 400px; }
  .dk-art { width: 170px; }
  .dk-line { max-width: 28ch; }
}

/* ══ THE MODULE SHEET ═════════════════════════════════════════════
   A rail of names beside a track of panels, one panel per module.
   Opening lands you on a module — never on a list of names to pick
   from first, which is a step that asks the reader to choose before
   they have seen anything to choose between.

   The track snaps, so a scroll moves a whole module rather than
   sliding between two of them, and the rail follows. Clicking a name
   scrolls there smoothly. Both do the same one thing.

   A panel is deliberately one screen: the video, what it is, why it
   matters, and what comes back scored. The run-through is real detail
   but it is what made this feel like a wall, so it folds away under a
   summary and costs nothing until it is asked for.
   ═════════════════════════════════════════════════════════════════ */

body.sheet-open { overflow: hidden; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3.2vh, 34px) clamp(12px, 3.4vw, 54px);
}
.sheet[hidden] { display: none; }

.sheet-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #050304 78%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: sheetIn .3s var(--ease-out);
}
.sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface-2);
  box-shadow: 0 40px 90px -40px var(--cast);
  overflow: hidden;
  animation: sheetUp .42s var(--ease-out);
}
@keyframes sheetIn { from { opacity: 0 } }
@keyframes sheetUp { from { opacity: 0; transform: translateY(22px) } }

.sheet-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(16px, 2.2vh, 24px) clamp(18px, 2.2vw, 30px);
  border-bottom: 1px solid var(--hairline);
}
.sheet-headings { min-width: 0; }
.sheet-kick {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c, var(--coral));
}
.sheet-title {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  letter-spacing: -.035em;
  line-height: 1.04;
}
.sheet-x {
  margin-left: auto;
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: none;
  color: var(--on-2);
  cursor: pointer;
  transition: color .25s, border-color .25s, transform .25s var(--ease-out);
}
.sheet-x svg { width: 16px; height: 16px; }
.sheet-x:hover { color: var(--on); border-color: var(--on-3); transform: rotate(90deg); }

.sheet-split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(184px, 232px) minmax(0, 1fr);
}

/* ── the rail ───────────────────────────────────────────────────── */
.mod-rail {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-right: 1px solid var(--hairline);
  padding: 14px 10px 20px;
}
.mod-rail::-webkit-scrollbar { width: 5px; }
.mod-rail::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 5px; }
.mr-head {
  margin: 4px 0 10px 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-3);
}
.mr-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--on-3);
  text-align: left;
  cursor: pointer;
  transition: color .22s, background .22s;
}
.mr-item:hover { color: var(--on-2); background: color-mix(in srgb, var(--on) 4%, transparent); }
.mr-n { font-family: var(--mono); font-size: 9.5px; flex: none; opacity: .8; }
.mr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-item.on {
  color: var(--on);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.mr-item.on .mr-n { color: var(--c); opacity: 1; }
.mr-item.on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  border-radius: 2px;
  background: var(--c);
}

/* ── the track ──────────────────────────────────────────────────── */
.mod-track {
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  outline: none;
}
.mod-track::-webkit-scrollbar { display: none; }

.mod {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vh, 34px) clamp(20px, 2.6vw, 44px);
}
.mod-inner {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: center;
  width: 100%;
  max-width: 900px;
}
.mod-media { display: flex; justify-content: center; }
.mod-media .phone { --pwn: 242; }
@media (max-height: 820px) { .mod-media .phone { --pwn: 210; } }

.mod-copy { min-width: 0; }
.mod-n {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c);
}
.mod-n i { width: 22px; height: 1px; background: currentColor; flex: none; }
.mod-name {
  margin: 12px 0 0;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  letter-spacing: -.035em;
  line-height: 1.04;
}
.mod-desc {
  margin: 10px 0 0;
  font-size: clamp(.96rem, 1.3vw, 1.06rem);
  line-height: 1.5;
  color: var(--on-2);
  max-width: 46ch;
}
.mod-copy .ex-facts { margin-top: 12px; }
.mod-block { margin-top: clamp(16px, 2.4vh, 24px); }
.mod-why { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--on); max-width: 52ch; }

/* The run-through, folded away. */
.mod-steps { margin-top: clamp(14px, 2vh, 20px); }
.mod-steps summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--on-2);
  cursor: pointer;
  list-style: none;
  transition: color .22s, border-color .22s;
}
.mod-steps summary::-webkit-details-marker { display: none; }
.mod-steps summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  margin-left: 2px;
  translate: 0 -2px;
  transition: rotate .25s var(--ease-out);
}
.mod-steps[open] summary::after { rotate: -135deg; translate: 0 1px; }
.mod-steps summary:hover { color: var(--on); border-color: var(--on-3); }
.mod-steps summary i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-3);
}
.mod-steps .ex-flow { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .sheet-scrim, .sheet-panel { animation: none; }
  .mod-track { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .sheet-split { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .mod-rail {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 10px 12px;
  }
  .mr-head { display: none; }
  .mr-item { width: auto; flex: none; border-radius: 999px; border: 1px solid var(--hairline); }
  .mr-item.on::before { content: none; }
  .mr-name { white-space: nowrap; }
  .mod-inner { grid-template-columns: 1fr; gap: 20px; }
  .mod-media { order: -1; }
}

/* ══ SHARED — labels, prose, roadmap, scoring pills ═══════════════
   Used by the sheet, by Myna Prime and by Prompt Mastery, which is
   why these outlive the explorer they were written for.
   ═════════════════════════════════════════════════════════════════ */

.ex-draft {
  margin: 20px 0 0 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--amber);
  max-width: 30ch;
}
/* The same amber caveat used inside a detail pane rather than down a
   sidebar, where it has the full column to run in. */

/* The hard numbers off the module record — difficulty, how long in
   practice, how long inside a test, any word floor. Same mono-caps
   voice as .eyebrow and .prod-no, set as one line of facts with a dot
   between each. Deliberately not pills: the pills below mean "this is
   a thing the report scores", and these are not that. */
.ex-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 13px;
  margin: 13px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-3);
}
.ex-facts:empty { display: none; }
.ex-facts span { display: inline-flex; align-items: center; gap: 13px; }
.ex-facts span + span::before {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* The difficulty carries the skill's accent — it is the one fact here
   that varies by module rather than just describing the clock. */
.ex-facts .lv { color: var(--c); }

.ex-block { margin-top: 24px; }
.ex-lab {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-3);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.ex-why { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--on); max-width: 56ch; }

/* ── "How it runs" as a roadmap ──────────────────────────────────
   The stops are joined into one road and it draws itself once: stop
   one lights, its segment fills down to stop two, and on to the end,
   where it stays. Each stop carries its own index (--i, set in the
   markup) and just delays the same animation by it, so the travel is
   the stagger rather than anything scripted.

   It runs once, not on a loop, and only once the section is actually
   on screen — the default module is selected at load, so on a loop-
   free animation without that gate the whole thing would have played
   out while the reader was still up at the hero. The gate is the
   .road-live class, set by tour.js the first time #skills is seen. */
.ex-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ex;
  max-width: 58ch;
  --step: .7s;    /* gap between one stop lighting and the next */
  --dur: .8s;     /* how long a single stop takes to light */
}
.ex-flow li {
  counter-increment: ex;
  position: relative;
  padding: 0 0 9px 28px;
  font-size: .89rem;
  line-height: 1.5;
}
.ex-flow li:last-child { padding-bottom: 0; }
.ex-flow li::before {
  content: counter(ex);
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  color: var(--c);
  font-family: var(--mono);
  font-size: 8.5px;
  display: grid;
  place-items: center;
  transform: scale(.8);
}
.road-live .ex-flow li::before {
  animation: roadStop var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--step));
}
/* The road itself: the segment from this stop down to the next. */
.ex-flow li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 19px;
  bottom: -1px;
  width: 1px;
  background: var(--c);
  opacity: .3;
  transform: scaleY(0);
  transform-origin: top center;
}
/* Starts a third of a step after its own stop lights, so the road is
   drawn by the stop leaving rather than arriving. */
.road-live .ex-flow li::after {
  animation: roadLine var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--step) + var(--step) * .34);
}
.ex-flow li:last-child::after { content: none; }

/* One pass, and it stays where it lands — the stop ends lit rather than
   returning to empty, so a road that has been travelled still reads as
   travelled once the animation is over. */
@keyframes roadStop {
  0%   { background: transparent; border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); box-shadow: none; transform: scale(.8); }
  55%  { background: var(--c); border-color: var(--c); color: var(--stage); box-shadow: 0 0 16px -1px var(--c); transform: scale(1.14); }
  100% { background: var(--c); border-color: var(--c); color: var(--stage); box-shadow: 0 0 9px -4px var(--c); transform: scale(1); }
}
@keyframes roadLine {
  0%   { transform: scaleY(0); opacity: .55; }
  100% { transform: scaleY(1); opacity: .34; }
}

/* Reduced motion gets the finished road with no travel. */
@media (prefers-reduced-motion: reduce) {
  .road-live .ex-flow li::before { animation-duration: 1ms; animation-delay: 0s; }
  .road-live .ex-flow li::after  { animation-duration: 1ms; animation-delay: 0s; }
}
.ex-flow b { color: var(--on); font-weight: 700; }
.ex-flow span { color: var(--on-2); }
.ex-flow b::after { content: " — "; color: var(--on-3); font-weight: 400; }

.ex-params { display: flex; flex-wrap: wrap; gap: 7px; }
.ex-params span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--on);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 13px 6px 10px;
}
.ex-params span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}
.ex-note { margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--on-3); max-width: 52ch; }

/* ══ HERO ════════════════════════════════════════════════════════ */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + 40px) 60px;
  /* Not overflow: hidden — the phone has to fly out of the bottom of
     this section on its way into the one below. body already clips
     the horizontal axis. */
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  background:
    radial-gradient(42% 46% at 72% 40%, color-mix(in srgb, var(--coral) 22%, transparent), transparent 70%),
    radial-gradient(38% 40% at 18% 78%, color-mix(in srgb, var(--violet) 13%, transparent), transparent 70%);
  pointer-events: none;
}
/* The hero phone's width as a bare number. The device column and the
   laptop are both sized from it, so the pair keeps its proportions at
   every window height. Has to follow .hero .phone's --pw-base. */
.hero {
  --hpw: calc(306 * var(--pw-k));
  /* The hero's ink: a warm charcoal rather than the page's near-black,
     for the headline's first line, the badges and the stats. */
  --hero-ink: #46373c;
}

/* Three areas rather than two, so the phone can slot between the
   copy and the stats on a narrow screen instead of ending up below
   both — it is the whole pitch and has to be near the fold.
   The copy column is capped and the pair centred, so spare width goes
   to the outside edges rather than into a gap between the words and
   the phone. The device column is wider than the phone: the phone
   rests in the middle of it, and moves to its right-hand end when the
   laptop opens into the rest. */
.hero .wrap {
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(0, 600px) min(calc(var(--hpw) * 1.5px), 32vw);
  justify-content: center;
  grid-template-areas:
    "copy  phone"
    "stats phone";
  column-gap: clamp(24px, 3.4vw, 56px);
  row-gap: 0;
  align-items: center;
  position: relative;
}
.hero-copy { grid-area: copy; }
.hero .scene-stage { grid-area: phone; justify-content: center; }
.hero .stats { grid-area: stats; }

.hero h1 { max-width: 18ch; }
.hero .t-hero { font-size: clamp(2.1rem, 4.4vw, 4rem); color: var(--hero-ink); }
.hero .lede {
  max-width: 44ch;
  margin-top: 14px;
  font-size: clamp(.9rem, 1vw, .98rem);
  line-height: 1.6;
  color: var(--on-2);
}
.hero .cta-row { margin-top: 22px; }

/* ── The company mark ─────────────────────────────────────────── */
.by-torii {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding: 7px 16px 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(28, 21, 23, .05);
  transition: border-color .2s, box-shadow .2s, opacity .7s var(--ease), transform .85s var(--ease-out);
}
.by-torii:hover { border-color: var(--hairline-2); box-shadow: 0 4px 14px -6px rgba(28, 21, 23, .18); }
.by-torii .k {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--on-3);
  padding-right: 12px;
  border-right: 1px solid var(--hairline);
  line-height: 22px;
}
.by-torii img { display: block; height: 22px; width: auto; }

/* ── The tagline ──────────────────────────────────────────────── */
.t-sub {
  font-size: clamp(1.1rem, 2.05vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 12px 0 0;
  max-width: 26ch;
}
.hero .t-sub { max-width: none; margin-top: 16px; font-size: clamp(1.12rem, 1.95vw, 1.62rem); }
/* A marker stroke under each goal, laid on after the line has risen —
   one, then the next, then the next. */
.t-sub mark {
  color: inherit;
  white-space: nowrap;
  padding: 0 .12em;
  margin: 0 -.06em;
  border-radius: .2em;
  /* One clean hue, the brand coral let right down to a blush — the
     earlier coral-to-amber blend went muddy, peach turning brown, on
     the warm page. Solid colour laid as an image, so it can sweep. */
  background: linear-gradient(#f9cfc6, #f9cfc6) no-repeat 0 92% / 0% 48%;
  transition: background-size .6s var(--ease-out);
  transition-delay: calc(600ms + var(--m, 0) * 220ms);
}
.t-sub.is-in mark { background-size: 100% 48%; }

/* ── Where to get it ──────────────────────────────────────────── */
.get { margin-top: 22px; }
.get-k {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-3);
}
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 18px 0 14px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--hero-ink);
  box-shadow:
    0 0 0 1px var(--hairline-2),
    0 10px 22px -16px rgba(60, 42, 46, .5);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.store:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--coral) 55%, var(--hairline-2)),
    0 16px 26px -16px rgba(60, 42, 46, .55);
}
.store:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.store svg { width: 24px; height: 24px; flex: none; }
.store:last-child svg { color: var(--coral); }
.store .k {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--on-3);
  line-height: 1.2;
}
.store b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--hero-ink); }

/* ══ The same account, on the web — the laptop ═══════════════════
   Absolutely placed in the device column (an absolute child of a grid
   takes its grid area as its containing block), right-aligned a step
   in from the phone so the two overlap, and wider than the column:
   it reaches back over the gap into the copy's empty right side —
   as far as it can without touching a line of it: tour.js narrows it
   when the copy reaches further right (a narrow desktop window).
   Everything inside is sized in cqw, so it narrows as one piece.
   Its bottom edge is pinned, level with where the phone will stand.

   Closed and hidden until the hero adds .show-web; then the base
   comes up, the lid opens on its hinge, and the phone steps forward
   and small, into the laptop's lower right corner. */
.hero-laptop {
  --lw: calc(var(--hpw) * 1.82);        /* laptop width, bare number */
  position: absolute;
  grid-area: phone;
  bottom: calc(50% - var(--hpw) * .562px);
  right: calc(var(--hpw) * .2px);
  width: calc(var(--lw) * 1px);
  container-type: inline-size;
  perspective: calc(var(--lw) * 3px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  translate: 0 18px;
  /* leaving: the lid shuts first, then the whole thing goes */
  transition: opacity .4s var(--ease) .45s, translate .5s var(--ease) .45s, visibility 0s linear .9s;
}
.hero.show-web .hero-laptop {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity .4s var(--ease), translate .7s var(--ease-out), visibility 0s;
}
/* the shadow it casts on the page */
.hero-laptop::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -7%;
  height: 10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(28, 21, 23, .32), transparent 72%);
  z-index: -1;
}

/* The lid — 16:10 glass inside a bezel, hinged at its bottom edge. */
.lp-lid {
  position: relative;
  width: 88%;
  margin: 0 auto;
  aspect-ratio: 1.508;                  /* 16:10 glass + the bezel */
  padding: 3.2% 3.2% 4.6%;
  border-radius: 2.6cqw 2.6cqw .6cqw .6cqw;
  background: linear-gradient(160deg, #3d363a 0%, #151114 34%, #0e0b0d 70%, #352e32 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .5);
  transform-origin: 50% 100%;
  transform: rotateX(-84deg);
  transition: transform .5s cubic-bezier(.55, 0, .8, .35);
}
.hero.show-web .lp-lid {
  transform: none;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) .08s;
}
.lp-cam {
  position: absolute;
  top: 1.5%;
  left: 50%;
  width: .9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2c2629;
  transform: translateX(-50%);
}
.lp-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: #f3f0ef;
}
.lp-screen::after {                     /* a sheen across the glass */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, .16) 0%, transparent 34%);
  pointer-events: none;
}
/* The deck, seen edge-on: a thin slab, wider than the lid, with the
   thumb scoop in the middle of its front edge. */
.lp-base {
  position: relative;
  height: 3.4cqw;
  margin-top: -1px;
  border-radius: 0 0 5cqw 5cqw / 0 0 100% 100%;
  background: linear-gradient(180deg, #7a7277 0%, #423a3f 26%, #1f1a1d 72%, #0f0b0d 100%);
}
.lp-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 1.2cqw 1.2cqw;
  background: linear-gradient(180deg, #221c20, #2e272b);
}
.lp-base::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, .3);
}

/* ── The web app, at 640 x 400, scaled to the glass by tour.js ──
   A browser window: 35px of chrome, then the page. The two real
   screenshots are 1917 x 865 — far wider than 16:10 — so each is
   scaled to the page's height and cropped at the sides: the first
   page about its centre (its content is centred), the dashboard from
   its left edge (logo and the skill tabs), where the crop lands in the
   gap between two of its cards. */
.web {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 400px;
  transform: scale(var(--ws, .6));
  transform-origin: 0 0;
  background: #fff;
  font-family: var(--sans);
  overflow: hidden;
}
.w-chrome {
  position: relative;
  display: flex;
  align-items: center;
  height: 35px;
  padding: 0 13px;
  background: #ece7e5;
  border-bottom: 1px solid #dcd4d1;
}
.w-dots { display: flex; gap: 6px; }
.w-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.w-dots i:nth-child(2) { background: #febc2e; }
.w-dots i:nth-child(3) { background: #28c840; }
.w-url {
  position: absolute;
  left: 50%;
  top: 7px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 260px;
  height: 21px;
  border-radius: 7px;
  background: #fff;
  font-size: 10.5px;
  color: #5f5557;
  letter-spacing: .01em;
}
.w-url svg { width: 10px; height: 10px; color: #8d8386; }
.w-page {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #fff;
}
.w-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .32s var(--ease);
}
.w-home { object-position: 50% 0; }
.w-ui { object-position: 0 0; }
.w-shot.is-on { opacity: 1; }
/* a page load: a bar across the top of the page */
.w-load {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ec5f3b, #f5a142);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}
.w-load.go { animation: w-load .5s var(--ease-out) both; }
@keyframes w-load {
  0%   { opacity: 1; transform: scaleX(0); }
  70%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

/* The pointer. tour.js moves it (a transition on transform) and
   clicks it; it lives in the page's own 640 x 400 space. */
.w-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  opacity: 0;
  translate: 560px 372px;               /* position; the click scales */
  transform-origin: 4px 2px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
  transition: opacity .25s var(--ease), translate var(--mv, 800ms) cubic-bezier(.45, .05, .25, 1);
}
.w-cursor.on { opacity: 1; }
.w-cursor.press { animation: w-press .26s var(--ease) both; }
@keyframes w-press { 45% { scale: .78; } }

/* ── The phone, while the laptop is open ──────────────────────────
   Steps forward and small into the laptop's lower right corner. It
   scales about its own centre — the flight into "What Myna is" relies
   on that origin — so the translate is what carries it from the middle
   of the device column to its right-hand end (half the column, less
   half the smaller phone) and drops it to stand on the laptop's
   baseline. Only `transform`: the flight owns the `scale`
   property, and the stage's own transform. */
.hero.is-live .phone[data-rise] {
  transition: transform .75s cubic-bezier(.65, 0, .35, 1), opacity .7s var(--ease);
  transition-delay: 0s;
}
.hero.show-web .phone[data-rise].is-in {
  transform: translate(calc(min(var(--hpw) * .75px, 16vw) - var(--hpw) * .225px), 5%) scale(.45);
}

/* Out of the web beat at once — for a resize, or a measurement. */
.hero.web-cut .phone,
.hero.web-cut .hero-laptop,
.hero.web-cut .hero-laptop * {
  transition: none !important;
  animation: none !important;
}

/* Four equal cells with a hairline between each, every label on two
   lines — so the numbers and the labels line up across the row
   instead of each column taking the width of its own words. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.stats > div { padding: 2px 12px 2px 18px; border-left: 1px solid var(--hairline); }
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats .n {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--hero-ink);
}
.stats .l {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-3); margin-top: 10px; line-height: 1.55;
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: var(--gut);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--on-3);
}
.scroll-cue i {
  width: 1px; height: 26px; display: block;
  background: linear-gradient(180deg, var(--coral), transparent);
  animation: cue 1.9s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { opacity: .25; transform: scaleY(.5); transform-origin: top; }
  45%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

/* ══ Reveal on enter ═════════════════════════════════════════════ */

[data-rise] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .7s var(--ease), transform .85s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-rise].is-in { opacity: 1; transform: none; }

/* ══ THE PRODUCT SECTIONS ════════════════════════════════════════
   Myna Prime, Myna Test, Prompt Mastery and AI Myna: one skeleton,
   alternating sides, each carrying its own accent in --c. The phone
   flies into the first of them from the explorer above and then
   stops travelling.
   ═════════════════════════════════════════════════════════════════ */

/* A one-line chapter marker rather than a whole intro band. A band
   between the explorer and Prime would sit inside the flight's range,
   and the phone would hang in mid-air over it. */
.prod-chapter {
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--on-3);
  margin: 0 0 20px;
}

/* ── the sections ───────────────────────────────────────────────── */
.prod { --c: var(--coral); }
.prod::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 46% at var(--gx, 78%) 46%,
              color-mix(in srgb, var(--c) 12%, transparent), transparent 72%);
  pointer-events: none;
}
.prod.flip { --gx: 22%; }
.prod > .wrap { position: relative; }

.prod-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: clamp(34px, 5.5vw, 92px);
  align-items: center;
}
.prod.flip .prod-grid { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
.prod.flip .prod-copy { order: 2; }

.prod-no {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c);
  margin: 0 0 18px;
}
.prod-no::before { content: ""; width: 24px; height: 1px; background: var(--c); flex: none; }

.prod h2 { max-width: 17ch; }
.prod .lede { max-width: 50ch; }

.prod-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 34px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}
.prod-points.two { grid-template-columns: 1fr 1fr; }
.pp { background: var(--stage); padding: clamp(13px, 1.9svh, 18px) 20px clamp(14px, 2svh, 20px); }
.pp .k {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 9px;
}
.pp b { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.022em; }
.pp > span:last-child {
  display: block;
  margin-top: 7px;
  font-size: .88rem;
  line-height: 1.52;
  color: var(--on-2);
}

.prod-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: clamp(13px, 2svh, 20px); }
.prod-facts span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 12px;
}
.prod-facts span b { color: var(--on-2); font-weight: 600; }

.prod-claim {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--c);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--on);
  max-width: 46ch;
}

.prod-stage { justify-content: center; }
.prod .phone { --pw-base: 300; }

@media (max-width: 1080px) {

}
@media (max-width: 900px) {
  .prod-grid, .prod.flip .prod-grid { grid-template-columns: 1fr; gap: 36px; }
  .prod-copy, .prod.flip .prod-copy { order: 2; }
  .prod-stage { order: 1; }
  .prod .phone { --pw-base: 250; }
}
@media (max-width: 620px) {
  .prod-points, .prod-points.two { grid-template-columns: 1fr; }
}

/* ══ MYNA PRIME — the interview room ═════════════════════════════
   The flagship, on the same paper as every other section: a warm
   pool of light behind the phones and a faint floor they stand on.
   Four phones in a row, one per round, that step right to left as the
   interview goes on; the one in front plays its round as a call, in
   the app's own white and coral. The copy beside it is only what the
   round needs is its icon and its name — the four as tiles under the
   heading, with the arrows that step along them. What a round
   involves (its question, the clock, the score) plays on its phone.
   Nothing advances on its own.

   One colour: the brand coral, carried on --rc (with --rc-tint behind
   it and --rc-deep for text on it).
   ═════════════════════════════════════════════════════════════════ */

@property --rc      { syntax: '<color>'; inherits: true; initial-value: #e2544c; }
@property --rc-tint { syntax: '<color>'; inherits: true; initial-value: #fdebe7; }
@property --rc-deep { syntax: '<color>'; inherits: true; initial-value: #b8372f; }

.prm {
  --prm-ink:  var(--on);
  --prm-2:    var(--on-2);
  --prm-3:    var(--on-3);
  --prm-line: var(--hairline);
  --prm-hot:  #e2544c;
  --prm-deep: var(--coral-deep, #a72f28);
  --prm-warm: #f0913c;
  --prm-pw:   300;                    /* the phones' width, bare number */
  --prm-p1:   64%;                    /* how far the next phone sits over */
  --prm-p2:   112%;                   /* …and the one after it */
  --rc:       #e2544c;
  --rc-tint:  #fdebe7;
  --rc-deep:  #b8372f;
  transition: --rc .6s var(--ease), --rc-tint .6s var(--ease), --rc-deep .6s var(--ease);
  color: var(--prm-ink);
  overflow: hidden;
  isolation: isolate;
}

/* ── the set ── */
.prm-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.prm-spot {
  position: absolute;
  left: 68%;
  top: 46%;
  width: min(74vw, 1000px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--rc) 19%, transparent),
    color-mix(in srgb, var(--rc) 6%, transparent) 55%, transparent 76%);
  animation: prmBreathe 7s ease-in-out infinite alternate;
}
.prm-spot-b {
  left: 10%;
  top: 94%;
  width: min(56vw, 760px);
  background: radial-gradient(closest-side, rgba(240, 145, 60, .12), transparent 72%);
  animation-duration: 9s;
}
@keyframes prmBreathe { to { opacity: .7; scale: 1.05; } }
/* the floor: a grid laid back in perspective, fading out upwards */
.prm-floor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -2%;
  height: 44%;
  background-image:
    linear-gradient(rgba(28, 21, 23, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 21, 23, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
          mask-image: linear-gradient(to top, #000 0%, transparent 78%);
}

/* ── the layout: copy left, phones right, the rounds across ── */
.prm-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head stage"
    "nav  stage";
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.prm-head  { grid-area: head; }
.prm-stage { grid-area: stage; }
.prm-nav   { grid-area: nav; }

/* ── the head ── */
.prm-chapter {
  margin: 0 0 clamp(10px, 1.8vh, 16px);
  font-size: .8rem;
  color: var(--prm-3);
}
.prm-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: clamp(10px, 1.6vh, 14px) 20px clamp(10px, 1.6vh, 14px) 18px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--hairline),
    0 20px 40px -28px rgba(226, 84, 76, .6),
    0 2px 6px -3px rgba(60, 42, 46, .12);
}
/* a thread of coral along its foot */
.prm-brand::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #e2544c, #f0913c);
}
.prm-logo { height: clamp(32px, 5.2vh, 48px); width: auto; }
.prm-sep { width: 1px; align-self: stretch; margin: 4px 0; background: var(--hairline-2); }
.prm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--prm-deep);
  background: rgba(226, 84, 76, .08);
  box-shadow: inset 0 0 0 1px rgba(226, 84, 76, .32);
}
.prm-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--prm-hot);
  box-shadow: 0 0 8px rgba(226, 84, 76, .6);
  animation: prmBlink 1.6s ease-in-out infinite;
}
@keyframes prmBlink { 50% { opacity: .35; } }
.prm-badge em {
  font-style: normal;
  margin-left: 2px;
  padding-left: 9px;
  border-left: 1px solid rgba(226, 84, 76, .32);
  color: var(--prm-3);
}
/* On the plate the badge is a label beside the mark, not a pill: two
   lines, so the plate stays one row at any width the column has. */
.prm-brand { flex-wrap: nowrap; }
@media (max-width: 560px) {
  .prm-brand { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
  .prm-sep { display: none; }
  .prm-logo { height: 30px; }
}
.prm-brand .prm-badge {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 8px;
  row-gap: 5px;
  padding: 0;
  background: none;
  box-shadow: none;
  white-space: nowrap;
}
.prm-brand .prm-badge em {
  grid-column: 2;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--prm-2);
}
.prm-h {
  margin-top: clamp(12px, 2.2vh, 22px);
  font-size: clamp(1.9rem, min(3.6vw, 5.6svh), 3.3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.04;
  color: var(--prm-ink);
}
.prm-h em {
  font-style: normal;
  background: linear-gradient(90deg, var(--coral), #d9702e);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.prm-lede {
  margin: clamp(8px, 1.4vh, 12px) 0 0;
  max-width: 40ch;
  font-size: clamp(.9rem, min(1.05vw, 1.8svh), 1.02rem);
  line-height: 1.55;
  color: var(--prm-2);
}

/* ── the four rounds, as tiles ──
   Icon and name, and nothing else: the page only says what is there.
   The one on stage is lifted onto white with a coral edge, and a thin
   line along its foot runs with its call on the phone. */
.prm-nav {
  margin-top: clamp(18px, 3.2vh, 32px);
  max-width: 560px;
}
.prm-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.3vh, 12px);
}
.prm-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(10px, 1.6vh, 14px) 16px clamp(10px, 1.6vh, 14px) clamp(10px, 1.6vh, 14px);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  color: var(--prm-2);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.prm-step:hover { background: var(--surface); color: var(--prm-ink); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.prm-step:active { transform: scale(.985); }
.prm-step.on {
  color: var(--prm-ink);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 55%, transparent),
    0 18px 36px -26px var(--rc);
}
.prm-step:focus-visible { outline: 2px solid var(--rc); outline-offset: 2px; }
.prm-si {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(44px, 6.6vh, 58px);
  aspect-ratio: 1;
  border-radius: 15px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.prm-step.on .prm-si { background: var(--rc-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 24%, transparent); }
.prm-si img { width: 76%; height: 76%; object-fit: contain; }
.prm-st { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prm-st b {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--prm-3);
  transition: color .3s var(--ease);
}
.prm-step.on .prm-st b { color: var(--rc); }
.prm-sn { font-size: clamp(.92rem, 1.1vw, 1.04rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.prm-bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
}
.prm-bar i {
  display: block;
  height: 100%;
  background: var(--rc);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* the round's call playing through — only while it plays */
.prm.is-playing .prm-step.on .prm-bar i { animation: prmFill var(--dur, 8s) linear forwards; }
@keyframes prmFill { to { transform: scaleX(1); } }

/* the arrows, and where you are */
.prm-ctl { display: flex; align-items: center; gap: 12px; margin-top: clamp(12px, 2vh, 18px); }
.prm-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--prm-ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline-2), 0 8px 18px -14px rgba(60, 42, 46, .45);
  transition: color .2s, box-shadow .2s, transform .2s var(--ease), opacity .2s;
}
.prm-arrow svg { width: 17px; height: 17px; }
.prm-arrow:hover {
  color: var(--rc-deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent), 0 12px 22px -14px var(--rc);
}
.prm-arrow[data-step="-1"]:hover { transform: translateX(-2px); }
.prm-arrow[data-step="1"]:hover { transform: translateX(2px); }
.prm-arrow:active { transform: scale(.94); }
.prm-arrow:disabled { opacity: .35; cursor: default; transform: none; box-shadow: inset 0 0 0 1px var(--hairline); color: var(--prm-3); }
.prm-arrow:focus-visible { outline: 2px solid var(--rc); outline-offset: 2px; }
.prm-count {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--prm-3);
}
.prm-count b { font-weight: 600; color: var(--rc-deep); }
.prm-count span { margin-left: 8px; font-family: var(--sans); font-size: .82rem; letter-spacing: 0; color: var(--prm-2); }

/* ── the phones ──
   One track the width of a phone; the four phones sit in it and are
   moved out along it by slot: 0 in front, 1 and 2 behind to the right,
   turned away, 3 gone off to the left. "in" is where one waits,
   unseen, to come in from the right again.

   The ones behind are solid, not see-through, and faded back into the
   page by a veil — see-through phones stacked one over another showed
   each other's captions through, which read as text on top of text.
   They carry no words at all: only the front one is being read. */
.prm .phone { --pw-base: var(--prm-pw); }
.prm-stage {
  position: relative;
  align-self: center;
  display: flex;
  align-items: center;
  padding-left: clamp(0px, 2vw, 28px);
}
.prm-track {
  position: relative;
  width: calc(var(--prm-pw) * var(--pw-k) * 1px);
  aspect-ratio: 9 / 19.51;
  perspective: 1500px;
}
.prm-track::after {                     /* the pool of light it stands in */
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -5%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 30%, transparent), transparent);
  z-index: -1;
}
.prm-dev {
  --accent: var(--rc);                  /* the phone's glow */
  position: absolute;
  inset: 0;
  transition: transform .9s cubic-bezier(.65, 0, .25, 1), opacity .45s var(--ease);
  will-change: transform, opacity;
  cursor: pointer;
}
.prm-dev[data-slot="0"]  { transform: none; opacity: 1; z-index: 4; cursor: default; }
.prm-dev[data-slot="1"]  { transform: translateX(var(--prm-p1)) scale(.8) rotateY(-24deg); opacity: 1; z-index: 3; }
.prm-dev[data-slot="2"]  { transform: translateX(var(--prm-p2)) scale(.64) rotateY(-30deg); opacity: 1; z-index: 2; }
.prm-dev[data-slot="3"]  { transform: translateX(-34%) scale(.84) rotateY(20deg); opacity: 0; z-index: 1; pointer-events: none; }
.prm-dev[data-slot="in"] { transform: translateX(150%) scale(.5) rotateY(-34deg); opacity: 0; z-index: 0; pointer-events: none; }
.prm-dev.warp { transition: none; }
.prm-dev .phone-glow { opacity: 0; transition: opacity .6s var(--ease); }
.prm-dev[data-slot="0"] .phone-glow { opacity: .55; }

/* ── a round, on its phone: the call ──
   The app's own white and coral. Laid out at 286.4 x 620.9 like every
   phone screen on the page. */
.pmx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--sans);
  line-height: 1.3;
  color: #1c1517;
  background: linear-gradient(180deg, #fff4f1 0%, #fff 38%);
}
.pmx::after {                           /* the veil on the ones behind */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #f6f1ef;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.prm-dev[data-slot="1"] .pmx::after { opacity: .12; }
.prm-dev[data-slot="2"] .pmx::after { opacity: .34; }
.prm-dev[data-slot="3"] .pmx::after,
.prm-dev[data-slot="in"] .pmx::after { opacity: .34; }

/* The cover every phone rests on: the Prime mark at the top, the
   round's icon from the app, its name and why it matters, and a play
   button at the foot. The phone in front shows it until play is
   pressed; the ones waiting behind show it without the words. */
.pmx-cover {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 26px 34px;
  text-align: center;
  background:
    radial-gradient(90% 42% at 50% 44%, var(--rc-tint), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fff9f7 100%);
  transition: opacity .4s var(--ease);
}
.pmx.is-live .pmx-cover { opacity: 0; pointer-events: none; }
.pmx-cl { height: 42px; width: auto; }
.pmx-mid { display: flex; flex-direction: column; align-items: center; margin: auto 0; }
.pmx-ci {
  display: grid;
  place-items: center;
  width: 138px;
  height: 138px;
  border-radius: 40px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--rc) 18%, transparent),
    0 24px 44px -26px var(--rc);
}
.pmx-ci img { width: 70%; height: 70%; object-fit: contain; }
.pmx-cr {
  margin-top: 20px !important;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rc);
}
.pmx-cn { margin-top: 6px !important; font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #1c1517; }
.pmx-cw { margin-top: 10px !important; max-width: 23ch; font-size: 12.5px; line-height: 1.45; color: #6c6062; }
.pmx-play {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff7d63, #e2544c);
  box-shadow: 0 16px 28px -14px rgba(226, 84, 76, .95);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.pmx-play::before {                     /* a ring breathing out from it */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(226, 84, 76, .45);
  animation: pmxRing 2s ease-out infinite;
}
@keyframes pmxRing { to { box-shadow: 0 0 0 18px rgba(226, 84, 76, 0); } }
.pmx-play i {
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent #fff;
}
.pmx-play:hover { transform: scale(1.06); box-shadow: 0 20px 32px -14px rgba(226, 84, 76, 1); }
.pmx-play:active { transform: scale(.95); }
.pmx-play:focus-visible { outline: 3px solid rgba(226, 84, 76, .5); outline-offset: 4px; }
.pmx-pl { margin-top: 10px !important; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #86777c; }
.prm-dev:not([data-slot="0"]) :is(.pmx-cw, .pmx-play, .pmx-pl, .pmx-cr) { visibility: hidden; }
.pmx-back { cursor: pointer; border: 0; padding: 0; color: inherit; }

/* the walkthrough video, once there is one */
.pmx-vid { position: absolute; inset: 0; z-index: 19; display: none; background: #0d0a0c; }
.pmx.is-video .pmx-vid { display: block; }
.pmx-vid video { width: 100%; height: 100%; object-fit: cover; }
.pmx-x {
  position: absolute;
  top: 44px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  cursor: pointer;
}
/* every word on the call screen: shown on the front phone only */
.pmx-sb b, .pmx-tt, .pmx-live, .pmx-who, .pmx-depth,
.pmx-k, .pmx-t, .pmx-me, .pmx-time, .pmx-score { transition: opacity .3s var(--ease); }
.prm-dev:not([data-slot="0"]) :is(.pmx-sb b, .pmx-tt, .pmx-live, .pmx-who, .pmx-depth,
  .pmx-k, .pmx-t, .pmx-me, .pmx-time, .pmx-score) { opacity: 0; }
.pmx p { margin: 0; }
.pmx svg { display: block; }
.pmx-sb {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 44px;
  padding: 0 26px 7px 32px;
  font-size: 12px;
  font-weight: 700;
}
.pmx-sb span { display: flex; gap: 4px; }
.pmx-sb span i { width: 5px; height: 5px; border-radius: 50%; background: #1c1517; opacity: .75; }
.pmx-top { display: flex; align-items: center; gap: 10px; padding: 8px 16px 0; }
.pmx-back {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f4eceb;
}
.pmx-back svg { width: 15px; height: 15px; }
.pmx-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pmx-logo { height: 15px; width: auto; margin-bottom: 2px; }
.pmx-tt i { font-style: normal; font-size: 10px; color: #86777c; }
.pmx-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fde7e3;
  color: #c53b33;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pmx-live i { width: 6px; height: 6px; border-radius: 50%; background: #e2544c; animation: prmBlink 1.2s ease-in-out infinite; }

/* the interviewer */
.pmx-ai {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 232px;
  margin: 14px 14px 0;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(70% 62% at 50% 42%,
      color-mix(in srgb, var(--rc) 24%, transparent),
      color-mix(in srgb, var(--rc) 4%, transparent) 62%, transparent 82%),
    linear-gradient(180deg, #fff, var(--rc-tint));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 18%, transparent);
}
.pmx-ring {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--rc) 55%, transparent);
  opacity: 0;
}
.pmx.st-ask .pmx-ring { animation: prmRing 1.8s var(--ease-out) infinite; }
.pmx.st-ask .pmx-ring:nth-child(2) { animation-delay: .6s; }
.pmx.st-ask .pmx-ring:nth-child(3) { animation-delay: 1.2s; }
@keyframes prmRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
.pmx-av {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-top: -22px;
  border-radius: 50%;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--rc) 70%, #fff), var(--rc) 55%, var(--rc-deep));
  box-shadow: 0 16px 30px -14px var(--rc), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.pmx-av img { width: auto; height: 58px; translate: 3px 1px; }
.pmx.st-ask .pmx-av { animation: prmTalk .42s ease-in-out infinite alternate; }
@keyframes prmTalk { to { transform: scale(1.06); } }
.pmx-who {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.pmx-who b { font-size: 12px; font-weight: 750; }
.pmx-who i { font-style: normal; font-size: 9.5px; color: #86777c; }
.pmx-depth {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px -6px rgba(60, 42, 46, .35);
  font-size: 9px;
}
.pmx-depth i { width: 14px; height: 4px; border-radius: 2px; background: #efe3df; transition: background .4s; }
.pmx-depth i:nth-child(-n+2), .pmx.lv3 .pmx-depth i:nth-child(3) { background: var(--rc); }
.pmx-depth b { margin-left: 4px; font-weight: 700; color: #3d3033; }
.pmx-depth u { text-decoration: none; }

/* what is asked */
.pmx-cap {
  min-height: 88px;
  margin: 12px 14px 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: #faf6f5;
  box-shadow: inset 0 0 0 1px #f0e6e3;
}
.pmx-k { font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rc-deep); }
.pmx-t { margin-top: 6px !important; font-size: 13px; font-weight: 650; line-height: 1.42; color: #1c1517; }

/* the student answering */
.pmx-you {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 14px 0;
  padding: 10px 12px;
  border-radius: 18px;
  background: #faf6f5;
  box-shadow: inset 0 0 0 1px #f0e6e3;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.pmx.st-answer .pmx-you { background: var(--rc-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent); }
.pmx-me {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1c1517;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
}
.pmx-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 30px; }
.pmx-wave i { flex: 1; height: 16%; border-radius: 2px; background: #e0d4d1; }
.pmx.st-answer .pmx-wave i {
  background: var(--rc);
  animation: prmWave .55s ease-in-out infinite alternate;
  animation-delay: calc(var(--k) * -61ms);
}
.pmx.st-answer .pmx-wave i:nth-child(3n) { animation-duration: .8s; }
.pmx.st-answer .pmx-wave i:nth-child(4n+1) { animation-duration: .42s; }
@keyframes prmWave { from { height: 14%; } to { height: 96%; } }
.pmx-time { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 600; color: #86777c; font-variant-numeric: tabular-nums; }
.pmx.st-answer .pmx-time { color: #1c1517; }

/* the call's controls */
.pmx-ctl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.pmx-b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f4eceb;
  color: #3d3033;
}
.pmx-b svg { width: 20px; height: 20px; }
.pmx-rec {
  width: 60px;
  height: 60px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--rc) 70%, #fff), var(--rc));
  color: #fff;
  box-shadow: 0 12px 22px -12px var(--rc);
}
.pmx-rec svg { width: 24px; height: 24px; }
.pmx.st-answer .pmx-rec { animation: prmRec 1.2s ease-out infinite; }
@keyframes prmRec {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rc) 55%, transparent); }
  to   { box-shadow: 0 0 0 16px color-mix(in srgb, var(--rc) 0%, transparent); }
}
.pmx-end { background: #df3f38; color: #fff; }

/* the score, up from the bottom when the answer is in */
.pmx-score {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 10;
  padding: 18px 16px 16px;
  border-radius: 26px;
  text-align: center;
  color: #1c1517;
  background: #fff;
  box-shadow: 0 0 0 1px #f0e6e3, 0 -22px 44px -22px rgba(60, 42, 46, .45);
  transform: translateY(112%);
  transition: transform .6s cubic-bezier(.2, .9, .25, 1);
}
.pmx.st-score .pmx-score { transform: none; }
.pmx-sk { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 700; color: #1f9573; }
.pmx-sk svg { width: 14px; height: 14px; }
.pmx-dial { position: relative; width: 104px; height: 104px; margin: 12px auto 0; }
.pmx-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pmx-dial circle { fill: none; stroke-width: 8; }
.pmx-dial .tr { stroke: #f4e4df; }
.pmx-dial .fg {
  stroke: var(--rc);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s var(--ease-out) .25s;
}
.pmx-dial b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-weight: 800; letter-spacing: -.04em; }
.pmx-sn { margin-top: 10px !important; font-size: 12px; font-weight: 700; }
.pmx-bars { display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 44px; margin-top: 10px; }
.pmx-bars i {
  width: 16px;
  height: calc(var(--h) * 100%);
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 65%, #fff), var(--rc));
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .6s var(--ease-out);
}
.pmx.st-score .pmx-bars i { transform: none; transition-delay: calc(.35s + var(--j) * 90ms); }
.pmx-sf { margin-top: 10px !important; font-size: 9.5px; color: #86777c; }

/* ── narrower windows ── */
@media (max-width: 1180px) {
  .prm { --prm-p1: 52%; --prm-p2: 90%; }
}
@media (max-width: 1060px) and (min-width: 901px) {
  .prm { --prm-p1: 44%; --prm-p2: 74%; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .prm-chapter { display: none; }
}
@media (max-width: 900px) {
  .prm { --prm-pw: 236; --prm-p1: 50%; --prm-p2: 84%; }
  .prm-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "stage" "nav";
    row-gap: 22px;
  }
  .prm-stage { justify-content: center; padding-left: 0; margin-top: 8px; }
  .prm-track { translate: -22% 0; }
  .prm-nav { max-width: none; margin-top: 0; }
  .prm-ctl { justify-content: center; }
}
@media (max-width: 560px) {
  .prm-step { gap: 10px; padding: 10px 12px 10px 10px; }
  .prm-sn { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .prm-spot, .prm-badge i, .pmx-live i { animation: none; }
  .prm-dev { transition-duration: 1ms; }
}

/* ══ AFTER PRIME — five sections, five designs ══════════════════════
   Prompt Mastery, Myna Test, AI Myna and Myna Rise share the
   page's colours — the paper, the brand coral — and nothing else. Each
   has its own layout and its own movement:

     Prompt Mastery  the phone, and a trail of cards on grid paper
     Myna Test       a laptop and a phone, playing the real screens
     AI Myna         the app taken apart: callouts tied to the screen
     Myna Rise       a 3D phone, its parts popping out into big cards

   What they do share is the rule that nothing demo-like plays by
   itself: each moves when it is hovered (or tapped, or its button is
   pressed), and goes back to rest when it is left.
   ═════════════════════════════════════════════════════════════════ */

/* ════ PROMPT MASTERY — the phone, and the trail ═════════════════
   A pinned scroll of eight steps — Voice Prompting's four, then Prompt
   Design's four — each one stop for the scroll and the arrow keys.
   Voice Prompting: phone on the left, tilted left, the trail on the
   right. Prompt Design (.flip): the phone swings across to the right,
   tilted right, and the trail takes the left. The two trade places inside one
   container, measured in cqw, so the move lands exactly wherever the
   window is; the trail is faded out while the phone crosses it.

   The trail: the steps as cards pinned along a dashed line on the
   paper, high, low, high, tilted one way then the other. tour.js lays
   them out, threads the line through their pins, and slides the track
   so the step you are on sits in the middle; the line behind you
   turns solid and the card you are on lifts.
   ═════════════════════════════════════════════════════════════════ */

.pmr { position: relative; --x-hot: #e2544c; --x-tint: #fdebe7; --x-deep: var(--coral-deep, #a72f28); --cw: 250px; }
.pmr .t-voice { display: none; }
.pmr.is-voice .t-voice { display: revert; }
.pmr.is-voice .t-typed { display: none; }
.pmr-pin { isolation: isolate; overflow-x: clip; }
.pmr-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pmr-bg i {
  position: absolute;
  left: 26%;
  top: 52%;
  width: min(62vw, 820px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 84, 76, .16), rgba(226, 84, 76, .05) 55%, transparent 76%);
  transition: left 1.1s cubic-bezier(.65, 0, .25, 1);
}
.pmr.flip .pmr-bg i { left: 74%; }

.pmr-wrap {
  position: relative;
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  container-type: inline-size;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(28px, 4vw, 64px);
}
.pmr .phone { --pw-base: 272; }
.pmr-dev {
  position: relative;
  z-index: 2;
  align-self: end;
  margin-bottom: 12px;
  padding: 22px 30px;
  transform: rotate(-4deg);
  transition: transform .95s cubic-bezier(.65, 0, .25, 1);
}
.pmr.flip .pmr-dev { transform: translateX(calc(100cqw - 100%)) rotate(4deg); }
.pmr-copy {
  min-width: 0;
  transition: transform .95s cubic-bezier(.65, 0, .25, 1), opacity .24s var(--ease);
}
.pmr.flip .pmr-copy { transform: translateX(calc(-100cqw + 100%)); }
.pmr.swapping .pmr-copy { opacity: 0; }

.pmr-chapter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--x-deep);
  background: var(--x-tint);
}
.pmr-chapter i { width: 6px; height: 6px; border-radius: 50%; background: var(--x-hot); }
.pmr-h {
  margin-top: clamp(10px, 1.8vh, 16px);
  max-width: 17ch;
  text-wrap: balance;
  font-size: clamp(1.9rem, min(3.6vw, 5.8svh), 3.3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.pmr-h em {
  font-style: normal;
  background: linear-gradient(90deg, var(--coral), #d9702e);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.pmr-modes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: clamp(14px, 2.4vh, 22px);
  padding: 5px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), 0 10px 24px -18px rgba(60, 42, 46, .5);
}
.pmr-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 12px;
  background: linear-gradient(145deg, #ff7d63, #e2544c);
  box-shadow: 0 10px 20px -12px rgba(226, 84, 76, .9);
  transition: transform .5s cubic-bezier(.3, 1.2, .4, 1);
}
.pmr.flip .pmr-thumb { transform: translateX(100%); }
.pmr-mode {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--on-2);
  transition: color .3s;
}
.pmr-mode svg { width: 18px; height: 18px; }
.pmr-mode.on { color: #fff; }

/* the trail: a view the track slides through, faded at both ends */
.pmr-view {
  position: relative;
  overflow-x: clip;                     /* the track runs on past both edges */
  overflow-y: visible;
  height: clamp(290px, 47vh, 460px);
  margin: clamp(12px, 2.2vh, 22px) -12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.pmr-view::before {                     /* grid paper, under the trail only */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background-image:
    linear-gradient(rgba(28, 21, 23, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 21, 23, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: var(--gx, 0) 0;
}
.pmr-track { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.pmr-track[data-mode="voice"],
.pmr.is-voice .pmr-track[data-mode="typed"] { visibility: hidden; }
.pmr.is-voice .pmr-track[data-mode="voice"] { visibility: visible; }
.pmr-trail { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pmr-dash { fill: none; stroke: #4a3b3f; stroke-width: 1.8; stroke-dasharray: 7 7; stroke-linecap: round; opacity: .45; }
.pmr-done { fill: none; stroke: #e2544c; stroke-width: 2.8; stroke-linecap: round; }
.pmr-start { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #cdbfbb; }

/* a card: the step's number and format, its icon, what happens, two facts */
.pmr-card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--cw);
  margin: 0;
  padding: 12px 16px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 42, 46, .08), 0 22px 40px -28px rgba(60, 42, 46, .55);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .5s var(--ease), opacity .45s var(--ease);
  cursor: pointer;
}
.pmr-card:not(.on) { opacity: .78; }
.pmr-card.on {
  z-index: 3;
  opacity: 1;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(1.05);
  box-shadow: inset 0 0 0 2px #e2544c, 0 30px 54px -28px rgba(226, 84, 76, .8);
  cursor: default;
}
.pmr-ctop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 0 14px; }
.pmr-ctop b { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #8d8184; }
.pmr-card.on .pmr-ctop b { color: var(--x-hot); }
.pmr-ctop span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-3);
}
.pmr-ctop span svg { width: 12px; height: 12px; }
.pmr-cmain { display: flex; align-items: center; gap: 12px; }
.pmr-cic {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--x-hot);
  background: var(--x-tint);
  box-shadow: inset 0 0 0 1px rgba(226, 84, 76, .2);
  transition: background .35s, color .35s, box-shadow .35s;
}
.pmr-cic svg { width: 22px; height: 22px; }
.pmr-card.on .pmr-cic { color: #fff; background: linear-gradient(145deg, #ff7d63, #e2544c); box-shadow: 0 10px 18px -10px rgba(226, 84, 76, .9); }
.pmr-cmain h3 { font-size: clamp(.92rem, 1.05vw, 1.02rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.22; color: var(--on); }
.pmr-cdesc { margin: 10px 0 0; font-size: clamp(.78rem, .9vw, .84rem); line-height: 1.5; color: var(--on-2); }
.pmr-cchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pmr-cchips span { padding: 4px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700; color: var(--x-deep); background: var(--x-tint); }
/* a step already done carries a tick */
.pmr-cdone {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: #1f9573;
  transform: scale(0);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.pmr-cdone svg { width: 12px; height: 12px; }
.pmr-card.past .pmr-cdone { transform: none; }
/* the pins the trail is tied to: bottom corners of a high card, top of a low one */
.pmr-pinl, .pmr-pinr {
  position: absolute;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2a1f22;
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .35);
}
.pmr-pinl { left: 9px; }
.pmr-pinr { right: 9px; }
.pmr-card.high .pmr-pinl, .pmr-card.high .pmr-pinr { bottom: 9px; }
.pmr-card.low .pmr-pinl, .pmr-card.low .pmr-pinr { top: 9px; }
.pmr-card.high .pmr-cdone { bottom: 26px; }

.pmr-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: clamp(12px, 2vh, 18px) 0 0; font-size: .76rem; font-weight: 600; color: var(--on-3); }
.pmr-hint kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on);
  background: var(--surface);
  box-shadow: inset 0 -2px 0 #eadcd8, 0 0 0 1px var(--hairline);
}
.pmr-hint b { color: var(--x-deep); }

/* ── the app, on the phone: its own screens ──
   Laid out at 603 x 1311 — half the size they were taken at — and
   scaled into .phone-screen (286.4 x 620.9). Screens push in from the
   right, as in the app; tour.js moves a finger over them, types into
   the prompt, runs the clocks and fills the report. */
.pma { position: absolute; left: 0; top: 0; width: 603px; height: 1311px; transform: scale(.47496); transform-origin: 0 0; overflow: hidden; font-family: var(--sans); color: #1c1c1c; background: #fff; }
.pma p { margin: 0; }
.pma img, .pma svg { display: block; }
.pma-scr { position: absolute; inset: 0; overflow: hidden; background: #fff; transform: translateX(100%); transition: transform .6s cubic-bezier(.32, .72, 0, 1), filter .6s cubic-bezier(.32, .72, 0, 1); }
.pma-scr > img { position: absolute; left: 0; top: 0; width: 603px; height: 1311px; }
.pma-scr.on { z-index: 2; transform: none; }
.pma-scr.back { z-index: 1; transform: translateX(-30%); filter: brightness(.9); }
.pma.snap .pma-scr, .pma.snap .pma-scr * { transition: none !important; }
/* anything laid on a screen, by its box there */
.pma-ring, .pma-clock, .pma-press, .pma-play, .pma-talk, .pma-go {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
}
/* a ring round what the finger is about to use */
.pma-ring { border-radius: calc(var(--r, 24) * 1px); box-shadow: 0 0 0 4px rgba(226, 85, 76, .9), 0 0 0 16px rgba(226, 85, 76, .14); opacity: 0; transform: scale(1.05); transition: opacity .35s var(--ease), transform .55s var(--ease-out); pointer-events: none; }
.pma-ring.on { opacity: 1; transform: none; }
/* the finger, and a button pressed */
.pma-tap { position: absolute; z-index: 9; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; background: rgba(226, 85, 76, .24); box-shadow: 0 0 0 4px rgba(226, 85, 76, .55); opacity: 0; pointer-events: none; }
.pma-tap.go { animation: pmaTap .62s var(--ease-out); }
@keyframes pmaTap { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.3); } }
.pma-press { border-radius: calc(var(--r, 24) * 1px); background: rgba(0, 0, 0, .2); opacity: 0; }
.pma-press.go { animation: pmaPress .42s; }
@keyframes pmaPress { 30% { opacity: 1; } }

/* the test: the first screen, then the one it becomes (started / speaking) */
.pma-b { opacity: 0; transition: opacity .32s var(--ease); }
.pma-scr.two .pma-b { opacity: 1; }
.pma-clock { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 26px; font-size: 26px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff; background: #e2554c; opacity: 0; transition: opacity .32s; }
.pma-clock svg { width: 30px; height: 30px; }
.pma-scr.two .pma-clock { opacity: 1; }
/* Prompt Design: the prompt going in, the keyboard up and away */
.pma-text { position: absolute; left: 70px; top: 640px; width: 466px; font-size: 19px; font-weight: 700; line-height: 1.42; color: #1c1c1c; }
.pma-text.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -3px; background: #e2554c; animation: pmaBlink 1s step-end infinite; }
@keyframes pmaBlink { 50% { opacity: 0; } }
.pma-kb { position: absolute; left: 0; top: 800px; width: 603px; height: 511px; transform: translateY(100%); transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.pma-kb img { width: 603px; height: 511px; }
.pma-scr.kb .pma-kb { transform: none; }
.pma-key { position: absolute; left: calc(var(--kx, -99) * 1px - 25px); top: calc(var(--ky, -99) * 1px - 32px); width: 50px; height: 64px; border-radius: 10px; background: rgba(0, 0, 0, .15); opacity: 0; transition: opacity .14s; }
.pma-key.hit { opacity: 1; transition: none; }
/* Voice Prompting: the scenario playing, then the mic open */
.pma-play { display: flex; align-items: center; gap: 16px; padding: 0 22px; border-radius: 20px; font-size: 21px; font-weight: 800; background: #fff; opacity: 0; transition: opacity .25s; }
.pma-play svg { flex: none; width: 34px; height: 34px; color: #e2554c; }
.pma-play b { white-space: nowrap; }
.pma-scr.playing .pma-play { opacity: 1; }
.pma-bars { display: flex; align-items: center; gap: 5px; height: 30px; }
.pma-play .pma-bars { width: 110px; margin-left: auto; }
.pma-bars i { flex: 1; height: 20%; border-radius: 3px; background: #e2554c; }
.pma-scr.playing .pma-play .pma-bars i, .pma-scr.talking .pma-talk i { animation: pmaBar .5s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -73ms); }
.pma-bars i:nth-child(3n) { animation-duration: .7s; }
.pma-bars i:nth-child(4n+1) { animation-duration: .38s; }
@keyframes pmaBar { from { height: 18%; } to { height: 100%; } }
.pma-talk { opacity: 0; transition: opacity .3s; }
.pma-scr.talking .pma-talk { opacity: 1; }
.pma-mic { position: absolute; left: calc(var(--x) * 1px - 34px); top: calc(var(--y) * 1px - 34px); width: 68px; height: 68px; border-radius: 50%; opacity: 0; }
.pma-scr.talking .pma-mic { opacity: 1; animation: pmaMic 1.3s ease-out infinite; }
@keyframes pmaMic { 0% { box-shadow: 0 0 0 0 rgba(226, 85, 76, .45); } 100% { box-shadow: 0 0 0 26px rgba(226, 85, 76, 0); } }
.pma-go { opacity: 0; transition: opacity .35s; }
/* the Submit it becomes is a small picture laid on the screen: it keeps its own box, not the full-screen one the screens' pictures take */
.pma-scr > img.pma-go { left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); }
.pma-scr.ready .pma-go { opacity: 1; }

/* the report: a score ring where the icon was, and the eight filled in */
.pma-title { position: absolute; left: 151px; top: 116px; width: 300px; height: 40px; display: grid; place-items: center; font-size: 27px; font-weight: 800; letter-spacing: -.01em; background: #fff; opacity: 0; }
.pmr.is-voice .pma-title { opacity: 1; }
.pma-score { position: absolute; left: 208px; top: 252px; width: 188px; height: 188px; --s: var(--st, 83); }
.pmr.is-voice .pma-score { --s: var(--sv, 80); }
.pma-score svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.pma-score circle { fill: none; stroke-width: 11; }
.pma-score .tr { stroke: #f6e6e2; }
.pma-score .fg { stroke: url(#pma-g); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.pma-rep.fill .pma-score .fg { stroke-dashoffset: calc(100 - var(--s)); transition: stroke-dashoffset 1.3s var(--ease-out) .1s; }
.pma-score > p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pma-score > p b { font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pma-score > p i { margin-top: 6px; font-style: normal; font-size: 15px; font-weight: 700; color: #8a8a8a; }
.pma-sp { position: absolute; width: 22px; height: 22px; color: #ff8a3d; opacity: 0; transform: scale(.3); }
.pma-sp svg { width: 100%; height: 100%; fill: currentColor; }
.pma-sp.s1 { left: -38px; top: 30px; --d: 0ms; }
.pma-sp.s2 { right: -30px; top: 4px; width: 16px; height: 16px; color: #e2554c; --d: 120ms; }
.pma-sp.s3 { right: -44px; top: 58px; width: 12px; height: 12px; --d: 240ms; }
.pma-rep.fill .pma-sp { opacity: 1; transform: none; transition: opacity .3s calc(1.1s + var(--d)), transform .55s cubic-bezier(.3, 1.6, .5, 1) calc(1.1s + var(--d)); }
.pma-val { position: absolute; right: 63.5px; top: calc(var(--y) * 1px - 20px); min-width: 72px; height: 26px; text-align: right; font-size: 21px; font-weight: 800; line-height: 26px; font-variant-numeric: tabular-nums; color: #e2554c; background: #fff; }
.pma-fill { position: absolute; left: 61.5px; top: calc(var(--y) * 1px); width: 0; height: 7.5px; border-radius: 4px; background: linear-gradient(90deg, #ff9a7a, #e2554c); }
.pma-rep.fill .pma-fill { width: calc(var(--vt) * 480px); transition: width .9s var(--ease-out) calc(.35s + var(--j) * 80ms); }
.pmr.is-voice .pma-rep.fill .pma-fill { width: calc(var(--vv) * 480px); }
.pma-stat { position: absolute; left: 382px; top: 1144px; width: 156px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #fff; opacity: 0; }
.pmr.is-voice .pma-stat { opacity: 1; }
.pma-stat b { font-size: 20px; font-weight: 800; }
.pma-stat em { font-style: normal; font-size: 19px; font-weight: 800; color: #e2554c; }

@media (max-height: 760px) and (min-width: 901px) {
  .pmr-hint { display: none; }
}
@media (max-width: 900px) {
  .pmr-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 8px; }
  .pmr .phone { --pw-base: 136; }
  .pmr-dev { padding: 6px 18px; }
  .pmr.flip .pmr-dev { transform: rotate(4deg); }
  .pmr.flip .pmr-copy { transform: none; }
  .pmr-copy { width: 100%; }
  .pmr-h { max-width: none; margin-top: 8px; font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
  .pmr-chapter { font-size: 9px; }
  .pmr-chapter { font-size: 9px; }
  .pmr-modes { display: grid; margin-top: 12px; }
  .pmr { --cw: 220px; }
  .pmr-mode { padding: 10px 8px; gap: 6px; font-size: .82rem; white-space: nowrap; }
  .pmr-mode svg { width: 15px; height: 15px; }
  .pmr-view { height: clamp(210px, 32vh, 280px); margin-inline: -8px; }
  .pmr-hint { display: none; }
}
@media (max-width: 900px) and (max-height: 780px) {
  .pmr-chapter { display: none; }
  .pmr .phone { --pw-base: 118; }
}
@media (max-width: 560px) {
  .pmr-cchips { display: none; }
  .pmr-card { padding: 10px 14px 12px; }
  .pmr-cdesc { margin-top: 8px; font-size: .78rem; }
  .pmr-card.high .pmr-cdone { bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pmr-dev, .pmr-copy, .pma-scr, .pma-kb, .pmr-card { transition-duration: 1ms; }
}

/* ════ MYNA TEST — the laptop, and the phone ═══════════════════════
   A pinned scroll of four stops. At the left, only type: a big coral
   numeral, the step's name and one line, the devices it plays on, and
   a slim four-part bar whose current part fills while its demo plays.
   At the right, a laptop — silver, with a dark bezel — running a
   browser on the real web app, and a phone running the real app: the
   admin making a pattern, the student filtering by company, the
   sitting and the report. For the sitting and the report, the laptop
   plays first; then its lid shuts on its hinge, the closed laptop
   sinks away, and a phone flips down in its place to show the same on
   the phone. Going back opens the laptop again. The phone stands a
   little taller than the laptop; tour.js sizes it, and the stage.
   ═════════════════════════════════════════════════════════════════ */

.mts { position: relative; --x-hot: #e2544c; --x-tint: #fdebe7; --x-deep: var(--coral-deep, #a72f28); }
.mts-pin { isolation: isolate; overflow: hidden; }
.mts-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mts-bg::before {                       /* ruled paper, faintly */
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(28, 21, 23, .045) 1px, transparent 1px);
  background-size: 100% 36px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.mts-bg i {
  position: absolute;
  left: 68%;
  top: 52%;
  width: min(72vw, 980px);
  aspect-ratio: 1.3;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 84, 76, .16), rgba(226, 84, 76, .05) 55%, transparent 76%);
}
.mts-wrap {
  width: 100%;
  max-width: 1260px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  align-items: center;
  column-gap: clamp(28px, 4vw, 64px);
}

/* ── the copy ── */
.mts-copy { min-width: 0; }
.mts-lockup { display: block; height: clamp(34px, 5.4vh, 50px); width: auto; }
.mts-h {
  margin-top: clamp(10px, 1.8vh, 16px);
  text-wrap: balance;
  font-size: clamp(1.6rem, min(2.8vw, 4.6svh), 2.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.mts-h em {
  font-style: normal;
  background: linear-gradient(90deg, var(--coral), #d9702e);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* the step, in type: the four are stacked in one cell, one showing */
.mts-nows { display: grid; margin-top: clamp(18px, 3.4vh, 36px); }
.mts-now {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 22px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
  transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.mts-now.past { transform: translateY(-22px); }
.mts-now.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s var(--ease) .12s, transform .7s var(--ease-out) .12s, visibility 0s;
}
.mts-big {
  flex: none;
  min-width: 1.15em;
  font-size: clamp(3.2rem, min(6vw, 10svh), 5.8rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .8;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, #ff9272 0%, #e2544c 52%, #a72f28 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.mts-nt { min-width: 0; }
.mts-nk { margin: 0; font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--x-deep); }
.mts-now h3 { margin: 7px 0 0; font-size: clamp(1.35rem, min(2.1vw, 3.6svh), 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
/* the step's name, highlighted: a coral marker swept behind it as the step comes in */
.mts-hl {
  padding: 0 .12em;
  margin: 0 -.12em;
  border-radius: .18em;
  color: inherit;
  background: linear-gradient(100deg, rgba(255, 138, 110, .5), rgba(240, 138, 60, .38)) 0 88% / 0% 42% no-repeat;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size .8s cubic-bezier(.65, 0, .35, 1) .1s;
}
.mts-now.on .mts-hl { background-size: 100% 42%; transition-delay: .45s; }
.mts-seg.on span { font-weight: 800; }
.mts-nd { margin: 8px 0 0; max-width: 40ch; text-wrap: pretty; font-size: clamp(.86rem, min(1vw, 1.8svh), 1rem); line-height: 1.55; color: var(--on-2); }
.mts-devs { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(10px, 1.8vh, 16px) 0 0; }
.mts-dev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .76rem;
  color: var(--on-3);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: color .35s, background .35s, box-shadow .35s;
}
.mts-dev svg { width: 15px; height: 15px; flex: none; }
.mts-dev b { font-weight: 800; }
.mts-dev i { font-style: normal; opacity: .82; }
.mts-dev i::before { content: "\00b7"; margin-right: 6px; }
.mts-dev i.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mts-dev.on { color: #fff; background: linear-gradient(135deg, #ff7d63, #e2544c); box-shadow: 0 10px 20px -12px rgba(226, 84, 76, .95); }

/* the four, as a slim bar */
.mts-prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: clamp(20px, 3.6vh, 38px); }
.mts-seg { display: flex; flex-direction: column; gap: 9px; padding: 6px 0; text-align: left; }
.mts-seg > i { position: relative; display: block; height: 4px; border-radius: 4px; background: rgba(226, 84, 76, .15); overflow: hidden; }
.mts-seg > i > i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #ff7d63, #e2544c); transform: scaleX(0); transform-origin: 0 50%; }
.mts-seg.done > i > i { transform: none; }
.mts-seg.on.run > i > i { animation: mtsFill var(--dur, 6s) linear forwards; }
@keyframes mtsFill { to { transform: scaleX(1); } }
.mts-seg span { font-size: .74rem; font-weight: 700; line-height: 1.3; color: var(--on-3); transition: color .3s; }
.mts-seg span b { display: block; margin-bottom: 1px; font-family: var(--mono); font-size: .66rem; }
.mts-seg:hover span, .mts-seg.on span { color: var(--on); }
.mts-seg.on span b { color: var(--x-deep); }
.mts-seg:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 6px; }
.mts-hint { display: flex; align-items: center; gap: 6px; margin: clamp(10px, 1.8vh, 16px) 0 0; font-size: .76rem; font-weight: 600; color: var(--on-3); }
.mts-hint kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font-family: var(--mono); font-size: 11px; color: var(--on); background: var(--surface); box-shadow: inset 0 -2px 0 #eadcd8, 0 0 0 1px var(--hairline); }
.mts-hint b { font-family: var(--mono); color: var(--x-deep); }

/* ── the stage: the laptop, and the phone that takes its place ── */
.mts-stage { position: relative; display: grid; place-items: center; min-width: 0; }
.mts-lap {
  position: relative;
  width: min(100%, calc((100svh - var(--nav-h, 0px) - 150px) * 1.5));
  container-type: inline-size;
  perspective: 1800px;
  perspective-origin: 50% 80%;          /* a touch above the hinge */
  transition: translate .6s var(--ease-out) .15s, opacity .45s var(--ease) .15s;
}
.mts-lid {
  position: relative;
  width: 88%;
  margin: 0 auto;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2, .9, .25, 1) .3s;
}
.mts-face {
  position: relative;
  padding: 2.3% 2.3% 3.4%;
  border-radius: 2.4cqw 2.4cqw .5cqw .5cqw;
  background: linear-gradient(160deg, #2e282c 0%, #121012 30%, #0c0a0c 72%, #262024 100%);
  box-shadow: 0 0 0 1.5px #cdc4c1, inset 0 0 0 1px rgba(255, 255, 255, .07);
  backface-visibility: hidden;
}
.mts-cam { position: absolute; left: 50%; top: .8%; width: .9%; aspect-ratio: 1; border-radius: 50%; translate: -50% 0; background: #2c2629; box-shadow: inset 0 0 0 1px #3c3438; }
.mts-glass { position: relative; aspect-ratio: 1900 / 1020; overflow: hidden; border-radius: 3px; background: #fff; }
.mts-glass::after {                     /* a sheen across the glass */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  background: linear-gradient(115deg, rgba(255, 255, 255, .2) 0%, transparent 32%);
  pointer-events: none;
}
/* the outside of the lid: brushed silver, the bird in the middle */
.mts-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 2.4cqw 2.4cqw .5cqw .5cqw;
  background: linear-gradient(180deg, #f1ecea 0%, #d9d1ce 60%, #c9c0bd 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  transform: rotateX(180deg);
  backface-visibility: hidden;
}
.mts-back img { width: 11%; height: auto; opacity: .55; filter: grayscale(1) brightness(.5); }
/* the deck, edge-on: a silver slab wider than the lid, with the scoop */
.mts-base {
  position: relative;
  height: 3.2cqw;
  margin-top: -1px;
  border-radius: .4cqw .4cqw 5cqw 5cqw / .4cqw .4cqw 100% 100%;
  background: linear-gradient(180deg, #f4efed 0%, #dcd4d1 30%, #b9afac 78%, #8f8583 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
}
.mts-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 38%;
  translate: -50% 0;
  border-radius: 0 0 1.2cqw 1.2cqw;
  background: linear-gradient(180deg, #b8aeab, #d6cecb);
}
.mts-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -5%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 20, 24, .26), transparent);
  z-index: -1;
  pointer-events: none;
  transition: left .6s var(--ease) .7s, right .6s var(--ease) .7s;
}

/* shut, and gone: the lid folds down onto the deck, then the closed
   laptop sinks away */
.mts.on-phone .mts-lid { transform: rotateX(-90deg); transition: transform .7s cubic-bezier(.55, 0, .45, 1); }
.mts.on-phone .mts-lap { translate: 0 22%; opacity: 0; transition: translate .6s cubic-bezier(.55, 0, .7, .3) .72s, opacity .4s var(--ease) .85s; }
.mts.on-phone .mts-shadow { left: 33%; right: 33%; }

/* the phone: out of sight above, face turned away */
.mts-ph {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  perspective: 1400px;
  pointer-events: none;
}
.mts-ph .phone {
  --pwn: 200;
  opacity: 0;
  transform: translateY(-70%) rotateY(-180deg) rotateZ(-8deg) scale(.86);
  backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.5, 0, .75, 0), opacity .3s var(--ease) .1s;
}
.mts-ph .phone-glow { opacity: .45; }
.mts.on-phone .mts-ph .phone {
  opacity: 1;
  transform: none;
  transition: transform 1.05s cubic-bezier(.22, 1.18, .36, 1) 1s, opacity .25s var(--ease) 1.12s;
}

/* ══ the laptop's screen: a browser on the web app ═════════════════
   Laid out once at 1900 x 1020 — the real app's 1900 x 866, with a
   browser's bar above it and a taskbar below — and scaled to the glass
   by tour.js (--ts). Inside, .mtw-cam is the camera: tour.js zooms and
   pans it onto the part of the screen the step is about, so the real
   screens can be read; the cursor rides in the same layer, scaled back
   down by --cs so it stays its own size. */
.mtw {
  position: absolute;
  left: 0;
  top: 0;
  width: 1900px;
  height: 1020px;
  transform: scale(var(--ts, .3));
  transform-origin: 0 0;
  overflow: hidden;
  font-family: "Poppins", var(--sans);
  color: #1c1c1c;
  background: #f4f6f4;
}
.mtw p { margin: 0; }
.mtw ol { list-style: none; margin: 0; padding: 0; }
.mtw svg { display: block; }
.mtw img { display: block; }
.mtw-cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }

/* the browser */
.mtw-tabs { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: flex-end; gap: 6px; padding-left: 12px; background: #dfe3e8; }
.mtw-tab { display: flex; align-items: center; gap: 10px; width: 290px; height: 38px; padding: 0 14px; border-radius: 12px 12px 0 0; font-size: 14px; color: #3c4043; background: #fff; }
.mtw-fav { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(145deg, #e8705f, #c9473d); }
.mtw-fav img { width: 13px; height: 13px; object-fit: contain; }
.mtw-tab b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-weight: 500; }
.mtw-tab > i:last-child { font-style: normal; font-size: 18px; line-height: 1; color: #5f6368; }
.mtw-new { align-self: center; margin-top: 8px; font-size: 24px; line-height: 1; color: #5f6368; }
.mtw-win { align-self: stretch; display: flex; margin-left: auto; }
.mtw-win i { position: relative; width: 58px; }
.mtw-win i::before, .mtw-win i::after { content: ""; position: absolute; left: 50%; top: 50%; background: #3c4043; }
.mtw-win i:nth-child(1)::before { width: 12px; height: 1.5px; margin: 0 0 0 -6px; }
.mtw-win i:nth-child(2)::before { width: 11px; height: 11px; margin: -6px 0 0 -6px; background: none; box-shadow: inset 0 0 0 1.5px #3c4043; }
.mtw-win i:nth-child(3)::before, .mtw-win i:nth-child(3)::after { width: 15px; height: 1.5px; margin-left: -7.5px; rotate: 45deg; }
.mtw-win i:nth-child(3)::after { rotate: -45deg; }
.mtw-tool { position: absolute; left: 0; right: 0; top: 46px; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: #fff; box-shadow: inset 0 -1px 0 #e3e5e8; }
.mtw-nav { display: flex; gap: 16px; color: #5f6368; }
.mtw-nav svg, .mtw-me svg { width: 22px; height: 22px; color: #5f6368; }
.mtw-url { flex: 1; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border-radius: 19px; font-size: 15px; color: #202124; background: #f1f3f4; }
.mtw-url svg { width: 16px; height: 16px; color: #5f6368; }
.mtw-url b { font-weight: 500; }
.mtw-url i { margin-left: -10px; font-style: normal; color: #80868b; }
.mtw-vp { position: absolute; left: 0; top: 102px; width: 1900px; height: 866px; overflow: hidden; background: #f4f6f4; }
.mtw-task { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; justify-content: center; background: #eef0f3; box-shadow: inset 0 1px 0 #dde0e4; }
.mtw-apps { display: flex; gap: 10px; }
.mtw-apps i { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: #3c4043; }
.mtw-apps svg { width: 22px; height: 22px; }
.mtw-apps .f { color: #d99a1e; }
.mtw-apps .b { color: #2f6fd6; }
.mtw-apps .m { background: linear-gradient(145deg, #e8705f, #c9473d); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
.mtw-apps .m img { width: 20px; height: 20px; object-fit: contain; }
.mtw-apps .on::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: #d25e52; }
.mtw-tray { position: absolute; right: 20px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: #3c4043; }
.mtw-tray svg { width: 18px; height: 18px; }
.mtw-tray b { font-weight: 500; }

/* the pages, one showing at a time */
.mtw-pg { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.mtw-pg.on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.mtw-full { position: absolute; left: 0; top: 0; width: 1900px; height: 866px; }
/* anything placed on a real screen, by its box there */
.mtw-pc, .mtw-flash, .mtw-drop, .mtw-hot, .mtw-pulse, .mtw-press, .mta-pulse {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
}

/* the admin's new pattern: the empty form, filled in piece by piece —
   each piece is the same spot of the filled-in form (adm-form.jpg) */
.mtw-clip { position: absolute; overflow: hidden; }
.mtw-scroll { position: absolute; left: 0; top: 0; transform: translateY(calc(var(--sy, 0) * -1px)); transition: transform 1s cubic-bezier(.65, 0, .35, 1); }
.mtw-scroll > img { width: 100%; height: 100%; }
.mtw-shade { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: linear-gradient(rgba(40, 20, 20, .09), transparent); pointer-events: none; }
.mtw-pc { background: url(../img/myna-test/adm-form.jpg) calc(var(--x) * -1px) calc(var(--y) * -1px) / 1652px 1939px no-repeat; }
.mtw-chip, .mtw-chipx, .mtw-co, .mtw-cox { opacity: 0; transform: scale(.6); transition: opacity .18s, transform .38s cubic-bezier(.3, 1.6, .5, 1); }
.mtw-row { opacity: 0; transform: translateY(-14px); transition: opacity .3s var(--ease), transform .5s var(--ease-out); }
.mtw-pc.in { opacity: 1; transform: none; }
.mtw-name { clip-path: inset(0 100% 0 0); }
.mtw-name.typing { clip-path: inset(0 0 0 0); transition: clip-path var(--typ, 1000ms) steps(34, end); }
.mtw-caret { position: absolute; left: calc(var(--x0) * 1px); top: calc(var(--y) * 1px); width: 2px; height: calc(var(--h) * 1px); background: #5a5a5a; opacity: 0; }
.mtw-caret.on { opacity: 1; animation: mtwBlink 1s step-end infinite; }
.mtw-caret.typing { left: calc(var(--x1) * 1px); transition: left var(--typ, 1000ms) steps(34, end); animation: none; }
@keyframes mtwBlink { 50% { opacity: 0; } }
.mtw-press { border-radius: 4px; background: rgba(0, 0, 0, .2); opacity: 0; }
.mtw-press.go { animation: mtwPress .4s; }
@keyframes mtwPress { 30% { opacity: 1; } }
/* back on the list: the pattern just made, at the top */
.mtw-flash { border-radius: 8px; background: rgba(210, 94, 82, .1); box-shadow: inset 5px 0 0 #d25e52, 0 0 0 2px rgba(210, 94, 82, .55); opacity: 0; transition: opacity .45s var(--ease); }
.mtw-flash::after { content: "Just added"; position: absolute; left: 150px; top: -22px; padding: 5px 14px; box-shadow: 0 6px 14px -6px rgba(210, 94, 82, .9); border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; background: #d25e52; }
.mtw-flash.on { opacity: 1; }

/* the student's tests, and the companies to filter them by */
.mtw-drop { overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .35s var(--ease-out); }
.mtw-drop img { width: 100%; height: 100%; }
.mtw-drop.open { clip-path: inset(0 0 0 0); }
.mtw-hot { border-radius: 18px; box-shadow: 0 0 0 3px #d25e52; opacity: 0; transition: opacity .2s; }
.mtw-hot.on { opacity: 1; }
.mtw-pulse, .mta-pulse { border-radius: 14px; opacity: 0; }
.mtw-pulse.go, .mta-pulse.go { animation: mtwPulse 1.3s ease-out 2; }
@keyframes mtwPulse {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(210, 94, 82, .9); }
  15% { opacity: 1; box-shadow: 0 0 0 3px rgba(210, 94, 82, .9); }
  100% { opacity: 0; box-shadow: 0 0 0 16px rgba(210, 94, 82, 0); }
}

/* the sitting and the report on the web, in the app's own style */
.mtw-top { position: absolute; left: 0; top: 0; width: 1900px; height: 92px; }
.mtw-in { position: absolute; left: 427px; top: 118px; width: 1066px; }
.mtw-head { display: flex; align-items: center; gap: 18px; }
.mtw-head > p { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mtw-head > p b { font-size: 25px; font-weight: 600; letter-spacing: -.01em; }
.mtw-head > p span { font-size: 15px; color: #8a8f8a; }
.mtw-clock { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px; border-radius: 27px; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: #d25e52; background: #faebe7; }
.mtw-clock svg { width: 24px; height: 24px; }
.mtw-secs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 24px !important; }
.mtw-sec { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #ebedeb; overflow: hidden; }
.mtw-sec u { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; text-decoration: none; font-size: 13px; font-weight: 600; color: #8a8f8a; background: #f1f3f1; }
.mtw-sec > b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.mtw-sec em { font-style: normal; white-space: nowrap; font-size: 12px; color: #8a8f8a; }
.mtw-sec em b { color: #d25e52; }
.mtw-sec em svg { width: 16px; height: 16px; }
.mtw-sec.done u { font-size: 0; color: #fff; background: #2fa36b; }
.mtw-sec.done u::after { content: "\2713"; font-size: 15px; }
.mtw-sec.now { box-shadow: 0 0 0 2px #d25e52; }
.mtw-sec.now u { color: #fff; background: #d25e52; }
.mtw-sec.now::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p, .34) * 100%); background: #d25e52; transition: width .5s var(--ease); }
.mtw-sec.lock { opacity: .55; }
.mtw-card { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #ebedeb, 0 16px 30px -26px rgba(40, 40, 40, .45); }
.mtw-q { position: relative; margin-top: 20px; padding: 26px 30px 28px; }
.mtw-k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8f8a; }
.mtw-k b { color: #d25e52; }
.mtw-k em { margin-left: auto; font-style: normal; letter-spacing: 0; text-transform: none; font-size: 14px; color: #5d625d; }
.mtw-audio { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 12px 20px 12px 12px; border-radius: 40px; background: #faf1ef; }
.mtw-play { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #d25e52; }
.mtw-play svg { width: 18px; height: 18px; margin-left: 3px; fill: #fff; }
.mtw-wave { flex: 1; display: flex; align-items: center; gap: 5px; height: 36px; }
.mtw-wave i, .mta-wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px; background: #e9b1a9; }
.mtw-audio em { font-style: normal; font-size: 14px; font-weight: 600; color: #b04a40; }
.mtw-ask { margin-top: 20px !important; font-size: 21px; font-weight: 500; }
.mtw-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.mtw-opts span { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 18px; border-radius: 16px; font-size: 17px; font-weight: 500; background: #fafbfa; box-shadow: inset 0 0 0 1.5px #e6e9e6; transition: background .2s, color .2s, box-shadow .2s; }
.mtw-opts u, .mta-opts u { flex: none; display: grid; place-items: center; border-radius: 50%; text-decoration: none; font-weight: 600; color: #d25e52; background: #faebe7; }
.mtw-opts u { width: 32px; height: 32px; font-size: 14px; }
.mtw-opts span.pick, .mta-opts span.pick { color: #fff; background: #d25e52; box-shadow: none; }
.mtw-opts span.pick u, .mta-opts span.pick u { color: #d25e52; background: #fff; }
.mtw-foot { display: flex; justify-content: space-between; margin-top: 24px; }
.mtw-prev, .mtw-next { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 25px; font-size: 16px; font-weight: 600; }
.mtw-prev { color: #b7bbb7; background: #f1f3f1; }
.mtw-next { color: #fff; background: #d25e52; }
.mtw-prev svg, .mtw-next svg { width: 18px; height: 18px; }
.mtw-prev.shake, .mta-prev.shake { animation: mtsShake .45s ease; }
@keyframes mtsShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.mtw-nope, .mta-nope {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 500;
  color: #fff;
  background: #1c1c1c;
  translate: -50% 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s, transform .35s var(--ease-out);
}
.mtw-nope { bottom: 96px; gap: 10px; padding: 12px 22px; border-radius: 30px; font-size: 16px; }
.mtw-nope svg { width: 18px; height: 18px; color: #ff9d85; }
.mtw-nope.show, .mta-nope.show { opacity: 1; transform: none; }
.mtw-ready { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 23px; font-size: 16px; font-weight: 600; color: #1f8a57; background: #e3f4ea; }
.mtw-ready svg { width: 18px; height: 18px; }
.mtw-rgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; margin-top: 22px; }
.mtw-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; }
.mtw-dial, .mta-dial { position: relative; }
.mtw-dial { width: 170px; height: 170px; }
.mtw-dial svg, .mta-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mtw-dial circle, .mta-dial circle { fill: none; stroke-width: 7; }
.mtw-dial .tr, .mta-dial .tr { stroke: #f4e4df; }
.mtw-dial .fg, .mta-dial .fg { stroke: #d25e52; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s var(--ease-out); }
.mtw-dial b, .mta-dial b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mtw-dial b { font-size: 52px; }
.mtw-score p { display: flex; flex-direction: column; align-items: center; font-size: 14px; color: #8a8f8a; }
.mtw-score p b { font-size: 20px; font-weight: 600; color: #1c1c1c; }
.mtw-bars { padding: 20px 26px; }
.mtw-rb, .mta-rb { display: grid; grid-template-columns: 1fr auto; }
.mtw-rb { row-gap: 7px; padding: 7px 0; font-size: 15px; }
.mtw-rb b, .mta-rb b { font-weight: 500; }
.mtw-rb em, .mta-rb em { font-style: normal; font-weight: 600; }
.mtw-rb s, .mta-rb s { grid-column: 1 / -1; border-radius: 6px; background: #f4e4df; text-decoration: none; overflow: hidden; }
.mtw-rb s { height: 10px; }
.mtw-rb s i, .mta-rb s i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 6px; background: linear-gradient(90deg, #ef9a8c, #d25e52); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.mtw-rep.fill .mtw-rb s i, .mta-rep.fill .mta-rb s i { transform: none; transition-delay: calc(.3s + var(--j) * 110ms); }
.mtw-rep.fill .mtw-dial .fg, .mta-rep.fill .mta-dial .fg { stroke-dashoffset: 26; }
.mtw-hist { margin-top: 18px; padding: 18px 26px 20px; }
.mtw-histo { display: flex; align-items: flex-end; gap: 8px; height: 80px; margin-top: 14px; }
.mtw-histo i { flex: 1; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: #f1dcd7; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ease-out); }
.mtw-histo i.you { background: linear-gradient(180deg, #ef8a79, #d25e52); }
.mtw-rep.fill .mtw-histo i { transform: none; transition-delay: calc(.8s + var(--j) * 45ms); }
.mtw-sent { display: flex; gap: 12px; margin-top: 16px !important; }
.mtw-sent span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 21px; font-size: 14px; font-weight: 500; color: #1f8a57; background: #e3f4ea; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease-out); }
.mtw-sent svg { width: 16px; height: 16px; }
.mtw-sent span.show { opacity: 1; transform: none; }

/* the cursor, and the ring a click leaves */
.mtw-cur {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  transform-origin: 0 0;
  translate: 950px 620px;
  scale: var(--cs, 1);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3));
  opacity: 0;
  transition: translate var(--mv, 700ms) cubic-bezier(.45, .05, .25, 1), scale 1.1s cubic-bezier(.65, 0, .35, 1), opacity .25s;
}
.mtw-cur.on { opacity: 1; }
.mtw-cur.press { animation: mtwCur .26s; }
@keyframes mtwCur { 45% { transform: scale(.8); } }
.mtw-ripple {
  position: absolute;
  z-index: 19;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(210, 94, 82, .28);
  box-shadow: 0 0 0 3px rgba(210, 94, 82, .6);
  scale: var(--cs, 1);
  opacity: 0;
  pointer-events: none;
}
.mtw-ripple.go { animation: mtwRip .6s var(--ease-out); }
@keyframes mtwRip { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1); } }

/* ══ the phone's screen: the real app, 589 x 1280 ═════════════════
   The size of the app's own screenshots, scaled into .phone-screen
   (286.4 x 620.9). Screens push in from the right, as in the app. */
.mta {
  position: absolute;
  left: 0;
  top: 0;
  width: 589px;
  height: 1280px;
  transform: scale(.48625);
  transform-origin: 0 0;
  overflow: hidden;
  font-family: "Poppins", var(--sans);
  color: #1c1c1c;
  background: #eceeeb;
}
.mta p { margin: 0; }
.mta svg, .mta img { display: block; }
.mta-scr { position: absolute; inset: 0; overflow: hidden; background: #eceeeb; transform: translateX(100%); transition: transform .45s cubic-bezier(.3, .7, .2, 1), filter .45s; }
.mta-scr.on { z-index: 2; transform: none; }
.mta-scr.back { z-index: 1; transform: translateX(-28%); filter: brightness(.86); }
.mta.snap .mta-scr { transition: none; }
.mta-scr > img { width: 589px; height: 1280px; }
.mta-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s; pointer-events: none; }
.mta-sheet { position: absolute; left: 0; right: 0; top: calc(var(--y) * 1px); bottom: 0; border-radius: 32px 32px 0 0; overflow: hidden; transform: translateY(105%); transition: transform .45s cubic-bezier(.3, .8, .25, 1); }
.mta-sheet img { width: 589px; }
.mta-scr.sheet .mta-dim { opacity: 1; }
.mta-scr.sheet .mta-sheet { transform: none; }
.mta-pulse { border-radius: 24px; }
.mta-sb { height: 92px; background: #fff 0 0 / 589px 1280px no-repeat; }
.mta-head { display: flex; align-items: center; gap: 14px; padding: 18px 28px 0; }
.mta-head > b { flex: 1; font-size: 29px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.mta-clock { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 18px; border-radius: 28px; font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; color: #e2554c; background: #fdece9; }
.mta-clock svg { width: 24px; height: 24px; }
.mta-secs { display: flex; gap: 10px; padding: 22px 28px 0; overflow: hidden; white-space: nowrap; }
.mta-sec { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: 25px; font-size: 19px; font-weight: 600; background: #fff; box-shadow: inset 0 0 0 2px #dfe2df; }
.mta-sec svg { width: 20px; height: 20px; }
.mta-sec.done { color: #1f8a57; background: #eef8f1; box-shadow: inset 0 0 0 2px #bfe3cd; }
.mta-sec.now { color: #fff; background: #e2554c; box-shadow: none; }
.mta-sec.lock { color: #9a9e9a; }
.mta-card { position: relative; margin: 22px 24px 0; padding: 26px 26px 28px 34px; border-radius: 28px; background: #fff; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .3); overflow: hidden; }
.mta-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: #e2554c; }
.mta-k { font-size: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #979797; }
.mta-k b { color: #e2554c; }
.mta-audio { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 10px 18px 10px 10px; border-radius: 40px; background: #fdf0ed; }
.mta-play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #e2554c; }
.mta-play svg { width: 22px; height: 22px; margin-left: 4px; fill: #fff; }
.mta-wave { flex: 1; display: flex; align-items: center; gap: 4px; height: 40px; }
.mta-ask { margin-top: 20px !important; font-size: 24px; font-weight: 600; line-height: 1.35; }
.mta-opts { display: grid; gap: 12px; margin-top: 20px; }
.mta-opts span { display: flex; align-items: center; gap: 14px; height: 70px; padding: 0 18px; border-radius: 20px; font-size: 21px; font-weight: 600; color: #2b2b2b; background: #f7f8f7; box-shadow: inset 0 0 0 2px #e6e9e6; transition: background .2s, color .2s, box-shadow .2s; }
.mta-opts u { width: 38px; height: 38px; font-size: 17px; }
.mta-foot { display: flex; gap: 14px; margin: 22px 24px 0; }
.mta-prev { display: grid; place-items: center; width: 86px; height: 76px; border-radius: 24px; color: #c2c6c2; background: #fff; }
.mta-prev svg { width: 28px; height: 28px; }
.mta-next { flex: 1; display: grid; place-items: center; height: 76px; border-radius: 24px; font-size: 24px; font-weight: 700; color: #fff; background: #e2554c; box-shadow: 0 14px 24px -16px rgba(226, 85, 76, .9); }
.mta-nope { bottom: 70px; gap: 10px; padding: 16px 28px; border-radius: 40px; font-size: 21px; font-weight: 600; }
.mta-nope svg { width: 22px; height: 22px; color: #ff9d85; }
.mta-bar { display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 0 30px; background: #fff; }
.mta-bar b { font-size: 30px; font-weight: 700; color: #e2554c; }
.mta-bar i { width: 34px; color: #1c1c1c; }
.mta-bar svg { width: 34px; height: 34px; }
.mta-dial { width: 300px; height: 300px; margin: 44px auto 0; }
.mta-dial b { font-size: 92px; }
.mta-lvl { margin-top: 16px !important; text-align: center; font-size: 22px; font-weight: 600; color: #6c6f6c; }
.mta-bars { margin: 30px 24px 0; padding: 22px 28px 26px 34px; }
.mta-rb { row-gap: 8px; padding: 9px 0; font-size: 21px; }
.mta-rb s { height: 12px; }
.mta-sent { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px !important; font-size: 20px; font-weight: 600; color: #1f8a57; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease-out); }
.mta-sent svg { width: 24px; height: 24px; }
.mta-rep.sent .mta-sent { opacity: 1; transform: none; }
.mta-tap { position: absolute; z-index: 9; left: -45px; top: -45px; width: 90px; height: 90px; border-radius: 50%; background: rgba(226, 85, 76, .28); box-shadow: 0 0 0 4px rgba(226, 85, 76, .5); opacity: 0; pointer-events: none; }
.mta-tap.go { animation: mtaTap .55s var(--ease-out); }
@keyframes mtaTap { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }

/* ── wide windows: the section fills the screen like the others — a bigger laptop and copy ── */
@media (min-width: 1101px) {
  .mts-wrap { max-width: 1600px; grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); column-gap: clamp(28px, 3vw, 56px); }
  .mts-stage { margin-right: calc(28px - var(--gut, 40px)); }
  .mts-lap { width: min(100%, calc((100svh - var(--nav-h, 0px) - 100px) * 1.62)); }
  .mts-lockup { height: clamp(38px, 6.4svh, 62px); }
  .mts-h { font-size: clamp(1.8rem, min(3vw, 5.8svh), 3.2rem); }
  .mts-big { font-size: clamp(3.6rem, min(6.8vw, 12svh), 7rem); }
  .mts-nows { margin-top: clamp(22px, 4.8svh, 52px); }
  .mts-now h3 { font-size: clamp(1.45rem, min(2.3vw, 4.2svh), 2.3rem); }
  .mts-nd { font-size: clamp(.9rem, min(1.05vw, 2svh), 1.08rem); }
  .mts-prog { margin-top: clamp(24px, 5.2svh, 58px); }
}
/* ── narrower windows ── */
@media (max-width: 1100px) and (min-width: 901px) {
  .mts-wrap { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}
@media (max-height: 760px) and (min-width: 901px) {
  .mts-nd { font-size: .84rem; line-height: 1.45; }
  .mts-hint { display: none; }
}
@media (max-width: 900px) {
  .mts-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .mts-stage { order: -1; padding-block: 3%; }
  .mts-lap { width: min(100%, 560px, calc((100svh - var(--nav-h, 0px) - 390px) * 1.5)); }
  .mts-lockup { height: 28px; }
  .mts-h { margin-top: 6px; font-size: clamp(1.2rem, 5.2vw, 1.6rem); }
  .mts-nows { margin-top: 12px; }
  .mts-big { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .mts-nk { font-size: .64rem; }
  .mts-now h3 { margin-top: 4px; font-size: clamp(1.05rem, 4.6vw, 1.3rem); }
  .mts-nd { margin-top: 5px; font-size: .82rem; line-height: 1.45; }
  .mts-devs { margin-top: 9px; gap: 6px; }
  .mts-dev { padding: 5px 10px 5px 8px; font-size: .7rem; }
  .mts-prog { margin-top: 14px; gap: 6px; }
  .mts-seg { gap: 6px; }
  .mts-seg span { font-size: 0; }
  .mts-seg span b { font-size: .64rem; }
  .mts-hint { display: none; }
}
@media (max-width: 420px) {
  .mts-dev i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mtw-pg, .mtw-cam, .mtw-scroll, .mtw-pc, .mtw-drop, .mtw-cur, .mts-now, .mta-scr, .mta-sheet,
  .mts-lid, .mts-lap, .mts-ph .phone, .mts-shadow,
  .mts.on-phone .mts-lid, .mts.on-phone .mts-lap, .mts.on-phone .mts-ph .phone { transition-duration: 1ms; transition-delay: 0s; }
}

/* ════ AI MYNA — the app, taken apart ════════════════════════════
   A pinned scroll of four stops — the snapshot, the skills, the AI
   insights, the AI Plan — laid out like an anatomy plate: the phone in
   the middle playing AI Myna as it is in the app, and callout cards
   either side, each tied by a line to the part of the screen it is
   about; the part itself is ringed. tour.js draws the lines, every
   frame while the section is on screen, so they follow the screen as
   it scrolls. On a phone the lines go and the cards sit under it.
   ═════════════════════════════════════════════════════════════════ */

.aiy { position: relative; --x-hot: #e2544c; --x-tint: #fdebe7; --x-deep: var(--coral-deep, #a72f28); }
.aiy-pin { isolation: isolate; overflow: hidden; }
.aiy-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aiy-bg::before {                       /* a faint field of dots, round the phone */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(74, 59, 63, .17) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(46% 62% at 50% 56%, #000 0%, transparent 76%);
          mask-image: radial-gradient(46% 62% at 50% 56%, #000 0%, transparent 76%);
}
.aiy-bg i { position: absolute; left: 50%; border-radius: 50%; aspect-ratio: 1; translate: -50% 0; }
.aiy-bg i:first-child { top: 16%; width: min(58vw, 760px); background: radial-gradient(closest-side, rgba(240, 138, 60, .14), transparent 72%); }
.aiy-bg i:last-child { top: 34%; width: min(38vw, 520px); background: radial-gradient(closest-side, rgba(226, 85, 76, .14), transparent 72%); }
.aiy-wrap { width: 100%; max-width: 1280px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }

/* ── the heading ── */
.aiy-head { text-align: center; }
.aiy-lockup { display: block; height: clamp(34px, 5.4vh, 50px); width: auto; margin: 0 auto; }
.aiy-lede { margin: clamp(6px, 1vh, 10px) auto 0; max-width: 80ch; text-wrap: balance; font-size: clamp(.9rem, min(1.05vw, 1.8svh), 1.02rem); line-height: 1.5; color: var(--on-2); }
.aiy-h { margin-top: clamp(8px, 1.3vh, 12px); text-wrap: balance; font-size: clamp(1.6rem, min(2.9vw, 4.8svh), 2.75rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.06; }
.aiy-h em { font-style: normal; background: linear-gradient(90deg, #e2554c, #f08a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── the stage: callouts | phone | callouts ── */
.aiy-stage { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; column-gap: clamp(44px, 7vw, 116px); margin-top: clamp(8px, 1.6vh, 18px); }
.aiy-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.aiy-lines path { fill: none; stroke: #e2554c; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .7s cubic-bezier(.65, 0, .35, 1), opacity .25s; }
.aiy-lines path.in { stroke-dashoffset: 0; opacity: .9; }
.aiy-lines path.dim { opacity: .28; }
.aiy-lines circle { fill: #fff; stroke: #e2554c; stroke-width: 2.2; opacity: 0; transition: opacity .25s .45s; }
.aiy-lines circle.halo { fill: rgba(226, 85, 76, .18); stroke: none; }
.aiy-lines circle.in { opacity: 1; }
.aiy-lines circle.halo.in { animation: aiyHalo 1.8s ease-out .6s infinite; transform-box: fill-box; transform-origin: center; }
.aiy-lines .weak { stroke: #c53b33; }
@keyframes aiyHalo { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.aiy-dev { --ob: 300; position: relative; z-index: 2; display: grid; place-items: center; }
.aiy-dev > .phone { grid-area: 1 / 1; }
.aiy-orbit { grid-area: 1 / 1; position: absolute; z-index: -1; left: 50%; top: 50%; width: calc(var(--ob) * var(--pw-k) * 1.62px); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.aiy-orbit > i { position: absolute; inset: 0; border-radius: 50%; }
.aiy-o1 { border: 1.5px dashed rgba(226, 85, 76, .3); }
.aiy-o2 { inset: 13% !important; border: 1px solid rgba(240, 138, 60, .22); background: radial-gradient(closest-side, rgba(240, 138, 60, .12), transparent 78%); }
.aiy-ospin { position: absolute; inset: 0; animation: aiySpin 60s linear infinite paused; }
.aiy-ospin span { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; display: grid; place-items: center; border-radius: 13px; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline), 0 12px 22px -14px rgba(60, 42, 46, .6); transform: rotate(var(--a)) translateY(calc(var(--ob) * var(--pw-k) * -.81px)) rotate(calc(var(--a) * -1)); }
.aiy-ospin span img { width: 21px; height: 21px; object-fit: contain; animation: aiySpin 60s linear infinite reverse paused; }
.aiy-stage.live .aiy-ospin, .aiy-stage.live .aiy-ospin span img { animation-play-state: running; }
@keyframes aiySpin { to { rotate: 360deg; } }
.aiy .phone { --pw-base: 300; }
.aiy-side { display: grid; min-width: 0; }
.aiy-grp { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.4vh, 26px); visibility: hidden; }
.aiy-left .aiy-grp { align-items: flex-end; }
.aiy-right .aiy-grp { align-items: flex-start; }
.aiy-grp.on { visibility: visible; }
/* a callout: its number, what it is, the figure, a line */
.aiy-co {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(100%, 290px);
  padding: 13px 16px 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), 0 18px 34px -26px rgba(60, 42, 46, .65);
  opacity: 0;
  transition: opacity .35s var(--ease), transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
}
.aiy-left .aiy-co { flex-direction: row-reverse; text-align: right; transform: translateX(-22px); }
.aiy-right .aiy-co { transform: translateX(22px); }
.aiy-co.in { opacity: 1; transform: none; }
.aiy-co.in.dim { opacity: .5; }
.aiy-co.in.hot { box-shadow: 0 0 0 2px #e2554c, 0 22px 40px -24px rgba(226, 85, 76, .8); }
.aiy-cn { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #e2554c, #f08a3c); box-shadow: 0 6px 12px -6px rgba(226, 85, 76, .9); }
.aiy-co > div { min-width: 0; }
.aiy-ck { margin: 0; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--x-deep); }
.aiy-cv { margin: 3px 0 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--on); }
.aiy-cd { margin: 5px 0 0; font-size: clamp(.78rem, .9vw, .85rem); line-height: 1.45; color: var(--on-2); }
.aiy-co.weak .aiy-cn { background: #c53b33; }
.aiy-co.weak .aiy-ck, .aiy-co.weak .aiy-cv { color: #c53b33; }

/* ── the pager ── */
.aiy-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: clamp(8px, 1.6vh, 18px); }
.aiy-pager { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline), 0 12px 26px -20px rgba(60, 42, 46, .6); }
.aiy-pg { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; overflow: hidden; font-size: .82rem; font-weight: 700; color: var(--on-3); transition: color .3s, background .35s; }
.aiy-pg b { font-family: var(--mono); font-size: .7rem; }
.aiy-pg > i { position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(226, 85, 76, .15); opacity: 0; overflow: hidden; }
.aiy-pg > i > i { position: absolute; inset: 0; background: #e2554c; transform: scaleX(0); transform-origin: 0 50%; }
.aiy-pg:hover { color: var(--on); }
.aiy-pg.on { color: var(--on); background: var(--x-tint); }
.aiy-pg.on b { color: var(--x-deep); }
.aiy-pg.on > i { opacity: 1; }
.aiy-pg.on.run > i > i { animation: aiyFill var(--dur, 5s) linear forwards; }
.aiy-pg.done b { color: #1f9573; }
@keyframes aiyFill { to { transform: scaleX(1); } }
.aiy-pg:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.aiy-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .74rem; font-weight: 600; color: var(--on-3); }
.aiy-hint kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font-family: var(--mono); font-size: 11px; color: var(--on); background: var(--surface); box-shadow: inset 0 -2px 0 #eadcd8, 0 0 0 1px var(--hairline); }
.aiy-hint b { font-family: var(--mono); color: var(--x-deep); }

/* ══ the app: AI Myna, 286.4 x 620.9 ══════════════════════════════ */
.amx { position: absolute; inset: 0; overflow: hidden; font-family: "Poppins", var(--sans); color: #1d1d1f; background: #f5f3f1; }
.amx p { margin: 0; }
.amx svg { display: block; }
.amx-scr { position: absolute; inset: 0; overflow: hidden; background: #f5f3f1; transform: translateX(100%); transition: transform .6s cubic-bezier(.32, .72, 0, 1), filter .6s; }
.amx-scr.on { z-index: 2; transform: none; }
.amx-scr.back { z-index: 1; transform: translateX(-30%); filter: brightness(.9); }
.amx.snap .amx-scr, .amx.snap .amx-in, .amx.snap .amx-sheet, .amx.snap .amx-dim { transition: none !important; }
.amx-menu img { position: absolute; left: 0; top: 0; width: 286.4px; height: auto; }
.amx-ring { position: absolute; z-index: 4; border-radius: 999px; box-shadow: 0 0 0 2px #e2554c, 0 0 0 7px rgba(226, 85, 76, .2); opacity: 0; transform: scale(1.12); transition: opacity .3s, transform .5s var(--ease-out); pointer-events: none; }
.amx-ring.on { opacity: 1; transform: none; }
.amx-tap { position: absolute; z-index: 20; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(226, 85, 76, .26); box-shadow: 0 0 0 2px rgba(226, 85, 76, .55); opacity: 0; pointer-events: none; }
.amx-tap.go { animation: amxTap .6s var(--ease-out); }
@keyframes amxTap { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.3); } }
/* a part of the screen, ringed while its callout is up */
.amx [data-hl] { transition: box-shadow .35s var(--ease), transform .45s var(--ease-out); }
.amx [data-hl].amx-lit { box-shadow: 0 0 0 2px #e2554c, 0 0 0 6px rgba(226, 85, 76, .18); }
.amx-hero [data-hl].amx-lit { box-shadow: 0 0 0 1.5px #fff, 0 0 0 5px rgba(255, 255, 255, .28); }
.amx-sk[data-hl].amx-lit, .amx-last.amx-lit, .amx-ses [data-hl].amx-lit { transform: scale(1.015); }

.amx-sb { display: flex; align-items: flex-end; justify-content: space-between; height: 42px; padding: 0 24px 6px; font-size: 11.5px; }
.amx-sb b { font-weight: 700; }
.amx-sb span { display: flex; gap: 3px; }
.amx-sb span i { width: 4px; height: 4px; border-radius: 50%; background: #1d1d1f; opacity: .7; }
.amx-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; }
.amx-top b { font-size: 12.5px; font-weight: 700; }
.amx-bk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.amx-bk svg { width: 13px; height: 13px; }
.amx-cr { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 700; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.amx-cr svg { width: 10px; height: 10px; color: #f0a13c; }
.amx-view { position: absolute; left: 0; right: 0; top: 80px; bottom: 0; overflow: hidden; }
.amx-in { position: relative; padding: 4px 11px 70px; transform: translateY(calc(var(--sy, 0) * -1px)); transition: transform 1s cubic-bezier(.65, 0, .35, 1); }

/* AI Myna analysing: a sweep down the screen, and its label */
.amx-scan { position: absolute; z-index: 4; left: 0; right: 0; top: 80px; height: 90px; background: linear-gradient(180deg, transparent, rgba(240, 138, 60, .16) 70%, rgba(226, 85, 76, .35) 98%, transparent); opacity: 0; pointer-events: none; }
.amx-scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: linear-gradient(90deg, transparent, #f08a3c 20%, #e2554c 80%, transparent); box-shadow: 0 0 10px 1px rgba(240, 138, 60, .7); }
.amx-ai.scan .amx-scan { animation: amxScan 1.5s cubic-bezier(.45, 0, .55, 1); }
@keyframes amxScan { 0% { opacity: 0; transform: translateY(-80px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(480px); } }
.amx-scanl { position: absolute; z-index: 5; left: 50%; top: 88px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; white-space: nowrap; font-size: 8.5px; font-weight: 700; color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 8px 16px -8px rgba(226, 69, 62, .9); translate: -50% 0; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none; }
.amx-scanl svg { width: 9px; height: 9px; }
.amx-ai.scan .amx-scanl { opacity: 1; transform: none; }

/* the snapshot */
.amx-hero { position: relative; padding: 11px 12px 10px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #e2453e 0%, #e8603f 45%, #f0913c 100%); box-shadow: 0 14px 26px -14px rgba(226, 69, 62, .8); overflow: hidden; }
.amx-hero::after { content: ""; position: absolute; right: -40px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent); }
.amx-hi { font-size: 8.5px; font-weight: 600; opacity: .9; }
.amx-h1 { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 2px; }
.amx-h1 > p { display: flex; flex-wrap: wrap; align-items: baseline; border-radius: 8px; padding: 0 4px 0 0; }
.amx-h1 > p b { font-size: 31px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.amx-h1 > p i { font-style: normal; font-size: 13px; font-weight: 700; opacity: .55; }
.amx-h1 > p span { flex-basis: 100%; margin-top: 2px; font-size: 7.5px; font-weight: 600; opacity: .9; }
.amx-lvl { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.amx-lvl i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 5.5px; font-weight: 700; letter-spacing: .14em; opacity: .9; }
.amx-lvl i svg { width: 7px; height: 7px; }
.amx-lvl b { font-size: 8.5px; font-weight: 700; }
.amx-hbar { display: block; height: 3px; margin: 10px 0 0; border-radius: 3px; background: rgba(255, 255, 255, .28); text-decoration: none; overflow: hidden; }
.amx-hbar i { display: block; width: 55%; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .85); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out); }
.amx-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; text-align: center; }
.amx-stats p + p { border-left: 1px solid rgba(255, 255, 255, .22); }
.amx-stats b { display: block; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.amx-stats i { font-style: normal; font-size: 6.5px; font-weight: 600; opacity: .85; }
.amx-last { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 9px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 18px -14px rgba(0, 0, 0, .25); }
.amx-lc { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #e2554c; background: #fdecea; }
.amx-lc svg { width: 11px; height: 11px; }
.amx-last p { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.amx-last b { font-size: 8.5px; font-weight: 700; }
.amx-last i { font-style: normal; font-size: 6.5px; color: #8b8b8b; }
.amx-rf { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #e2554c; background: #fdecea; }
.amx-rf svg { width: 11px; height: 11px; }
.amx-hd { display: flex; flex-direction: column; margin: 14px 2px 8px; }
.amx-hd b { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.amx-hd i { font-style: normal; font-size: 7.5px; font-weight: 600; color: #8b8b8b; }

/* the skills */
.amx-sk { margin-bottom: 8px; padding: 9px 10px 9px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 18px -14px rgba(0, 0, 0, .25); }
.amx-skt { display: flex; align-items: center; gap: 8px; }
.amx-ski { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
.amx-ski svg { width: 13px; height: 13px; }
.amx-sk-l .amx-ski { color: #2e9a62; background: #e4f4ea; }
.amx-sk-r .amx-ski { color: #3a7fc2; background: #e2eef9; }
.amx-sk-s .amx-ski { color: #e2554c; background: #fcefdc; }
.amx-sk-w .amx-ski { color: #d0567c; background: #efe8f7; }
.amx-skt p { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.amx-skt p b { font-size: 10.5px; font-weight: 700; color: #e2554c; }
.amx-skt p i { font-style: normal; font-size: 6.5px; color: #8b8b8b; }
.amx-skt em { font-style: normal; font-size: 11px; font-weight: 800; color: #e2554c; font-variant-numeric: tabular-nums; }
.amx-skt > svg { width: 9px; height: 9px; color: #b9b9b9; }
.amx-bar { display: block; height: 3.5px; margin: 7px 0 6px; border-radius: 3px; background: #eeeeee; text-decoration: none; overflow: hidden; }
.amx-bar i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: 3px; background: linear-gradient(90deg, #d8423c, #ec7a40); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-out); }
.amx-skf { display: flex; align-items: center; justify-content: space-between; }
.amx-skf u { padding: 2px 6px; border-radius: 4px; text-decoration: none; font-size: 5.5px; font-weight: 700; letter-spacing: .12em; }
.amx-skf u.int { color: #3f8d5f; background: #e6f4ea; }
.amx-sk-s .amx-skf u.int { color: #d0503f; background: #fcebe0; }
.amx-skf u.beg { color: #3a7fc2; background: #e2eef9; }
.amx-skf u.adv { color: #b0507a; background: #f1e9f6; }
.amx-skf span { display: inline-flex; align-items: center; gap: 3px; font-size: 6.5px; color: #8b8b8b; }
.amx-skf svg { width: 7px; height: 7px; }
.amx-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px !important; border-radius: 8px; }
.amx-chips span { padding: 3px 7px; border-radius: 999px; font-size: 6.5px; font-weight: 600; color: #d0503f; background: #fcebe6; }
.amx-sk-w .amx-chips span { color: #b0507a; background: #f1e9f6; }
.amx.sk-fill .amx-bar i, .amx.hero-fill .amx-hbar i { transform: none; }
.amx.sk-fill .amx-sk .amx-bar i { transition-delay: calc(var(--j) * 120ms); }

/* the AI insights: three tabs, three lists */
.amx-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.amx-thumb { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: linear-gradient(100deg, #e2453e, #f0853c); box-shadow: 0 6px 12px -6px rgba(226, 69, 62, .8); transform: translateX(calc(var(--tk, 0) * 100%)); transition: transform .5s cubic-bezier(.3, 1.2, .4, 1); }
.amx-tab { position: relative; z-index: 1; display: grid; place-items: center; height: 24px; border-radius: 8px; font-size: 7.5px; font-weight: 600; color: #5f5f5f; transition: color .3s; }
.amx-tab.on { color: #fff; font-weight: 700; }
.amx-lists { position: relative; display: grid; margin-top: 8px; }
.amx-list { grid-area: 1 / 1; display: grid; gap: 7px; }
.amx-it { display: flex; gap: 8px; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 18px -14px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .45s var(--ease-out); }
.amx-list.on .amx-it { opacity: 1; transform: none; transition-delay: calc(var(--j) * 90ms); }
.amx-iti { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; }
.amx-iti svg { width: 12px; height: 12px; }
.amx-l-focus .amx-iti { color: #e2554c; background: #fdecea; }
.amx-l-growth .amx-iti { color: #3f9a4f; background: #f3f1e2; }
.amx-l-ins .amx-iti { color: #e5a92d; background: #fdf4df; }
.amx-it p { font-size: 8px; font-weight: 700; line-height: 1.4; }
.amx-it p b { display: block; font-size: 6.5px; color: #e2554c; }

/* the AI Plan: its button, then the sheet */
.amx-planbtn { position: absolute; z-index: 5; right: 12px; bottom: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 999px; font-size: 9.5px; font-weight: 800; color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 8px 18px -6px rgba(226, 69, 62, .7); }
.amx-planbtn svg { width: 10px; height: 10px; }
.amx-ring-plan { right: 8px; bottom: 18px; width: 83px; height: 36px; }
.amx-dim { position: absolute; inset: 0; z-index: 6; background: rgba(40, 32, 32, .38); opacity: 0; transition: opacity .45s; pointer-events: none; }
.amx-sheet { position: absolute; z-index: 7; left: 0; right: 0; top: 64px; bottom: 0; border-radius: 18px 18px 0 0; overflow: hidden; background: #f7f5f3; transform: translateY(102%); transition: transform .6s cubic-bezier(.32, .72, 0, 1); }
.amx-ai.plan .amx-dim { opacity: 1; }
.amx-ai.plan .amx-sheet { transform: none; }
.amx-jh { position: relative; padding: 16px 14px 12px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #f6e5e0, #f2dcd5); }
.amx-handle { position: absolute; left: 50%; top: 6px; width: 30px; height: 3px; margin-left: -15px; border-radius: 3px; background: rgba(0, 0, 0, .15); }
.amx-pw { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; font-size: 5.5px; font-weight: 800; letter-spacing: .1em; color: #fff; background: #e2554c; }
.amx-pw svg { width: 7px; height: 7px; }
.amx-jh h4 { margin: 8px 0 0; font-size: 16px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
.amx-jh h4 em { display: block; font-style: normal; background: linear-gradient(90deg, #e2453e, #f0853c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.amx-jd { margin-top: 5px !important; max-width: 200px; font-size: 7px; font-weight: 600; line-height: 1.45; color: #86797a; }
.amx-js { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.amx-js p { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; align-items: center; }
.amx-js span { grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #e2554c; background: rgba(255, 255, 255, .7); }
.amx-js span svg { width: 10px; height: 10px; }
.amx-js b { font-size: 10px; font-weight: 800; line-height: 1; }
.amx-js i { font-style: normal; font-size: 5.5px; color: #86797a; }
.amx-sl { position: absolute; left: 0; right: 0; top: 146px; bottom: 0; overflow: hidden; }
.amx-slin { padding: 10px 11px 30px; }
.amx-ses { margin-bottom: 10px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 20px -14px rgba(0, 0, 0, .3); overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .55s var(--ease-out); }
.amx-ai.plan .amx-ses { opacity: 1; transform: none; transition-delay: calc(.35s + var(--j) * .12s); }
.amx-sh { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, #fdf1ee, #fff); border-bottom: 1px solid #f3ecea; }
.amx-sn { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #e2453e, #f0853c); box-shadow: 0 5px 10px -5px rgba(226, 69, 62, .9); }
.amx-sh p { display: flex; flex-direction: column; gap: 1px; }
.amx-sh b { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; }
.amx-sh u { padding: 1px 5px; border-radius: 4px; text-decoration: none; font-size: 5px; font-weight: 800; letter-spacing: .1em; color: #e2554c; background: #fde3dd; }
.amx-sh i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 6.5px; color: #8b8b8b; }
.amx-sh i svg { width: 7px; height: 7px; }
.amx-gk { display: flex; align-items: center; gap: 4px; margin: 8px 10px 0 !important; font-size: 5.5px; font-weight: 700; letter-spacing: .12em; color: #9b8f8f; }
.amx-gk svg { width: 8px; height: 8px; color: #e2554c; }
.amx-goal { margin: 3px 6px 0 !important; padding: 2px 4px; border-radius: 6px; font-size: 8px; font-weight: 700; line-height: 1.42; }
.amx-mods { display: grid; gap: 5px; margin: 5px 6px 9px; padding: 2px 4px; border-radius: 8px; }
.amx-mod { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 9px; box-shadow: inset 0 0 0 1px #efe7e5; }
.amx-play { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: #e2554c; background: #fdecea; }
.amx-play svg { width: 8px; height: 8px; margin-left: 1px; }
.amx-mod p { flex: 1; display: flex; flex-direction: column; }
.amx-mod b { font-size: 8px; font-weight: 700; }
.amx-mod i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 6px; color: #8b8b8b; }
.amx-mod i svg { width: 6px; height: 6px; }
.amx-go { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #e2554c; box-shadow: inset 0 0 0 1px #f0dedb; }
.amx-go svg { width: 7px; height: 7px; }

/* ── narrower windows ── */
@media (max-width: 1180px) and (min-width: 901px) {
  .aiy-stage { column-gap: clamp(30px, 4vw, 60px); }
  .aiy-co { width: min(100%, 240px); padding: 11px 13px 12px; }
  .aiy-cd { font-size: .76rem; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .aiy-hint { display: none; }
  .aiy-cd { display: none; }
  .aiy-grp { gap: 10px; }
}
@media (max-height: 980px) and (min-width: 901px) {
  .aiy-hint { display: none; }
}
@media (max-height: 860px) and (min-width: 901px) {
  .aiy-lede { display: none; }
}
@media (max-width: 900px) {
  .aiy-lede, .aiy-hint { display: none; }
  .aiy-lockup { height: 30px; }
  .aiy-orbit { display: none; }
  .aiy-h { margin-top: 6px; font-size: clamp(1.15rem, 5vw, 1.5rem); }
  .aiy-stage { grid-template-columns: minmax(0, 1fr); row-gap: 5px; margin-top: 10px; }
  .aiy .phone { --pw-base: 172; }
  .aiy-lines { display: none; }
  .aiy-dev { order: -1; margin-bottom: 6px; }
  /* one list under the phone, in the callouts' own order */
  .aiy-side, .aiy-grp.on { display: contents; }
  .aiy-grp:not(.on) { display: none; }
  .aiy-co[data-n="1"] { order: 1; } .aiy-co[data-n="2"] { order: 2; } .aiy-co[data-n="3"] { order: 3; } .aiy-co[data-n="4"] { order: 4; }
  .aiy-left .aiy-co, .aiy-right .aiy-co { flex-direction: row; text-align: left; width: 100%; padding: 7px 11px; align-items: center; transform: translateY(8px); }
  .aiy-co > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .aiy-cn { width: 20px; height: 20px; font-size: 10px; margin: 0; }
  .aiy-cv { order: -1; margin: 0; font-size: .95rem; }
  .aiy-ck { font-size: .58rem; }
  .aiy-cd { display: none; }
  .aiy-foot { margin-top: 10px; }
  .aiy-pg { padding: 7px 10px; gap: 5px; font-size: .7rem; }
  .aiy-pg > i { left: 10px; right: 10px; }
}
@media (max-width: 520px) {
  .aiy-pg span { display: none; }
  .aiy-pg.on span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .amx-scr, .amx-in, .amx-sheet, .aiy-co, .aiy-lines path, .amx-ses, .amx-it { transition-duration: 1ms; transition-delay: 0s; }
  .aiy-lines circle.halo.in, .aiy-ospin, .aiy-ospin span img, .amx-ai.scan .amx-scan { animation: none; }
}

/* ════ AI MYNA · THE AI PLAN — its highlight, in plain points ═══════
   Stops 4 to 6 of AI Myna: the plan in numbers, one session counted
   out, and the whole plan tallied. The same callouts, a little warmer:
   the numbers set large in coral, a tag on the phone, and the plan's
   three stops grouped in the pager under their own name. */
.aiy-cv em { font-style: normal; font-size: 1.32em; line-height: 1; letter-spacing: -.03em; background: linear-gradient(95deg, #e2453e, #f08a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aiy.plan-on .aiy-co { background: linear-gradient(160deg, #fff 0%, #fff6f2 100%); box-shadow: 0 0 0 1px rgba(226, 85, 76, .22), 0 20px 36px -26px rgba(226, 85, 76, .55); }
.aiy-pbadge { position: absolute; z-index: 4; left: 50%; bottom: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; white-space: nowrap; font-size: .76rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 0 0 3px #fff, 0 14px 24px -12px rgba(226, 69, 62, .95); opacity: 0; transform: translate(-50%, 60%) scale(.85); transition: opacity .35s, transform .55s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.aiy-pbadge svg { width: 13px; height: 13px; }
.aiy.plan-on .aiy-pbadge { opacity: 1; transform: translate(-50%, 40%); }

/* the whole plan, tallied: every module and how many attempts */
.aiy-co.aiy-tl { width: min(100%, 318px); }
.aiy-co.aiy-tl > div { flex: 1; }
.aiy-tally { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; text-align: left; }
.aiy-tally li { display: grid; grid-template-columns: 18px 116px minmax(20px, 1fr) 28px; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--on); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--ease-out); }
.aiy-co.in .aiy-tally li { opacity: 1; transform: none; transition-delay: calc(.25s + var(--j) * .08s); }
.aiy-tally img { width: 18px; height: 18px; object-fit: contain; }
.aiy-tally b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.aiy-tally s { height: 6px; border-radius: 3px; background: #f6ecea; text-decoration: none; overflow: hidden; }
.aiy-tally s i { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff9a6e, #e2453e); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.aiy-co.in .aiy-tally s i { transform: none; transition-delay: calc(.35s + var(--j) * .08s); }
.aiy-tally em { font-style: normal; font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--x-deep); text-align: right; }

/* the pager: the plan's three stops under their own name */
.aiy-pgp { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 0 0 0 10px; border-radius: 999px; background: linear-gradient(100deg, rgba(226, 69, 62, .09), rgba(240, 138, 60, .12)); box-shadow: inset 0 0 0 1px rgba(226, 85, 76, .24); }
.aiy-pgp > em { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; white-space: nowrap; font-style: normal; font-size: .72rem; font-weight: 800; color: var(--x-deep); }
.aiy-pgp > em svg { width: 12px; height: 12px; }

/* the plan's list scrolls */
.amx-slin { transition: transform .65s cubic-bezier(.45, 0, .2, 1); }
.amx.snap .amx-slin { transition: none !important; }

/* in the plan's group only the stop you are on is named; on narrower windows, in the whole pager */
.aiy-pgp .aiy-pg:not(.on) span { display: none; }
.aiy-pgp .aiy-pg:not(.on) { padding-inline: 11px; }
@media (max-width: 1400px) and (min-width: 901px) {
  .aiy-pg:not(.on) span { display: none; }
  .aiy-pg:not(.on) { padding-inline: 11px; }
}
@media (max-width: 900px) {
  .aiy-pbadge { font-size: .64rem; padding: 5px 10px; }
  .aiy-pgp > em { display: none; }
  .aiy-pgp { padding: 0; }
}

/* ════ MYNA RISE — levels, streaks, the heat map, the leaderboard ═══
   A pinned scroll of four stops. The stage is laid out once — 900 x 640
   on a desktop, 420 x 560 on a phone — and scaled to its box by tour.js
   (--rs). In it, the phone turned in 3D plays the app's own screens, and
   at each stop the part of the screen it is about lifts out of the
   phone on a beam of light and grows into a big card beside it. The
   pointer tilts the phone and moves the cards a little (--mx, --my).
   Behind everything the stop's word runs past in giant outline type.
   ═════════════════════════════════════════════════════════════════ */

/* the pointer tilt: set per element from tour.js, and not inherited, so a frame of tilt
   restyles only the phone, the card slot and the two chips */
@property --mx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --my { syntax: "<number>"; inherits: false; initial-value: 0; }
.rsx { position: relative; --x-hot: #e2544c; --x-tint: #fdebe7; --x-deep: var(--coral-deep, #a72f28); }
.rsx-pin { isolation: isolate; overflow: hidden; }
.rsx-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rsx-bg > i { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.rsx-bg > i:nth-child(1) { left: 6%; top: 10%; width: min(52vw, 700px); background: radial-gradient(closest-side, rgba(240, 138, 60, .16), transparent 72%); }
.rsx-bg > i:nth-child(2) { left: 30%; top: 44%; width: min(40vw, 540px); background: radial-gradient(closest-side, rgba(226, 69, 62, .13), transparent 72%); }
/* the stop's word, in giant outline type, running past */
.rsx-mq { position: absolute; left: 0; top: 60%; margin: 0; white-space: nowrap; translate: 0 -50%; opacity: 0; transition: opacity .8s var(--ease); }
.rsx-mq span {
  display: inline-block;
  font-size: clamp(90px, 15vw, 230px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(226, 85, 76, .13);
  animation: rsxMq 46s linear infinite;
  animation-play-state: paused;
}
.rsx-mq.on { opacity: 1; }
.rsx.live .rsx-mq span { animation-play-state: running; }
@keyframes rsxMq { to { transform: translateX(-50%); } }

.rsx-wrap { width: 100%; max-width: 1300px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.56fr) minmax(0, .72fr); align-items: center; column-gap: clamp(20px, 3vw, 48px); }

/* ── the copy ── */
.rsx-copy { min-width: 0; }
.rsx-lockup { display: block; height: clamp(36px, 5.4vh, 52px); width: auto; }
.rsx-kick { margin: clamp(8px, 1.3vh, 12px) 0 0; font-size: clamp(.84rem, .95vw, .95rem); font-weight: 600; color: var(--on-3); }
.rsx-nows { display: grid; margin-top: clamp(16px, 3vh, 34px); }
.rsx-now { grid-area: 1 / 1; min-width: 0; visibility: hidden; transition: visibility 0s .5s; }
.rsx-now > * { opacity: 0; transform: translateY(18px); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.rsx-now.past > * { transform: translateY(-18px); }
.rsx-now.on { visibility: visible; transition: visibility 0s; }
.rsx-now.on > * { opacity: 1; transform: none; transition: opacity .45s var(--ease) .12s, transform .75s cubic-bezier(.22, 1, .36, 1) .12s; }
.rsx-now.on > :nth-child(2) { transition-delay: .18s; }
.rsx-now.on > :nth-child(3) { transition-delay: .24s; }
.rsx-now.on > :nth-child(4) { transition-delay: .3s; }
.rsx-eye { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--x-deep); }
.rsx-eye span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #ff7d63, #e2544c); box-shadow: 0 10px 18px -10px rgba(226, 84, 76, .95); }
.rsx-eye svg { width: 16px; height: 16px; }
.rsx-now h3 { margin: 12px 0 0; text-wrap: balance; font-size: clamp(1.7rem, min(2.8vw, 4.8svh), 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.rsx-now h3 em { font-style: normal; background: linear-gradient(90deg, #e2554c, #f08a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rsx-nd { margin: 12px 0 0; max-width: 40ch; text-wrap: pretty; font-size: clamp(.88rem, min(1vw, 1.8svh), 1rem); line-height: 1.55; color: var(--on-2); }
.rsx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(12px, 2vh, 18px) 0 0; }
.rsx-tags span { padding: 6px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--x-deep); background: var(--x-tint); box-shadow: inset 0 0 0 1px rgba(226, 84, 76, .18); }
/* the dock: the four as app icons, the one showing lifted and named */
.rsx-dock { display: flex; align-items: flex-end; gap: 10px; margin-top: clamp(18px, 3.4vh, 34px); }
.rsx-dk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rsx-dk span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--x-hot); background: var(--surface); box-shadow: 0 0 0 1px var(--hairline), 0 12px 22px -16px rgba(60, 42, 46, .6); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), background .35s, color .35s, box-shadow .35s; }
.rsx-dk svg { width: 22px; height: 22px; }
.rsx-dk i { font-style: normal; font-size: .7rem; font-weight: 700; color: var(--on-3); white-space: nowrap; transition: color .3s; }
.rsx-dk:hover span { transform: translateY(-3px); }
.rsx-dk.on span { color: #fff; background: linear-gradient(145deg, #ff8a5c, #e2453e); box-shadow: 0 16px 26px -14px rgba(226, 69, 62, .95); transform: translateY(-6px) scale(1.12); }
.rsx-dk.on i { color: var(--on); }
.rsx-dk.done span { color: #1f9573; }
.rsx-dk:focus-visible { outline: none; }
.rsx-dk:focus-visible span { outline: 2px solid var(--coral); outline-offset: 3px; }
.rsx-hint { display: flex; align-items: center; gap: 6px; margin: clamp(10px, 1.8vh, 16px) 0 0; font-size: .76rem; font-weight: 600; color: var(--on-3); }
.rsx-hint kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font-family: var(--mono); font-size: 11px; color: var(--on); background: var(--surface); box-shadow: inset 0 -2px 0 #eadcd8, 0 0 0 1px var(--hairline); }
.rsx-hint b { font-family: var(--mono); color: var(--x-deep); }

/* ── the stage ── */
.rsx-box { position: relative; min-width: 0; height: min(calc(100svh - var(--nav-h, 0px) - 70px), 700px); }
.rsx-cv {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 860px;
  height: 640px;
  transform: translate(-50%, -50%) scale(var(--rs, .8));
  perspective: 1500px;
  perspective-origin: 26% 45%;
  font-family: var(--sans);
  color: #1c1517;
}
.rsx-cv p { margin: 0; }
.rsx-cv img { display: block; }
.rsx-beam { position: absolute; left: 0; top: 0; width: 860px; height: 640px; overflow: visible; pointer-events: none; z-index: 3; }
.rsx-beam polygon { opacity: 0; transition: opacity .45s var(--ease); }
.rsx-beam.on polygon { opacity: 1; }
.rsx-dev { position: absolute; z-index: 2; left: 18px; top: 24px; transform-style: preserve-3d; transform: rotateY(calc(19deg + var(--mx) * 5deg)) rotateX(calc(5deg - var(--my) * 4deg)) rotateZ(-1.5deg); transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.rsx .phone { --pwn: 270; }
.rsx-dev .phone-glow { opacity: .6; }
/* the card's slot: in front of the phone, overlapping it */
.rsx-slot { position: absolute; z-index: 4; left: 244px; top: 92px; width: 600px; height: 456px; transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)); transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.rsx-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 22px;
  border-radius: 28px;
  background: linear-gradient(160deg, #fff 0%, #fffaf8 60%, #fff5f1 100%);
  box-shadow: 0 0 0 1px rgba(226, 85, 76, .12), 0 2px 0 rgba(255, 255, 255, .9) inset, 0 40px 80px -36px rgba(120, 40, 30, .55), 0 18px 34px -24px rgba(226, 85, 76, .45);
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.rsx-card.on { opacity: 1; visibility: visible; }
.rsx-card::before { content: ""; position: absolute; left: -30%; top: -60%; width: 90%; height: 120%; background: radial-gradient(closest-side, rgba(255, 190, 150, .28), transparent); pointer-events: none; }
.rsx-ch { position: relative; display: flex; align-items: center; gap: 10px; }
.rsx-chi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #ff8a5c, #e2453e); box-shadow: 0 10px 18px -10px rgba(226, 69, 62, .95); }
.rsx-chi svg { width: 18px; height: 18px; }
.rsx-ch > b { flex: 1; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.rsx-ch > em { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 700; color: #a72f28; background: #fdebe7; }
.rsx-ch > em strong { font-weight: 800; }
.rsx-ch > em u { width: 7px; height: 7px; border-radius: 50%; background: #1fbf7a; box-shadow: 0 0 0 0 rgba(31, 191, 122, .5); animation: rsxLive 1.6s ease-out infinite; }
@keyframes rsxLive { to { box-shadow: 0 0 0 8px rgba(31, 191, 122, 0); } }

/* 1 · the level ladder */
.rsx-c0b { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 164px; gap: 22px; margin-top: 14px; min-height: 0; }
.rsx-ladder { display: flex; flex-direction: column; justify-content: space-between; }
.rsx-lcap { font-size: 11px; font-weight: 600; color: #8d8184; opacity: 0; transition: opacity .4s 1.1s; }
.rsx-lcap b { color: #a72f28; font-weight: 800; }
.rsx-card.go .rsx-lcap { opacity: 1; }
.rsx-lv { display: grid; grid-template-columns: 44px minmax(0, 1fr) 54px; grid-template-rows: auto 7px; column-gap: 12px; row-gap: 5px; align-items: center; opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .6s cubic-bezier(.22, 1, .36, 1); }
.rsx-card.go .rsx-lv { opacity: 1; transform: none; transition-delay: calc(var(--j) * 90ms); }
.rsx-lvc { grid-row: span 2; display: grid; place-items: center; height: 34px; border-radius: 11px; font-size: 14px; font-weight: 800; color: #9a8f8e; background: #f4efed; }
.rsx-lv p { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rsx-lv .rsx-lvc { grid-column: 1; grid-row: 1 / span 2; }
.rsx-lv s { grid-row: 2; }
.rsx-lv em { grid-column: 3; grid-row: 1 / span 2; }
.rsx-lv strong { font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.rsx-lv p i { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: normal; font-size: 11px; font-weight: 600; color: #8d8184; }
.rsx-lv s { grid-column: 2; display: block; width: calc(var(--w) * 100%); height: 7px; border-radius: 4px; background: #f1e8e6; text-decoration: none; overflow: hidden; }
.rsx-lv s i { display: block; width: calc(var(--f) * 100%); height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ff9a5a, #e2453e); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.rsx-card.go .rsx-lv s i { transform: none; transition-delay: calc(.4s + var(--j) * 90ms); }
.rsx-lv em { grid-row: span 2; justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; font-style: normal; font-size: 12px; font-weight: 800; }
.rsx-lv em svg { width: 14px; height: 14px; }
.rsx-lv.done .rsx-lvc { color: #fff; background: linear-gradient(145deg, #3fcf96, #1f9573); }
.rsx-lv.done s i { background: linear-gradient(90deg, #6fdcb0, #1f9573); }
.rsx-lv.done em { color: #fff; background: #1f9573; }
.rsx-lv.cur .rsx-lvc { color: #fff; background: linear-gradient(145deg, #ff8a5c, #e2453e); box-shadow: 0 0 0 0 rgba(226, 69, 62, .45); }
.rsx-card.go .rsx-lv.cur .rsx-lvc { animation: rsxCur 1.8s ease-out 1.2s infinite; }
@keyframes rsxCur { to { box-shadow: 0 0 0 12px rgba(226, 69, 62, 0); } }
.rsx-lv.cur em { color: #a72f28; background: #fdebe7; }
.rsx-lv.lock { opacity: 0; }
.rsx-card.go .rsx-lv.lock { opacity: .55; }
.rsx-lv.lock em { color: #b0a4a1; background: #f4efed; }
.rsx-next { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px 10px; border-radius: 22px; background: linear-gradient(180deg, #fff3ee, #fde8e1); box-shadow: inset 0 0 0 1px rgba(226, 85, 76, .16); opacity: 0; transform: translateX(16px); transition: opacity .4s, transform .6s cubic-bezier(.22, 1, .36, 1); }
.rsx-card.go .rsx-next { opacity: 1; transform: none; transition-delay: .5s; }
.rsx-nk { font-size: 12.5px; font-weight: 700; color: #8d8184; }
.rsx-nk b { color: #e2453e; font-weight: 800; }
.rsx-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.rsx-ring svg { width: 108px; height: 108px; transform: rotate(-90deg); }
.rsx-ring circle { fill: none; stroke-width: 7; }
.rsx-ring .tr { stroke: rgba(226, 85, 76, .14); }
.rsx-ring .fg { stroke: #e2453e; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s cubic-bezier(.22, 1, .36, 1); }
.rsx-card.go .rsx-ring .fg { stroke-dashoffset: calc(100 - var(--p) * 100); transition-delay: calc(.7s + var(--j) * .2s); }
.rsx-ring p { position: absolute; left: 0; right: 0; top: 0; height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rsx-ring p b { font-size: 21px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rsx-ring p i { font-style: normal; font-size: 10.5px; font-weight: 600; color: #8d8184; }
.rsx-ring > span { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a72f28; }

/* 2 · the streak: a flame, the week, today */
.rsx-c1b { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 6px; }
.rsx-fbox { position: relative; width: 150px; height: 184px; }
.rsx-flame { position: absolute; left: 50%; bottom: 0; width: 150px; height: 184px; translate: -50% 0; overflow: visible; transform: scale(.35); transform-origin: 50% 100%; opacity: 0; filter: drop-shadow(0 18px 24px rgba(226, 69, 62, .45)); transition: transform 1.2s cubic-bezier(.3, 1.5, .5, 1), opacity .4s; }
.rsx-card.go .rsx-flame { transform: scale(1); opacity: 1; transition-delay: .2s; }
.rsx-flame path { transform-box: fill-box; transform-origin: 50% 100%; }
.rsx-flame .f1 { animation: rsxF1 1.6s ease-in-out infinite alternate; }
.rsx-flame .f2 { animation: rsxF2 1.1s ease-in-out infinite alternate; }
@keyframes rsxF1 { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.97, 1.04) skewX(-2deg); } 100% { transform: scale(1.02, .97) skewX(2deg); } }
@keyframes rsxF2 { 0% { transform: scale(1, 1); } 100% { transform: scale(.92, 1.1) skewX(3deg); } }
.rsx-emb { position: absolute; bottom: 60px; width: 7px; height: 7px; border-radius: 50%; background: #ffb347; opacity: 0; }
.rsx-card.go .rsx-emb { animation: rsxEmb 2.2s ease-out infinite; }
.rsx-emb.e1 { left: 38px; animation-delay: 1.2s !important; }
.rsx-emb.e2 { left: 92px; width: 5px; height: 5px; animation-delay: 1.9s !important; }
.rsx-emb.e3 { left: 66px; animation-delay: 2.6s !important; }
@keyframes rsxEmb { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -130px) scale(.4); } }
.rsx-sn { display: flex; flex-direction: column; }
.rsx-big { font-size: 110px; font-weight: 900; line-height: .9; letter-spacing: -.06em; background: linear-gradient(180deg, #ff8a3c, #e2453e); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.rsx-big.bump { animation: rsxBump .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes rsxBump { 40% { transform: scale(1.18); } }
.rsx-sn p { display: flex; flex-direction: column; margin-top: 4px; }
.rsx-sn strong { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.rsx-sn p i { font-style: normal; font-size: 13px; font-weight: 600; color: #8d8184; }
.rsx-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 16px; }
.rsx-d { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rsx-d span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #b0a4a1; background: #f4efed; box-shadow: inset 0 0 0 1.5px #ebe1de; transition: background .35s, color .35s, box-shadow .35s, transform .45s cubic-bezier(.3, 1.8, .5, 1); }
.rsx-d span svg { width: 18px; height: 18px; opacity: 0; transition: opacity .2s; }
.rsx-d i { font-style: normal; font-size: 11px; font-weight: 700; color: #8d8184; }
.rsx-d.lit span { color: #fff; background: linear-gradient(145deg, #ff9a4c, #e2453e); box-shadow: 0 8px 16px -8px rgba(226, 69, 62, .9); transform: scale(1.08); }
.rsx-d.lit span svg { opacity: 1; }
.rsx-d.now span { color: #e2453e; background: #fff; box-shadow: inset 0 0 0 2.5px #e2453e; }
.rsx-card.go .rsx-d.now span { animation: rsxNow 1.6s ease-out 2.4s infinite; }
@keyframes rsxNow { 0% { box-shadow: inset 0 0 0 2.5px #e2453e, 0 0 0 0 rgba(226, 69, 62, .45); } 100% { box-shadow: inset 0 0 0 2.5px #e2453e, 0 0 0 12px rgba(226, 69, 62, 0); } }
.rsx-today { margin-top: 16px; padding: 12px 14px; border-radius: 18px; background: #fff3ee; box-shadow: inset 0 0 0 1px rgba(226, 85, 76, .16); }
.rsx-today > p { display: flex; justify-content: space-between; font-size: 13px; }
.rsx-today > p > b { font-weight: 800; }
.rsx-today > p span { font-weight: 700; color: #6c6062; }
.rsx-today > p span b { color: #e2453e; }
.rsx-today s { display: block; height: 8px; margin: 8px 0 7px; border-radius: 5px; background: rgba(226, 85, 76, .14); text-decoration: none; overflow: hidden; }
.rsx-today s i { display: block; width: 40%; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #ff9a4c, #e2453e); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.rsx-card.go .rsx-today s i { transform: none; transition-delay: 1.1s; }
.rsx-today em { font-style: normal; font-size: 12px; font-weight: 600; color: #8d8184; }

/* 3 · the heat map, as a 3D skyline */
.rsx-leg { gap: 4px !important; font-size: 11px !important; color: #8d8184 !important; background: none !important; }
.rsx-leg i { width: 12px; height: 12px; border-radius: 3px; }
.rsx-leg .s1, .rsx-hc.s1 { --hc: #fbd9d2; } .rsx-leg .s2, .rsx-hc.s2 { --hc: #f5b2a7; } .rsx-leg .s3, .rsx-hc.s3 { --hc: #ec8578; }
.rsx-leg .s4, .rsx-hc.s4 { --hc: #e2584c; } .rsx-leg .s5, .rsx-hc.s5 { --hc: #f07a2e; }
.rsx-leg i { background: var(--hc); }
.rsx-hmw { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; perspective: none; }
.rsx-hm { --cs: 40px; --cg: 6px; display: grid; grid-template-columns: repeat(7, var(--cs)); grid-auto-rows: var(--cs); gap: var(--cg); transform-style: preserve-3d; transform: translateY(18px) rotateX(56deg) rotateZ(-36deg); }
.rsx-hc { --hc: #f1ecea; --z: 0; position: relative; transform-style: preserve-3d; font-style: normal; }
.rsx-hc.o { --hc: #f7f4f3; }
.rsx-hc b { position: absolute; display: grid; place-items: center; }
.rsx-hc .t { inset: 0; border-radius: 5px; font-size: 11px; font-weight: 800; color: rgba(60, 30, 26, .55); background: var(--hc); transform: translateZ(calc(var(--z) * 1px)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.rsx-hc.s3 .t, .rsx-hc.s4 .t, .rsx-hc.s5 .t { color: rgba(255, 255, 255, .92); }
.rsx-hc .f { left: 0; bottom: 0; width: 100%; height: calc(var(--z) * 1px); transform-origin: 50% 100%; transform: rotateX(-90deg); background: var(--hc); filter: brightness(.78); }
.rsx-hc .w { left: 0; top: 0; width: calc(var(--z) * 1px); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); background: var(--hc); filter: brightness(.9); }
.rsx-hc .t, .rsx-hc .f, .rsx-hc .w { transition: transform 1s cubic-bezier(.3, 1.3, .5, 1), height 1s cubic-bezier(.3, 1.3, .5, 1), width 1s cubic-bezier(.3, 1.3, .5, 1); transition-delay: calc(var(--j) * 38ms); }
.rsx-card.go .rsx-hc { --z: var(--h); }
.rsx-hb { position: absolute; z-index: 5; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 14px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(145deg, #ff8a3c, #e2453e); box-shadow: 0 14px 24px -12px rgba(226, 69, 62, .95); translate: -50% -100%; opacity: 0; transform: translateY(10px) scale(.7); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.8, .5, 1); pointer-events: none; }
.rsx-hb b { font-size: 20px; font-weight: 900; line-height: 1; }
.rsx-hb i { font-style: normal; font-size: 10.5px; opacity: .9; }
.rsx-hb::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #e8513f; transform: rotate(45deg); border-radius: 2px; }
.rsx-hb.on { opacity: 1; transform: none; }
.rsx-sks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 4px !important; }
.rsx-sks span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #6c6062; }
.rsx-sks i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.rsx-sks b { font-weight: 800; color: #1c1517; }

/* 4 · the leaderboard: a podium, the rest below */
.rsx-pods { position: relative; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 12px; margin-top: 10px; min-height: 0; }
.rsx-pd { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rsx-who { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; opacity: 0; transform: translateY(20px) scale(.8); transition: opacity .3s, transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.rsx-card.go .rsx-who { opacity: 1; transform: none; transition-delay: calc(.7s + var(--j) * .15s); }
.rsx-avt { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #ff9a5a, #e2453e); box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(226, 85, 76, .35), 0 12px 20px -10px rgba(226, 69, 62, .8); }
.rsx-pd.p1 .rsx-avt { width: 66px; height: 66px; font-size: 20px; background: linear-gradient(145deg, #ffcf5a, #f08a3c); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ffc857, 0 16px 26px -10px rgba(240, 138, 60, .9); }
.rsx-who > b { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 800; }
.rsx-who > i { font-style: normal; font-size: 11.5px; font-weight: 600; color: #8d8184; }
.rsx-who > i b { color: #e2453e; font-weight: 800; }
.rsx-crown { position: absolute; top: -32px; left: 50%; width: 36px; height: 30px; margin-left: -18px; color: #ffc233; filter: drop-shadow(0 4px 6px rgba(240, 138, 60, .6)); opacity: 0; transform: translateY(-40px) rotate(-20deg); }
.rsx-crown svg { width: 100%; height: 100%; }
.rsx-card.go .rsx-crown { animation: rsxCrown .8s cubic-bezier(.3, 1.6, .5, 1) 1.6s forwards; }
@keyframes rsxCrown { to { opacity: 1; transform: none; } }
.rsx-blk { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; width: 100%; padding-top: 12px; border-radius: 16px 16px 6px 6px; color: #fff; background: linear-gradient(180deg, #ff9a5a, #e2453e); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); height: 0; overflow: hidden; transition: height .9s cubic-bezier(.3, 1.3, .5, 1); }
.rsx-blk b { font-size: 34px; font-weight: 900; line-height: 1; }
.rsx-blk i { font-style: normal; font-size: 11px; font-weight: 700; opacity: .9; }
.rsx-pd.p1 .rsx-blk { background: linear-gradient(180deg, #ffc857, #f08a3c); }
.rsx-pd.p3 .rsx-blk { background: linear-gradient(180deg, #f5b2a7, #e2584c); }
.rsx-card.go .rsx-pd.p1 .rsx-blk { height: 136px; transition-delay: .2s; }
.rsx-card.go .rsx-pd.p2 .rsx-blk { height: 104px; transition-delay: .35s; }
.rsx-card.go .rsx-pd.p3 .rsx-blk { height: 80px; transition-delay: .5s; }
.rsx-conf { position: absolute; left: 50%; top: 30px; width: 0; height: 0; pointer-events: none; }
.rsx-conf i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; }
.rsx-card.go .rsx-conf i { animation: rsxConf 1.6s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: calc(1.9s + var(--d)); }
@keyframes rsxConf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 150px)) rotate(calc(var(--r) + 540deg)); } }
.rsx-rest { display: grid; gap: 8px; margin-top: 12px; }
.rsx-rest p { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; font-size: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(226, 85, 76, .12); opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .5s var(--ease-out); }
.rsx-card.go .rsx-rest p { opacity: 1; transform: none; transition-delay: calc(1.3s + var(--j) * .12s); }
.rsx-rest p > b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #a72f28; background: #fdebe7; }
.rsx-rest span { font-weight: 800; }
.rsx-rest em { font-style: normal; font-weight: 600; color: #8d8184; }
.rsx-rest strong { font-weight: 600; color: #6c6062; }
.rsx-rest strong b { font-weight: 800; color: #1c1517; }

/* the little ones that pop out after the card */
.rsx-chips { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.rsx-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 9px 11px; border-radius: 999px; white-space: nowrap; font-size: 13.5px; font-weight: 800; color: #1c1517; background: #fff; box-shadow: 0 0 0 1px rgba(226, 85, 76, .14), 0 18px 30px -16px rgba(120, 40, 30, .6); opacity: 0; transform: translateY(14px) scale(.6); transition: opacity .3s, transform .6s cubic-bezier(.3, 1.8, .5, 1); }
.rsx-chip svg { width: 16px; height: 16px; color: #e2453e; }
.rsx-chip.q0 { left: 8px; top: 64px; translate: calc(var(--mx) * 18px) calc(var(--my) * 14px); }
.rsx-chip.q1 { left: 132px; top: 574px; translate: calc(var(--mx) * 24px) calc(var(--my) * 18px); }
.rsx-chip.on { opacity: 1; transform: none; }
.rsx-chip.on.q0 { animation: rsxBob 3.4s ease-in-out 1s infinite; }
.rsx-chip.on.q1 { animation: rsxBob 3.8s ease-in-out 1.4s infinite reverse; }
@keyframes rsxBob { 50% { transform: translateY(-7px); } }

/* ══ the app: 286.4 x 620.9 ══════════════════════════════════════ */
.rsa { position: absolute; inset: 0; overflow: hidden; font-family: "Poppins", var(--sans); color: #1d1d1f; background: #f5f3f1; }
.rsa p { margin: 0; }
.rsa svg, .rsa img { display: block; }
.rsa-scr { position: absolute; inset: 0; overflow: hidden; background: #f5f3f1; transform: translateX(100%); transition: transform .6s cubic-bezier(.32, .72, 0, 1), filter .6s; }
.rsa-scr.on { z-index: 2; transform: none; }
.rsa-scr.back { z-index: 1; transform: translateX(-30%); filter: brightness(.9); }
.rsa.snap .rsa-scr, .rsa.snap .rsa-in, .rsa.snap .rsa-mscroll { transition: none !important; }
[data-pop] { transition: box-shadow .4s var(--ease), filter .4s, transform .5s var(--ease-out); }
.rsa [data-pop].lift { box-shadow: 0 0 0 2px #f08a3c, 0 0 0 7px rgba(240, 138, 60, .22), 0 0 24px 4px rgba(240, 138, 60, .45); }
.rsa [data-pop].lifted { filter: saturate(.35) brightness(1.1) contrast(.85); box-shadow: 0 0 0 1.5px rgba(240, 138, 60, .8), 0 0 18px 2px rgba(240, 138, 60, .35); }
.rsa-tap { position: absolute; z-index: 20; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(226, 85, 76, .26); box-shadow: 0 0 0 2px rgba(226, 85, 76, .55); opacity: 0; pointer-events: none; }
.rsa-tap.go { animation: rsaTap .6s var(--ease-out); }
@keyframes rsaTap { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.3); } }
.rsa-sb { display: flex; align-items: flex-end; justify-content: space-between; height: 42px; padding: 0 24px 6px; font-size: 11.5px; }
.rsa-sb b { font-weight: 700; }
.rsa-sb span { display: flex; gap: 3px; }
.rsa-sb span i { width: 4px; height: 4px; border-radius: 50%; background: #1d1d1f; opacity: .7; }
.rsa-view { position: absolute; left: 0; right: 0; top: 42px; bottom: 52px; overflow: hidden; }
.rsa-in { padding: 4px 11px 16px; transform: translateY(calc(var(--sy, 0) * -1px)); transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.rsa-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rsa-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #f0c9c2; }
.rsa-av img { width: 14px; height: auto; filter: invert(38%) sepia(62%) saturate(2400%) hue-rotate(338deg) brightness(92%); }
.rsa-hd p { flex: 1; display: flex; flex-direction: column; }
.rsa-hd p b { font-size: 11.5px; font-weight: 700; }
.rsa-hd p i { font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: .06em; color: #8b8b8b; }
.rsa-pts { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; color: #fff; background: #e2453e; }
.rsa-pts svg { width: 9px; height: 9px; color: #fff; }
.rsa-card { margin-bottom: 9px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 18px -14px rgba(0, 0, 0, .25); overflow: hidden; }
.rsa-cefr table { width: 100%; border-collapse: collapse; font-size: 8px; text-align: left; }
.rsa-cefr th { padding: 6px 5px; font-weight: 700; color: #fff; background: #e2453e; }
.rsa-cefr td { padding: 5.5px 5px; border-top: 1px solid #f1eceb; font-weight: 600; color: #333; }
.rsa-cefr td b { font-weight: 800; }
.rsa-cefr tr.pass td { background: #f2fbf6; }
.rsa-ok { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; color: #fff; background: #1f9573; }
.rsa-ok svg { width: 8px; height: 8px; }
.rsa-cfg { padding: 8px 10px 9px; }
.rsa-ct { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; margin-bottom: 5px !important; }
.rsa-ct svg { grid-row: span 2; width: 11px; height: 11px; margin-top: 1px; color: #e2453e; }
.rsa-ct b { font-size: 8.5px; font-weight: 800; }
.rsa-ct i { font-style: normal; font-size: 6.5px; color: #8b8b8b; }
.rsa-cfg > p:not(.rsa-ct) { font-size: 7px; font-weight: 600; line-height: 1.65; color: #333; }
.rsa-cfg > p b { font-weight: 800; }
.rsa-streak { padding: 9px 10px 8px; }
.rsa-sh { display: flex; align-items: center; gap: 7px; }
.rsa-fl { display: grid; place-items: center; width: 20px; height: 20px; color: #f06a2c; }
.rsa-fl svg { width: 16px; height: 16px; }
.rsa-sh p { flex: 1; display: flex; flex-direction: column; }
.rsa-sh p b { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; }
.rsa-sh p b u { display: grid; place-items: center; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; text-decoration: none; font-size: 7.5px; color: #fff; background: #e2453e; }
.rsa-sh p i { font-style: normal; font-size: 7px; font-weight: 600; color: #8b8b8b; }
.rsa-calb { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #e2453e; background: #fdecea; }
.rsa-calb svg { width: 12px; height: 12px; }
.rsa-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.rsa-wk p { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rsa-wk b { display: grid; place-items: center; width: 100%; height: 20px; border-radius: 6px; font-size: 8px; font-weight: 800; color: #6c6c6c; background: #f3f1f0; }
.rsa-wk p.hit b { color: #fff; background: linear-gradient(145deg, #f08a3c, #e2453e); }
.rsa-wk p.now b { color: #e2453e; background: #fff; box-shadow: inset 0 0 0 1.5px #e2453e; }
.rsa-wk i { font-style: normal; font-size: 7px; font-weight: 700; color: #8b8b8b; }
.rsa-sf { display: flex; align-items: center; gap: 6px; margin-top: 8px !important; padding-top: 7px; border-top: 1px solid #f1eceb; }
.rsa-sf > svg { width: 10px; height: 10px; color: #e2453e; }
.rsa-sf span { flex: 1; display: flex; flex-direction: column; }
.rsa-sf span b { font-size: 8px; font-weight: 800; }
.rsa-sf span i { font-style: normal; font-size: 6.5px; color: #8b8b8b; }
.rsa-sf em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 7px; font-weight: 700; color: #1f9573; }
.rsa-sf em u { width: 6px; height: 6px; border-radius: 50%; background: #1fbf7a; }
.rsa-chart { position: relative; display: flex; gap: 6px; height: 96px; padding: 10px 10px 18px 8px; }
.rsa-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 6.5px; font-weight: 600; color: #8b8b8b; }
.rsa-y i { font-style: normal; }
.rsa-bars { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: space-around; border-bottom: 1px solid #ece6e4; }
.rsa-bars p { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.rsa-bars p i { width: 20px; height: calc(var(--h) * 100%); border-radius: 4px 4px 0 0; background: var(--c); }
.rsa-bars p span { position: absolute; bottom: -12px; font-size: 6.5px; font-weight: 700; color: #555; }
.rsa-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); height: 52px; padding-bottom: 8px; background: #fff; box-shadow: 0 -1px 0 #f0ebea; }
.rsa-tabs span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #6f6f6f; }
.rsa-tabs svg { width: 15px; height: 15px; }
.rsa-tabs img { height: 18px; width: auto; }
.rsa-tabs i { font-style: normal; font-size: 7.5px; font-weight: 700; }
.rsa-tabs .on { color: #e2453e; }
/* the heat map */
.rsa-top { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 14px; }
.rsa-top svg { width: 14px; height: 14px; }
.rsa-top span { width: 14px; }
.rsa-top b { font-size: 12.5px; font-weight: 800; color: #e2453e; }
.rsa-mo { display: flex; align-items: center; justify-content: space-between; margin: 6px 26px 0 !important; }
.rsa-mo svg { width: 10px; height: 10px; color: #777; }
.rsa-mo b { font-size: 11px; font-weight: 800; }
.rsa-cal { margin: 8px 8px 0; padding: 4px 4px 6px; border-radius: 12px; }
.rsa-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 7px; font-weight: 700; color: #555; }
.rsa-dow i { font-style: normal; }
.rsa-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px 6px; margin-top: 6px; }
.rsa-grid span { position: relative; display: grid; place-items: center; height: 24px; border-radius: 6px; font-size: 8px; font-weight: 700; color: #333; background: #efefef; }
.rsa-grid span.o { color: #b9b9b9; background: none; }
.rsa-grid .s1 { background: #fbe3df; } .rsa-grid .s2 { background: #f6c2bb; } .rsa-grid .s3 { color: #fff; background: #ec8578; }
.rsa-grid .s4 { color: #fff; background: #e2584c; } .rsa-grid .s5 { color: #fff; background: #e2553c; }
.rsa-grid u { position: absolute; right: -4px; top: -5px; display: grid; place-items: center; min-width: 12px; height: 12px; padding: 0 2px; border-radius: 6px; text-decoration: none; font-size: 6.5px; font-weight: 800; color: #fff; background: #d93a2b; box-shadow: 0 0 0 1.5px #fff; }
.rsa-sk { display: flex; justify-content: space-between; margin: 10px 10px 0 !important; border-bottom: 1px solid #ece6e4; }
.rsa-sk span { display: inline-flex; align-items: center; gap: 3px; padding-bottom: 6px; font-size: 8px; font-weight: 700; color: #555; }
.rsa-sk span.on { color: #e2453e; box-shadow: inset 0 -2px 0 #e2453e; }
.rsa-sk u { display: grid; place-items: center; min-width: 11px; height: 11px; border-radius: 6px; text-decoration: none; font-size: 6.5px; color: #fff; background: #e2453e; }
.rsa-dms { display: grid; gap: 6px; margin: 9px 10px 0; }
.rsa-dm { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #ece6e4; }
.rsa-dmi { display: grid; place-items: center; width: 22px; height: 22px; }
.rsa-dmi img { width: 20px; height: 20px; object-fit: contain; }
.rsa-dm p { flex: 1; display: flex; flex-direction: column; }
.rsa-dm b { font-size: 9px; font-weight: 800; color: #e2453e; }
.rsa-dm i { font-style: normal; font-size: 7px; font-weight: 600; color: #444; }
.rsa-dm u { padding: 1px 6px; border-radius: 999px; text-decoration: none; font-size: 6.5px; font-weight: 700; color: #e2453e; box-shadow: inset 0 0 0 1px #f0b1a9; }
/* the menu, and its leaderboard */
.rsa-mscroll { position: absolute; left: 0; top: 0; width: 286.4px; transform: translateY(calc(var(--sy, 0) * -1px)); transition: transform 1s cubic-bezier(.65, 0, .35, 1); }
.rsa-mscroll > img { width: 286.4px; height: auto; }
.rsa-lb { position: absolute; left: 10.5px; right: 10.5px; top: 473px; padding: 9px 10px 8px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 18px -14px rgba(0, 0, 0, .3); overflow: hidden; }
.rsa-lbh { display: flex; align-items: center; justify-content: space-between; }
.rsa-lbh b { font-size: 10.5px; font-weight: 800; color: #e2453e; }
.rsa-lbc svg { width: 11px; height: 11px; color: #e2453e; transition: transform .4s; }
.rsa-lb.open .rsa-lbc svg { transform: rotate(180deg); }
.rsa-lt { display: grid; grid-template-columns: 1fr 58px 50px; margin-top: 8px; padding: 6px 8px; border-radius: 6px; font-size: 6.5px; font-weight: 800; letter-spacing: .06em; color: #fff; background: #e2453e; }
.rsa-lt span:not(:first-child), .rsa-lr em, .rsa-lr b { text-align: center; }
.rsa-lr { display: grid; grid-template-columns: 1fr 58px 50px; align-items: center; padding: 6.5px 8px; border-bottom: 1px solid #f3eeed; font-size: 7.5px; font-weight: 700; }
.rsa-lr span { display: flex; align-items: center; gap: 6px; }
.rsa-lr span i { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; font-style: normal; font-size: 6.5px; color: #555; background: #eee; }
.rsa-lr.first { color: #e2453e; background: #fdf1ee; }
.rsa-lr.first span i { color: #fff; background: #e2453e; }
.rsa-lr em { font-style: normal; }
.rsa-lr.more { display: none; }
.rsa-lb.open .rsa-lr.more { display: grid; animation: rsaRow .45s var(--ease-out) both; animation-delay: calc((var(--j) - 3) * 110ms); }
@keyframes rsaRow { from { opacity: 0; transform: translateY(-6px); } }
.rsa-aib { position: absolute; z-index: 3; right: 10px; bottom: 62px; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; font-size: 9px; font-weight: 800; color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 8px 16px -6px rgba(226, 69, 62, .7); }
.rsa-aib svg { width: 10px; height: 10px; }

/* ── narrower windows ── */
@media (max-width: 1180px) and (min-width: 901px) {
  .rsx-wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
}
@media (max-height: 800px) and (min-width: 901px) {
  .rsx-kick, .rsx-hint { display: none; }
  .rsx-tags { display: none; }
}
@media (max-width: 900px) {
  .rsx-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; row-gap: 6px; height: calc(100svh - var(--nav-h, 0px) - 24px); align-content: stretch; }
  .rsx-copy { display: contents; }
  .rsx-lockup { order: -3; height: 28px; }
  .rsx-kick, .rsx-hint, .rsx-tags { display: none; }
  .rsx-nows { order: -2; margin-top: 4px; }
  .rsx-now h3 { margin-top: 6px; font-size: clamp(1.2rem, 5.2vw, 1.6rem); }
  .rsx-nd { margin-top: 5px; font-size: .82rem; line-height: 1.45; }
  .rsx-eye { font-size: .62rem; }
  .rsx-eye span { width: 24px; height: 24px; border-radius: 8px; }
  .rsx-box { order: -1; height: auto; min-height: 0; align-self: stretch; }
  .rsx-dock { order: 0; justify-content: center; margin-top: 2px; }
  .rsx-dk span { width: 40px; height: 40px; border-radius: 13px; }
  .rsx-dk i { font-size: .62rem; }
  /* the stage, laid out for a phone: 420 x 560 */
  .rsx-cv { width: 420px; height: 560px; perspective-origin: 70% 30%; }
  .rsx-lcap { display: none; }
  .rsx .phone { --pwn: 178; }
  .rsx-dev { left: 226px; top: 4px; transform: rotateY(calc(-14deg + var(--mx) * 4deg)) rotateX(4deg) rotateZ(1.5deg); }
  .rsx-slot { left: 6px; top: 150px; width: 400px; height: 402px; }
  .rsx-card { padding: 16px 16px 16px; border-radius: 22px; }
  .rsx-ch > b { font-size: 16px; }
  .rsx-c0b { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
  .rsx-next { flex-direction: row; justify-content: space-around; padding: 8px 6px; }
  .rsx-nk { display: none; }
  .rsx-ring svg { width: 70px; height: 70px; }
  .rsx-ring p { height: 70px; }
  .rsx-ring p b { font-size: 15px; }
  .rsx-ring p i { font-size: 8.5px; }
  .rsx-ring { flex-direction: row; gap: 8px; }
  .rsx-lv p i { display: none; }
  .rsx-ladder { justify-content: flex-start; gap: 5px; }
  .rsx-lv { grid-template-columns: 34px minmax(0, 1fr) 42px; row-gap: 3px; column-gap: 10px; }
  .rsx-lvc { height: 27px; border-radius: 9px; font-size: 12px; }
  .rsx-lv strong { font-size: 12px; }
  .rsx-lv s { height: 5px; }
  .rsx-lv em { min-width: 26px; height: 24px; border-radius: 8px; font-size: 11px; }
  .rsx-ring p { right: auto; width: 70px; }
  .rsx-fbox { width: 110px; height: 136px; }
  .rsx-flame { width: 110px; height: 136px; }
  .rsx-big { font-size: 84px; }
  .rsx-d span { width: 38px; height: 38px; }
  .rsx-hm { --cs: 31px; --cg: 5px; transform: translateY(10px) rotateX(56deg) rotateZ(-36deg); }
  .rsx-sks span { font-size: 11px; }
  .rsx-avt { width: 44px; height: 44px; font-size: 14px; }
  .rsx-pd.p1 .rsx-avt { width: 54px; height: 54px; }
  .rsx-card.go .rsx-pd.p1 .rsx-blk { height: 112px; }
  .rsx-card.go .rsx-pd.p2 .rsx-blk { height: 86px; }
  .rsx-card.go .rsx-pd.p3 .rsx-blk { height: 66px; }
  .rsx-rest p { padding: 7px 10px; }
  .rsx-chip { display: none; }
  .rsx-beam { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rsx-mq span, .rsx-flame path, .rsx-emb, .rsx-chip { animation: none !important; }
  .rsx-dev, .rsx-slot, .rsa-scr, .rsa-in, .rsa-mscroll { transition-duration: 1ms; }
}

/* 5 · credits: the balance, a module's cost, where the credits went */
.rsx-bal { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px 20px; border-radius: 22px; color: #fff; background: linear-gradient(120deg, #e2453e, #f08a3c); box-shadow: 0 22px 36px -20px rgba(226, 69, 62, .95); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .35s, transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.rsx-card.go .rsx-bal { opacity: 1; transform: none; transition-delay: .15s; }
.rsx-bal p { display: flex; flex-direction: column; margin: 0; }
.rsx-bal i { font-style: normal; font-size: 12.5px; font-weight: 700; opacity: .88; }
.rsx-bal b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rsx-bal p > span { font-size: 12px; font-weight: 700; opacity: .85; }
.rsx-balc { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.rsx-balc svg { width: 28px; height: 28px; }
.rsx-card.go .rsx-balc { animation: rsxBolt 2.4s ease-in-out 1.2s infinite; }
@keyframes rsxBolt { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-12deg) scale(1.1); } 90% { transform: rotate(8deg) scale(1.05); } }
.rsx-cost { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(226, 85, 76, .14); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .5s var(--ease-out); }
.rsx-card.go .rsx-cost { opacity: 1; transform: none; transition-delay: .45s; }
.rsx-cost img { width: 34px; height: 34px; padding: 5px; border-radius: 10px; background: #fff3ef; }
.rsx-cost p { flex: 1; display: flex; flex-direction: column; margin: 0; }
.rsx-cost p b { font-size: 14.5px; font-weight: 800; }
.rsx-cost p i { font-style: normal; font-size: 12px; font-weight: 600; color: #8d8184; }
.rsx-cost em { padding: 6px 12px; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 700; color: #a72f28; background: #fdebe7; }
.rsx-cost em b { font-weight: 800; }
.rsx-hh { display: flex; align-items: center; gap: 7px; margin: 12px 0 7px; font-size: 12.5px; font-weight: 800; color: #6c6062; }
.rsx-hh svg { width: 16px; height: 16px; color: #e2554c; }
.rsx-hist { display: grid; gap: 7px; }
.rsx-hist p { display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(226, 85, 76, .1); opacity: 0; transform: translateX(-14px); transition: opacity .3s, transform .5s var(--ease-out); }
.rsx-card.go .rsx-hist p { opacity: 1; transform: none; transition-delay: calc(.8s + var(--j) * .14s); }
.rsx-hist p:first-child { background: #fff6f2; box-shadow: 0 0 0 1.5px rgba(226, 85, 76, .35); }
.rsx-hist img { width: 28px; height: 28px; padding: 4px; border-radius: 9px; background: #fff3ef; }
.rsx-hf { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #e2554c; background: #fdebe7; }
.rsx-hf svg { width: 15px; height: 15px; }
.rsx-hist p > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rsx-hist span b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 700; }
.rsx-hist span i { font-style: normal; font-size: 11.5px; font-weight: 600; color: #9a8c90; }
.rsx-hist em { font-style: normal; font-size: 14.5px; font-weight: 800; color: #c53b33; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .rsx-bal { margin-top: 8px; padding: 9px 14px; border-radius: 16px; }
  .rsx-bal b { font-size: 28px; }
  .rsx-balc { width: 42px; height: 42px; }
  .rsx-balc svg { width: 20px; height: 20px; }
  .rsx-cost { margin-top: 8px; padding: 7px 10px; }
  .rsx-cost img { width: 26px; height: 26px; }
  .rsx-cost p b { font-size: 13px; }
  .rsx-hh { margin: 8px 0 5px; }
  .rsx-hist p { padding: 6px 10px; }
  .rsx-hist p:nth-child(n+2) { display: none; }
}
/* the balance on the phone, lifted */
.rsa-pts.lift { position: relative; z-index: 3; }

/* ════ MYNA FOR ORGANIZATIONS — the real admin panel, page by page ══
   Seven pages, one screen each. Each is a few lines of copy beside the
   real Myna admin panel, rebuilt in its own style and played as it is
   used. The rule everywhere: the markup is the finished state, so a
   still window (the cover) and a page before its script runs both look
   right; a page about to play is put back with .is-wait classes, and
   each reveal is the class coming off. */
.oz {
  --oj: var(--sans);
  --o-ink: #1c1517;
  --o-2: #5f5357;
  --o-3: #9a8c90;
  --o-line: rgba(226, 85, 76, .14);
  --x-deep: var(--coral-deep, #a72f28);
  --x-tint: #fdebe7;
  --pop: cubic-bezier(.3, 1.45, .5, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  font-family: var(--oj);
  color: var(--o-ink);
}
/* a soft light behind the laptop, like the other sections' */

.oz-in { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100svh; min-height: 600px; overflow: hidden; }
.oz-pops { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }

/* ── the chapter bar ── */
.oz-bar { flex: none; display: flex; align-items: center; gap: 16px; height: clamp(52px, 7.4svh, 64px); padding: 0 var(--gut); }
.oz-brand { flex: none; }
.oz-brand img { display: block; width: auto; height: clamp(14px, 2svh, 18px); }
.oz-tabs { display: flex; gap: 2px; min-width: 0; margin-left: auto; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px var(--o-line), 0 10px 24px -18px rgba(150, 50, 35, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.oz-tabs a { padding: 7px 13px; border-radius: 999px; white-space: nowrap; font-size: .76rem; font-weight: 700; color: var(--o-3); transition: color .25s, background .25s, box-shadow .25s; }
.oz-tabs a:hover { color: var(--o-ink); background: #fff; box-shadow: 0 4px 10px -6px rgba(150, 50, 35, .45); }
.oz-tabs a.on { color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 8px 16px -8px rgba(226, 69, 62, .95); }
.oz-replay { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 10px; border-radius: 999px; font-family: var(--oj); font-size: .74rem; font-weight: 700; color: var(--o-2); background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--o-line); opacity: 0; pointer-events: none; transition: opacity .35s, color .2s, box-shadow .2s; }
.oz.done .oz-replay { opacity: 1; pointer-events: auto; }
.oz-replay:hover { color: var(--x-deep); box-shadow: 0 0 0 1px rgba(226, 85, 76, .4), 0 8px 16px -10px rgba(226, 85, 76, .6); }
.oz-replay svg { width: 13px; height: 13px; }
.oz-replay:hover svg { animation: ozSpin .7s var(--ease); }
@keyframes ozSpin { to { transform: rotate(-360deg); } }
.oz-no { flex: none; font-family: var(--mono); font-size: .76rem; font-weight: 600; color: var(--o-3); }
.oz-no b { color: var(--x-deep); }

/* ── the body: copy and screen ── */
.oz-body { flex: 1; min-height: 0; container-type: size; display: grid; grid-template-columns: minmax(0, 25%) minmax(0, 1fr); align-items: center; column-gap: clamp(20px, 2.4vw, 40px); padding: clamp(12px, 2.4svh, 28px) var(--gut) clamp(40px, 6svh, 60px); }
.oz-flip .oz-body { grid-template-columns: minmax(0, 1fr) minmax(0, 25%); }
.oz-copy { min-width: 0; }
.oz-eye { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.oz-role { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .01em; color: var(--x-deep); background: #fff; box-shadow: 0 0 0 1px rgba(226, 85, 76, .2), 0 8px 18px -14px rgba(226, 85, 76, .7); }
.oz-role svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #e2453e, #f08a3c); }
.oz-only { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; background: #1c1517; box-shadow: 0 10px 20px -12px rgba(28, 21, 23, .8); }
.oz-only svg { width: 12px; height: 12px; color: #ffb45c; }
.oz-h { margin: clamp(12px, 2svh, 20px) 0 0; font-family: var(--oj); font-size: clamp(1.7rem, min(2.5vw, 5svh), 2.75rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; color: var(--o-ink); text-wrap: balance; }
.oz-h em { font-style: normal; background: linear-gradient(95deg, #e2453e 5%, #f08a3c 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oz-lede { margin: clamp(10px, 1.6svh, 16px) 0 0; font-size: clamp(.88rem, min(1vw, 1.85svh), 1.02rem); font-weight: 500; line-height: 1.55; color: var(--o-2); }
/* the points: a timeline, not boxes — a line joins the numbers and fills as the
   demo reaches each one; hovering a point brings its sheet forward */
.oz-pts { --pp: 0; position: relative; display: grid; gap: clamp(14px, 2.6svh, 26px); margin: clamp(20px, 3.4svh, 34px) 0 0; padding: 0; list-style: none; }
.oz-pts::before, .oz-pts::after { content: ""; position: absolute; z-index: 0; left: 17px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; }
.oz-pts::before { background: repeating-linear-gradient(180deg, rgba(226, 85, 76, .28) 0 4px, transparent 4px 9px); }
.oz-pts::after { background: linear-gradient(180deg, #ff8a5c, #e2453e); transform: scaleY(var(--pp)); transform-origin: 50% 0; transition: transform .8s var(--out); }
.oz-pt { position: relative; z-index: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; align-items: start; cursor: pointer; outline: none; }
.oz-pn { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: .8rem; font-weight: 800; color: var(--x-deep); background: #fff; box-shadow: 0 0 0 1.5px rgba(226, 85, 76, .38), 0 8px 16px -10px rgba(226, 85, 76, .6); transition: color .3s, background .35s, box-shadow .35s, transform .45s var(--pop); }
.oz-pn::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(226, 85, 76, .45); opacity: 0; transform: scale(.7); pointer-events: none; }
.oz-pt p { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; padding-top: 6px; transition: transform .45s var(--pop); }
.oz-pt b { align-self: flex-start; padding-bottom: 3px; font-size: clamp(.95rem, min(1.06vw, 1.95svh), 1.08rem); font-weight: 800; letter-spacing: -.015em; color: var(--o-ink); background: linear-gradient(90deg, #e2453e, #f08a3c) 0 100% / 0% 2px no-repeat; transition: background-size .5s var(--out), color .3s; }
.oz-pt i { font-style: normal; font-size: clamp(.8rem, min(.88vw, 1.6svh), .9rem); font-weight: 500; line-height: 1.45; color: var(--o-2); transition: color .3s; }
.oz-pt:hover p, .oz-pt:focus-visible p { transform: translateX(6px); }
.oz-pt:hover b, .oz-pt:focus-visible b, .oz-pt.on b { background-size: 100% 2px; }
.oz-pt:hover .oz-pn, .oz-pt:focus-visible .oz-pn { transform: scale(1.12); }
.oz-pt.on .oz-pn, .oz-pt:hover .oz-pn, .oz-pt:focus-visible .oz-pn { color: #fff; background: linear-gradient(135deg, #ff8a5c, #e2453e); box-shadow: 0 0 0 4px #fff, 0 10px 20px -8px rgba(226, 69, 62, .9); }
.oz-pt.on .oz-pn::after { animation: ozPing 1.8s ease-out infinite; }
.oz-pt.on i { color: var(--o-ink); }
@keyframes ozPing { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }
.oz.is-play .oz-pt { animation: ozUp .6s var(--out) both; }
.oz.is-play .oz-pt:nth-child(2) { animation-delay: .1s; }
.oz.is-play .oz-pt:nth-child(3) { animation-delay: .2s; }
/* the copy comes up as the page arrives */
.oz.is-play .oz-copy > * { animation: ozUp .7s var(--out) both; }
.oz.is-play .oz-copy > :nth-child(2) { animation-delay: .06s; }
.oz.is-play .oz-copy > :nth-child(3) { animation-delay: .12s; }
.oz.is-play .oz-copy > :nth-child(4) { animation-delay: .18s; }
.oz.armed:not(.is-play) .oz-copy > * { opacity: 0; }
@keyframes ozUp { from { opacity: 0; transform: translateY(18px); } }

/* ── the window ── */
.oz-stage { position: relative; display: grid; place-items: center; min-width: 0; height: 100%; perspective: 1800px; }
.ozw { position: relative; width: min(100%, calc((100cqh - 44px) / .66)); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(80, 40, 40, .08), 0 50px 90px -50px rgba(120, 40, 30, .55), 0 14px 30px -20px rgba(120, 40, 30, .32); transition: transform .6s var(--out), box-shadow .6s var(--out); }

@keyframes ozRise { from { opacity: 0; transform: translateY(50px) rotateX(12deg) scale(.96); } }
.ozw-chrome { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid #efe6e3; background: linear-gradient(#fcf8f7, #f5efed); }
.ozw-chrome > i { width: 9px; height: 9px; border-radius: 50%; background: #f09a8e; }
.ozw-chrome > i + i { background: #f5c77e; }
.ozw-chrome > i + i + i { background: #9ad3a3; }
.ozw-url { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: 12px; padding: 4px 12px; border-radius: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: #8a7c80; background: #fff; box-shadow: inset 0 0 0 1px #efe4e0; }
.ozw-url svg { flex: none; width: 10px; height: 10px; color: #1f9573; }
.ozw-glass { position: relative; aspect-ratio: 1000 / 660; overflow: hidden; background: #eceff1; }

/* ════ the panel itself: laid out at 1000 x 620, scaled to its window ════ */
.op { position: absolute; left: 0; top: 0; width: 1000px; height: 660px; overflow: hidden; transform: scale(var(--os, .8)); transform-origin: 0 0; font-family: "Poppins", var(--sans); font-size: 10px; line-height: 1.35; color: #4a4a4a; background: #eceff1; text-align: left; }
.op p, .op h4, .op h5 { margin: 0; }
.op svg { display: block; }
.op b { font-weight: 600; }
.op.snap, .op.snap * { transition: none !important; animation: none !important; }
.op-cam { position: absolute; inset: 0; display: grid; grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: 44px minmax(0, 1fr); transform-origin: 0 0; transition: transform 1s cubic-bezier(.45, 0, .2, 1); }
.op-hd { grid-column: 1 / -1; display: flex; align-items: center; padding: 0 16px; background: #c65152; }
.op-hd img { width: auto; height: 30px; }
.op-burger { margin-left: 104px; color: #fff; }
.op-burger svg { width: 17px; height: 17px; }
.op-exit { margin-left: auto; color: #fff; }
.op-exit svg { width: 16px; height: 16px; }
/* the sidebar */
.op-sd { overflow: hidden; padding: 12px 0; background: #fff; box-shadow: 1px 0 0 #eef0f2; }
.op-sdh { padding: 0 14px 8px; font-size: 7.5px; font-weight: 700; letter-spacing: .08em; color: #555; }
.op-nl { display: flex; align-items: center; gap: 9px; padding: 7.5px 12px 7.5px 14px; font-size: 10.5px; color: #3d3d3d; transition: background .25s, color .25s; }
.op-nl > svg:first-child { flex: none; width: 12px; height: 12px; color: #c65152; }
.op-nl span { flex: 1; min-width: 0; white-space: nowrap; }
.op-nl > svg:last-child:not(:first-child) { flex: none; width: 9px; height: 9px; color: #888; }
.op-nl:hover { background: #fbf2ef; }
.op-nl > svg:last-child:not(:first-child) { transition: transform .35s var(--ease); }
.op-ni.open > .op-nl > svg:last-child:not(:first-child) { transform: rotate(90deg); }
.op-ni.on > .op-nl { font-weight: 600; color: #c65152; background: #fbf0ed; box-shadow: inset 3px 0 0 #c65152; }
.op-nsub { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.op-ni.open > .op-nsub { max-height: 150px; }
.op-ns { padding: 6px 12px 6px 36px; font-size: 10px; color: #c65152; transition: background .25s, color .25s; }
.op-ns:hover { background: #fbf2ef; }
.op-ns.on { font-weight: 600; color: #fff; background: #c65152; }
/* the page */
.op-mn { position: relative; overflow: hidden; }
.op-mi { padding: 13px 16px 16px; transform: translateY(calc(var(--sy, 0) * -1px)); transition: transform .9s cubic-bezier(.45, 0, .2, 1); }
.op-pg { position: relative; display: none; }
.op-pg.on { display: block; }
.op-pg.enter { animation: opEnter .5s var(--out) both; }
@keyframes opEnter { from { opacity: 0; transform: translateX(18px); } }
.op-tt { margin-bottom: 11px; }
.op-tt h4 { font-size: 15px; font-weight: 500; color: #555; }
.op-tt p { display: flex; align-items: center; gap: 5px; margin-top: 3px !important; font-size: 9.5px; color: #6f6f6f; }
.op-tt p svg { width: 8px; height: 8px; color: #999; }
.op-tt p span:last-child { color: #999; }
.op-card { position: relative; padding: 14px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.op-card h5 { font-size: 12.5px; font-weight: 500; color: #333; }
.op-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #f0f1f3; }
.op-ch p { margin-top: 2px !important; font-size: 9px; color: #888; }
/* buttons and fields */
.op-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 12px; border-radius: 4px; white-space: nowrap; font-size: 10px; font-weight: 500 !important; color: #fff; background: #c65152; transition: filter .2s, transform .25s var(--pop), box-shadow .25s; }
.op-btn svg { width: 11px; height: 11px; }
.op-btn:hover { filter: brightness(1.08); box-shadow: 0 6px 12px -6px rgba(198, 81, 82, .8); }
.op-btn.hot { filter: brightness(1.1); box-shadow: 0 0 0 4px rgba(198, 81, 82, .18); }
.op .go { animation: opPress .42s ease both; }
@keyframes opPress { 40% { transform: scale(.92); } }
.op-fld { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.op-fld > span:first-child:not(.op-sel):not(.op-inp) { font-size: 9.5px; font-weight: 500; color: #555; }
.op-fld > span:first-child i { font-style: normal; color: #d02023; }
.op-sel, .op-inp { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; height: 28px; padding: 0 9px; border: 1px solid #dcdfe3; border-radius: 4px; overflow: hidden; white-space: nowrap; font-size: 9.5px; color: #555; background: #fff; transition: border-color .25s, box-shadow .25s; }
.op-sel b { overflow: hidden; text-overflow: ellipsis; font-weight: 400 !important; }
.op-sel svg, .op-inp svg { flex: none; width: 10px; height: 10px; color: #666; }
.op-inp { color: #999; }
.op-sel:hover, .op-inp:hover { border-color: #c9ccd1; }
.op-fld.open .op-sel, .op-sel.hot { border-color: #e39a9a; box-shadow: 0 0 0 3px rgba(198, 81, 82, .12); }
.op-dd { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 20; padding: 3px 0; border: 1px solid #d6d9dd; border-radius: 4px; background: #fff; box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .25s var(--out), visibility 0s .2s; }
.op-fld.open .op-dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.op-opt { padding: 5.5px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9.5px; color: #444; transition: background .15s, color .15s; }
.op-opt:hover, .op-opt.hot { color: #fff; background: #c65152; }
.op-sel.set { animation: opSet .6s ease; }
@keyframes opSet { 30% { background: #fdf1ee; } }
/* KPI cards */
.op-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 11px; }
.op-kpi { --k: #c65152; --kt: #c65152; --kf: #fbeceb; position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 11px 11px 11px 14px; border-radius: 5px; background: #fff; box-shadow: inset 3px 0 0 var(--k), 0 1px 3px rgba(0, 0, 0, .05); transition: transform .35s var(--pop), box-shadow .35s, opacity .4s; }
.op-kpi:hover { transform: translateY(-3px); box-shadow: inset 3px 0 0 var(--k), 0 12px 22px -12px rgba(0, 0, 0, .28); }
.t-green { --k: #52ad56; --kt: #3f9a45; --kf: #e6f4e7; }
.t-blue { --k: #52a5d2; --kt: #3d8fbd; --kf: #e3f1f8; }
.t-red { --k: #d02023; --kt: #c9282b; --kf: #fbe4e4; }
.t-amber { --k: #e8a13a; --kt: #c98522; --kf: #fdf1dd; }
.op-kx { min-width: 0; }
.op-kl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 8.3px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--kt); }
.op-kv { display: block; margin-top: 1px; font-size: 20px; font-weight: 600 !important; line-height: 1.25; color: var(--kt); font-variant-numeric: tabular-nums; }
.t-coral .op-kv { color: #2b2b2b; }
.op-ks { display: flex; align-items: center; gap: 5px; margin-top: 3px !important; overflow: hidden; white-space: nowrap; font-size: 7.8px; color: #8a8a8a; }
.op-ks em { padding: 1px 5px; border-radius: 3px; font-style: normal; font-weight: 600; color: var(--kt); background: var(--kf); }
.op-kr { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--k); border-radius: 50%; color: var(--k); background: var(--kf); transition: transform .45s var(--pop); }
.op-kr svg { width: 15px; height: 15px; }
.op-kpi:hover .op-kr { transform: rotate(-12deg) scale(1.08); }
.op-kpis.is-wait .op-kpi { opacity: 0; transform: translateY(12px) scale(.95); }
.op-kpis .op-kpi { transition-delay: calc(var(--j, 0) * 80ms); }
.op-kpis .op-kpi:nth-child(2) { --j: 1; }
.op-kpis .op-kpi:nth-child(3) { --j: 2; }
.op-kpis .op-kpi:nth-child(4) { --j: 3; }
.op-kpis .op-kpi:hover { transition-delay: 0s; }
/* tables */
.op-tbl { border: 1px solid #eceef1; border-radius: 4px; overflow: hidden; }
.op-th, .op-tr { display: grid; align-items: center; column-gap: 8px; padding: 0 10px; }
.op-th { height: 30px; font-size: 9.3px; font-weight: 600; color: #333; background: #f7f8fa; }
.op-tr { min-height: 34px; font-size: 9.8px; color: #555; border-top: 1px solid #f0f1f3; transition: background .25s, opacity .4s, transform .5s var(--out); }
.op-tr:hover { background: #fdf5f2; }
.op-tr > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.op-tbl.is-wait .op-tr { opacity: 0; transform: translateY(10px); }
.op-tbl .op-tr { transition-delay: 0s, calc(var(--j) * 70ms), calc(var(--j) * 70ms); }
.op-tr.flash { animation: opFlash 1s ease; }
@keyframes opFlash { 25% { background: #fdeeea; } }
.op-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px !important; font-size: 9.5px; color: #666; }
.op-pager { display: flex; border: 1px solid #e3e5e8; border-radius: 4px; overflow: hidden; }
.op-pager i, .op-pager b { padding: 5px 10px; font-style: normal; font-size: 9.5px; }
.op-pager i { color: #888; }
.op-pager b { color: #fff; background: #c65152; }

/* 1 · organizations, bulk upload */
.op-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.op-show { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #555; }
.op-show i { padding: 3px 7px; border: 1px solid #dcdfe3; border-radius: 3px; font-style: normal; font-size: 9px; }
.op-srch { margin-left: auto; width: 150px; padding: 5px 8px; border: 1px solid #dcdfe3; border-radius: 3px; font-size: 9px; color: #aaa; }
.op-orgt .op-th, .op-orgt .op-tr { grid-template-columns: 2.3fr 1fr 1fr .6fr .6fr; }
.op-orgt .op-tr { min-height: 36px; }
.op-act { padding: 2px 5px; border-radius: 3px; font-style: normal; font-size: 7.5px; font-weight: 700; color: #fff; background: #43a047; }
.op-del { display: inline-block; padding: 5px 10px; border-radius: 3px; font-size: 9px; font-weight: 500 !important; color: #fff; background: #d0282b; }
.op-bulk h5 { margin-bottom: 4px !important; }
.op-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0; }
.op-fin { display: flex; align-items: stretch; height: 28px; border: 1px solid #dcdfe3; border-radius: 4px; overflow: hidden; }
.op-fin > b { display: grid; place-items: center; padding: 0 11px; font-size: 9.5px; font-weight: 400 !important; color: #555; background: #f1f2f4; border-right: 1px solid #dcdfe3; transition: background .2s; }
.op-fin > b:hover { background: #e7e9ec; }
.op-fname { display: flex; align-items: center; padding: 0 10px; font-size: 9.5px; }
.op-fname em { display: none; font-style: normal; color: #555; }
.op-fname strong { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #1f7a4d; }
.op-fname strong svg { width: 12px; height: 12px; }
.op-file.is-wait .op-fname em { display: inline; }
.op-file.is-wait .op-fname strong { display: none; }
.op-file .op-fname strong { animation: opChip .5s var(--pop) both; }
@keyframes opChip { from { opacity: 0; transform: translateX(-8px) scale(.9); } }
.op-fbot { align-items: start; margin-bottom: 0; }
.op-fbot > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.op-tmpl { display: inline-block; padding: 7px 12px; border-radius: 4px; font-size: 9.5px; font-weight: 500 !important; color: #fff; background: #e07b45; transition: filter .2s; }
.op-tmpl:hover { filter: brightness(1.08); }
.op-note { font-size: 8.8px; line-height: 1.55; color: #8a8a8a; }
.op-prog { height: 4px; margin-top: 12px; border-radius: 2px; overflow: hidden; background: #f1f2f4; opacity: 0; transition: opacity .3s; }
.op-prog i { display: block; height: 100%; background: linear-gradient(90deg, #e0735a, #c65152); transform: scaleX(0); transform-origin: 0 50%; }
.op-prog.run { opacity: 1; }
.op-prog.run i { animation: opFill 1.3s cubic-bezier(.4, 0, .3, 1) forwards; }
@keyframes opFill { to { transform: scaleX(1); } }
.op-toast { position: absolute; right: 0; top: 2px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 8px; background: #fff; box-shadow: inset 3px 0 0 #3fae54, 0 16px 34px -12px rgba(0, 0, 0, .35), 0 0 0 1px #e1efe4; transition: opacity .3s, transform .55s var(--pop); }
.op-toast > svg { width: 24px; height: 24px; color: #3fae54; }
.op-toast p { display: flex; flex-direction: column; }
.op-toast b { font-size: 11.5px; color: #222; }
.op-toast i { font-style: normal; font-size: 8.8px; color: #888; }
.op-toast.is-wait { opacity: 0; transform: translateY(-12px) scale(.9); }

/* 2 · batches */
.op-bl .op-ch { align-items: center; }
.op-add svg { width: 10px; height: 10px; }
.op-filters { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; gap: 10px; padding: 10px 0 12px; }
.op-filters .op-fld > span:first-child { font-size: 9px; color: #d9674f; }
.op-batt .op-th, .op-batt .op-tr { grid-template-columns: .3fr 2.1fr 1fr 1.1fr .9fr 1.3fr; }
.op-batt .op-tr { min-height: 38px; }
.op-bi { color: #777; }
.op-bn { display: flex; align-items: center; gap: 7px; font-weight: 600; color: #333; }
.op-bn i { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #e08a8a; border-radius: 50%; font-style: normal; font-size: 8.5px; color: #c65152; }
.op-org { padding: 1px 6px; border: 1px solid #f3c7b8; border-radius: 3px; font-style: normal; font-size: 8.5px; font-weight: 600; color: #d9674f; background: #fdf1ec; }
.op-cnt { padding: 2px 7px; border-radius: 3px; font-style: normal; font-size: 8.8px; font-weight: 600; color: #3d8fbd; background: #e3f1f8; }
.op-cnt b { font-variant-numeric: tabular-nums; }
.op-ok { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 3px; font-style: normal; font-size: 8.8px; font-weight: 600; color: #3f9a45; background: #e6f4e7; }
.op-ok svg { width: 9px; height: 9px; }
.op-acts { display: flex; gap: 6px; }
.op-acts b { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid; border-radius: 3px; font-size: 8.5px; font-weight: 500 !important; transition: background .2s, color .2s; }
.op-acts svg { width: 9px; height: 9px; }
.op-edit { color: #3d8fbd; border-color: #8cc4e2; }
.op-edit:hover { color: #fff; background: #52a5d2; }
.op-dl { color: #c9282b; border-color: #e99a9b; }
.op-dl:hover { color: #fff; background: #d02023; }

/* 3 · the mentor's dashboard */
.op-dgrid { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: 11px; }
.op-dc { position: relative; padding: 13px 14px 12px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); transition: opacity .45s, transform .55s var(--pop), box-shadow .35s; }
.op-dc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, #c65152, #e0a654); }
.op-dc:hover { box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .25); }
.op-dk { font-size: 7.8px; font-weight: 600; letter-spacing: .1em; color: #888; }
.op-dt { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px !important; font-size: 12px; font-weight: 600; color: #333; }
.op-dt b { color: #c65152; font-variant-numeric: tabular-nums; }
.op-g2, .op-g4 { display: grid; gap: 8px; }
.op-g2 { grid-template-columns: 1fr 1fr; }
.op-g4 { grid-template-columns: repeat(4, 1fr); }
.op-tile { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 9px 10px; border: 1px solid #eceef1; border-radius: 8px; transition: transform .3s var(--pop), box-shadow .3s; }
.op-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .25); }
.op-tile i { grid-column: 1 / -1; font-style: normal; font-size: 8px; font-weight: 600; color: #666; }
.op-tile b { font-size: 17px; font-variant-numeric: tabular-nums; }
.op-tile svg { width: 16px; height: 16px; color: #555; }
.t-m b { color: #31689a; }
.t-f b { color: #e0a654; }
.op-tm b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; font-weight: 500 !important; color: #333; }
.op-tm svg { color: #c65152; }
.op-lbt { border: 1px solid #eceef1; border-radius: 8px; overflow: hidden; }
.op-lbh, .op-lbr { display: grid; grid-template-columns: .45fr 2fr 1fr .9fr; align-items: center; padding: 0 10px; }
.op-lbh { height: 26px; font-size: 7.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #888; background: #fafafb; }
.op-lbr { height: 30px; font-size: 9.8px; color: #333; border-top: 1px solid #f0f1f3; transition: background .2s, opacity .4s, transform .5s var(--out); transition-delay: 0s, calc(var(--j) * 90ms), calc(var(--j) * 90ms); }
.op-lbr:hover { background: #fdf5f2; }
.op-lbr i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-style: normal; font-size: 8px; font-weight: 700; color: #c65152; background: #fbe4e4; }
.op-lbr:nth-of-type(2) i { color: #a07a0d; background: #fdf1c9; }
.op-lbr:nth-of-type(3) i { color: #666; background: #eef0f3; }
.op-lbr:nth-of-type(4) i { color: #b86a2c; background: #fde7d3; }
.op-lbr em { padding: 1px 7px; border: 1px solid #f2b8b9; border-radius: 999px; font-style: normal; font-size: 8.5px; font-weight: 600; color: #c65152; background: #fdeaea; }
.op-lbt.is-wait .op-lbr { opacity: 0; transform: translateX(-10px); }
.op-ov { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; padding: 4px 8px; border: 1px solid #e3e5e8; border-radius: 4px; font-size: 9px; font-weight: 400; color: #666; }
.op-ov svg { width: 9px; height: 9px; }
.op-chart { display: grid; grid-template-columns: 26px 1fr; height: 150px; margin-top: 4px; }
.op-yax { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 16px; font-size: 7.5px; color: #999; }
.op-yax i { font-style: normal; line-height: 1; }
.op-bars { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; height: calc(100% - 16px); background: repeating-linear-gradient(to top, #eef0f2 0 1px, transparent 1px 20%); border-bottom: 1px solid #dfe2e5; }
.op-bar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; margin: 0; }
.op-bar i { width: 34px; height: calc(var(--h) * 100%); border-radius: 4px 4px 0 0; background: var(--bc); transform-origin: 50% 100%; transition: transform .9s var(--out); transition-delay: calc(var(--j) * 110ms); }
.op-bar b { margin-bottom: 3px; font-size: 8.5px; color: #444; transition: opacity .4s; transition-delay: calc(.5s + var(--j) * 110ms); }
.op-bar span { position: absolute; bottom: -15px; font-size: 8.5px; color: #555; }
.op-bar:hover i { filter: brightness(1.08); }
.b-l { --bc: #c65152; }
.b-s { --bc: #e0a654; }
.b-r { --bc: #c37830; }
.b-w { --bc: #31689a; }
.op-bars.is-wait i { transform: scaleY(0); }
.op-bars.is-wait b { opacity: 0; }
.op-hr { grid-column: 1 / -1; padding-bottom: 10px; }
.op-hrt { margin-bottom: 8px !important; font-size: 11px !important; }
.op-hrt i { width: 7px; height: 7px; border-radius: 50%; background: #c65152; }
.op-hrt span { margin-left: 8px; font-size: 8.5px; font-weight: 400; color: #999; }
.op-hbars { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 8px; height: 88px; padding-bottom: 14px; border-bottom: 1px solid #eceef1; }
.op-hbars p { position: relative; display: flex; align-items: flex-end; height: 100%; margin: 0; }
.op-hbars i { width: 100%; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #e0a654, #c65152); transform-origin: 50% 100%; transition: transform .8s var(--out), filter .2s; transition-delay: calc(var(--j) * 40ms); }
.op-hbars p:hover i { filter: brightness(1.1); }
.op-hbars span { position: absolute; left: 50%; bottom: -14px; translate: -50% 0; font-size: 7.5px; color: #999; white-space: nowrap; }
.op-hbars.is-wait i { transform: scaleY(0); }
/* the mentor's sign-in */
.op-login { position: absolute; left: 168px; right: 0; top: 44px; bottom: 0; z-index: 25; display: grid; place-items: center; background: #eceff1; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.op-login.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.op-lg { display: flex; flex-direction: column; gap: 10px; width: 290px; padding: 22px 22px 20px; border-radius: 12px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .35); }
.op-lg img { width: auto; height: 36px; margin: 0 auto 2px; }
.op-lgt { font-size: 13px; font-weight: 600; color: #333; text-align: center; }
.op-lf { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border: 1px solid #dcdfe3; border-radius: 6px; }
.op-lf i { font-style: normal; font-size: 8px; color: #999; }
.op-lf b { font-size: 10px; font-weight: 500 !important; color: #333; }
.op-lgb { margin-top: 4px; padding: 9px; font-size: 11px; }

/* 4 · a batch's results */
.op-gr .op-ch { padding-bottom: 8px; }
.op-gf { display: grid; grid-template-columns: .9fr 1.15fr 1.6fr .85fr; gap: 10px; align-items: start; padding-top: 10px; }
.op-gf .op-fld > span:first-child { font-size: 9px; color: #d9674f; }
.op-gf .op-fld > .op-inp + .op-inp { margin-top: 4px; }
.op-chips { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; height: 62px; padding: 5px; border: 1px solid #dcdfe3; border-radius: 4px; overflow: hidden; background: #fff; }
.op-chips i { display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 3px; font-style: normal; font-size: 7.8px; color: #444; background: #f1f2f4; transition: opacity .25s, transform .35s var(--pop); transition-delay: calc(var(--j) * 45ms); }
.op-chips s { text-decoration: none; color: #999; }
.op-chips .op-ph { position: absolute; left: 9px; top: 7px; font-style: normal; font-size: 9px; color: #aaa; opacity: 0; }
.op-chips.is-wait i { opacity: 0; transform: scale(.6); }
.op-chips.is-wait .op-ph { opacity: 1; }
.op-gb { display: flex; gap: 8px; margin: 10px 0; }
.op-xl { background: #3fae54; }
.op-xl:hover { box-shadow: 0 6px 12px -6px rgba(63, 174, 84, .8); }
.op-rest .op-th, .op-rest .op-tr { grid-template-columns: 1.55fr 1fr .95fr .6fr .5fr .45fr .8fr .55fr; }
.op-rest .op-tr { min-height: 30px; }
.op-accb { position: relative; display: inline-block; width: 100%; padding: 1px 0 1px 5px; border-radius: 3px; font-style: normal; font-weight: 600; color: #333; background: linear-gradient(90deg, rgba(82, 173, 86, .22) calc(var(--a) * 1%), #f4f5f7 0); }
.op-xfile { position: absolute; right: 12px; top: 52px; z-index: 22; display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 9px; border-radius: 10px; background: #fff; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .4), 0 0 0 1px #dbeee0; opacity: 0; transform: translateY(-10px) scale(.9); transition: opacity .3s, transform .5s var(--pop); pointer-events: none; }
.op-xfile.on { opacity: 1; transform: none; }
.op-xfile span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #3fae54, #1f7a4d); }
.op-xfile span svg { width: 16px; height: 16px; }
.op-xfile p { display: flex; flex-direction: column; }
.op-xfile b { font-size: 10px; color: #222; }
.op-xfile i { font-style: normal; font-size: 8.5px; color: #888; }

/* 5 · the college's performance */
.op-prt { margin-bottom: 10px !important; font-size: 13.5px !important; color: #555 !important; }
.op-pf { display: grid; grid-template-columns: 1.5fr .85fr .85fr .95fr .95fr 1fr 1fr; gap: 7px; align-items: end; }
.op-tsel { height: 32px; }
.op-inp.op-d { position: relative; height: 32px; padding-top: 9px; }
.op-inp.op-d i { position: absolute; left: 8px; top: 2px; font-style: normal; font-size: 7.5px; font-weight: 600; color: #d9674f; }
.op-pf .op-inp:not(.op-d) { height: 32px; }
.op-bxl { height: 32px; font-size: 9.5px; }
.op-stats { margin-top: 11px; padding: 11px 12px 12px; border: 1px solid #eceef1; border-radius: 10px; background: #fcfcfd; }
.op-sh { display: flex; align-items: center; gap: 12px; }
.op-sh > div { min-width: 0; }
.op-sh h5 { font-size: 11.5px !important; font-weight: 600 !important; color: #222 !important; }
.op-sh > div p { font-size: 8.3px; color: #888; }
.op-leg { display: flex; gap: 10px; margin-left: auto !important; font-size: 7.8px; font-weight: 600; color: #444; }
.op-leg span { display: inline-flex; align-items: center; gap: 4px; }
.op-leg i { width: 7px; height: 7px; border-radius: 50%; background: var(--bc); }
.op-leg em { font-style: normal; font-weight: 400; color: #999; }
.op-rep { padding: 7px 12px; font-size: 9.5px; }
.b-p { --bc: #cd7c81; --bt: #b8545c; }
.b-a { --bc: #d1a466; --bt: #a8792c; }
.b-g { --bc: #849cd8; --bt: #5572bd; }
.b-o { --bc: #83bf9b; --bt: #4e9a6c; }
.op-sks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.op-sk { position: relative; padding: 9px 10px 10px; border: 1px solid #eceef1; border-radius: 10px; background: #fff; transition: opacity .45s, transform .55s var(--pop), box-shadow .35s; }
.op-sk:hover { box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .28); transform: translateY(-2px); }
.op-skh { display: flex; align-items: center; gap: 8px; }
.op-skh span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font-size: 8.5px; font-weight: 700; color: #555; background: #f1f2f4; }
.op-skh b { font-size: 10.5px; color: #222; }
.op-skh em { margin-left: auto; padding: 2px 7px; border-radius: 999px; font-style: normal; font-size: 7.8px; font-weight: 600; color: #666; background: #f1f2f4; }
.op-skb { display: flex; gap: 2px; height: 5px; margin: 8px 0 !important; }
.op-skb i { width: calc(var(--w) * 1%); border-radius: 3px; background: var(--bc); transform-origin: 0 50%; transition: transform .8s var(--out); }
.op-bands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.op-band { display: flex; flex-direction: column; padding: 5px 7px 6px; border: 1px solid #eceef1; border-top: 2px solid var(--bc); border-radius: 6px; transition: transform .3s var(--pop), box-shadow .3s; }
.op-band:hover { transform: translateY(-2px); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .22); }
.op-band i { font-style: normal; font-size: 8.3px; font-weight: 600; color: var(--bt); }
.op-band span { font-size: 7px; color: #999; }
.op-band b { font-size: 15px; line-height: 1.2; color: #222; font-variant-numeric: tabular-nums; }
.op-band em { font-style: normal; font-size: 7px; color: #999; }
.op-ovr { margin-top: 9px; border-color: #f3dcd8; background: #fff8f6; }
.op-ovr .op-skh span { color: #c65152; background: #fbe4e4; }
.op-pg.st-pre .op-stats { display: none; }
.op-sks.is-wait .op-sk, .op-ovr.is-wait { opacity: 0; transform: translateY(14px) scale(.97); }
.op-sks .op-sk:nth-child(2) { transition-delay: .08s; }
.op-sks .op-sk:nth-child(3) { transition-delay: .16s; }
.op-sks .op-sk:nth-child(4) { transition-delay: .24s; }
.op-sks.is-wait .op-skb i, .op-ovr.is-wait .op-skb i { transform: scaleX(0); }
.op-sks .op-skb i { transition-delay: .35s; }
.op-sk.hot { box-shadow: 0 0 0 2px #cd7c81, 0 14px 28px -14px rgba(205, 124, 129, .7); }
.op-load { position: absolute; left: 50%; top: 190px; display: none; gap: 6px; transform: translateX(-50%); }
.op-load i { width: 9px; height: 9px; border-radius: 50%; background: #c65152; animation: opDot .9s ease-in-out infinite; }
.op-load i + i { animation-delay: .15s; }
.op-card.loading .op-load { display: flex; }
@keyframes opDot { 50% { transform: translateY(-7px); opacity: .5; } }

/* the cursor, a click */
.op-cur { position: absolute; left: 0; top: 0; z-index: 40; width: 22px; height: 22px; opacity: 0; pointer-events: none; scale: var(--cs, 1); transform-origin: 0 0; transition: translate var(--mv, 600ms) cubic-bezier(.45, 0, .2, 1), opacity .25s; }
.op-cur svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.op-cur.on { opacity: 1; }
.op-cur.press svg { animation: opCurP .3s ease; }
@keyframes opCurP { 50% { transform: scale(.82); } }
.op-rip { position: absolute; left: -18px; top: -18px; z-index: 39; width: 36px; height: 36px; border-radius: 50%; background: rgba(198, 81, 82, .3); opacity: 0; pointer-events: none; scale: var(--cs, 1); }
.op-rip.go { animation: opRip .55s ease-out; }
@keyframes opRip { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
/* a spotlight on part of the screen */
.op-spot { position: relative; z-index: 12; border-radius: 6px; box-shadow: 0 0 0 2px #e2554c, 0 0 0 6px rgba(226, 85, 76, .22), 0 0 0 3000px rgba(28, 18, 20, .34) !important; transition: box-shadow .35s; }
/* while a demo reaches a point: that part of the screen, outlined */
.op-mark { position: relative; z-index: 11; border-radius: 6px; box-shadow: 0 0 0 2px #e2554c, 0 0 0 7px rgba(226, 85, 76, .2) !important; transition: box-shadow .35s; }
/* a part of the screen, popped out of it (a clone in .oz-pops) */
.oz-popc { position: absolute; left: 0; top: 0; transform-origin: 0 0; filter: drop-shadow(0 26px 34px rgba(90, 30, 25, .35)) drop-shadow(0 6px 10px rgba(90, 30, 25, .18)); will-change: transform; }
.oz-popc > .op { position: static; width: auto; height: auto; transform: none; overflow: visible; background: transparent; }
.op-lift { opacity: .25; }
/* the mentor: a smaller monitor at the stage's far side, room beside it for the cards that come out of it */
@media (min-width: 901px) {
  .oz-p3 .oz-stage > .mn { justify-self: end; width: min(76%, calc((100cqh - 24px) / .84)); }
}
/* the whole dashboard out of the monitor (E.popPage): on its own panel, a glow behind it, a little afloat */
.oz-popc.oz-popp > .op { position: relative; padding: 30px; border-radius: 18px; background: #eef1f4; box-shadow: 0 0 0 1px rgba(226, 85, 76, .16), 0 50px 90px -34px rgba(70, 20, 18, .55), 0 16px 30px -16px rgba(70, 20, 18, .3); }
.oz-popc.oz-popp > .op > * { box-shadow: none !important; border-radius: 0 !important; }
.oz-popp::before { content: ""; position: absolute; inset: -14% -10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 138, 100, .42), rgba(255, 138, 100, .12) 60%, transparent); pointer-events: none; }
/* four markers at a box's corners: where they really are on screen, tilt and all (for the beam) */
.oz-cn { position: absolute; width: 2px; height: 2px; pointer-events: none; background: none !important; box-shadow: none !important; }
.oz-cn.c0 { left: 0; top: 0; } .oz-cn.c1 { right: 0; top: 0; } .oz-cn.c2 { left: 0; bottom: 0; } .oz-cn.c3 { right: 0; bottom: 0; }
/* the beam of orange light it comes out on, from the screen to the panel (as in Myna Rise) */
.oz-beam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.oz-beam polygon { opacity: 0; transition: opacity .5s var(--ease); }
.oz-beam.on polygon { opacity: 1; }
/* the part of the screen a card came out of: lit in the dimmed screen, its contents faded */
.op-out { position: relative; z-index: 12; border-radius: 8px; box-shadow: 0 0 0 2px #f08a3c, 0 0 0 7px rgba(240, 138, 60, .22), 0 0 0 3000px rgba(28, 18, 20, .3) !important; }
.op-out > * { opacity: .3; transition: opacity .3s; }
/* a card popped out towards you (E.popOut): big and flat in front of a dimmed screen, then back */
.oz-popc.oz-popo { transform-origin: 50% 50%; filter: none; will-change: auto; }
.oz-popo > .op > * { border-radius: 10px; box-shadow: 0 40px 70px -26px rgba(70, 20, 18, .6), 0 12px 24px -12px rgba(70, 20, 18, .32), 0 0 0 1px rgba(226, 85, 76, .22) !important; }
.ozw-glass::after { content: ""; position: absolute; inset: 0; z-index: 40; background: rgba(38, 18, 20, .32); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.oz.pop-on .ozw-glass::after { opacity: 1; }

/* ════ the batch results' Excel sheet: out of the download, big, its rows scrolling ════ */
.oz-xs { --v: 11; position: absolute; z-index: 6; right: -1%; top: 26%; width: 50em; overflow: hidden; border-radius: 1em; font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(7px, 1.02cqw, 12.5px); background: #fff; box-shadow: 0 0 0 1px rgba(31, 122, 77, .2), 0 44px 70px -30px rgba(20, 60, 36, .55), 0 14px 26px -14px rgba(20, 60, 36, .32); rotate: -1.2deg; opacity: 0; visibility: hidden; pointer-events: none; }
.oz-xs.show { opacity: 1; visibility: visible; }
.oz-xs p { margin: 0; }
.xs-bar { display: flex; align-items: center; gap: .6em; padding: .7em 1em; color: #fff; background: linear-gradient(90deg, #1f7a4d, #2a9461); }
.xs-bar span { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: .45em; background: rgba(255, 255, 255, .22); }
.xs-bar svg { width: 1.1em; height: 1.1em; }
.xs-bar b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.05em; font-weight: 600; }
.xs-bar em { font-style: normal; font-size: .85em; opacity: .8; }
.xs-fx { display: flex; align-items: center; gap: .8em; padding: .45em .8em; border-bottom: 1px solid #e3e8e5; font-size: .9em; color: #444; background: #f7f9f8; }
.xs-fx b { min-width: 3.4em; padding: .1em .5em; border: 1px solid #d5ddd8; border-radius: .25em; font-weight: 600; background: #fff; }
.xs-fx i { color: #8a9990; }
.xs-grid { font-size: .94em; }
.xs-grid p { display: grid; grid-template-columns: 2.4em 1.75fr 1.05fr 1.2fr .78fr .72fr .6fr 1fr .95fr; }
.xs-grid i { height: 2em; padding: 0 .55em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: normal; line-height: 2em; color: #2b2f2d; border-right: 1px solid #edf0ee; border-bottom: 1px solid #edf0ee; }
.xs-cols i, .xs-grid p > i:first-child { padding: 0; text-align: center; color: #6d7a72; background: #f1f4f2; }
.xs-cols i { height: 1.8em; line-height: 1.8em; font-size: .9em; }
.xs-h i { font-weight: 700; color: #1f5f3d; background: #e6f3eb; }
.xs-view { height: calc(var(--v) * 2em); overflow: hidden; }
.oz-xs.scroll .xs-rows { animation: xsScroll 6s cubic-bezier(.45, .05, .35, 1) .2s forwards; }
@keyframes xsScroll { to { translate: 0 calc((var(--v) - var(--n)) * 2em); } }
.xs-rows .x-g { color: #1b6b3f; background: #e3f4e9; }
.xs-rows .x-a { color: #8a5a0b; background: #fdf1d8; }
.xs-rows .x-r { color: #a3322b; background: #fbe4e1; }
.xs-ft { display: flex; align-items: center; gap: .4em; padding: 0 .8em .35em; border-top: 1px solid #e3e8e5; font-size: .9em; background: #f3f6f4; }
.xs-ft i { padding: .25em .9em; border-radius: 0 0 .3em .3em; font-style: normal; font-weight: 600; color: #1f7a4d; background: #fff; box-shadow: inset 0 -2px 0 #1f7a4d; }
.xs-ft span { color: #8a9990; }

/* ── the cover: the three views ── */
.oz-cov .oz-body { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.6svh, 28px); padding-bottom: clamp(20px, 4svh, 40px); }
.oz-cover { display: flex; flex-direction: column; align-items: center; max-width: 900px; text-align: center; }
.oz-lockup { display: block; width: auto; height: clamp(24px, 4svh, 40px); }
.oz-cov .oz-lockup { height: clamp(34px, 6.4svh, 62px); }
.oz-ch { font-size: clamp(1.9rem, min(3.3vw, 5.6svh), 3.5rem); }
.oz-cover .oz-lede { max-width: 58ch; }
.oz-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; margin: clamp(12px, 2svh, 20px) 0 0; }
.oz-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 999px; font-size: .92rem; font-weight: 800; color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 16px 30px -14px rgba(226, 69, 62, .95); transition: transform .3s var(--pop), box-shadow .3s; }
.oz-btn svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.oz-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(226, 69, 62, 1); }
.oz-btn:hover svg { transform: translateX(4px); }
.oz-link { font-size: .9rem; font-weight: 700; color: var(--o-ink); text-decoration: underline; text-decoration-color: rgba(226, 85, 76, .45); text-underline-offset: 5px; text-decoration-thickness: 2px; transition: color .2s; }
.oz-link:hover { color: var(--x-deep); }
.oz-cover > * { transition: none; }
.oz.is-play .oz-cover > * { animation: ozUp .7s var(--out) both; }
.oz.is-play .oz-cover > :nth-child(2) { animation-delay: .06s; }
.oz.is-play .oz-cover > :nth-child(3) { animation-delay: .12s; }
.oz.is-play .oz-cover > :nth-child(4) { animation-delay: .18s; }
.oz.armed:not(.is-play) .oz-cover > * { opacity: 0; }
.oz-views { position: relative; flex: 1; min-height: 0; width: 100%; container-type: size; perspective: 1600px; }
.oz-view { --vw: min(38cqw, calc((100cqh - 56px) / .62 * .96), 560px); position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; width: var(--vw); transform: translate(calc(-50% + var(--vx, 0%)), -50%) rotateY(var(--vr, 0deg)) scale(var(--vs, 1)); transition: transform .7s var(--out), filter .5s, opacity .5s; }
.oz-view.v-admin { --vx: -64%; --vr: 14deg; --vs: .9; }
.oz-view.v-mgmt { --vx: 64%; --vr: -14deg; --vs: .9; }
.oz-view.v-mentor { z-index: 3; }
.oz-view .ozw { width: 100%; }
.oz-view:hover, .oz-view:focus-visible { z-index: 5; --vr: 0deg; --vs: 1.03; outline: none; }
.oz-views:hover .oz-view:not(:hover) { filter: saturate(.8) brightness(.97); }
.oz-vl { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 16px; border-radius: 16px; text-align: center; background: #fff; box-shadow: 0 0 0 1px var(--o-line), 0 12px 24px -16px rgba(150, 50, 35, .55); transition: transform .4s var(--pop), box-shadow .4s; }
.oz-vl b { font-size: .92rem; font-weight: 800; color: var(--o-ink); }
.oz-vl i { font-style: normal; font-size: .74rem; font-weight: 600; color: var(--o-3); }
.oz-view:hover .oz-vl { transform: translateY(-3px); box-shadow: 0 0 0 1.5px rgba(226, 85, 76, .55), 0 14px 26px -14px rgba(226, 85, 76, .7); }
.oz-view:hover .oz-vl b { color: var(--x-deep); }
.oz-view:hover .ozw { box-shadow: 0 0 0 1.5px rgba(226, 85, 76, .35), 0 60px 100px -50px rgba(120, 40, 30, .6); }
.oz.is-play .oz-view { animation: ozFan 1s var(--out) both; animation-delay: calc(.25s + var(--j) * .12s); }
.oz.armed:not(.is-play) .oz-view { opacity: 0; }
@keyframes ozFan { from { opacity: 0; transform: translate(-50%, -38%) rotateY(0deg) scale(.8); } }

/* ── 6 · the report: the laptop behind, the PDF hovering over it ── */
.oz-rstage { display: block; }
.oz-rstage > .mn { position: absolute; left: 0; top: 0; bottom: 0; height: fit-content; margin: auto 0; width: min(76%, calc((100cqh - 24px) / .84)); }
.oz-art { position: absolute; right: 3%; top: 50%; z-index: 7; height: min(calc(100cqh - 70px), var(--mh, 600px)); max-width: 56%; aspect-ratio: var(--aw) / var(--ah); translate: 0 -48%; }
.art-stack { position: relative; width: 100%; height: 100%; }
.art-pg { position: absolute; left: 50%; top: 50%; width: calc(var(--aw) * 1px); height: calc(var(--ah) * 1px); overflow: hidden; border-radius: 22px; text-align: left; background: #fff; box-shadow: 0 30px 60px -30px rgba(60, 30, 30, .55), 0 0 0 1px rgba(0, 0, 0, .06); transform: translate(-50%, -50%) translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, 0deg)) scale(var(--ps, .6)); transition: transform .75s var(--out), box-shadow .4s; cursor: pointer; pointer-events: auto; }
.rp-pg { padding: 30px 36px 30px; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; color: #222; }
.art-pg.pos-0 { z-index: 3; --fx: 0px; --fy: 0px; --fr: 0deg; }
.art-pg.pos-1 { z-index: 2; --fx: 26px; --fy: -14px; --fr: 4deg; }
.art-pg.pos-2 { z-index: 1; --fx: 48px; --fy: -26px; --fr: 7.5deg; }
.art-pg:hover { box-shadow: 0 40px 70px -30px rgba(60, 30, 30, .6), 0 0 0 1.5px rgba(226, 85, 76, .4); }
.art-stack.is-wait { opacity: 0; }
.rp-hd { display: flex; justify-content: space-between; }
.rp-hd > div { display: flex; flex-direction: column; }
.rp-torii { width: 108px; height: auto; margin-bottom: 14px; }
.rp-hd b { font-size: 14px; }
.rp-hd i { font-style: normal; font-size: 10.5px; color: #5a6a86; }
.rp-hr { align-items: flex-end; text-align: right; }
.rp-hr img { width: 118px; height: auto; margin-bottom: 8px; }
.rp-t { margin: 10px 0 0; padding-bottom: 12px; border-bottom: 3px solid #c65152; font-size: 20px; font-weight: 700; }
.rp-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 2px; }
.rp-meta p { margin: 0; padding-left: 10px; border-left: 2px solid #e3e6ea; }
.rp-meta i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .08em; color: #6b778c; }
.rp-meta b { display: block; font-size: 10.5px; line-height: 1.25; word-break: break-word; }
.rp-h { margin: 13px 0 0; padding-left: 9px; border-left: 3px solid #c65152; font-size: 14px; font-weight: 700; }
.rp-sub { margin: 4px 0 0; font-size: 10.5px; color: #6b778c; }
.rp-bands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.rp-band { display: flex; flex-direction: column; margin: 0; padding: 8px 10px; border: 1px solid #e3e6ea; border-top: 3px solid var(--bc); border-radius: 4px; }
.rp-band i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--bt); }
.rp-band span { font-size: 9px; color: #6b778c; }
.rp-band b { font-size: 20px; line-height: 1.15; }
.rp-band em { font-style: normal; font-size: 9px; color: #6b778c; }
.rp-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 11px; }
.rp-box { padding: 9px 10px; border: 1.5px solid; border-radius: 5px; transition: box-shadow .4s, transform .4s var(--pop); }
.rp-box b { display: block; font-size: 11.5px; }
.rp-box ul { margin: 4px 0 0; padding-left: 12px; font-size: 8.8px; line-height: 1.4; color: #333; }
.rp-box li + li { margin-top: 4px; }
.rp-box.pos { border-color: #9fd0b0; background: #f3faf5; }
.rp-box.pos b { color: #3f8f5c; }
.rp-box.imp { border-color: #e6c08f; background: #fdf7ee; }
.rp-box.imp b { color: #b0782c; }
.rp-box.crit { border-color: #e4a4a9; background: #fcf1f2; }
.rp-box.crit b { color: #b8454f; }
.rp-pg.lit .rp-box { box-shadow: 0 0 0 3px rgba(226, 85, 76, .25); }
.rp-tb { margin-top: 10px; border: 1px solid #e3e6ea; border-radius: 4px; overflow: hidden; }
.rp-tb p { display: grid; margin: 0; padding: 8px 10px; font-size: 10.5px; border-top: 1px solid #eef0f3; }
.rp-tb .rp-th { font-weight: 700; background: #f5f6f8; border-top: 0; }
.rp-avg p { grid-template-columns: 1.6fr 1fr 1fr .8fr; }
.rp-avg p span:nth-child(n+2) { text-align: center; }
.rp-avg .b-g { color: #5572bd; font-weight: 700; }
.rp-avg .b-p { color: #b8545c; font-weight: 700; }
.rp-avg .b-a { color: #a8792c; font-weight: 700; }
.rp-br p { grid-template-columns: 1.2fr .9fr repeat(5, 1fr); }
.rp-sw p { grid-template-columns: 1.7fr repeat(4, 1fr) .8fr; align-items: center; padding: 4px 10px; }
.rp-sw p > span:nth-child(n+2) { text-align: center; }
.rp-sw .rp-th span { font-size: 10px; }
.rp-sw .rp-th .b-p { color: #b8545c; } .rp-sw .rp-th .b-a { color: #a8792c; } .rp-sw .rp-th .b-g { color: #5572bd; } .rp-sw .rp-th .b-o { color: #4e9a6c; }
.rp-sw p > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.rp-sw s { display: flex; gap: 1px; width: 110px; height: 5px; text-decoration: none; }
.rp-sw s i { width: calc(var(--w) * 1%); border-radius: 2px; background: var(--bc); }
.rp-sw p > span:not(:first-child) { display: flex; flex-direction: column; line-height: 1.2; }
.rp-sw span.b-p b { color: #b8545c; } .rp-sw span.b-a b { color: #a8792c; } .rp-sw span.b-g b { color: #5572bd; } .rp-sw span.b-o b { color: #4e9a6c; }
.rp-sw em { font-style: normal; font-size: 8.5px; color: #8a94a6; }
/* the pages behind are blank sheets until brought forward */
.art-pg > * { transition: opacity .35s; }
.art-pg:not(.pos-0) > * { opacity: 0; }
.rp-br p span:nth-child(n+2) { text-align: center; }
.rp-pg.lit .rp-tb { box-shadow: 0 0 0 3px rgba(226, 85, 76, .25); }
.rp-recs { margin: 10px 0 0; padding: 10px 12px 10px 30px; border: 1px solid #e3e6ea; border-left: 3px solid #c65152; border-radius: 4px; font-size: 10.5px; line-height: 1.5; background: #fcfcfd; }
.rp-recs li { padding-left: 4px; }
.rp-recs li + li { margin-top: 6px; }
.rp-recs li::marker { font-weight: 700; color: #c65152; }
.rp-pg.lit .rp-recs { box-shadow: 0 0 0 3px rgba(226, 85, 76, .25); }
.rp-foot { position: absolute; left: 38px; right: 38px; bottom: 22px; display: flex; justify-content: space-between; margin: 0; padding-top: 8px; border-top: 1px solid #e3e6ea; font-size: 9px; color: #6b778c; }


/* ════ the artifacts: cards and sheets, drawn big and legible ════ */
.ac { display: flex; flex-direction: column; padding: 24px 26px 20px; font-family: var(--oj); color: var(--o-ink); background: linear-gradient(170deg, #fff 0%, #fffaf8 60%, #fff4f0 100%); }
.ac p { margin: 0; }
.ac svg { display: block; }
.ac-hd { display: flex; align-items: center; gap: 11px; margin-bottom: 16px !important; }
.ac-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #ff8a5c, #e2453e); box-shadow: 0 10px 18px -10px rgba(226, 69, 62, .95); }
.ac-ic svg { width: 20px; height: 20px; }
.ac-hd b { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.ac-hd em { flex: none; padding: 5px 11px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--x-deep); background: var(--x-tint); }
.ac-hd em.ok { color: #1f7a5e; background: #e1f4ec; }
.ac-hd em.bad { color: #fff; background: #d9443c; }
.ac-k { margin: 16px 0 8px !important; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--o-3); }
.ac-ft { margin-top: auto !important; padding-top: 13px; border-top: 1px dashed rgba(226, 85, 76, .28); font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--o-2); }
.ac-ft b { color: var(--o-ink); }
.art-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; background: #e2554c; box-shadow: 0 0 0 2.5px #fff; }
.art-av.c1 { background: #f29b38; } .art-av.c2 { background: #2f9e86; } .art-av.c3 { background: #c2417a; } .art-av.c4 { background: #5b7fd1; }
.art-av.more { width: auto; padding: 0 10px; border-radius: 999px; font-size: 11.5px; color: var(--o-2); background: #f3ebe9; }
/* a sheet coming forward: its parts come up in turn */
.art-pg.cur.ac > * { animation: artUp .55s var(--out) both; }
.art-pg.cur.ac > :nth-child(2) { animation-delay: .06s; }
.art-pg.cur.ac > :nth-child(3) { animation-delay: .12s; }
.art-pg.cur.ac > :nth-child(4) { animation-delay: .18s; }
.art-pg.cur.ac > :nth-child(5) { animation-delay: .24s; }
.art-pg.cur.ac > :nth-child(6) { animation-delay: .3s; }
.art-pg.cur.ac > :nth-child(n+7) { animation-delay: .36s; }
@keyframes artUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes artPop { from { opacity: 0; transform: scale(.6); } }

/* an Excel sheet */
.ax { display: flex; flex-direction: column; border-radius: 12px; font-family: "Segoe UI", Arial, Helvetica, sans-serif; color: #222; }
.ax p { margin: 0; }
.ax-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #fff; background: linear-gradient(90deg, #1f7a4d, #2a9461); }
.ax-bar span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .2); }
.ax-bar svg { width: 16px; height: 16px; }
.ax-bar b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.ax-bar em { margin-left: auto; font-style: normal; font-size: 11.5px; opacity: .85; }
.ax-rib { display: flex; gap: 18px; padding: 8px 16px 0; font-size: 12px; color: #4b5b51; background: #f3f6f4; border-bottom: 1px solid #dfe7e2; }
.ax-rib i { padding-bottom: 7px; font-style: normal; }
.ax-rib i.on { font-weight: 700; color: #1f7a4d; box-shadow: inset 0 -2px #1f7a4d; }
.ax-fx { display: flex; align-items: center; gap: 12px; padding: 6px 12px; font-size: 12.5px; border-bottom: 1px solid #e3e8e5; }
.ax-fx b { padding-right: 12px; font-family: Georgia, serif; font-style: italic; font-weight: 400; color: #777; border-right: 1px solid #e3e8e5; }
.ax-grid { flex: 1; min-height: 0; overflow: hidden; }
.ax-cols, .ax-r { display: grid; grid-template-columns: 30px var(--cols); }
.ax-cols i { padding: 4px 0; font-style: normal; font-size: 11px; color: #6b7d71; text-align: center; background: #f3f7f4; border-right: 1px solid #e3e8e5; border-bottom: 1px solid #dfe7e2; }
.ax-r > * { min-width: 0; padding: 8px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; border-right: 1px solid #eef1ef; border-bottom: 1px solid #eef1ef; }
.ax-r > i:first-child { padding-inline: 0; font-style: normal; font-size: 11px; color: #8a9a8f; text-align: center; background: #f3f7f4; }
.ax-h > span { font-size: 12.5px; font-weight: 700; color: #1f5f3d; background: #eaf5ee; }
.ax-st { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #1f7a4d; opacity: 0; transition: opacity .3s; }
.ax-st svg { width: 13px; height: 13px; padding: 2px; border-radius: 50%; color: #fff; background: #1f9573; }
.ax.up .ax-st { opacity: 1; transition-delay: calc(var(--j) * 90ms); }
.ax.up .ax-r:not(.ax-h) { animation: axRow .9s ease both; animation-delay: calc(var(--j) * 90ms); }
@keyframes axRow { 30% { background: #e6f4ea; } }
.art-pg.cur.ax .ax-r:not(.ax-h) { animation: axIn .4s var(--out) both; animation-delay: calc(.25s + var(--j) * 75ms); }
@keyframes axIn { from { opacity: 0; transform: translateX(-12px); } }
.ax-acc { font-weight: 700; background: linear-gradient(90deg, rgba(82, 173, 86, .28) calc(var(--a) * 1%), transparent 0) !important; }
.ax-tabs { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; font-size: 12px; background: #f3f6f4; border-top: 1px solid #dfe7e2; }
.ax-tabs b { padding: 6px 14px; font-weight: 600; color: #1f7a4d; background: #fff; box-shadow: inset 0 -2px #1f7a4d; }
.ax-tabs i { padding: 6px 10px; font-style: normal; color: #6b7d71; }
.ax-tabs em { margin-left: auto; font-style: normal; color: #6b7d71; }

/* 1 · the college, the uploaded students */
.ao-id { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--o-line), 0 16px 30px -24px rgba(120, 40, 30, .6); }
.ao-logo { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; font-size: 14px; font-weight: 800; letter-spacing: .03em; color: #fff; background: linear-gradient(135deg, #e2453e, #f08a3c); }
.ao-id p { display: flex; flex-direction: column; gap: 3px; }
.ao-id b { font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.ao-id i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--o-3); }
.ao-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ao-chips span { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--x-deep); background: var(--x-tint); }
.ao-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ao-list span { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border-radius: 11px; background: #faf5f4; transition: background .3s, box-shadow .3s; }
.ao-list b { flex: none; width: 42px; font-size: 12px; font-weight: 800; color: var(--o-2); }
.ao-list i { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: normal; font-size: 12px; color: var(--o-3); }
.ao-list span.on { background: #fff; box-shadow: 0 0 0 1.5px #e2554c, 0 10px 18px -12px rgba(226, 85, 76, .7); }
.ao-list span.on b { color: var(--x-deep); }
.ao-list span.on i { color: var(--o-ink); }
.ad-big { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #1f9573, #2fb58f); box-shadow: 0 22px 34px -20px rgba(31, 149, 115, .9); }
.ad-burst { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.ad-burst svg { width: 26px; height: 26px; }
.art-pg.cur .ad-burst { animation: artPop .6s var(--pop) .3s both; }
.ad-big p { display: flex; flex-direction: column; }
.ad-big b { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ad-big i { margin-top: 3px; font-style: normal; font-size: 13.5px; font-weight: 600; opacity: .92; }
.ad-meta { display: grid; grid-template-columns: .7fr .7fr 1.6fr; gap: 8px; margin-top: 12px !important; }
.ad-meta p { display: flex; flex-direction: column; min-width: 0; padding: 9px 11px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--o-line); }
.ad-meta i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--o-3); }
.ad-meta b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 800; }
.ad-accs { display: grid; gap: 7px; }
.ad-accs p { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--o-line); }
.ad-accs span:not(.art-av) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ad-accs b { font-size: 14px; font-weight: 800; }
.ad-accs i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--o-3); }
.ad-accs em { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 700; color: #1f7a5e; background: #e1f4ec; }
.ad-accs em svg { width: 11px; height: 11px; }

/* 2 · batches */
.abo { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 20px; }
.abo-dn { position: relative; display: grid; place-items: center; }
.abo-dn svg { width: 150px; transform: rotate(-90deg); }
.abo-dn circle { fill: none; stroke-width: 5.5; }
.abo-dn .bg { stroke: #fbe3de; }
.abo-dn .fg { stroke: #52ad56; stroke-linecap: round; stroke-dasharray: 93.9 100; }
.art-pg.cur .abo-dn .fg { animation: artRing 1.3s var(--out) .2s both; }
@keyframes artRing { from { stroke-dasharray: 0 100; } }
.abo-dn p { position: absolute; display: flex; flex-direction: column; align-items: center; }
.abo-dn b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.abo-dn b i { font-style: normal; font-size: 16px; color: var(--o-3); }
.abo-dn em { font-style: normal; font-size: 12px; font-weight: 700; color: #3f9a45; }
.abo-st { display: grid; gap: 8px; }
.abo-st p { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: inset 3px 0 0 #c65152, 0 0 0 1px var(--o-line); }
.abo-st p.g { box-shadow: inset 3px 0 0 #52ad56, 0 0 0 1px var(--o-line); }
.abo-st p.bl { box-shadow: inset 3px 0 0 #52a5d2, 0 0 0 1px var(--o-line); }
.abo-st p.r { box-shadow: inset 3px 0 0 #d02023, 0 0 0 1px var(--o-line); }
.abo-st i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--o-3); }
.abo-st b { grid-row: span 2; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.abo-st em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--o-2); }
.ab { padding-top: 0; }
.ab-band { margin: 0 -26px; padding: 22px 26px 20px; color: #fff; background: radial-gradient(80% 120% at 100% 0%, rgba(255, 200, 150, .45), transparent 60%), linear-gradient(120deg, #e2453e, #f08a3c); }
.ab-band p { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; opacity: .92; }
.ab-band p span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .22); }
.ab-band svg { width: 14px; height: 14px; }
.ab-band b { display: block; margin-top: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; word-break: break-word; }
.ab-big { display: flex; align-items: baseline; gap: 10px; margin-top: 16px !important; }
.ab-big b { font-size: 56px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(95deg, #e2453e, #f08a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-big i { font-style: normal; font-size: 16px; font-weight: 700; color: var(--o-2); }
.ab-big em { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 12px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 700; color: #3f9a45; background: #e6f4e7; }
.ab-big em svg { width: 14px; height: 14px; }
.ab-avs { display: flex; align-items: center; margin-top: 14px !important; }
.ab-avs .art-av + .art-av { margin-left: -9px; }
.art-pg.cur .ab-avs .art-av { animation: artPop .45s var(--pop) both; }
.art-pg.cur .ab-avs .art-av:nth-child(2) { animation-delay: .05s; } .art-pg.cur .ab-avs .art-av:nth-child(3) { animation-delay: .1s; }
.art-pg.cur .ab-avs .art-av:nth-child(4) { animation-delay: .15s; } .art-pg.cur .ab-avs .art-av:nth-child(5) { animation-delay: .2s; }
.art-pg.cur .ab-avs .art-av:nth-child(6) { animation-delay: .25s; } .art-pg.cur .ab-avs .art-av:nth-child(7) { animation-delay: .3s; }
.ab-kv { display: grid; margin-top: 14px !important; }
.ab-kv p { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px dashed #f0dfda; }
.ab-kv i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--o-3); }
.ab-kv b { font-size: 13px; font-weight: 700; line-height: 1.35; }
.ab-kv b.g { color: #3f9a45; }
.ab-acts { display: flex; gap: 8px; margin-top: 12px !important; }
.ab-acts span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.ab-acts svg { width: 13px; height: 13px; }
.ab-acts .e { color: #3d8fbd; border-color: #9ccbe6; }
.ab-acts .d { color: #c9282b; border-color: #eba5a6; }
.af-srch { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1.5px solid #ecdcd7; border-radius: 13px; font-size: 13px; color: var(--o-3); background: #fff; }
.af-srch svg { width: 16px; height: 16px; color: var(--x-deep); }
.af-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.af-chips span { padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--o-2); background: #f5eeec; }
.af-chips span.on { color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); }
.af-chips s { margin-left: 3px; text-decoration: none; opacity: .8; }
.af-res { display: grid; gap: 9px; margin-top: 16px !important; }
.af-res p { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; align-items: baseline; }
.af-res b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 700; }
.af-res em { font-style: normal; font-size: 13px; font-weight: 800; color: #3d8fbd; font-variant-numeric: tabular-nums; }
.af-res s { grid-column: 1 / -1; height: 8px; border-radius: 5px; background: #f5ecea; text-decoration: none; overflow: hidden; }
.af-res s i { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: 5px; background: linear-gradient(90deg, #7bbfe0, #3d8fbd); transform-origin: 0 50%; }
.art-pg.cur .af-res s i { animation: artGrow .9s var(--out) both; animation-delay: calc(.3s + var(--j) * .08s); }
@keyframes artGrow { from { transform: scaleX(0); } }

/* 3 · mentors */
.am-login { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--o-line), 0 18px 30px -24px rgba(120, 40, 30, .6); }
.am-login img { width: auto; height: 32px; margin: 0 auto 2px; }
.am-f { display: flex; flex-direction: column; gap: 2px; padding: 7px 11px; border: 1px solid #e6dcd9; border-radius: 10px; }
.am-f i { font-style: normal; font-size: 10.5px; color: var(--o-3); }
.am-f b { font-size: 13px; font-weight: 600; }
.am-btn { margin-top: 2px; padding: 9px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; background: #c65152; }
.am-menu { display: flex; gap: 8px; }
.am-menu span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 10px 18px -10px rgba(226, 69, 62, .9); }
.am-menu svg { width: 15px; height: 15px; }
.am-hid { display: flex; flex-wrap: wrap; gap: 6px; }
.am-hid s { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #b3a6a9; background: #f6f1f0; text-decoration-color: rgba(179, 166, 169, .8); }
.at-total { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--o-line), 0 18px 30px -24px rgba(120, 40, 30, .6); }
.at-total > b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 38px; font-weight: 600; letter-spacing: -.02em; color: #c65152; }
.at-total p { display: flex; flex-direction: column; gap: 2px; }
.at-total i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--o-2); }
.at-total i b { color: var(--o-ink); }
.at-rows { display: grid; gap: 12px; margin-top: 18px !important; }
.at-rows p { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 6px; column-gap: 12px; align-items: center; }
.at-rows p > span { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #c65152; background: #fbeceb; }
.at-rows svg { width: 17px; height: 17px; }
.at-rows b { font-size: 14px; font-weight: 800; }
.at-rows em { font-family: "IBM Plex Mono", ui-monospace, monospace; font-style: normal; font-size: 15px; font-weight: 600; color: var(--o-ink); font-variant-numeric: tabular-nums; }
.at-rows s { grid-column: 2 / -1; height: 8px; border-radius: 5px; background: #f5ecea; text-decoration: none; overflow: hidden; }
.at-rows s i { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: 5px; background: linear-gradient(90deg, #f0a86a, #c65152); transform-origin: 0 50%; }
.art-pg.cur .at-rows s i { animation: artGrow 1s var(--out) both; animation-delay: calc(.35s + var(--j) * .1s); }
.al-pods { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 10px; }
.al-pd { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.al-pd .art-av { width: 46px; height: 46px; font-size: 14px; }
.al-pd s { color: #f5b73b; text-decoration: none; }
.al-pd s svg { width: 22px; height: 22px; margin-bottom: -4px; }
.al-pd b { margin-top: 4px; font-size: 13.5px; font-weight: 800; }
.al-pd > i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--o-3); }
.al-pd > span:not(.art-av) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; width: 100%; margin-top: 6px; padding-top: 10px; border-radius: 12px 12px 0 0; font-size: 12px; font-weight: 700; color: #fff; }
.al-pd > span:not(.art-av) em { font-style: normal; font-size: 22px; font-weight: 800; line-height: 1; }
.al-pd.p1 > span:not(.art-av) { height: 104px; background: linear-gradient(180deg, #f5b73b, #e8903a); }
.al-pd.p2 > span:not(.art-av) { height: 78px; background: linear-gradient(180deg, #c9c1c3, #a89ea1); }
.al-pd.p3 > span:not(.art-av) { height: 62px; background: linear-gradient(180deg, #e8a57a, #c9784b); }
.art-pg.cur .al-pd > span:not(.art-av) { animation: alRise .8s var(--pop) both; animation-delay: calc(.2s + var(--j) * .12s); transform-origin: 50% 100%; }
@keyframes alRise { from { transform: scaleY(0); } }
.al-rest { display: grid; gap: 6px; margin-top: 12px !important; }
.al-rest p { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--o-line); }
.al-rest p > b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11.5px; font-weight: 800; color: var(--x-deep); background: var(--x-tint); }
.al-rest span { font-size: 13.5px; font-weight: 800; }
.al-rest em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--o-3); }
.al-rest i { font-style: normal; font-size: 12.5px; font-weight: 800; color: #3f9a45; }

/* 4 · a batch's results */
.ar-f { display: flex; flex-direction: column; gap: 5px; margin-top: 10px !important; }
.ar-f:first-of-type { margin-top: 0 !important; }
.ar-f i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #d9674f; }
.ar-f b { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1.5px solid #ecdcd7; border-radius: 12px; font-size: 13px; font-weight: 700; background: #fff; }
.ar-f b svg { flex: none; width: 14px; height: 14px; color: var(--o-3); }
.ar-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ar-chips span { padding: 4px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: #4a4a4a; background: #f3eeec; }
.art-pg.cur .ar-chips span { animation: artPop .35s var(--pop) both; animation-delay: calc(.25s + var(--j) * .04s); }
.ar-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-btns { display: flex; gap: 8px; margin-top: 14px !important; }
.ar-btns span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: #fff; background: #c65152; }
.ar-btns span.x { background: #3fae54; }
.ar-btns svg { width: 13px; height: 13px; }
.as-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 18px; }
.as-ring { position: relative; display: grid; place-items: center; }
.as-ring svg { width: 150px; transform: rotate(-90deg); }
.as-ring circle { fill: none; stroke-width: 5; }
.as-ring .bg { stroke: #e3f1e5; }
.as-ring .fg { stroke: #52ad56; stroke-linecap: round; stroke-dasharray: 64 100; }
.art-pg.cur .as-ring .fg { animation: artRing 1.3s var(--out) .2s both; }
.as-ring p { position: absolute; display: flex; flex-direction: column; align-items: center; }
.as-ring b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #3f9a45; }
.as-ring i { max-width: 80px; font-style: normal; font-size: 11px; font-weight: 700; text-align: center; color: var(--o-3); }
.as-st { display: grid; gap: 8px; }
.as-st p { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--o-line); }
.as-st b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.as-st i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--o-2); }
.as-st p.a b { color: #c98522; }
.as-top3 { display: grid; gap: 7px; }
.as-top3 p { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px var(--o-line); }
.as-top3 span:not(.art-av) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.as-top3 b { font-size: 13.5px; font-weight: 800; }
.as-top3 i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--o-3); }
.as-top3 em { font-style: normal; font-size: 15px; font-weight: 800; color: #3f9a45; }

/* 5 · the college */
.cb-lab { margin-bottom: 8px !important; font-size: 12.5px; font-weight: 700; color: var(--o-2); }
.cb-bar { display: flex; gap: 3px; height: 10px; text-decoration: none; }
.cb-bar i { width: calc(var(--w) * 1%); min-width: 0; border-radius: 4px; background: var(--bc); transform-origin: 0 50%; }
.cb-bar.big { height: 26px; }
.cb-bar.big i { border-radius: 8px; }
.art-pg.cur .cb-bar i { animation: artGrow .9s var(--out) .25s both; }
.cb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.cb-tiles p { display: flex; flex-direction: column; padding: 11px 13px; border: 1px solid #efe4e1; border-top: 4px solid var(--bc); border-radius: 12px; background: #fff; }
.cb-tiles i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--bt); }
.cb-tiles span { font-size: 11px; color: var(--o-3); }
.cb-tiles b { margin-top: 2px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cb-tiles em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--o-3); }
.art-pg.cur .cb-tiles p { animation: artUp .5s var(--out) both; animation-delay: calc(.3s + var(--j) * .08s); }
.cs-big { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 20px; background: #fdf0ef; box-shadow: inset 0 0 0 1.5px rgba(205, 124, 129, .45); }
.cs-big > b { font-size: 64px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #b8545c; font-variant-numeric: tabular-nums; }
.cs-big p { display: flex; flex-direction: column; gap: 2px; }
.cs-big i { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--o-2); }
.cs-big strong { color: #b8545c; }
.cs-rows { display: grid; gap: 10px; margin-top: 16px !important; }
.cs-rows p { display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px 50px; align-items: center; gap: 10px; }
.cs-rows i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--bt); }
.cs-rows s { height: 12px; border-radius: 6px; background: #f5ecea; text-decoration: none; overflow: hidden; }
.cs-rows s em { display: block; width: calc(var(--w) * 1%); height: 100%; border-radius: 6px; background: var(--bc); transform-origin: 0 50%; }
.art-pg.cur .cs-rows s em { animation: artGrow 1s var(--out) both; animation-delay: calc(.3s + var(--j) * .1s); }
.cs-rows b { font-size: 16px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.cs-rows span { font-size: 12px; font-weight: 600; color: var(--o-3); text-align: right; }
.cs-note { display: flex; align-items: center; gap: 9px; margin-top: 16px !important; padding: 11px 13px; border-radius: 13px; font-size: 13px; font-weight: 600; line-height: 1.4; color: #8a3f45; background: #fff3f1; }
.cs-note svg { flex: none; width: 18px; height: 18px; color: #c9282b; }
.cs-note b { color: #b8545c; }
.ck-rows { display: grid; gap: 12px; }
.ck-rows p { display: grid; grid-template-columns: 30px 86px minmax(0, 1fr) 58px; align-items: center; gap: 10px; }
.ck-l { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--o-2); background: #f3eeec; }
.ck-rows b { font-size: 13.5px; font-weight: 800; }
.ck-rows em { font-style: normal; font-size: 15px; font-weight: 800; text-align: right; color: var(--bt); font-variant-numeric: tabular-nums; }
.ck-rows .cb-bar { height: 12px; }
.ck-ov { padding-top: 12px; border-top: 1px dashed #f0dfda; }
.ck-ov .ck-l { color: #c65152; background: #fbe4e4; }
.cb-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px !important; font-size: 12px; font-weight: 700; color: var(--o-2); }
.cb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cb-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--bc); }
.ck-br { display: grid; gap: 7px; }
.ck-br p { display: grid; grid-template-columns: 50px 86px minmax(0, 1fr) 52px; align-items: center; gap: 10px; }
.ck-br b { font-size: 13px; font-weight: 800; }
.ck-br i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--o-3); }
.ck-br s { height: 8px; border-radius: 5px; background: #f5ecea; text-decoration: none; overflow: hidden; }
.ck-br s em { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: 5px; background: linear-gradient(90deg, #e8c08a, #c98522); transform-origin: 0 50%; }
.art-pg.cur .ck-br s em { animation: artGrow .9s var(--out) both; animation-delay: calc(.5s + var(--j) * .08s); }
.ck-br strong { font-size: 13.5px; font-weight: 800; text-align: right; color: #a8792c; }
.am-hid em { padding: 4px 10px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--o-3); }


/* ════ the laptop: the site's own mock-up, tilted toward the words; it opens as the page arrives ════ */
.oz-stage { position: relative; display: grid; place-items: center; min-width: 0; height: 100%; perspective: 2400px; perspective-origin: 50% 42%; }
.oz-stage::before { content: ""; position: absolute; z-index: -2; left: 2%; right: 2%; top: 8%; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 168, 138, .38), rgba(255, 205, 186, .14) 56%, transparent 76%); pointer-events: none; }
.oz-num { position: absolute; z-index: -1; left: -1%; top: -2%; margin: 0; font-family: var(--sans); font-size: min(44cqh, 28cqw); font-weight: 800; line-height: .76; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 2px rgba(226, 85, 76, .2); pointer-events: none; user-select: none; }
.oz-flip .oz-num { left: auto; right: -1%; }
.oz.is-play .oz-num { animation: ozNum 1.5s var(--out) both .1s; }
.oz.armed:not(.is-play) .oz-num { opacity: 0; }
@keyframes ozNum { from { opacity: 0; translate: 0 50px; } }
.mn { --ry: -13deg; --rx: 5deg; --px: 0; --py: 0; position: relative; display: flex; flex-direction: column; align-items: center; width: min(96%, calc((100cqh - 24px) / .84)); container-type: inline-size; transform-style: preserve-3d; transform: rotateY(calc(var(--ry) + var(--px) * 5deg)) rotateX(calc(var(--rx) - var(--py) * 4deg)); transition: transform .9s var(--out); }
.oz-flip .mn { --ry: 13deg; }
/* arriving: the monitor comes down into place, its stand extends down to the base, the screen comes on */
.oz.is-play .oz-stage > .mn { animation: mnIn 1s var(--out) both; }
.oz.armed:not(.is-play) .oz-stage > .mn { opacity: 0; }
@keyframes mnIn { from { opacity: 0; translate: 0 -46px; scale: .95; } }
/* the frame: graphite, a hairline of metal at its edge, the black glass inside */
.mn-body { position: relative; z-index: 2; width: 100%; padding: 1.25cqw 1.25cqw 0; border-radius: 1.5cqw 1.5cqw 1.7cqw 1.7cqw; background: linear-gradient(165deg, #3e4046 0%, #1a1b1e 26%, #0f1012 64%, #2a2c31 100%); box-shadow: 0 0 0 1.2px #9fa2a8, 0 0 0 2.6px #3c3e43, inset 0 0 0 1px rgba(255, 255, 255, .08), 0 44px 70px -34px rgba(40, 18, 16, .5); }
.mn-cam { position: absolute; left: 50%; top: .4cqw; width: .5cqw; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: #34363b; box-shadow: inset 0 0 0 1px #56595f; }
.mn-scr { position: relative; overflow: hidden; border-radius: .3cqw; background: #fff; }
.mn-scr::after { content: ""; position: absolute; inset: 0; z-index: 45; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%); pointer-events: none; }
.mn .ozw { width: 100%; border-radius: 0; box-shadow: none; transition: none; }
.mn-boot { position: absolute; inset: 0; z-index: 44; background: radial-gradient(circle at 50% 44%, #2c2e33 0%, #0c0d0f 70%); opacity: 0; pointer-events: none; }
.oz.armed:not(.is-play) .mn-boot { opacity: 1; }
.oz.is-play .mn-boot { animation: lpBoot .75s ease both .8s; }
@keyframes lpBoot { 0% { opacity: 1; } 35% { opacity: 1; background-color: #fff; } 100% { opacity: 0; } }
/* the chin: a lighter band of the same metal under the glass */
.mn-chin { display: block; height: 6.4cqw; margin: 1.25cqw -1.25cqw 0; border-radius: 0 0 1.7cqw 1.7cqw; background: linear-gradient(180deg, #55575d 0%, #45474c 40%, #34353a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 3px rgba(0, 0, 0, .35); }
/* the stand: a neck of brushed metal, narrowing as it comes down, onto a flat base */
.mn-neck { position: relative; z-index: 1; display: block; width: 21cqw; height: 8.5cqw; margin-top: -.6cqw; background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 22%), linear-gradient(90deg, #4f5257 0%, #7d8086 22%, #a4a7ad 48%, #8a8d93 70%, #56595e 100%); clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%); transform-origin: 50% 0; }
.mn-foot { position: relative; display: block; width: 42cqw; height: 3.2cqw; margin-top: -.3cqw; border-radius: .9cqw .9cqw 1.4cqw 1.4cqw / .9cqw .9cqw 1.2cqw 1.2cqw; background: linear-gradient(180deg, #c9ccd1 0%, #aeb1b6 46%, #7a7d83 72%, #5b5e63 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 8px 12px -8px rgba(0, 0, 0, .4); transform-origin: 50% 0; }
.mn-shadow { position: absolute; z-index: -1; left: 22%; right: 22%; bottom: -2.4%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 18, 16, .36), transparent); pointer-events: none; }
.oz.is-play .mn-neck { animation: mnNeck .75s cubic-bezier(.3, .9, .3, 1) both .3s; }
.oz.is-play .mn-foot { animation: mnFoot .65s cubic-bezier(.3, 1.45, .5, 1) both .78s; }
.oz.is-play .mn-shadow { animation: mnShadow .8s ease both .85s; }
@keyframes mnNeck { from { transform: scaleY(0); } }
@keyframes mnFoot { from { opacity: 0; transform: translateY(-12px) scaleX(.35); } }
@keyframes mnShadow { from { opacity: 0; } }
.oz-chip.ca { right: 0; top: 0; }
.oz-chip.cb { left: 0; bottom: 4%; }
.oz-flip .oz-chip.ca { right: auto; left: 0; }
.oz-flip .oz-chip.cb { left: auto; right: 0; }
/* the camera: a zoom to whatever is being used */
.op-cam { transition: transform .9s cubic-bezier(.45, 0, .2, 1); }
/* Replay, in the stage's corner */
.oz-stage > .oz-replay { position: absolute; z-index: 8; left: 0; bottom: 0; }
.oz-flip .oz-stage > .oz-replay { left: auto; right: 0; }
.oz-flip .oz-rstage > .oz-replay { left: 0; right: auto; }
/* the upload screen's old toast is not used here */
.mn-users .op-toast { display: none; }

/* ════ the badges: out of the screen, at its edges ════ */
.oz-chips { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.oz-chip { position: absolute; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; margin: 0; padding: 12px 20px 12px 12px; border-radius: 20px; white-space: nowrap; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 0 0 1px rgba(226, 85, 76, .16), 0 30px 54px -26px rgba(120, 40, 30, .65), 0 8px 18px -12px rgba(226, 85, 76, .45); opacity: 0; transform: translateY(18px) scale(.7); transition: opacity .35s, transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.oz-chip span { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #ff8a5c, #e2453e); box-shadow: 0 10px 18px -8px rgba(226, 69, 62, .95); }
.oz-chip span svg { width: 22px; height: 22px; }
.oz-chip b { font-size: clamp(1.05rem, 1.4vw, 1.35rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--o-ink); }
.oz-chip i { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--o-3); }
.oz-chip.on { opacity: 1; transform: none; animation: chipFloat 5.5s ease-in-out 1s infinite; }
.oz-chip.cb.on { animation-delay: 2.2s; }
@keyframes chipFloat { 50% { translate: 0 -9px; } }

/* typing into a field */
.op-typ { position: relative; justify-content: flex-start; color: #333; }
.op-typ em { font-style: normal; color: #999; }
.op-typ.on em { display: none; }
.op-typ b, .op-tv { font-weight: 500 !important; color: #222; }
.op-typ.focus, .op-lf.focus { border-color: #e39a9a; box-shadow: 0 0 0 3px rgba(198, 81, 82, .14); }
.op-typ.focus b::after, .op-lf.focus .op-tv::after { content: ""; display: inline-block; width: 1px; height: 11px; margin-left: 1px; vertical-align: -1px; background: #222; animation: opCaret 1s steps(1) infinite; }
@keyframes opCaret { 50% { opacity: 0; } }
.op-lf { transition: border-color .25s, box-shadow .25s; }
.op-batt .op-tr.hide { display: none; }
.op-sel.flash { animation: opSet .6s ease; }

/* the Excel sheet that drops into the upload */
.oz-xl { position: absolute; z-index: 6; right: 0; top: 2%; width: clamp(220px, 30%, 290px); overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(31, 122, 77, .18), 0 28px 44px -20px rgba(20, 70, 40, .5); opacity: 0; transform: translateY(-18px) rotate(5deg) scale(.9); transition: opacity .4s, transform .7s var(--pop); pointer-events: none; font-family: "Segoe UI", Arial, sans-serif; }
.oz-xl.show { opacity: 1; transform: rotate(-2deg); }
.oz-xl.gone { opacity: 0; transition: none; }
.oz-xl p { margin: 0; }
.ox-bar { display: flex; align-items: center; gap: 7px; padding: 8px 10px; color: #fff; background: linear-gradient(90deg, #1f7a4d, #2a9461); }
.ox-bar span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: rgba(255, 255, 255, .22); }
.ox-bar svg { width: 12px; height: 12px; }
.ox-bar b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 600; }
.ox-grid p { display: grid; grid-template-columns: 1.1fr 1.3fr .6fr; border-bottom: 1px solid #eef1ef; }
.ox-grid i { padding: 4px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: normal; font-size: 10.5px; color: #333; border-right: 1px solid #eef1ef; }
.ox-grid p.h i { font-weight: 700; color: #1f5f3d; background: #eaf5ee; }
.ox-ft { padding: 5px 10px; font-size: 10px; color: #6b7d71; background: #f3f6f4; }
/* the file field, as the sheet lands in it */
.op-file .op-fin.land { animation: opLand .7s ease; }
@keyframes opLand { 30% { box-shadow: 0 0 0 4px rgba(63, 174, 84, .35); border-color: #3fae54; } }

/* students created: the card that says so */
.op-done { position: absolute; left: 168px; right: 0; top: 44px; bottom: 0; z-index: 26; display: grid; place-items: center; background: rgba(236, 239, 241, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.op-done.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.op-dcard { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 480px; padding: 30px 30px 22px; border-radius: 14px; text-align: center; background: #fff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .4); transform: scale(.8); transition: transform .55s var(--pop); }
.op-done.show .op-dcard { transform: none; }
.op-dburst { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 4px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #3fae54, #1f9573); box-shadow: 0 12px 24px -10px rgba(31, 149, 115, .8); }
.op-dburst svg { width: 40px; height: 40px; }
.op-done.show .op-dburst { animation: opBurst .6s var(--pop) .1s both; }
@keyframes opBurst { from { transform: scale(0); } }
.op-dburst i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 2px; background: #f08a3c; opacity: 0; }
.op-dburst i:nth-of-type(2) { background: #e2554c; } .op-dburst i:nth-of-type(3) { background: #3fae54; } .op-dburst i:nth-of-type(4) { background: #52a5d2; } .op-dburst i:nth-of-type(5) { background: #e8a13a; } .op-dburst i:nth-of-type(6) { background: #c2417a; }
.op-done.show .op-dburst i { animation: opConf .9s cubic-bezier(.2, .7, .3, 1) .25s both; }
.op-dburst i:nth-of-type(1) { --dx: -56px; --dy: -30px; } .op-dburst i:nth-of-type(2) { --dx: 58px; --dy: -26px; } .op-dburst i:nth-of-type(3) { --dx: -44px; --dy: 30px; }
.op-dburst i:nth-of-type(4) { --dx: 46px; --dy: 34px; } .op-dburst i:nth-of-type(5) { --dx: 0px; --dy: -58px; } .op-dburst i:nth-of-type(6) { --dx: 8px; --dy: 56px; }
@keyframes opConf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(200deg); } }
.op-dcard > b { font-size: 20px; font-weight: 600; color: #222; }
.op-dcard > p { font-size: 12.5px; color: #777; }
.op-dok { margin-top: 8px; padding: 8px 28px; font-size: 12px; }


/* ════ the step number, heading the copy ════ */
.oz-sn { display: block; margin: 0 0 clamp(6px, 1.2svh, 12px); font-family: var(--sans); font-size: clamp(3rem, min(5.2vw, 9svh), 5.4rem); font-weight: 800; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.6px rgba(226, 85, 76, .6); background: linear-gradient(100deg, #e2453e, #f08a3c) 0 0 / 100% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.oz.is-play .oz-copy > .oz-sn { animation: ozNo 1.3s var(--out) both .1s; }
@keyframes ozNo { 0% { opacity: 0; translate: -16px 0; background-size: 0% 100%; } 40% { opacity: 1; translate: 0 0; background-size: 0% 100%; } 100% { opacity: 1; background-size: 100% 100%; } }
.oz.is-play .oz-copy > :nth-child(5) { animation-delay: .24s; }

/* the page's name, large and faint, behind its step number */
.oz-copy { position: relative; }
.oz-bw { position: absolute; z-index: -1; left: -.04em; top: -.36em; font-family: var(--sans); font-size: clamp(2.6rem, 5vw, 5rem); font-weight: 800; line-height: .8; letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.4px rgba(226, 85, 76, .16); background: linear-gradient(180deg, rgba(255, 170, 140, .22), rgba(255, 170, 140, 0) 85%); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; }
.oz-flip .oz-bw { left: auto; right: -.04em; }
.oz.is-play .oz-copy > .oz-bw { animation: ozBw 1.6s var(--out) both .05s; }
@keyframes ozBw { from { opacity: 0; translate: 40px 0; } }
.oz-sn { position: relative; }

/* ════ a part of the screen, lifted out and kept on display ════ */
.oz-lift { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; pointer-events: none; filter: drop-shadow(0 26px 30px rgba(90, 30, 25, .3)) drop-shadow(0 6px 10px rgba(90, 30, 25, .16)); }
.oz-lift.on { animation: liftFloat 6s ease-in-out infinite; }
.oz-lift.on + .oz-lift.on { animation-delay: 1.6s; }
@keyframes liftFloat { 50% { translate: 0 -7px; } }
.oz-lift-box { position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(80, 40, 40, .1); }
.oz-lift .op.oz-lift-op { position: relative; width: auto; height: auto; overflow: visible; background: transparent; transform-origin: 0 0; }
.oz-lift-tag { position: absolute; left: 12px; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; translate: 0 -62%; white-space: nowrap; font-family: var(--oj); font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .01em; color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 8px 16px -8px rgba(226, 69, 62, .9); }
.oz-lift-tag.only { background: #1c1517; box-shadow: 0 8px 16px -8px rgba(28, 21, 23, .8); }
.oz-lift-tag svg { width: 11px; height: 11px; color: #ffb45c; }

/* ════ the first page: the journey, as an arc of the six real screens ════ */
.oz-cov .oz-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 3svh, 34px); padding-bottom: clamp(56px, 8svh, 76px); }
.oz-cov .oz-cover { max-width: 980px; }
.oz-cov .oz-ch { font-size: clamp(2rem, min(3.6vw, 6.2svh), 3.7rem); }
.oz-cov .oz-lede { max-width: 68ch; }
.oz-track { width: 100%; max-width: 1240px; }
.ot-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 clamp(10px, 2svh, 18px); }
.ot-roles span { display: flex; align-items: center; justify-content: center; gap: 8px; padding-bottom: 9px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--x-deep); border-bottom: 2px solid rgba(226, 85, 76, .26); }
.ot-roles span.r3 { color: #fff; border-bottom: 0; justify-self: center; padding: 6px 14px; border-radius: 999px; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 10px 20px -10px rgba(226, 69, 62, .9); }
.ot-roles svg { width: 16px; height: 16px; }
.ot-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; perspective: 1500px; }
.ot-list > li { --r: calc((2.5 - var(--j)) * 7deg); --y: calc((6.25 - (var(--j) - 2.5) * (var(--j) - 2.5)) * 4px); }
.ot-list a { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; color: inherit; text-decoration: none; outline: none; }
.ot-shot { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 640 / 450; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(80, 40, 40, .1), 0 26px 40px -22px rgba(120, 40, 30, .6); transform: translateY(var(--y)) rotateY(var(--r)) rotateX(7deg); transition: transform .6s var(--pop), box-shadow .4s; }
.ot-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.ot-shot.pdf { background: #f7f2f1; }
.ot-shot.pdf img { width: 72%; margin: 5% auto 0; height: auto; box-shadow: 0 10px 20px -10px rgba(60, 30, 30, .5); }
.ot-shot em { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(100deg, #e2453e, #f08a3c); box-shadow: 0 8px 16px -8px rgba(226, 69, 62, .9); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--pop); }
.ot-shot em svg { width: 12px; height: 12px; }
.ot-list a:focus-visible .ot-shot { z-index: 3; transform: translateY(calc(var(--y) - 12px)) rotateY(0deg) rotateX(0deg) scale(1.12); box-shadow: 0 0 0 2px #e2554c, 0 40px 64px -26px rgba(226, 69, 62, .75); }
.ot-dot { position: relative; display: block; width: 100%; height: 34px; margin-top: calc(var(--y) * 0 + 34px); }
.ot-dot b { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; font-size: .78rem; font-weight: 800; color: var(--x-deep); background: #fff; box-shadow: 0 0 0 2px rgba(226, 85, 76, .38), 0 8px 16px -10px rgba(226, 85, 76, .7); transition: color .3s, background .3s, transform .45s var(--pop); }
.ot-list li:not(:last-child) .ot-dot::before, .ot-list li:not(:last-child) .ot-dot::after { content: ""; position: absolute; left: 50%; top: 16px; width: calc(100% + 16px); height: 2px; border-radius: 2px; }
.ot-list li:not(:last-child) .ot-dot::before { background: repeating-linear-gradient(90deg, rgba(226, 85, 76, .3) 0 5px, transparent 5px 10px); }
.ot-list li:not(:last-child) .ot-dot::after { background: linear-gradient(90deg, #ff8a5c, #e2453e); transform-origin: 0 50%; }
.oz.is-play .ot-list li:not(:last-child) .ot-dot::after { animation: artGrow .42s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(1.32s + var(--j) * .5s); }
.oz.armed:not(.is-play) .ot-list li .ot-dot::after { transform: scaleX(0); }
.ot-list li:last-child .ot-dot b { color: #fff; background: linear-gradient(135deg, #ff8a5c, #e2453e); }
.ot-list strong { margin-top: 4px; font-size: clamp(.92rem, 1.06vw, 1.04rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--o-ink); transition: color .3s; }
.ot-list a > i { font-style: normal; font-size: clamp(.78rem, .88vw, .86rem); font-weight: 500; line-height: 1.4; color: var(--o-2); }
/* one screen at a time: its frame arrives, a shimmer while it loads, the screen comes up sharp, its number
   lights, and the line runs on to the next */
.oz.is-play .ot-list li { animation: otIn .7s var(--pop) both; animation-delay: calc(.8s + var(--j) * .5s); }
.ot-shot::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, #f4ecea 30%, #fff 50%, #f4ecea 70%) 0 0 / 250% 100%; opacity: 0; pointer-events: none; }
.oz.is-play .ot-shot::before { animation: otSkel .75s linear both; animation-delay: calc(.8s + var(--j) * .5s); }
@keyframes otSkel { 0% { opacity: 1; background-position: 100% 0; } 65% { opacity: 1; background-position: 0 0; } 100% { opacity: 0; background-position: 0 0; } }
.oz.is-play .ot-shot img { animation: otImg .6s ease both; animation-delay: calc(1.1s + var(--j) * .5s); }
@keyframes otImg { from { opacity: 0; filter: blur(6px); scale: 1.06; } }
.oz.is-play .ot-dot b { animation: otDot .5s var(--pop) both; animation-delay: calc(1.2s + var(--j) * .5s); }
@keyframes otDot { from { transform: scale(0); } }
.oz.armed:not(.is-play) .ot-list li { opacity: 0; }
@keyframes otIn { from { opacity: 0; translate: 0 50px; } }
.oz.is-play .ot-roles span { animation: ozUp .7s var(--out) both .7s; }
.oz.is-play .ot-roles span:nth-child(2) { animation-delay: 1.7s; }
.oz.is-play .ot-roles span:nth-child(3) { animation-delay: 2.7s; }
.oz.armed:not(.is-play) .ot-roles span { opacity: 0; }

/* ── narrower windows ── */
@media (max-width: 1240px) and (min-width: 901px) {
  .oz-brand { display: none; }
  .oz-tabs { margin-left: 0; }
  .oz-no { margin-left: auto; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .oz-tabs a { padding: 6px 9px; font-size: .7rem; }
  .oz-body { grid-template-columns: minmax(0, 33%) minmax(0, 1fr); }
  .oz-flip .oz-body { grid-template-columns: minmax(0, 1fr) minmax(0, 33%); }
  .oz-pt i { display: none; }
}
@media (max-height: 780px) and (min-width: 901px) {
  .oz-lede { display: none; }
  .oz-cover .oz-lede { display: block; }
  .oz-pt i { display: none; }
}

/* ── phones: copy, then the screen ── */
@media (max-width: 900px) {
  .oz-in { height: auto; min-height: 100svh; }
  .oz-bar { gap: 10px; height: auto; padding: calc(var(--nav-h) + 10px) 14px 8px; }
  .oz-brand { display: none; }
  .oz-tabs { margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .oz-tabs::-webkit-scrollbar { display: none; }
  .oz-tabs a { padding: 5px 10px; font-size: .68rem; }
  .oz-replay span { display: none; }
  .oz-replay { padding: 6px; }
  .oz-no { margin-left: auto; font-size: .68rem; }
  .oz-body, .oz-flip .oz-body { container-type: normal; display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 10px 16px 26px; }
  .oz-flip .oz-stage { order: 2; }
  .oz-h { font-size: clamp(1.45rem, 7vw, 1.9rem); }
  .oz-lede { font-size: .88rem; }
  .oz-pt i { display: none; }
  .oz-stage { height: auto; }
  .ozw { width: 100%; }
  .oz-cov .oz-body { padding-bottom: 28px; }
  .oz-views { flex: none; height: auto; container-type: normal; display: flex; flex-direction: column; gap: 14px; perspective: none; }
  .oz-view { position: relative; left: auto; top: auto; width: 100%; transform: none !important; }
  .oz-view:not(.v-mentor) { display: none; }
  .oz-rstage { display: flex; flex-direction: column; gap: 14px; }
  .oz-art { position: relative; right: auto; top: auto; translate: none; width: min(78vw, 320px); max-width: none; height: auto; margin: 0 auto; }
  .oz-pops { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .oz *, .op * { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}


@media (max-width: 1100px) and (min-width: 901px) {
  .oz-body { grid-template-columns: minmax(0, 31%) minmax(0, 1fr); }
  .oz-flip .oz-body { grid-template-columns: minmax(0, 1fr) minmax(0, 31%); }
  .oz-chip { padding: 9px 14px 9px 9px; }
  .oz-chip span { width: 36px; height: 36px; border-radius: 12px; }
  .ot-list strong { font-size: .86rem; }
}
@media (max-height: 780px) and (min-width: 901px) {
  .oz-cov .oz-lede { display: none; }
  .ot-list a > i { display: none; }
}
@media (max-width: 900px) {
  .oz-body, .oz-flip .oz-body { padding-top: calc(var(--nav-h) + 18px); }
  .oz-stage { display: flex; flex-direction: column; height: auto; perspective: none; }
  .oz-stage::before, .oz-num, .oz-chips, .oz-xl, .oz-xs, .oz-lift { display: none; }
  .mn, .oz-flip .mn { --ry: 0deg; --rx: 0deg; width: 100%; }
  .oz.is-play .mn-neck, .oz.is-play .mn-foot, .oz.is-play .mn-shadow { animation: none; }
  .oz.armed:not(.is-play) .mn-boot { opacity: 0; }
  .oz.is-play .mn-boot { animation: none; }
  .oz-stage > .oz-replay, .oz-rstage > .oz-replay { position: static; translate: none; align-self: center; margin-top: 12px; }
  .oz-rstage { display: flex; flex-direction: column; gap: 14px; }
  .oz-rstage > .mn { position: relative; top: auto; bottom: auto; height: auto; margin: 0; width: 100%; }
  .op-dcard { transform: none; }
  .ot-roles { display: none; }
  .ot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .ot-list > li { --r: 0deg; --y: 0px; }
  .ot-shot { transform: none; }
  .ot-dot { margin-top: 6px; }
  .ot-dot::before, .ot-dot::after { display: none; }
}
/* ════ TRUSTED BY — the organizations on Myna ═══════════════════════
   One band, centred: the organizations as crest cards that rise in
   turn as the band comes in, a light passing across each crest.
   ═════════════════════════════════════════════════════════════════ */
.trs { position: relative; overflow: hidden; isolation: isolate; }
.trs::before { content: ""; position: absolute; left: 50%; top: 60%; z-index: -1; width: min(90vw, 1100px); aspect-ratio: 2.4; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 85, 76, .1), transparent 72%); }
.trs-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.trs-eye { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--coral-deep, #a72f28); }
.trs-eye i { width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #e2554c); }
.trs-eye::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #e2554c, transparent); }
.trs-h { margin-top: 12px; font-size: clamp(1.8rem, min(3.2vw, 5svh), 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.trs-h em { font-style: normal; background: linear-gradient(90deg, #e2554c, #f08a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trs-lede { margin: 12px 0 0; max-width: 56ch; font-size: clamp(.9rem, 1.05vw, 1.02rem); line-height: 1.55; color: var(--on-2); }
.trs-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); width: 100%; margin-top: clamp(26px, 5vh, 52px); }
.trs-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 34px 16px 28px; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fffaf8 100%); box-shadow: 0 0 0 1px var(--hairline), 0 22px 40px -30px rgba(60, 42, 46, .6); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), box-shadow .4s; }
.trs-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #ff8a5c, #e2453e); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.trs-card.is-in::before { transform: none; transition-delay: calc(.5s + var(--j) * .12s); }
.trs-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(226, 85, 76, .3), 0 30px 50px -30px rgba(226, 85, 76, .55); }
.trs-crest { position: relative; display: grid; place-items: center; width: 92px; height: 104px; overflow: hidden; filter: drop-shadow(0 12px 16px rgba(226, 85, 76, .22)); }
.trs-crest svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trs-crest path { fill: #fdebe7; stroke: #e2554c; stroke-width: 2.2; }
.trs-crest b { position: relative; margin-top: -4px; font-size: 20px; font-weight: 800; letter-spacing: .02em; color: #b8362d; }
.trs-crest::after { content: ""; position: absolute; top: -20%; left: -80%; width: 50%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-18deg); }
.trs-card.is-in .trs-crest::after { animation: trsShine 1.4s ease-in-out calc(.6s + var(--j) * .18s) 1; }
.trs-card:hover .trs-crest::after { animation: trsShine 1.1s ease-in-out 1; }
@keyframes trsShine { to { left: 140%; } }
.trs-card p { display: flex; flex-direction: column; gap: 4px; }
.trs-card p b { font-size: clamp(.88rem, 1vw, .98rem); font-weight: 800; line-height: 1.25; color: var(--on); }
.trs-card p i { font-style: normal; font-size: .74rem; font-weight: 600; color: var(--on-3); }
/* the ring: the colleges pass slowly and endlessly; the middle card is biggest and in front, the others
   turn away behind it (positions set per frame by trustRing() in tour.js) */
.trs-ring { position: relative; width: 100%; height: clamp(330px, 44svh, 430px); margin-top: clamp(22px, 4vh, 44px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.trs-track { position: absolute; inset: 0; }
.trs-ring .trs-card { position: absolute; left: 50%; top: 50%; width: clamp(240px, 21vw, 320px); height: clamp(280px, 38svh, 370px); margin: 0; translate: -50% -50%; justify-content: center; gap: clamp(16px, 2.4svh, 24px); padding: 30px 22px; border-radius: 28px; text-align: center; flex-direction: column; box-shadow: 0 0 0 1px rgba(226, 85, 76, .14), 0 34px 60px -34px rgba(90, 40, 40, .55), 0 10px 20px -14px rgba(90, 40, 40, .25); transition: box-shadow .4s; will-change: transform; }
.trs-ring .trs-card::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 5px; transform: none; }
.trs-ring .trs-card:hover { box-shadow: 0 0 0 1.5px rgba(226, 85, 76, .45), 0 40px 70px -34px rgba(226, 85, 76, .6); }
.trs-ring .trs-crest { width: clamp(100px, 9vw, 132px); height: clamp(112px, 10.2vw, 148px); }
.trs-ring .trs-crest b { font-size: clamp(22px, 2vw, 30px); }
.trs-ring .trs-card p { gap: 6px; }
.trs-ring .trs-card p b { font-size: clamp(1.02rem, 1.3vw, 1.3rem); }
.trs-ring .trs-card p i { font-size: clamp(.78rem, .9vw, .9rem); }
.trs-ring.is-in .trs-crest::after { animation: none; }
@media (max-width: 900px) {
  .trs-ring { height: 300px; margin-top: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .trs-ring .trs-card { width: 176px; height: 236px; padding: 22px 16px; gap: 14px; border-radius: 22px; }
  .trs-ring .trs-crest { width: 84px; height: 94px; }
  .trs-ring .trs-crest b { margin-top: -4px; font-size: 19px; }
  .trs-ring .trs-card p b { font-size: .95rem; }
}
@media (max-width: 900px) {
  .trs-h { font-size: clamp(1.4rem, 6vw, 2rem); }
  .trs-lede { font-size: .86rem; }
  .trs-row { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 20px; max-width: 520px; }
  .trs-card { flex-direction: row; gap: 14px; padding: 10px 16px 10px 12px; border-radius: 16px; text-align: left; }
  .trs-card::before { left: 0; top: 0; bottom: 0; right: auto; width: 4px; height: auto; transform: scaleY(0); transform-origin: 50% 0; }
  .trs-card.is-in::before { transform: none; }
  .trs-crest { flex: none; width: 46px; height: 52px; }
  .trs-crest b { margin-top: -2px; font-size: 11px; }
  .trs-card p { gap: 1px; }
}

/* ══ Cards ═══════════════════════════════════════════════════════ */

.grid { display: grid; gap: clamp(10px, 1.6svh, 16px); margin-top: clamp(20px, 3.2svh, 44px); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(14px, 2.2svh, 24px) clamp(16px, 1.6vw, 22px) clamp(15px, 2.4svh, 26px);
  background: linear-gradient(180deg, var(--stage-2), var(--stage));
  transition: border-color .3s var(--ease);
}
.card:hover { border-color: var(--hairline-2); }
.card .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 14px;
}
.card h3 { font-size: clamp(1rem, 1.9svh, 1.14rem); letter-spacing: -.022em; }
.card p { margin: 7px 0 0; color: var(--on-2); font-size: clamp(.84rem, 1.6svh, .93rem); line-height: 1.5; }

.band-paper .card { border-color: var(--paper-line); background: #fff; box-shadow: 0 1px 2px rgba(28,21,23,.04); }
.band-paper .card p { color: var(--paper-2); }
.band-paper .card .k { color: var(--coral-deep); }

.card-ico {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: color-mix(in srgb, var(--c, var(--coral)) 15%, transparent);
  color: var(--c, var(--coral));
}
.card-ico svg { width: 19px; height: 19px; }

/* ══ For the college — admin panel mock ══════════════════════════ */

.panel {
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(28,21,23,.3);
  margin-top: 52px;
}
.panel-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid var(--paper-line);
  background: #f4efec;
}
.panel-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d7cdc9; display: block; }
.panel-bar .u { margin-left: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--paper-2); }
.panel-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--paper-line); }
.kpi { background: #fff; padding: clamp(12px, 2svh, 20px) 18px clamp(13px, 2.2svh, 22px); }
.kpi .l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-2); }
.kpi .v { font-size: 2rem; font-weight: 800; letter-spacing: -.045em; margin-top: 10px; line-height: 1; }
.kpi .d { font-size: .78rem; color: var(--paper-2); margin-top: clamp(4px, .9svh, 7px); }
.kpi .d b { color: var(--coral-deep); font-weight: 700; }

/* Header beside the dashboard rather than above it — stacked, the two
   ran 340px before a single feature card had been shown. */
.col-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.col-head .panel { margin-top: 0; }
.col-head .lede { max-width: 38ch; }

@media (max-width: 980px) {
  .col-head { grid-template-columns: 1fr; gap: 26px; }
}

/* ══ CTA + footer ════════════════════════════════════════════════ */

.cta { text-align: center; overflow: hidden; }
.cta::before {
  content: "";
  position: absolute; inset: auto -20% -60%;
  height: 130%;
  background: radial-gradient(45% 55% at 50% 100%, color-mix(in srgb, var(--coral) 24%, transparent), transparent 70%);
  pointer-events: none;
}
.cta .wrap { position: relative; }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta .lede { margin-inline: auto; text-align: center; }
.cta .cta-row { justify-content: center; }

footer {
  border-top: 1px solid var(--hairline);
  padding: 34px var(--gut);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-size: 13px; color: var(--on-3);
}
footer .sp { margin-left: auto; display: flex; gap: 20px; }
footer a:hover { color: var(--on-2); }

/* ══ Draft notes — remove before this goes live ══════════════════ */

/* A draft note is a footnote, not a panel — it used to run 175px tall
   on its own, which was a fifth of the screen. */
.review {
  border-left: 2px solid var(--amber);
  padding: 4px 0 4px 14px;
  margin-top: clamp(14px, 2.4svh, 26px);
  font-size: clamp(.76rem, 1.5svh, .84rem);
  line-height: 1.5;
  color: var(--on-3);
  max-width: 78ch;
}
.review b { color: var(--amber); font-weight: 600; }
.review p { display: inline; }
.review p { margin: 0; line-height: 1.6; }
.band-paper .review { color: var(--paper-2); }

/* ══ Responsive ══════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .g4, .skills { grid-template-columns: repeat(2, 1fr); }
  .mods { grid-template-columns: repeat(2, 1fr); }
  .nav-links, .nav-sub { display: none; }
}

@media (max-width: 900px) {
  body { font-size: 16px; }

  .scene-grid, .scene-grid.flip { grid-template-columns: 1fr; }

  .hero .wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "phone" "stats";
    row-gap: 40px;
  }
  .hero .phone { --pw-base: 240; margin-inline: auto; }
  .hero .stats { margin-top: 0; }

  /* Stacked, the phone is centred, so the laptop is too — nudged left
     so the phone can stand over its right-hand corner. */
  .hero { --hpw: calc(240 * var(--pw-k)); }
  .hero .scene-stage { justify-content: center; }
  .hero-laptop {
    --lw: calc(var(--hpw) * 1.5);
    right: auto;
    left: 50%;
    bottom: calc(50% - var(--hpw) * .5px);
    transform: translateX(-58%);
  }
  .hero.show-web .phone[data-rise].is-in { transform: translate(54%, 5%) scale(.42); }

  /* The phone leads on mobile — copy reads underneath it, and the
     scene mechanic itself is unchanged. */
  .scene-grid, .scene-grid.flip { gap: 26px; justify-items: center; align-content: center; }
  .scene-pin { padding-top: var(--nav-h); }
  .scene-grid .scene-copy, .scene-grid.flip .scene-copy { order: 2; text-align: center; }
  .scene-grid .scene-stage { order: 1; }
  .phone { --pw-base: 220; }
  .beat p { margin-inline: auto; }
  .beat h3 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .beat-ticks { justify-content: center; }
  .scene-pin { min-height: 520px; }

  .detail { grid-template-columns: 1fr; }
  .detail .phone { --pw-base: 252; margin-inline: auto; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .panel-body { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .scroll-cue { display: none; }
}

@media (max-width: 640px) {
  .g2, .g3, .g4, .skills, .mods { grid-template-columns: 1fr; }
  .band { padding-block: 72px; }
  .ov-crumb { font-size: 12px; }
}

/* ══ Reduced motion ══════════════════════════════════════════════
   The scenes keep working — swapping the screen is how the page is
   understood, not decoration. What goes is the motion: nothing
   slides, drifts, pulses or draws itself. Screens and beats cut. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rise] { opacity: 1; transform: none; }
  .screen, .screen.is-past { transform: none; }
  .beat, .beat.is-past { transform: none; }
  .skill:hover, .mod:hover { transform: none; }
  .scroll-cue i { animation: none; opacity: .6; }
}

/* ══════════════════════════════════════════════════════════════════
   System sections — CEFR and streaks
   Neither is a product, so neither borrows the product layout. These
   are the two mechanics the app reports against: one says where a
   student stands, the other says whether they came back.

   Both live on the app's Progress tab, so both sections show that one
   screen and spotlight their own half of it.
   ══════════════════════════════════════════════════════════════════ */

.sys { --c: var(--violet); position: relative; }
.sys::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(42% 50% at var(--gx, 76%) 44%,
              color-mix(in srgb, var(--c) 11%, transparent), transparent 72%);
  pointer-events: none;
}
.sys.flip { --gx: 24%; }
.sys > .wrap { position: relative; max-width: 1320px; }

.sys-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: clamp(30px, 4.4vw, 76px);
  align-items: center;
}
.sys.flip .sys-grid { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
.sys.flip .sys-copy { order: 2; }
.sys-copy h2 { max-width: 17ch; }
.sys-copy .lede { max-width: 52ch; }
.sys-copy .lede b { color: var(--on); font-weight: 600; }

/* The streak section pairs the phone with the card enlarged, so its
   stage needs room for both. */
.sys-grid:has(.sys-stage-wide) {
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(440px, 42vw, 620px));
}

.sys-stage { display: flex; flex-direction: column; align-items: center; }
.sys .phone { --pw-base: 288; }
.sys-cap {
  margin: 14px 0 0;
  max-width: 42ch;
  text-align: center;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--on-3);
}

/* ── the spotlight on the screenshot ────────────────────────────── */
/* Both sections show the same Progress tab. Dimming everything but the
   part under discussion is what makes that read as two different
   points rather than the same picture twice. Percentages are of the
   screen, and the shot's aspect is within 0.3% of the phone's, so
   object-fit: cover crops almost nothing and they land true. */

.spot { position: absolute; inset: 0; pointer-events: none; }
.spot .sp-d { position: absolute; left: 0; right: 0; background: rgba(8, 5, 7, .66); }
.spot .sp-d:first-child { top: 0; height: var(--y); }
.spot .sp-d:last-child  { top: calc(var(--y) + var(--hh)); bottom: 0; }
.spot .sp-r {
  position: absolute;
  left: 1.5%; right: 1.5%;
  top: var(--y); height: var(--hh);
  border: 2px solid var(--c);
  border-radius: 12px;
  box-shadow: 0 0 26px color-mix(in srgb, var(--c) 42%, transparent);
}
.screen.is-on .spot .sp-r { animation: spot-in .7s var(--ease-out) both .45s; }
.screen.is-on .spot .sp-d { animation: dim-in .7s var(--ease-out) both .45s; }
@keyframes spot-in { from { opacity: 0; transform: scale(1.06); } }
@keyframes dim-in  { from { opacity: 0; } }

/* ── the CEFR ladder ────────────────────────────────────────────── */
/* Six levels as rows, each bar as wide as the level is high. Beside a
   tall phone this reads better than a left-to-right climb: the column
   is tall and narrow, and so is the thing it sits next to. */

.ladder {
  display: grid;
  gap: clamp(6px, .95svh, 11px);
  margin-top: clamp(15px, 2.6svh, 26px);
}
.rung { display: grid; grid-template-rows: auto auto; }
.rung-bar {
  height: 6px;
  width: calc(100% * var(--h));
  border-radius: 999px;
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--c) 48%, transparent),
              color-mix(in srgb, var(--c) 13%, transparent));
  transform-origin: 0 50%;
}
.sys .rung-bar { animation: grow-bar .85s var(--ease-out) both; }
.rung:nth-child(2) .rung-bar { animation-delay: .06s; }
.rung:nth-child(3) .rung-bar { animation-delay: .12s; }
.rung:nth-child(4) .rung-bar { animation-delay: .18s; }
.rung:nth-child(5) .rung-bar { animation-delay: .24s; }
.rung:nth-child(6) .rung-bar { animation-delay: .30s; }
@keyframes grow-bar { from { transform: scaleX(0); opacity: 0; } }

/* B2 is the one that matters commercially, so it is the only one lit. */
.rung.is-bar .rung-bar {
  background: linear-gradient(90deg, var(--c),
              color-mix(in srgb, var(--c) 38%, transparent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent);
}

/* A hanging indent, not a grid. The level code, its name and what it
   means want to read as ONE line — as grid items they each get their
   own cell and cannot share one, and setting display:inline on them
   just dropped them into the 2.6rem code column, where the text wrapped
   one word per line. */
.rung-t {
  padding-top: 6px;
  padding-left: 3.4rem;
  text-indent: -3.4rem;
}
.rung-t b {
  display: inline-block;
  width: 3.4rem;
  text-indent: 0;
  font-family: var(--mono);
  font-size: clamp(.9rem, 1.9svh, 1.06rem);
  font-weight: 700;
  color: color-mix(in srgb, var(--c) 82%, var(--on));
}
.rung.is-bar .rung-t b { color: var(--on); }
.rung-t i {
  font-style: normal;
  font-size: clamp(.74rem, 1.45svh, .84rem);
  font-weight: 700;
  color: var(--on-2);
}
.rung-t i::after { content: " — "; color: var(--on-3); font-weight: 400; }
.rung-t span {
  font-size: clamp(.72rem, 1.4svh, .81rem);
  line-height: 1.5;
  color: var(--on-3);
}
/* The commercial point, on the row it belongs to rather than floating
   across the chart. */
.rung-t em {
  display: table;              /* shrink-wraps without floating */
  text-indent: 0;
  margin-top: 6px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
}

/* ── the streak card, enlarged beside the phone ─────────────────── */

.zoom {
  display: grid;
  /* The phone's column is given a width rather than taking one from
     its contents. Sized from its own height inside an auto column,
     the phone's width depended on a row height that depended on the
     phone — and it resolved that by running off the side. */
  grid-template-columns: minmax(0, 1fr) clamp(186px, 19vw, 286px);
  gap: clamp(14px, 2vw, 26px);
  align-items: center;
  width: 100%;
}

.stkbig {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  background: linear-gradient(180deg, #17110f, #100c0c);
  padding: clamp(14px, 2.2svh, 20px) clamp(14px, 1.4vw, 18px);
  box-shadow: 0 30px 70px -40px var(--cast);
  position: relative;
  /* The ring sits about 68% down the screen, not at its middle, so a
     card centred on the phone would have its tick pointing at the level
     table rather than at the streak. Nudged down to meet it. Measured
     offsets were 109px at 1080, 98px at 900, 86px at 768 — which is
     what this tracks. It is offset, not margin, so the layout it sits
     centred in does not move. */
  top: clamp(40px, 11svh, 115px);
}
/* A tick out to the phone, so the card reads as lifted from the screen
   beside it rather than as a second, unrelated panel. */
.stkbig::after {
  content: "";
  position: absolute;
  top: 50%; left: 100%;
  width: clamp(14px, 2vw, 26px);
  border-top: 1px dashed color-mix(in srgb, var(--c) 50%, transparent);
}
.stkbig-top { display: flex; align-items: center; gap: 11px; }
.stkbig .fire { width: 36px; height: 36px; flex: none; }
.sys .stkbig .fire { animation: flicker 2.6s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30%      { transform: scale(1.07) rotate(-2deg); }
  60%      { transform: scale(.97) rotate(1.5deg); }
}
.stkbig-n b {
  display: block;
  font-size: clamp(1.4rem, 3svh, 1.9rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.stkbig-n span,
.stkbig-mx span {
  display: block;
  font-size: .7rem;
  color: var(--on-3);
  margin-top: 4px;
}
.stkbig-mx { margin-left: auto; text-align: right; }
.stkbig-mx b { font-size: 1.05rem; font-weight: 700; color: var(--on-2); }

.stkbig-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(4px, .6svh, 7px);
  margin-top: clamp(12px, 2svh, 18px);
}
.dy i {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-style: normal;
  font-size: clamp(.66rem, 1.4svh, .8rem);
  font-weight: 700;
  background: #241d21;
  color: var(--on-3);
  border: 1px solid transparent;
}
.dy.on i {
  background: color-mix(in srgb, var(--c) 72%, #2a1a10);
  color: #1b1207;
}
/* The missed day is the point of the whole card, so it breaks the
   pattern rather than merely dimming. */
.dy.off i {
  background: repeating-linear-gradient(-45deg, #2a1f22 0 3px, #1c1417 3px 6px);
  border-color: var(--coral);
  color: var(--coral);
}
.dy.now i { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.sys .pp { padding: clamp(10px, 1.6svh, 15px) 16px clamp(11px, 1.7svh, 16px); }
.sys .prod-points { margin-top: clamp(18px, 2.8svh, 28px); }

.dy u {
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 9px;
  color: var(--on-3);
  margin-top: 4px;
}

.stkbig-note {
  margin: clamp(11px, 1.8svh, 16px) 0 0;
  font-size: clamp(.72rem, 1.4svh, .8rem);
  line-height: 1.5;
  color: var(--on-2);
  padding-left: 11px;
  border-left: 2px solid var(--coral);
}
.stkbig-note b { color: var(--on); font-weight: 700; }

@media (max-width: 1100px) {
  .sys-grid:has(.sys-stage-wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  .stkbig::after { display: none; }
  .zoom { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .zoom .stkbig { order: 2; width: 100%; top: 0; }
}
@media (max-width: 900px) {
  .sys-grid,
  .sys.flip .sys-grid,
  .sys-grid:has(.sys-stage-wide) { grid-template-columns: 1fr; gap: 30px; }
  .sys-copy, .sys.flip .sys-copy { order: 2; }
  .sys-stage { order: 1; }
  .sys .phone { --pw-base: 250; }
}
@media (prefers-reduced-motion: reduce) {
  .sys .rung-bar,
  .sys .stkbig .fire,
  .screen.is-on .spot .sp-r,
  .screen.is-on .spot .sp-d { animation: none; }
}

/* ══ PROMPT MASTERY — the two formats ═════════════════════════════
   Not Prime's timeline: the two formats are alternatives, not moments
   in a sequence, so a two-way tab strip rather than a rail. Each tab
   still opens with the concrete scenario the student is handed, the
   same move Prime makes with the question the student hears.
   ═════════════════════════════════════════════════════════════════ */

.pm-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: clamp(10px, 2svh, 22px);
}
.pm-tab {
  text-align: left;
  padding: clamp(11px, 1.8svh, 15px) 16px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--stage-2);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.pm-tab:hover { border-color: var(--hairline-2); }
.pm-tab.on {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, var(--stage-2));
}
.pm-tag {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-3);
  transition: color .2s var(--ease);
}
.pm-tab.on .pm-tag { color: var(--c); }
.pm-name {
  display: block;
  margin-top: 6px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.025em;
}

.prompt-detail { margin-top: clamp(12px, 1.8svh, 20px); }
/* The scenario the student is actually handed. This used to lean on a
   base .pd-quote that Prime owned; Prime turns its question into a
   3D box now and took that rule with it, so the whole thing lives
   here. It also answers to height, because this section pays for a
   74px tab strip before the quote gets any room. */
.pd-quote {
  margin: 0 0 4px;
  padding-left: 18px;
  border-left: 2px solid var(--c);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 3svh, 1.6rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--on);
  max-width: 46ch;
}
/* Two columns: what it is and what is scored down the left, why it
   matters down the right. This grid used to be shared with Myna Prime
   and lived in the explorer's stylesheet; the explorer is gone and
   Prime turns a 3D box now, so Prompt Mastery is the only thing left
   using it and it belongs here. */
.prompt-detail .ex-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}
.prompt-detail .ex-pair > div > .ex-block:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .prompt-detail .ex-pair { grid-template-columns: 1fr; gap: 0; }
  .prompt-detail .ex-pair .ex-block + .ex-block { margin-top: 18px; }
}

/* Tighter than the grid above: this section has a tab strip to pay for
   before the blocks get any room. */
.prompt-detail .ex-pair { margin-top: clamp(6px, 1.4svh, 12px); }
.prompt-detail .ex-pair > div > .ex-block { margin-top: clamp(6px, 1.4svh, 12px); }
.prompt-detail .ex-draft { margin: 6px 0 0 16px; }
/* Scoped, not to the shared .prod-no/.ex-lab rules — this section has
   a 74px tab strip and a scenario quote eating its height budget
   before Prime's own version of this layout ever has to, so it needs
   to save a few more px per row than the shared defaults give it. */
#prompt .prod-no { margin-bottom: clamp(8px, 1.4svh, 18px); }
.prompt-detail .ex-lab { padding-bottom: 4px; margin-bottom: 6px; }


/* Not sticky, same reasoning as Prime: the section fits one screen, so
   there is nothing to follow. */
.prompt-stage { flex-direction: column; align-items: center; align-self: center; }
.prompt-cap {
  margin: 15px 0 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-3);
  text-align: center;
}

@media (max-width: 560px) {
  .pm-tabs { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   Light mode — an opt-in second identity, not a system-preference
   follow. This is a brand asset shown live on a screen share, so it
   never shifts on its own; a visitor picks it deliberately with the
   toggle in the rail, and the choice is remembered (localStorage).

   The palette is not invented fresh — #college has run a light "paper"
   band on the dark page since early on (`--paper`, `--paper-ink`,
   `--coral-deep` for text that needs to sit on it), so this reuses
   those exact, already-proven values as the page-wide theme instead of
   a one-off section.
   ══════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  --stage:      #fbf8f6;
  --stage-2:    #f3eeeb;
  --stage-3:    #ece4e0;
  --hairline:   #e6dfdc;
  --hairline-2: #d5cbc5;

  --on:         #1c1517;
  --on-2:       #6c6062;
  --on-3:       #948a87;

  /* Brand hues, unchanged — but the token now points at each one's
     already-existing deep variant. #college has needed exactly this
     swap since it was built: the vivid dark-mode accents (bright
     enough to glow on near-black) fall short of AA contrast as text on
     a light page, so what a light background actually calls for is
     the same brand colour a shade further from white, not a
     different one. Buttons and badges read as slightly richer, not
     different, since white-on-accent contrast barely moves either way. */
  --coral:      #c53b33;
  --coral-lit:  #e2544c;
  --coral-deep: #a72f28;
  --amber:      #b5650a;
  --mint:       #1f9573;
  --violet:     #6a56d6;

  /* The one thing that does not simply invert: on the dark page this
     is the sole light band, so it wants a HAIRLINE stronger than what
     it now sits among — otherwise the college section stops reading
     as its own panel and just fuses with the page. */
  --paper-line: #d5cbc5;

  /* White cards on warm paper, and a shadow made of the page's own
     ink rather than pure black — soot on paper is the single fastest
     way to make a light theme look like a dark one with the lights
     turned up. */
  --surface:    #ffffff;
  --surface-2:  #ffffff;
  --sunk:       #0b0709;
  --cast:       rgba(60, 42, 46, .38);
}

:root[data-theme="light"] body { background: var(--stage); }

/* Ambient glows were tuned to bloom on near-black — the same
   color-mix() percentages read as a chalky tint on paper rather than a
   glow, since mixing toward "transparent" over a light backdrop just
   pales the colour instead of making it glow. Every radial-gradient
   wash on the page shares this one adjustment: richer colour, so the
   tint still reads as intentional rather than washed out. */
:root[data-theme="light"] .hero::before,
:root[data-theme="light"] #what::before,
:root[data-theme="light"] .prod::before,
:root[data-theme="light"] .sys::before {
  filter: saturate(1.6);
  opacity: .8;
}

/* Phone bezels/screens are real-screenshot recreations of the app,
   not page chrome — they stay exactly as designed in both themes. The
   phone's OWN drop shadow and glow already read fine on a light page,
   real device photos always cast a dark shadow regardless of the
   surface they're sitting on. */

:root[data-theme="light"] .band-paper {
  background: var(--stage-2);
  box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline);
}
:root[data-theme="light"] .band-paper .card { box-shadow: 0 1px 3px rgba(28, 21, 23, .08); }

/* Selection and scrollbar-adjacent chrome that assumed a dark page. */
:root[data-theme="light"] ::selection { background: var(--coral); color: #fff; }

/* ── the toggle itself ─────────────────────────────────────────── */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 22px;
  padding: 3px;
  border-radius: 999px;
  background: var(--stage-2);
  border: 1px solid var(--hairline);
  flex: none;
  width: max-content;
}
.theme-toggle button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--on-3);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.theme-toggle button svg { width: 14px; height: 14px; }
.theme-toggle button.on {
  background: var(--stage-3);
  color: var(--coral);
}
.theme-toggle button:hover { color: var(--on-2); }
.theme-toggle button.on:hover { color: var(--coral); }

@media (max-width: 900px) {
  /* A sibling of .mark in the rail, not nested in .nav-links (which
     hides on mobile) — so it survives the fold into a top bar and
     lands between the logo and the CTA for free, no fixed positioning
     needed. */
  .theme-toggle { margin: 0; }
}


/* ── Components that stay dark regardless of site theme ──────────
   The phone mockup recreates real app screenshots — it must not
   change with the site theme, in either direction. Its own text
   already leans on literal colours for the little UI pieces (tiles,
   the streak table, etc.), but the phone chrome's BODY text and the
   video-placeholder captions read off the shared --on/--on-2/--on-3
   tokens, same as the rest of the page — which is exactly what light
   mode is meant to repoint. Re-pinning them here, scoped to the
   mockup, keeps the recreation honest without duplicating every text
   rule inside it with a literal colour.

   The enlarged streak card (#streak) is the other case: its own
   background is fixed dark on purpose, so its text needs the same
   re-pin even though it lives outside the phone entirely. */
.phone-screen,
.stkbig {
  --on:         #f7f2f0;
  --on-2:       #a6979b;
  --on-3:       #6e6165;
  --hairline:   #2a2126;
  --hairline-2: #3a2f35;
}

/* ══ THE RAIL, AND THE DECK BAR ═══════════════════════════════════
   The rail stays dark whatever the page does. It is chrome, not
   content, and on a light page a dark rail is what tells the two
   apart without a border doing the work.

   It folds to a strip, because a screen share wants the whole width
   and the menu is not the thing anyone came to see.
   ═════════════════════════════════════════════════════════════════ */
.rail {
  --stage: #3d1210;
  --rail-bg: #3d1210;
  --on: #ffffff;
  --on-2: rgb(255 240 236 / .86);
  --on-3: rgb(255 226 219 / .6);
  --hairline: rgb(255 255 255 / .12);
  --hairline-2: rgb(255 255 255 / .2);
  --stage-2: #4a1714;
  --stage-3: #561b17;
  background:
    radial-gradient(120% 50% at 0% 0%, rgb(226 84 76 / .28), transparent 60%),
    linear-gradient(180deg, #4b1714 0%, #3a110f 55%, #2f0e0d 100%);
  color: var(--on);
  transition: width .42s var(--ease-out), padding .42s var(--ease-out);
}

.rail-fold {
  position: absolute;
  top: 34px;
  right: -14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #4b1714;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--coral-lit), var(--coral));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgb(226 84 76 / .9);
  cursor: pointer;
  transition: filter .24s, box-shadow .24s, transform .42s var(--ease-out);
}
.rail-fold svg { width: 13px; height: 13px; }
.rail-fold:hover { filter: brightness(1.08); box-shadow: 0 8px 18px -6px rgb(226 84 76 / 1); }

/* Folded: a strip that is still a menu — the bird at the top, one
   icon per chapter, the walkthrough as a coral button, and each icon
   names itself on hover. The sub-links go. */
:root.rail-shut { --rail-w: 66px; }
:root.rail-shut .rail { padding-inline: 11px; align-items: center; }
:root.rail-shut .rail-fold { transform: rotate(180deg); }
:root.rail-shut .mark { margin: 0 0 clamp(18px, 3.4svh, 32px); }
:root.rail-shut .mark .mark-full { display: none; }
:root.rail-shut .mark .mark-bird { display: block; height: 36px; }
:root.rail-shut .nav-links { gap: 6px; align-items: center; }
:root.rail-shut .nav-sub,
:root.rail-shut .nl-t { display: none; }
:root.rail-shut .nav-links a,
:root.rail-shut .rail-cta {
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  gap: 0;
}
:root.rail-shut .nl-ic { width: 19px; height: 19px; color: #fff; }
:root.rail-shut .rail-cta { border-radius: 12px; }
/* the name, beside the icon, on hover */
:root.rail-shut .nav-links a::after,
:root.rail-shut .rail-cta::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 90;
  left: calc(100% + 14px);
  top: 50%;
  translate: -6px -50%;
  padding: 7px 12px;
  border-radius: 9px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #fff;
  background: linear-gradient(135deg, #5a1b17, #3a110f);
  box-shadow: inset 0 0 0 1px rgb(255 150 130 / .45), 0 12px 26px -10px rgb(0 0 0 / .55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s, translate .18s var(--ease), visibility 0s .16s;
}
/* the little point on the label, towards the icon */
:root.rail-shut .nav-links a::before,
:root.rail-shut .rail-cta::before {
  content: "";
  position: absolute;
  z-index: 91;
  left: calc(100% + 9px);
  top: 50%;
  width: 10px;
  height: 10px;
  translate: -6px -50%;
  rotate: 45deg;
  background: #521915;
  box-shadow: -1px 1px 0 0 rgb(255 150 130 / .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s, translate .18s var(--ease), visibility 0s .16s;
}
:root.rail-shut .nav-links a:hover::before,
:root.rail-shut .rail-cta:hover::before,
:root.rail-shut .nav-links a:focus-visible::before { opacity: 1; visibility: visible; translate: 0 -50%; transition-delay: 0s; }
:root.rail-shut .nav-links a:focus-visible::after { opacity: 1; visibility: visible; translate: 0 -50%; transition-delay: 0s; }
:root.rail-shut .nav-links a:hover::after,
:root.rail-shut .rail-cta:hover::after { opacity: 1; visibility: visible; translate: 0 -50%; transition-delay: 0s; }
:root.rail-shut .rail-cta { position: relative; }

/* ── the deck bar ───────────────────────────────────────────────── */
.deckbar {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vh, 28px);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: color-mix(in srgb, var(--stage) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 14px 34px -18px var(--cast);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .45s var(--ease-out);
}
.deckbar.on { opacity: 1; transform: none; pointer-events: auto; }

.db-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--on-2);
  cursor: pointer;
  transition: color .22s, background .22s;
}
.db-btn svg { width: 16px; height: 16px; }
.db-btn:hover { color: var(--on); background: var(--stage-3); }
.db-btn:active { transform: scale(.92); }

.db-now {
  margin: 0;
  padding: 0 4px;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--on-3);
}
.db-now b { color: var(--on); font-weight: 500; }
.db-now i { font-style: normal; opacity: .5; }
.db-sep { width: 1px; height: 18px; background: var(--hairline); margin-inline: 3px; }

/* Full screen is the point of all this: give the slide the room and
   let the chrome shrink back. */
:root.is-full .rail { background: linear-gradient(180deg, rgb(75 23 20 / .94), rgb(47 14 13 / .94)); }
:root.is-full .deckbar { opacity: .32; }
:root.is-full .deckbar:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rail, .rail-fold, .deckbar { transition-duration: 1ms; }
}
@media (max-width: 1080px) {
  .rail-fold { display: none; }
  .deckbar { right: 12px; bottom: 12px; }
}


/* ══ WHAT MYNA IS — the arc ══════════════════════════════════════
   Eight cards laid along a shallow curve, each one a mark over a
   name. They used to be a pile with a sentence on each; the sentence
   was the slide's own subhead read back at you, and a pile hides
   seven of the eight. Side by side, the whole set is legible at once
   and the row itself says how much there is.

   Every card's place comes out of one number — its distance from the
   front, signed in --d and unsigned in --ad. The step and the turn
   read the signed one so the two wings mirror; the drop reads the
   unsigned one squared, which is what makes the line a curve rather
   than a wedge.

   The phone above follows whichever card is out front.
   ═════════════════════════════════════════════════════════════════ */
.what-fanwrap {
  position: relative;
  z-index: 6;
  /* room above for the front card, which lifts out of the arc */
  padding-top: 14px;
  margin-top: clamp(6px, 1.4svh, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
}

.what-fan {
  /* One number drives the whole arc. Everything else is a ratio of
     the card's width, so the curve keeps its shape at every size
     instead of going flat on a short screen and steep on a tall one.

     --r  the circle the cards' centres ride on
     --a  one card's share of it
     Eight cards straddle the middle, so they sit at ±0.5, ±1.5, ±2.5
     and ±3.5 shares — a 28° turn at each end.

     The overlap is set by --a against --r. A card's bottom corners
     sit half a width off a radius of (--r - --ch / 2) = 6.42 cards,
     which is atan(.5 / 6.42) = 4.45° of arc each — so they clear each
     other only above 8.9°. At 8° they tuck about ten pixels into one
     another down at the corners, and stay well apart at the top where
     the radius is longer. That is the whole overlap: the corners, not
     the faces. */
  /* A deep arc is wide and tall at once, so the cards stay a size
     under what a flat row of them could be: any larger and the
     bottom-right one lands on the floating deck bar. */
  --cw: clamp(80px, min(8.3vw, 12.8svh), 112px);
  --ch: calc(var(--cw) * 1.16);
  --r: calc(var(--cw) * 7);
  --a: 8deg;
  --n: 8;
  position: relative;
  flex: 0 1 auto;
  /* 2r sin(28°) across, plus a turned card's own footprint */
  width: calc(var(--r) * 2 * .4695 + var(--cw) * 1.5);
  /* r (1 - cos 28°) down, plus the card itself */
  height: calc(var(--ch) + var(--r) * .1171 + 6px);
}

.wc {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  margin-left: calc(var(--cw) / -2);
  padding: 12px 9px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  /* A wash of the card's own colour at the head of it, and a lit top
     edge under the border. Neither is a coloured outline: the wash
     stops well short of the sides and the highlight is white. It is
     what stops eight white rectangles reading as eight white
     rectangles. */
  background:
    radial-gradient(118% 62% at 50% 0%,
      color-mix(in srgb, var(--c) 9%, transparent), transparent 72%),
    linear-gradient(180deg, #fff, var(--surface) 62%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .9),
    0 2px 5px -3px var(--cast),
    0 12px 26px -16px var(--cast);
  font: inherit;
  text-align: center;
  color: var(--on);
  cursor: pointer;
  overflow: hidden;
  /* Placed by trigonometry rather than by pivoting around a point
     far below: transform-origin would move the scale on the card that
     is on as well, and a 9% scale about a point 900px away throws it
     right off the rim. */
  --ang: calc(var(--d, 0) * var(--a));
  transform:
    translateX(calc(var(--r) * sin(var(--ang))))
    translateY(calc(var(--r) * (1 - cos(var(--ang)))))
    rotate(var(--ang));
  opacity: calc(1 - var(--ad, 0) * .035);
  z-index: calc(20 - var(--ad, 0) * 2);
  transition:
    transform .62s var(--ease-out),
    opacity .45s var(--ease),
    background .4s var(--ease),
    box-shadow .4s var(--ease);
}

/* The one that is on keeps its place on the rim and rises off it.
   That rise is why the row carries padding above. */
.wc.on {
  transform:
    translateX(calc(var(--r) * sin(var(--ang))))
    translateY(calc(var(--r) * (1 - cos(var(--ang))) - 14px))
    rotate(var(--ang))
    scale(1.08);
  /* The one that is on gets more of everything, and its shadow takes
     a little of its colour — a glow under the card, not a line round
     it. */
  background:
    radial-gradient(118% 66% at 50% 0%,
      color-mix(in srgb, var(--c) 17%, transparent), transparent 74%),
    linear-gradient(180deg, #fff, var(--surface) 62%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    0 3px 8px -4px var(--cast),
    0 22px 42px -20px color-mix(in srgb, var(--c) 42%, var(--cast));
  opacity: 1;
  z-index: 30;
  cursor: default;
}
.wc:hover { opacity: 1; }
.wc:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

/* The mark. Flex rather than grid with place-items: center — centring
   grid items stops the row stretching, which leaves it content-sized,
   so a child asking for a percentage height resolves against nothing
   and a 1080px source renders at 1080px. */
.wc-art {
  width: 100%;
  height: calc(var(--cw) * .36);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-art img {
  /* The wide lockups — Prime and Test are 3.6:1 — are height-capped
     long before they are width-capped, so they need the full column
     to be legible at card size. Every mark is trimmed to its ink, so
     "fills the box" means the same size for all of them. */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Prime and Test use the stacked lockup — the bird over the word — so
   at card size they fill the art box like the other marks do rather
   than coming out as a thin strip. */
.wc-art img[src*="-stack"] { max-height: 104%; }
/* The two drawn marks. They take the card's colour, where the pack's
   own icons are black; at this size a line drawing in the accent
   reads as part of the set rather than as a different weight. */
.wc-art.is-drawn { color: color-mix(in srgb, var(--c) 78%, var(--on)); }
.wc-art svg { width: calc(var(--cw) * .33); height: calc(var(--cw) * .33); display: block; }

.wc-t {
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.26;
  color: var(--on-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s var(--ease);
}
.wc.on .wc-t { color: var(--c); font-weight: 800; }

/* ── the arrows ─────────────────────────────────────────────────── */
.wf-arrow {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface);
  color: var(--on-2);
  cursor: pointer;
  transition: color .22s, border-color .22s, transform .22s var(--ease-out);
}
/* The arrows sit level with the box, but the arc's weight hangs lower
   than its top edge. The margin moves them half its own size, not all
   of it — the row is centred, so it is the arrow's margin box that
   gets centred and only the overhang counts. */
.wf-arrow { margin-top: clamp(52px, 8.5svh, 84px); }
.wf-arrow svg { width: 16px; height: 16px; }
.wf-arrow:hover {
  color: var(--on);
  border-color: color-mix(in srgb, var(--accent, var(--coral)) 55%, transparent);
}
.wf-arrow[data-step="-1"]:hover { transform: translateX(-2px); }
.wf-arrow[data-step="1"]:hover { transform: translateX(2px); }
.wf-arrow:active { transform: scale(.93); }

/* The section is a slide now, not a scroll: it holds one screen and
   the arc moves through it. */
#what { height: auto; }
/* The pin is a row by default — every other scene puts one thing in
   it — so here it becomes a column, or the arc lines up beside the
   grid instead of under it. */
#what .scene-pin {
  height: 100svh;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.6svh, 20px);
  /* The arc's ends fall a long way below its middle, which puts the
     last card exactly where the deck bar floats. This is the room
     that keeps them apart. */
  padding-bottom: clamp(34px, 6svh, 64px);
}
#what .scene-grid { width: 100%; flex: 0 1 auto; min-height: 0; }
/* The phone gives up some height so the arc has a floor to stand on.
   The one it flies into has to give up exactly as much, or the two are
   different widths at the crossfade and the outgoing screen shows
   around the edge of the incoming one. */
#what .phone,
.deck-scene .phone { --pw-base: 252; }
/* The words keep to the upper two-thirds, so the arc has the floor. */
#what .wordfield { height: 72%; }
/* No ordinal behind the heading here. The arc under it already shows
   where you are in the eight, and better than a numeral does. */
#what .beat-ghost { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wc { transition-duration: 1ms; }
}
@media (max-width: 1180px) {
  /* Eight cards, two arrows and the rail do not all fit past here at
     full size. The width follows the cards, so shrinking them is the
     whole fix. */
  .what-fan { --cw: clamp(60px, min(7vw, 11.2svh), 94px); }
  /* The end cards turn hardest, so their corners reach further than
     the row's own edge. Small cards need more room beside them, not
     less. */
  .what-fanwrap { gap: clamp(20px, 2.6vw, 30px); }
  .wc-t { font-size: .66rem; }
}
/* ── Floating word field — the scene's empty ground put to work ───
   This scene is a phone on the left and a column of copy on the right,
   which leaves a wide band of nothing above both, a wider one below,
   and a quiet corner out past the copy. This layer lives in it.

   These are not labels. They name nothing and point at nothing — they
   are the beat's own vocabulary drifting in the dark around it, in the
   same ghost-type voice the page already uses for .beat-ghost, the big
   translucent ordinal behind each heading. The tint comes from
   --accent, which tour.js sets on the scene, so the field retints with
   the heading and the phone glow and never names a colour itself.

   Depth is two numbers, and they run in opposite directions. --s
   scales the type; --o sets how much accent is mixed into it. The
   largest words are the faintest and the smallest the most solid,
   which is what reads as distance — a spread of sizes at one opacity
   just reads as inconsistent.

   The layer sits under the phone (z 20) and the copy, so a word that
   does cross either passes behind it rather than over it. */
.wordfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.wf-set { position: absolute; inset: 0; }

/* Two elements, because one cannot both arrive and drift — an infinite
   animation always beats a transition on the same transform.
     .wf    where it sits, and the one-time entrance
     .wf-w  the perpetual drift, which never stops */
.wf {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: var(--sans);
  font-weight: 800;
  font-size: calc(var(--s, 1) * clamp(.95rem, 1.45vw, 1.45rem));
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--accent, var(--coral)) var(--o, 22%), transparent);
  -webkit-user-select: none;
  user-select: none;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .85s var(--ease),
    transform 1s var(--ease-out),
    color .6s var(--ease);
}
.wf-set.is-on .wf { opacity: 1; transform: none; }

/* They arrive scattered rather than together. Source order runs top
   band first, then bottom, so the frame fills outward. */
.wf-set.is-on .wf:nth-child(1) { transition-delay: .05s; }
.wf-set.is-on .wf:nth-child(2) { transition-delay: .16s; }
.wf-set.is-on .wf:nth-child(3) { transition-delay: .27s; }
.wf-set.is-on .wf:nth-child(4) { transition-delay: .38s; }
.wf-set.is-on .wf:nth-child(5) { transition-delay: .49s; }
.wf-set.is-on .wf:nth-child(6) { transition-delay: .60s; }
.wf-set.is-on .wf:nth-child(7) { transition-delay: .71s; }
.wf-set.is-on .wf:nth-child(8) { transition-delay: .82s; }
.wf-set.is-on .wf:nth-child(9) { transition-delay: .93s; }

.wf-w {
  display: inline-block;
  animation: wfDrift 13s ease-in-out infinite;
  will-change: transform;
}
/* Never in step. A field that bobs together reads as one object being
   moved; out of phase, it reads as depth. */
.wf:nth-child(2) .wf-w { animation-duration: 16.4s; animation-delay: -5.2s; }
.wf:nth-child(3) .wf-w { animation-duration: 11.3s; animation-delay: -2.7s; }
.wf:nth-child(4) .wf-w { animation-duration: 14.8s; animation-delay: -8.1s; }
.wf:nth-child(5) .wf-w { animation-duration: 12.1s; animation-delay: -3.9s; }
.wf:nth-child(6) .wf-w { animation-duration: 17.2s; animation-delay: -6.4s; }
.wf:nth-child(7) .wf-w { animation-duration: 10.6s; animation-delay: -1.5s; }
.wf:nth-child(8) .wf-w { animation-duration: 15.5s; animation-delay: -9.3s; }
.wf:nth-child(9) .wf-w { animation-duration: 12.8s; animation-delay: -4.6s; }

/* Travel divides by --s, so the big far words move least. That is the
   right way round: it is what stops the field looking like one sheet
   of text wobbling. */
@keyframes wfDrift {
  0%, 100% { transform: translate3d(0, calc(-10px / var(--s, 1)), 0); }
  50%      { transform: translate3d(calc(5px / var(--s, 1)), calc(10px / var(--s, 1)), 0); }
}

/* The copy has to sit over the field, and it needs its own stacking
   context to do it — .beat-ghost is z-index:-1 inside .beat, which
   would otherwise drop it behind the words too. */
#what .scene-copy { position: relative; z-index: 5; }

/* The copy does not fill its column — the paragraph is capped at 42ch,
   so a ~490px block sits in a ~710px cell. Left-aligned, that slack
   falls off the right of the frame where nobody sees it; the moment
   the sides trade places it falls BETWEEN the text and the phone, and
   the gap that read as 158px one way reads as 380px the other.

   So the block is given the width it actually uses, and it changes
   which edge of the column it hangs from when the sides swap. */
/* A width, not a max-width: an auto margin makes a grid item shrink
   to its content, and the content here is a heading that then wraps.
   Both sides have to be the same box or the composition slides left
   and right as the beats go by. */
#what .beat { width: min(33rem, 100%); }
#what.swapped .beat { margin-left: auto; }
@media (max-width: 900px) {
  /* One column below this: the copy is centred, so it hangs from
     neither edge. */
  #what .beat,
  #what.swapped .beat { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wf { transition-delay: 0s !important; }
  .wf-w { animation: none; }
}

/* The positions are percentages of a wide pinned stage. Below this the
   grid stacks, the empty ground it was placed in stops existing, and
   every word would land on the phone or the copy. */
@media (max-width: 1024px) {
  .wordfield { display: none; }
}

/* Stacked, the slide stops being a slide. Phone, copy and arc in one
   column need more than 100svh, and a pin with a fixed height answers
   that by clipping the top off the phone. So below this the pin grows
   with its content and the section simply scrolls.

   Both phones move together or not at all: the flight between them
   lands pixel-exactly, and two different widths at the crossfade show
   the outgoing screen around the edge of the incoming one. */
@media (max-width: 900px) {
  #what .scene-pin {
    height: auto;
    min-height: 100svh;
    padding-block: calc(var(--nav-h) + 20px) 34px;
  }
  #what .phone,
  .deck-scene .phone { --pw-base: 208; }
}

/* ══ WHAT MYNA IS — the sides trade places ════════════════════════
   Every second beat the phone and the copy change sides, so stepping
   through the section has a rhythm rather than being the same frame
   with new words in it.

   Neither can simply be re-ordered in the grid: grid-column is not
   animatable, and the stage's own transform belongs to the flight
   that carries the phone out of this section. So the phone travels on
   a wrapper inside the stage, the copy travels on itself, and the two
   distances are measured in script because one column is a fraction.

   The word field is placed against a phone on the left, so on a
   swapped beat its words are placed from the right edge instead. */
.stage-swap { transition: transform .82s var(--ease-out); }
#what .scene-copy { transition: transform .82s var(--ease-out); }
#what.swapped .stage-swap { transform: translateX(var(--swap-stage, 0px)); }
#what.swapped .scene-copy { transform: translateX(var(--swap-copy, 0px)); }

#what.swapped .wf { left: auto; right: var(--x); }

@media (prefers-reduced-motion: reduce) {
  .stage-swap, #what .scene-copy { transition-duration: 1ms; }
}
/* One column below this, so there are no sides left to trade. */
@media (max-width: 900px) {
  #what.swapped .stage-swap,
  #what.swapped .scene-copy { transform: none; }
  #what.swapped .wf { left: var(--x); right: auto; }
}

/* ════ ONE FRAME FOR EVERY SLIDE ════════════════════════════════════════════════════════════
   Every section keeps its own layout and motion; only its measures are made to match: one headline
   size, one lede, one eyebrow, the copy starting at the same left edge, and the same room at the top. */
:root {
  --u-h2: clamp(1.9rem, min(3.5vw, 5.8svh), 3.25rem);
  --u-lede: clamp(.92rem, min(1.1vw, 1.9svh), 1.06rem);
}
/* the headline of a slide */
#skills .t-lg, .beat h3, .prm-h, .pmr-h, .mts-h, .aiy-h, .rsx-copy h3, .oz-ch, .oz-cov .oz-ch, .oz-cover .oz-ch, .trs-h, #talk .t-xl {
  font-size: var(--u-h2); font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
}
/* the line under it */
.sk-sub, .beat p:not(.beat-sub), .prm-lede, .aiy-lede, .rsx-kick, .oz-lede, .trs-lede, #talk .lede, .mts-nd, .hero .lede {
  font-size: var(--u-lede); line-height: 1.55; color: var(--on-2); font-weight: 500;
}
/* the eyebrow above it: mono, small caps, a short rule before it */
.eyebrow, .beat-n, .prm-chapter, .pmr-chapter, .trs-eye, .rsx-eye {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.3;
}
.eyebrow, .trs-eye, .prm-chapter, .pmr-chapter { color: var(--coral-deep, #a72f28); }
.eyebrow::before { background: currentColor; }
.beat-n, .prm-chapter, .pmr-chapter { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(10px, 1.8vh, 16px); }
.beat-n::before, .prm-chapter::before, .pmr-chapter::before { content: ""; flex: none; width: 22px; height: 1px; background: currentColor; }
.pmr-chapter { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pmr-chapter i { display: none; }
@media (min-width: 901px) {
  /* the hero's copy starts at the page's left edge like every other slide, its devices end at the right one */
  .hero .wrap { grid-template-columns: minmax(0, 1fr) min(calc(var(--hpw) * 1.5px), 32vw); }
  /* the same room at the top: the slides that sat against the edge come down to meet the others */
  #what .scene-pin { padding-top: clamp(20px, 3.4svh, 36px); }
  .aiy-wrap { padding-top: clamp(16px, 2.6svh, 28px); }
  #aimyna .phone { --pw-base: 252; }
  /* the orbit is drawn from the phone's own size (it was fixed at the old, bigger phone), and the gap to the callouts
     is never less than the ring reaches past the phone, plus an icon and some air: the icons can't touch the cards */
  #aimyna .aiy-dev { --ob: 252; }
  .aiy-stage { column-gap: max(clamp(44px, 7vw, 116px), calc(var(--ob, 252) * var(--pw-k) * .31px + 52px)); }
  .pmr-copy { padding-top: clamp(20px, 4svh, 44px); }
}
@media (min-width: 1101px) {
  /* room for the bigger headline in Myna Test's copy column */
  .mts-wrap { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); }
}
/* the headline's second half in the theme's gradient, as on every other slide: the four skills in the site's
   coral-to-orange (the hero's "English Companion" keeps its solid coral — the user preferred it); each What Myna is beat in its own accent, a warm step
   along the hue (relative colour; a plain accent where that isn't supported) */
#skills .t-lg em { font-style: normal; background: linear-gradient(95deg, #e2453e 5%, #f08a3c 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.beat h3 em { font-style: normal; background: linear-gradient(95deg, var(--accent, #e2453e), var(--accent, #e2453e)); background: linear-gradient(95deg, var(--accent, #e2453e) 5%, hsl(from var(--accent, #e2453e) calc(h + 24) s calc(l + 6)) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.beat[data-accent="var(--coral)"] { --accent: var(--coral-lit, #e2544c); }
.beat[data-accent="var(--amber)"] { --accent: var(--amber); }
.beat[data-accent="var(--violet)"] { --accent: var(--violet); }
.beat[data-accent="var(--mint)"] { --accent: var(--mint); }
.beat[data-accent="var(--amber)"] h3 em { background: linear-gradient(95deg, var(--amber) 5%, #e0852c 95%); -webkit-background-clip: text; background-clip: text; }
/* What Myna is (sample A, chosen 29 Sep 2026): the phone and copy centred as a pair with even room either side,
   the phone off the top edge, and a flatter, lower arc of cards; the drifting words stay */
@media (min-width: 1101px) {
  #what .scene-grid.flip { grid-template-columns: auto minmax(0, 33rem); justify-content: center; column-gap: clamp(64px, 6.5vw, 104px); }
  #what .scene-pin { padding-top: clamp(40px, 6svh, 64px); gap: clamp(14px, 2.4svh, 28px); }
  .what-fan { --cw: clamp(74px, min(7.2vw, 11svh), 100px); --r: calc(var(--cw) * 12); --a: 4.7deg;
              width: calc(var(--r) * 2 * .2832 + var(--cw) * 1.5); height: calc(var(--ch) + var(--r) * .0409 + 6px); }
}
/* What Myna is: plain cards in the page's own warm white; no colour wash, a soft shadow, the one on marked by its border */
.wc { background: #fffcfb; border-color: rgba(120, 60, 50, .1); box-shadow: 0 1px 2px rgba(60, 30, 26, .05), 0 10px 22px -18px rgba(60, 30, 26, .32); }
.wc.on { background: #fff; border-color: color-mix(in srgb, var(--c) 38%, transparent); box-shadow: 0 2px 4px rgba(60, 30, 26, .06), 0 18px 32px -22px rgba(60, 30, 26, .4); }
/* the hero: the four facts sit close together under the copy; the phone and laptop are bigger, nearer the text's weight */
.stats { display: flex; flex-wrap: wrap; width: fit-content; }
.stats > div { padding: 2px 28px 2px 22px; }
.stats > div:last-child { padding-right: 0; }
@media (min-width: 1101px) {
  .hero { --hpw: calc(370 * var(--pw-k)); }
  .hero .phone { --pw-base: 370; }
  /* the copy takes only the width it needs; the devices take the rest and come up close to it */
  .hero .wrap { grid-template-columns: minmax(0, 585px) calc(var(--hpw) * 1.6px); column-gap: clamp(16px, 2vw, 32px); }
  .hero h1 { max-width: none; }
  /* with the laptop open the phone stands at the laptop's right end, half past it, as it always did:
     from the column's middle (.8) to the laptop's right edge (.2 in from the column's) */
  .hero.show-web .phone[data-rise].is-in { transform: translate(calc(var(--hpw) * .6px), 5%) scale(.45); }
}

/* ════ WHAT MYNA IS: THE APP, TAPPED THROUGH ═══════════════════════════════════════════════════════
   Each beat's phone walks the real app (whatShow in tour.js): a finger taps, what it taps pops out of the
   phone, and the screen it opens slides in as it does in the app. The screens are screenshots. */
.wfx { background: #fff; }
.wv { position: absolute; inset: 0; overflow: hidden; background: #fff; transform: translateX(100%); transition: transform .55s cubic-bezier(.32, .72, 0, 1), filter .55s cubic-bezier(.32, .72, 0, 1); }
.wv > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wv.on { z-index: 2; transform: none; }
.wv.back { z-index: 1; transform: translateX(-28%); filter: brightness(.9); }
.wfx.snap .wv { transition: none; }
/* the layer the pops, the letters and the finger live on: the phone's box, not clipped by its screen */
#what .stage-swap { position: relative; }
.what-fx { --fw: 240px; position: absolute; inset: 0; z-index: 6; pointer-events: none; }
/* a part of the screen, lifted out of it */
.wpop { position: absolute; background-repeat: no-repeat; border-radius: calc(var(--fw) * .05); box-shadow: 0 0 0 1px rgba(226, 85, 76, .28), 0 22px 40px -16px rgba(70, 24, 20, .55), 0 6px 14px -6px rgba(70, 24, 20, .25); will-change: transform; }
.wpop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, .45), transparent 42%); pointer-events: none; }
/* the finger: a fingertip pressing, and a ring going out from it */
.wtap { position: absolute; width: calc(var(--fw) * .2); aspect-ratio: 1; translate: -50% -50%; }
.wtap::before, .wtap::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.wtap::before { background: radial-gradient(circle, rgba(40, 20, 24, .32) 0 38%, rgba(40, 20, 24, .12) 60%, transparent 72%); animation: wTip .62s cubic-bezier(.3, .7, .3, 1) both; }
.wtap::after { box-shadow: 0 0 0 calc(var(--fw) * .012) #e2554c, 0 0 18px 2px rgba(226, 85, 76, .5); animation: wRing .8s cubic-bezier(.2, .8, .3, 1) both .08s; }
@keyframes wTip { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(.78); } 55% { opacity: 1; transform: scale(.86); } 100% { opacity: 0; transform: scale(.9); } }
@keyframes wRing { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2.1); } }
/* a word rising out of what was tapped, letter by letter */
.wword { position: absolute; translate: -50% -100%; white-space: nowrap; font-family: var(--sans); font-size: calc(var(--fw) * .135); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #e2554c; text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 12px 26px rgba(226, 85, 76, .38); }
.wword > span { display: inline-block; animation: wLet .55s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--i) * 38ms); }
.wword.out > span { animation: wLetOut .42s cubic-bezier(.5, 0, .75, .2) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes wLet { from { opacity: 0; transform: translateY(55%) scale(.3) rotate(-10deg); } }
@keyframes wLetOut { to { opacity: 0; transform: translateY(-70%) scale(.85); } }
/* Manage and monitor: the college's report, in the phone's PDF viewer */
.wrp .wv { background: #eef0f3; }
.wrp-sb { position: absolute; left: 0; right: 0; top: 0; height: 5%; background-size: 100% auto; background-position: 0 0; background-color: #fff; }
.wrp-hd { position: absolute; left: 0; right: 0; top: 5%; z-index: 2; display: flex; align-items: center; gap: 8px; height: 7%; padding: 0 5%; background: #fff; box-shadow: 0 1px 0 #e6e8ec; font-size: calc(var(--pwn, 306) * .052px); }
.wrp-hd i { font-style: normal; font-size: 1.6em; line-height: 1; color: #222; }
.wrp-hd b { flex: 1; text-align: center; font-weight: 800; color: #c9403a; }
.wrp-hd span { padding: .2em .55em; border-radius: 6px; font-size: .72em; font-weight: 700; color: #fff; background: #c9403a; }
.wrp-view { position: absolute; left: 0; right: 0; top: 12%; bottom: 0; overflow: hidden; }
.wrp-pages { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px 40px; will-change: transform; }
.wrp-pages img { display: block; width: 100%; height: auto; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 18px -10px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { .wv { transition: none; } }

/* ════ TRUSTED BY — THE LOGOS ═══════════════════════════════════════════════════════════════════
   The colleges' own logos on plain white cards: no crest, no text, no shadow cast below. The card in front is
   clear; the others wash out towards white as they turn away (--fade, from trustRing() in tour.js). */
.trs-ring .trs-card { width: clamp(210px, min(21vw, 36svh), 330px); height: clamp(210px, min(21vw, 36svh), 330px); padding: clamp(20px, 2.4vw, 34px); gap: 0; border-radius: 24px;
                      background: #fff; box-shadow: 0 0 0 1px rgba(120, 60, 50, .08), 0 0 26px rgba(90, 40, 40, .06); }
.trs-ring .trs-card::before { display: none; }
.trs-ring .trs-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: var(--fade, 0); pointer-events: none; }
.trs-ring .trs-card:hover { box-shadow: 0 0 0 1px rgba(120, 60, 50, .08), 0 0 26px rgba(90, 40, 40, .06); }
.trs-logo { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
@media (max-width: 900px) { .trs-ring .trs-card { width: 172px; height: 172px; padding: 18px; border-radius: 20px; } }

/* ════ TRUSTED BY — BIGGER ════════════════════════════════════════════════════════════════════════
   Larger cards spread across the width, the edge fade kept to the last few percent, and a headline sized to the ring. */
.trs-ring .trs-card { width: clamp(230px, min(24vw, 42svh), 400px); height: clamp(230px, min(24vw, 42svh), 400px); }
.trs-ring { height: clamp(300px, 48svh, 470px); margin-top: clamp(18px, 3.4svh, 40px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.trs-h { font-size: clamp(2.2rem, min(4.4vw, 7.4svh), 4.4rem); letter-spacing: -.045em; }
.trs-lede { max-width: 60ch; font-size: clamp(.98rem, min(1.2vw, 2.2svh), 1.18rem); }
.trs-eye { font-size: .8rem; }
/* a side card's logo steps away from the card that overlaps it, into its own padding, so it shows whole (--lx from trustRing()) */
.trs-logo { translate: var(--lx, 0px) 0; }
@media (max-width: 900px) { .trs-ring .trs-card { width: 190px; height: 190px; } .trs-ring { height: 300px; } .trs-h { font-size: clamp(1.7rem, 7.4vw, 2.3rem); } }

/* ════ COST COMPARISON ═══════════════════════════════════════════════════════════════════════════
   The site's highlight. A list of tests on the left; one card for the chosen test: its price as two pairs of columns
   (the other test in the recessive grey, Myna in the brand coral — #9b8e8b vs #d9453d, CVD-checked ΔE 9.9, every column
   labelled), its questions by skill, and what it scores beside what Myna scores. costCompare() in tour.js runs it. */
.cst { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fffaf8 0%, #fff3ee 55%, #fffaf8 100%); }
.cst-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cst-bg i { position: absolute; border-radius: 50%; }
.cst-bg i:first-child { left: -8%; top: 8%; width: 46vw; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 138, 100, .15), transparent 72%); }
.cst-bg i:last-child { right: -6%; bottom: -12%; width: 40vw; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(226, 84, 76, .11), transparent 72%); }
.cst-bw { position: absolute; left: calc(var(--gut) - .04em); bottom: -.18em; font-family: var(--sans); font-size: clamp(10rem, min(24vw, 38svh), 22rem); font-weight: 800; line-height: .8; letter-spacing: -.06em;
          color: transparent; -webkit-text-stroke: 1.5px rgba(226, 85, 76, .12); background: linear-gradient(180deg, rgba(255, 170, 140, .14), rgba(255, 170, 140, 0) 80%); -webkit-background-clip: text; background-clip: text; user-select: none; }
.cst.band { flex-direction: column; justify-content: center; }
.cst.band > .wrap { width: 100%; }
.cst-wrap { position: relative; max-width: 1320px; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; column-gap: clamp(32px, 4.4vw, 72px); }
.cst-copy { min-width: 0; }
.cst-copy .eyebrow { margin-bottom: 0; color: var(--coral-deep, #a72f28); }
.cst-h { margin-top: clamp(8px, 1.6svh, 14px); font-size: var(--u-h2); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; }
.cst-h em { font-style: normal; background: linear-gradient(95deg, #e2453e 5%, #f08a3c 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cst-lede { margin: clamp(8px, 1.4svh, 12px) 0 0; max-width: 40ch; font-size: var(--u-lede); line-height: 1.5; color: var(--on-2); }
.cst-lede b { color: var(--on); }
/* the list of tests */
.cst-list { display: flex; flex-direction: column; gap: 2px; margin-top: clamp(14px, 2.6svh, 24px); }
.cst-grp { margin: clamp(6px, 1.2svh, 10px) 0 3px 12px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-3); }
.cst-grp:first-child { margin-top: 0; }
.cst-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 3.6rem; align-items: center; gap: 12px; width: 100%; padding: clamp(5px, .95svh, 8px) 12px; border: 0; border-radius: 12px;
            font: inherit; text-align: left; color: var(--on-2); background: transparent; cursor: pointer; transition: background .25s var(--ease), color .25s, box-shadow .25s; }
.cst-item:hover { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(226, 85, 76, .16); }
.cst-in { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; color: var(--on); }
.cst-ip { font-size: .8rem; font-weight: 600; color: var(--on-3); font-variant-numeric: tabular-nums; }
.cst-ix { justify-self: end; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: #b53a33; background: #fdebe7; font-variant-numeric: tabular-nums; }
.cst-item.on { background: #fff; box-shadow: 0 0 0 1.5px #e2544c, 0 12px 24px -16px rgba(226, 84, 76, .8); }
.cst-item.on::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: #e2544c; }
.cst-item.on .cst-ix { color: #fff; background: linear-gradient(135deg, #ff7d63, #e2544c); }
.cst-item:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.cst-keys { display: flex; align-items: center; gap: 5px; margin: clamp(8px, 1.6svh, 14px) 0 0 12px; font-size: .74rem; font-weight: 600; color: var(--on-3); }
.cst-keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font-family: var(--mono); font-size: 11px; color: var(--on); background: var(--surface, #fff); box-shadow: inset 0 -2px 0 #eadcd8, 0 0 0 1px rgba(120, 60, 50, .14); }
/* the card */
.cst-card { position: relative; min-width: 0; padding: clamp(16px, 2.6svh, 26px) clamp(18px, 2.2vw, 30px); border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(226, 85, 76, .12), 0 30px 60px -46px rgba(90, 30, 25, .3); }
.cst-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cst-tname { margin: 0; font-size: clamp(1.2rem, min(1.8vw, 3.2svh), 1.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--on); }
.cst-tmeta { margin: 3px 0 0; font-size: .84rem; font-weight: 600; color: var(--on-3); }
.cst-x { flex: none; display: flex; flex-direction: column; align-items: flex-end; margin: 0; line-height: 1; }
.cst-x b { font-size: clamp(2.6rem, min(4.6vw, 8svh), 4.4rem); font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
           background: linear-gradient(95deg, #e2453e 5%, #f08a3c 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cst-x span { margin-top: 3px; font-size: .8rem; font-weight: 700; color: var(--on-2); }
.cst-x b.pop { animation: cstPop .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes cstPop { from { transform: scale(.86); } }
.cst-part { margin-top: clamp(12px, 2.2svh, 20px); padding-top: clamp(10px, 1.8svh, 16px); border-top: 1px solid #f3e9e6; }
.cst-cap { margin: 0 0 8px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-3); }
/* the price: two pairs of bars from one baseline, each labelled at its end */
.cst-price { display: grid; grid-template-columns: 1fr; gap: clamp(8px, 1.6svh, 14px); }
.cst-price .cst-cap { margin-bottom: 2px; }
.cst-hb { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; height: clamp(24px, 3.6svh, 32px); cursor: default; }
.cst-hn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; font-size: .8rem; font-weight: 700; color: var(--on-2); }
.cst-hb.us .cst-hn { color: var(--on); }
.cst-ht { display: flex; align-items: center; gap: 8px; height: 100%; border-left: 1px solid rgba(120, 60, 50, .24); }
.cst-ht s { flex: none; display: block; height: 62%; width: calc((100% - 4.8rem) * var(--p, 0)); border-radius: 0 4px 4px 0; text-decoration: none; transition: width .9s cubic-bezier(.3, .7, .2, 1); }
.cst-hb.them s { background: #9b8e8b; }
.cst-hb.us s { background: #d9453d; }
.cst-hb.us s.on { min-width: 4px; }
.cst-ht b { white-space: nowrap; font-size: .98rem; font-weight: 800; color: var(--on); font-variant-numeric: tabular-nums; }
.cst-hb.us b { font-size: 1.1rem; }
/* questions by skill */
.cst-skills { display: grid; gap: 5px; }
.cst-sk { display: grid; grid-template-columns: 5.6rem 1fr minmax(9rem, auto); align-items: center; gap: 12px; font-size: .82rem; cursor: default; }
.cst-sk > span { font-weight: 700; color: var(--on); }
.cst-sk i { position: relative; height: 10px; border-radius: 999px; background: #f6efed; overflow: hidden; }
.cst-sk i s { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 4px 4px 0; background: #9b8e8b; text-decoration: none; transition: width .8s cubic-bezier(.3, .7, .2, 1); transition-delay: calc(var(--r, 0) * 70ms); }
.cst-sk em { font-style: normal; font-weight: 600; color: var(--on-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cst-sk em b { color: #b53a33; font-weight: 800; }
.cst-sk.off > span, .cst-sk.off em { color: var(--on-3); font-weight: 600; }
/* what it scores */
.cst-sc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 28px); }
.cst-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cst-chips li { padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.35; color: var(--on-2); background: #f7f1ef; animation: cstChip .45s var(--ease-out) both; animation-delay: calc(var(--r, 0) * 35ms); }
.cst-chips.m li { color: #9a2f29; background: #fdebe7; }
@keyframes cstChip { from { opacity: 0; transform: translateY(4px); } }
/* a change of test: the card's words slide */
.cst-ch > div, .cst-skills, #cst-scores { transition: opacity .25s var(--ease), transform .4s var(--ease-out); }
.cst-card.out .cst-ch > div, .cst-card.out .cst-skills, .cst-card.out #cst-scores { opacity: 0; transform: translateY(6px); transition-duration: .15s; }
.cst-tip { position: absolute; z-index: 3; left: 0; top: 0; max-width: 260px; padding: 7px 11px; border-radius: 10px; font-size: .76rem; font-weight: 600; line-height: 1.4; color: #fff; background: #2a1d1f;
           box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); transition: opacity .15s; }
.cst-tip.on { opacity: 1; }
.cst-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav-links > :nth-child(9) { --k: 8; } .nav-links > :nth-child(10) { --k: 9; }
@media (max-height: 800px) and (min-width: 901px) {
  .cst-lede, .cst-keys { display: none; }
  .cst-price { grid-template-columns: 1fr 1fr; column-gap: clamp(16px, 2.4vw, 32px); }
  .cst-hb { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .cst-part { margin-top: 10px; padding-top: 9px; }
}
@media (max-width: 1100px) and (min-width: 901px) { .cst-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .cst-ip { display: none; } .cst-item { grid-template-columns: minmax(0, 1fr) 3.4rem; } }
@media (max-width: 900px) {
  .cst-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .cst-bw { font-size: 8rem; }
  .cst-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 4px 2px 8px; scrollbar-width: none; }
  .cst-list::-webkit-scrollbar { display: none; }
  .cst-grp { display: none; }
  .cst-item { flex: none; width: auto; grid-template-columns: auto auto; gap: 8px; padding: 7px 12px; background: #fff; box-shadow: 0 0 0 1px rgba(226, 85, 76, .16); }
  .cst-ip, .cst-keys { display: none; }
  .cst-item.on::before { display: none; }
  .cst-sc { grid-template-columns: 1fr; }
  .cst-hb { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .cst-sk { grid-template-columns: 4.6rem 1fr auto; }
  .cst-x b { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .cst-ht s, .cst-sk i s, .cst-ch > div, .cst-skills, #cst-scores { transition: none; } .cst-chips li, .cst-x b.pop { animation: none; } }

/* ════ WALKTHROUGH CLIPS ═════════════════════════════════════════════════════════════════════════
   A module's "How to use" recording, on our phone instead of its own. .clip-screen covers the screen under the status
   bar and holds the clip zoomed so that the screen of the phone inside it fills ours (--k, from the crop that
   clipVideo() in tour.js puts on each video: its centre --cx/--cy and size --cw/--ch, in video pixels). .clip-face is
   the presenter, drawn from the same video into a bubble that comes out of the phone's bottom-left corner. */
.clip-screen { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; z-index: 40; overflow: hidden; container-type: size; background: #fbf8fa;
               opacity: 0; pointer-events: none; transition: opacity .16s var(--ease); }
.clip-screen.is-on.has-frame { opacity: 1; }
.clip-screen > .clip-v { --k: max(100cqw / var(--cw), 100cqh / var(--ch)); position: absolute; display: block; max-width: none; object-fit: fill;
          width: calc(var(--k) * 1080); height: calc(var(--k) * 1920); left: calc(50cqw - var(--k) * var(--cx)); top: calc(50cqh - var(--k) * var(--cy)); }
.clip-face { position: absolute; z-index: 6; left: -15%; bottom: -3%; width: 44%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: #f1e9e6; cursor: pointer;
             box-shadow: 0 0 0 3px #fff, 0 0 0 6px #e2544c, 0 24px 44px -16px rgba(110, 30, 25, .55);
             opacity: 0; transform: translate(24%, -22%) scale(.3); pointer-events: none;
             transition: opacity .25s var(--ease), transform .6s cubic-bezier(.2, 1.35, .35, 1); }
.clip-face.is-on.has-frame { opacity: 1; transform: none; pointer-events: auto; }
.clip-face canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.clip-face:focus-visible { outline: 2px solid var(--coral); outline-offset: 9px; }
.clip-mute { position: absolute; right: -3%; bottom: 3%; display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; color: #b53a33; background: #fff;
             box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--ease-out); }
.clip-mute svg { width: 56%; height: 56%; }
.clip-face.is-muted .clip-mute { opacity: 1; transform: none; }
/* Prime: the call's own status bar stays above the clip; while the clip loads, the call shows through */
.pmx-vid.is-clip { top: 44px; background: transparent; }
.pmx-vid.is-clip .clip-screen { top: 0 !important; }
.pmx-vid.is-clip .pmx-x { top: 10px; z-index: 50; background: rgba(28, 21, 23, .55); }
/* the cloud now carries a line or two on what the module is: on a short screen it sets smaller, clear of the skill tabs */
@media (max-height: 800px) and (min-width: 1241px) { #skills .think-txt { font-size: .82rem; line-height: 1.45; } #skills .think { padding: 11px 14px 12px; } }
@media (max-height: 800px) and (max-width: 1240px) and (min-width: 901px) { #skills .think-txt { font-size: .8rem; line-height: 1.42; } }
@media (prefers-reduced-motion: reduce) { .clip-face { transform: none; transition: opacity .2s; } }