/* Study64 — Paper → Screen.
   Two worlds. Paper is your notes: warm stock, ruled lines, a red margin, handwriting.
   Screen is the game: ink, real gameplay, monospace HUD labels. Violet gets one full field. */

@font-face {
  font-family: "Dela Gothic One";
  src: url("../assets/fonts/dela-gothic-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Gochi Hand";
  src: url("../assets/fonts/gochi-hand.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f3f0e8;
  --card: #fffdf7;
  --ink: #0f0e15;
  --ink-2: #17151f;
  --ink-3: #211e2b;
  --muted-paper: #585462;
  --muted-screen: #aaa5b9;
  --line-paper: rgb(15 14 21 / .14);
  --line-screen: rgb(255 255 255 / .11);
  --ruled: rgb(52 96 178 / .13);
  --margin-red: rgb(214 72 72 / .38);

  --violet: #6e48f6;
  --violet-soft: #a48cff;
  --yellow: #fbcb0a;
  --yellow-edge: #a88600;
  --teal: #19c3b2;
  --coral: #f65a3f;
  --gold: #f2b705;

  --display: "Dela Gothic One", "Arial Black", sans-serif;
  --text: "Schibsted Grotesk", system-ui, sans-serif;
  --hud: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --hand: "Gochi Hand", "Comic Sans MS", cursive;

  --bar-h: 68px;
  --pad-x: max(clamp(20px, 4.5vw, 64px), (100% - 1280px) / 2);
  --pad-y: clamp(96px, 14vh, 168px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--yellow); color: var(--ink); }

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }

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

[id] { scroll-margin-top: var(--bar-h); }

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skipLink {
  position: absolute;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  background: var(--yellow);
  border-radius: 8px;
  font-weight: 700;
  transform: translateY(-160%);
}

.skipLink:focus { transform: none; }

/* Voices */
.display {
  font: 400 clamp(2.6rem, 5.6vw, 5.4rem)/.95 var(--display);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.hud {
  font: 600 .72rem/1.2 var(--hud);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hand { font: 400 1.5rem/1.1 var(--hand); }

/* The one physical control: a key with a visible bottom edge. */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  background: var(--yellow);
  color: var(--ink);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--yellow-edge);
  font: 700 1rem/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(0);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .key:hover { background: #ffd62e; }
  .keyGhost:hover { background: rgb(15 14 21 / .05); }
  .arrowLink:hover { text-decoration-color: currentColor; }
  .arrowLink:hover span { transform: translateY(2px); }
}
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-edge); transition-duration: .05s; }

.keySmall { min-height: 42px; padding: 0 16px; font-size: .95rem; border-radius: 9px; box-shadow: 0 3px 0 var(--yellow-edge); }
.keySmall:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yellow-edge); }

.keyGhost {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor, 0 4px 0 var(--line-paper);
}

.keyGhost:active { box-shadow: inset 0 0 0 1.5px currentColor, 0 1px 0 var(--line-paper); }

.arrowLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .2s ease;
}

.arrowLink span { transition: transform .2s var(--ease); }

/* Bar: follows the world it sits over */
.bar {
  --bar-bg: var(--paper);
  --bar-fg: var(--ink);
  --bar-line: var(--line-paper);
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--bar-h);
  padding: 0 var(--pad-x);
  background: var(--bar-bg);
  color: var(--bar-fg);
  box-shadow: inset 0 -1px 0 var(--bar-line);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.bar[data-theme="screen"] { --bar-bg: var(--ink); --bar-fg: var(--paper); --bar-line: var(--line-screen); }
.bar[data-theme="drop"] { --bar-bg: var(--violet); --bar-fg: var(--paper); --bar-line: rgb(255 255 255 / .2); }

.barBrand { position: relative; display: block; flex: none; }
.barBrand img { width: auto; height: 34px; transition: opacity .3s; }
.bar .logoScreen { position: absolute; inset: 0; opacity: 0; }
.bar:not([data-theme="paper"]) .logoScreen { opacity: 1; }
.bar:not([data-theme="paper"]) .logoPaper { opacity: 0; }

.barNav {
  display: flex;
  gap: 4px;
  margin: 0 auto;
}

.barNav a {
  padding: 10px 12px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  opacity: .72;
  transition: opacity .15s;
}

.barNav a:hover { opacity: 1; }

.barActions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.barNav + .barActions { margin-left: 0; }

.barLink {
  padding: 10px 4px;
  font-weight: 700;
  text-decoration: none;
}

.navToggle { display: none; }

/* 1 · Hero */
.hero {
  position: relative;
  height: 250vh;
  background: var(--ink);
}

.heroPin {
  --dark: 0;
  position: sticky;
  top: var(--bar-h);
  height: calc(100svh - var(--bar-h));
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  transition: color .3s ease;
}

/* Text flips once, at the midpoint, so it never sits grey on grey. */
.heroPin.isScreen { color: var(--paper); }

/* Notebook: ruled lines and the red margin that runs through every paper section */
.heroPaper,
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(var(--pad-x) - 22px), var(--margin-red) calc(var(--pad-x) - 22px) calc(var(--pad-x) - 20.5px), transparent calc(var(--pad-x) - 20.5px)),
    var(--paper);
}

.heroPaper {
  background:
    linear-gradient(to right, transparent calc(var(--pad-x) - 22px), var(--margin-red) calc(var(--pad-x) - 22px) calc(var(--pad-x) - 20.5px), transparent calc(var(--pad-x) - 20.5px)),
    repeating-linear-gradient(to bottom, transparent 0 35px, var(--ruled) 35px 36px),
    var(--paper);
}

.heroInk {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  opacity: var(--dark);
}

.heroHead {
  position: relative;
  z-index: 3;
  display: grid;
  gap: clamp(18px, 3vh, 32px);
  padding: clamp(24px, 5.5vh, 64px) var(--pad-x) 0;
  pointer-events: none;
}

.heroHead a { pointer-events: auto; }

.heroTitle {
  font: 400 clamp(2.8rem, 6.6vw, 7rem)/.9 var(--display);
  letter-spacing: -.025em;
}

.heroTitle span { display: block; }
.heroTitle span + span { color: var(--violet); transition: color .3s ease; }
.heroPin.isScreen .heroTitle span + span { color: var(--violet-soft); }

/* Lede and actions share one line under the title, pushed to opposite ends. */
.heroSide {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
}

.heroLede {
  max-width: 44ch;
  color: var(--muted-paper);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.5;
  transition: color .3s ease;
}

.heroPin.isScreen .heroLede { color: var(--muted-screen); }

.heroActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}

.deckStage {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1800px;
  pointer-events: none;
}

.heroPin.canBrowse .deckStage {
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
}

.heroPin.isDragging .deckStage { cursor: grabbing; }

.deckCard {
  --lift: 0;
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(190px, 16.5vw, 250px);
  aspect-ratio: .7;
  transform-style: preserve-3d;
  will-change: transform;
  user-select: none;
}

.face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Note side: a ruled card with a red header line, written by hand */
.faceNote {
  padding: 14px 16px 16px 18px;
  background:
    linear-gradient(to bottom, transparent 46px, var(--margin-red) 46px 47.5px, transparent 47.5px),
    repeating-linear-gradient(to bottom, transparent 0 25px, rgb(52 96 178 / .2) 25px 26px) 0 48px / 100% calc(100% - 48px) no-repeat,
    var(--card);
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgb(40 30 20 / .08),
    0 calc(4px + var(--lift) * 30px) calc(10px + var(--lift) * 40px) rgb(40 30 20 / calc(.14 + var(--lift) * .08));
}

.noteSubject {
  height: 32px;
  font: 400 1.35rem/32px var(--hand);
  color: var(--violet);
}

/* Written on the rules: baselines sit just above each blue line. */
.noteText {
  margin-top: 3px;
  font: 400 1.14rem/26px var(--hand);
}

.noteText u { text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Game side: what the note becomes */
.faceGame {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 7px 7px 0;
  background: var(--ink-2);
  color: var(--paper);
  transform: rotateY(180deg);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .1),
    0 calc(6px + var(--lift) * 30px) calc(16px + var(--lift) * 40px) rgb(0 0 0 / .45);
}

.gameArt {
  position: relative;
  display: grid;
  overflow: hidden;
  background: #09080d;
  border-radius: 5px;
}

.gameArt img { width: 100%; height: 100%; object-fit: cover; }
/* Crop past the screenshot's white question strip so only the court shows. */
.artPong img { object-position: 50% 100%; transform: scale(1.22); transform-origin: 50% 90%; }

.gameTag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 4px 13px;
  font: 600 .7rem/1 var(--hud);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gameTag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--tone, var(--violet));
}

.artFlash {
  align-content: space-between;
  padding: 12px;
  background: var(--card);
  color: var(--ink);
}

.flashQ { font: 750 1.02rem/1.25 var(--text); }
.hudDim { opacity: .55; }

.artTrivia {
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 6px;
  padding: 12px 10px;
}

.triviaQ {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  font: 700 .84rem/1.25 var(--text);
}

.triviaOpt {
  padding: 8px 4px;
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: 5px;
  color: var(--muted-screen);
  font: 600 .66rem/1 var(--text);
  text-align: center;
}

.triviaOpt.isRight { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

.artRapid {
  align-content: center;
  gap: 12px;
  padding: 14px 12px;
}

.rapidTop {
  display: flex;
  justify-content: space-between;
  color: var(--muted-screen);
}

.rapidTop .hud { font-size: .56rem; letter-spacing: .06em; }

.rapidTimer {
  height: 5px;
  background: rgb(255 255 255 / .12);
  border-radius: 3px;
}

.rapidTimer i {
  display: block;
  width: 62%;
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
}

.rapidQ { font: 700 1rem/1.2 var(--text); }

/* Worlds */
.paper,
.screen,
.drop {
  position: relative;
  isolation: isolate;
  padding: var(--pad-y) var(--pad-x);
}

.screen { background: var(--ink); color: var(--paper); }
.drop { background: var(--violet); color: var(--paper); }

.paper + .paper { border-top: 1px solid var(--line-paper); }

/* Split header: statement left, note right, sharing a baseline */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: 24px clamp(32px, 6vw, 96px);
}

.splitNote {
  padding-top: 18px;
  border-top: 1px solid var(--line-paper);
  color: var(--muted-paper);
  font-size: 1.1rem;
  line-height: 1.55;
}

.screen .splitNote { border-color: var(--line-screen); color: var(--muted-screen); }

/* 2 · Games */
.games { padding-top: clamp(64px, 10vh, 120px); }

.gameRow {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(72px, 10vh, 120px);
}

.gameUnit { position: relative; grid-row: 1; }
.gameUnitA { grid-column: 1 / span 7; }
/* Pong steps down and overlaps Star Defender's screen edge, never its controls. */
.gameUnitB { grid-column: 7 / span 6; z-index: 2; margin-top: clamp(120px, 15vw, 230px); }
.gameUnitA .gameInfo { width: calc(100% * 6 / 7 - 20px); }

.bezel {
  padding: 0 10px 10px;
  background: #1b1924;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .09),
    0 50px 90px -40px rgb(0 0 0 / .9);
}

.bezelBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px 11px;
  color: var(--muted-screen);
}

.bezelBar .hud:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--paper);
}

.bezelBar .hud:first-child::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--tone, var(--violet));
}

.bezel img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
}

.gameInfo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 22px;
}

.gameInfo p { max-width: 34ch; color: var(--muted-screen); }

.snailTrack {
  position: absolute;
  z-index: 1;
  top: -44px;
  left: 24px;
  right: 24px;
  height: 48px;
  container-type: inline-size;
  pointer-events: none;
}

.snailTrack .snail {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  animation: crawl 90s linear infinite;
}

@keyframes crawl {
  0% { transform: translateX(calc(100cqw - 72px)) scaleX(1); }
  48% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(0) scaleX(-1); }
  98% { transform: translateX(calc(100cqw - 72px)) scaleX(-1); }
  100% { transform: translateX(calc(100cqw - 72px)) scaleX(1); }
}

.alsoLine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-top: clamp(72px, 10vh, 112px);
  padding-top: 20px;
  border-top: 1px solid var(--line-screen);
  color: var(--paper);
  font-size: 1.1rem;
}

.alsoLine .hud { color: var(--muted-screen); }

/* Snail, drawn from simple geometry */
.snail { --shell: var(--yellow); --spiral: var(--ink); overflow: visible; }
.snailBody { fill: var(--card); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.snailStalk { fill: none; stroke: var(--card); stroke-width: 3; stroke-linecap: round; }
.snailEye { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; }
.snailPupil { fill: var(--ink); }
.snailShell { fill: var(--shell); stroke: var(--ink); stroke-width: 3; }
.snailSpiral { fill: none; stroke: var(--spiral); stroke-width: 3; stroke-linecap: round; }

/* 3 · How: notes in, study set out */
.machine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.05fr);
  align-items: start;
  gap: 0 clamp(16px, 3vw, 44px);
  margin-top: clamp(64px, 9vh, 104px);
}

.notePage {
  position: relative;
  overflow: hidden;
  padding: 20px 24px 30px 58px;
  background:
    linear-gradient(to right, transparent 40px, var(--margin-red) 40px 41.5px, transparent 41.5px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgb(52 96 178 / .2) 31px 32px) 0 20px / 100% calc(100% - 20px) no-repeat,
    var(--card);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgb(40 30 20 / .08), 0 24px 40px -24px rgb(40 30 20 / .35);
  font: 400 clamp(1.25rem, 1.8vw, 1.55rem)/32px var(--hand);
  transform: rotate(-1.5deg);
}

.notePageHead { color: var(--violet); }

.scanBar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 36px;
  background: linear-gradient(to bottom, transparent, rgb(110 72 246 / .18), transparent);
  border-bottom: 1.5px solid rgb(110 72 246 / .55);
  opacity: 0;
  transform: translateY(-40px);
}

.machine.isIn .scanBar { animation: scan 2.2s var(--ease-io) .4s 1 both; }

@keyframes scan {
  0% { opacity: 0; transform: translateY(-40px); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(210px); }
}

.machineArrow {
  width: clamp(64px, 8vw, 120px);
  margin-top: clamp(60px, 8vw, 110px);
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.setScreen {
  padding: clamp(18px, 2vw, 26px);
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgb(15 14 21 / .6);
}

.setTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted-screen);
}

.editChip {
  padding: 6px 12px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 6px;
  color: var(--paper);
  font: 600 .7rem/1 var(--hud);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.setQ {
  margin: 18px 0 16px;
  font: 750 clamp(1.15rem, 1.6vw, 1.4rem)/1.25 var(--text);
}

.setOpts {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setOpts li {
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 8px;
  color: var(--muted-screen);
}

.setOpts .isRight {
  background: rgb(25 195 178 / .14);
  border-color: var(--teal);
  color: var(--paper);
  font-weight: 700;
}

.machinePoint { max-width: 34ch; margin-top: 30px; padding-left: 2px; }

.machinePoint h3 {
  margin-bottom: 8px;
  font: 800 1.2rem/1.2 var(--text);
  letter-spacing: -.02em;
}

.machinePoint p { color: var(--muted-paper); }

/* 4 · Progress: a high-score panel */
.dash {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr);
  margin-top: clamp(64px, 9vh, 104px);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-radius: 16px;
  box-shadow: 0 40px 80px -44px rgb(15 14 21 / .7);
}

.dashSide {
  padding: clamp(20px, 2.4vw, 32px);
  border-right: 1px solid var(--line-screen);
}

.dashLabel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--muted-screen);
}

.dashSide dl { margin: 0; }

.dashStat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line-screen);
}

.dashStat dt { color: var(--muted-screen); }

.dashStat dd {
  margin: 0;
  font: 700 1.9rem/1 var(--hud);
  font-variant-numeric: tabular-nums;
}

.dashStat:nth-child(4) dd { color: var(--yellow); }

.digit {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  vertical-align: bottom;
}

.digitStrip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.6s var(--ease);
}

.digitStrip span { height: 1.2em; line-height: 1.2; }

.dashMain {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  padding: clamp(20px, 2.4vw, 32px);
}

.dashPanel {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 20px;
  background: var(--ink-3);
  border-radius: 10px;
}

.proTag {
  padding: 3px 7px;
  background: var(--violet);
  border-radius: 4px;
  color: var(--paper);
  letter-spacing: .08em;
}

.weekRow {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.weekRow li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.weekRow li::before {
  content: "";
  width: 100%;
  height: calc(var(--h) * 80%);
  background: var(--violet);
  border-radius: 4px 4px 2px 2px;
  transform-origin: bottom;
  transition: transform .9s var(--ease);
}

.weekRow li:nth-child(n)::before { transition-delay: calc(var(--i, 0) * 60ms); }
.weekRow li.isToday::before { background: var(--yellow); }
.weekRow span { color: var(--muted-screen); font: 600 .68rem/1 var(--hud); }

.js .dash:not(.isIn) .weekRow li::before { transform: scaleY(0); }

.calGrid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 5px;
}

.calGrid span { background: rgb(255 255 255 / .06); border-radius: 3px; }
.calGrid .isOn { background: rgb(110 72 246 / .5); }
.calGrid .isHeavy { background: var(--violet); }
.calGrid .isToday { box-shadow: inset 0 0 0 2px var(--yellow); }

.dashNote {
  grid-column: 1 / -1;
  padding: 14px clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--line-screen);
  color: var(--muted-screen);
  font-size: .86rem;
}

/* 5 · World: a planet too big for the frame, cut by the right and bottom edges */
.world {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  gap: 64px;
  min-height: clamp(780px, 108vh, 1000px);
  overflow: hidden;
}

.worldHead {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 26px;
  max-width: 600px;
}

.worldHead .display { max-width: 11ch; }
.worldHead .splitNote { max-width: 36ch; }

.planet {
  --rise: 0;
  position: absolute;
  z-index: 1;
  top: -1%;
  right: -12vw;
  width: min(1000px, 66vw);
  aspect-ratio: 1;
  container-type: inline-size;
  perspective: 1400px;
  transform: translateY(calc(var(--rise) * 1px));
  will-change: transform;
}

.globe {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  overflow: visible;
}

.globeBody { fill: #15131d; }

.globeLat path,
.globeLon ellipse {
  fill: none;
  stroke: rgb(255 255 255 / .2);
  stroke-width: .6;
}

.globeLon ellipse {
  animation: meridian 26s linear infinite;
  animation-delay: calc(var(--i) * -4.333s);
}

.globeRim { fill: none; stroke: var(--violet); stroke-width: 1.2; }

@keyframes meridian {
  0% { rx: 100px; animation-timing-function: ease-in; }
  50% { rx: 0px; animation-timing-function: ease-out; }
  100% { rx: 100px; }
}

/* The modes orbit above the horizon */
.orbitRing {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-14deg) rotateZ(-6deg) rotateY(0deg);
  animation: orbit 48s linear infinite;
}

@keyframes orbit {
  to { transform: rotateX(-14deg) rotateZ(-6deg) rotateY(-360deg); }
}

.orbitCard {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 19cqw;
  height: 15cqw;
  margin: -7.5cqw 0 0 -9.5cqw;
  padding: 5px 5px 0;
  background: var(--ink-2);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
  color: var(--paper);
  transform: rotateY(calc(var(--k) * 72deg)) translateZ(42cqw);
  backface-visibility: hidden;
}

.orbitCard img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

.orbitType {
  display: grid;
  place-items: center;
  background: #09080d;
  border-radius: 4px;
  font: 700 clamp(.7rem, 2.6cqw, 1.3rem)/1.05 var(--hud);
  text-align: center;
}

.orbitCard > span:last-child {
  padding: 6px 2px 7px;
  font: 600 clamp(.5rem, 1.2cqw, .68rem)/1 var(--hud);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.planet:hover .orbitRing,
.planet:hover .globeLon ellipse { animation-play-state: paused; }

/* A paper note taped onto the screen */
.tapeNote {
  position: relative;
  z-index: 3;
  width: min(300px, 80vw);
  padding: 26px 24px 20px;
  background: var(--card);
  color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / .7);
  transform: rotate(-3deg);
}

.tapeNote::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 24px;
  background: rgb(251 203 10 / .72);
  transform: translateX(-50%) rotate(2deg);
}

.tapeNote h3 { font-size: 1.7rem; color: var(--violet); }
.tapeNote p { margin: 8px 0 6px; color: var(--muted-paper); font-size: .98rem; line-height: 1.45; }

/* 6 · The 3D snail scene, full screen */
.snailScene { height: 100vh; height: 100svh; background: #000; overflow: hidden; }
.snailScene iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }

/* 6 · Cosmetics: the one violet field */
.cosmetics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px clamp(32px, 6vw, 96px);
  overflow: hidden;
}

/* The S sits behind the shelf, cut off by the bottom-right corner. */
.dropS {
  position: absolute;
  z-index: -1;
  right: -6%;
  bottom: -34%;
  width: min(42vw, 580px);
  transform: rotate(-12deg) translateY(calc(var(--drift, 0) * 1px));
  pointer-events: none;
}

.dropText { display: grid; justify-items: start; gap: 22px; }
.dropText p:not(.hud) { max-width: 34ch; color: rgb(255 255 255 / .86); font-size: 1.12rem; }

.dropLabel {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
}

.dropLabel::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--yellow);
}

.dropShelf {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px;
}

.dripCard {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--yellow);
  border-radius: 14px;
}

.snailDrip { --shell: var(--violet); --spiral: var(--card); width: 70%; }
.snailDrip .snailStalk { stroke: var(--ink); }
.dripCap path { fill: var(--coral); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.dripShades rect { fill: var(--ink); }
.dripShades path { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.dripChain { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 3.5 2.5; stroke-linecap: round; }
.dripCoin { fill: var(--gold); stroke: var(--ink); stroke-width: 2.5; }

.dripCard figcaption { position: absolute; left: 16px; bottom: 14px; color: var(--ink); }

.locker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.locker li {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  aspect-ratio: 1;
  background: #5633dc;
  border: 1px dashed rgb(255 255 255 / .38);
  border-radius: 10px;
  color: rgb(255 255 255 / .9);
}

.locker .hud { font-size: .72rem; }
.locker svg { width: 50%; overflow: visible; }
.lkCap { fill: var(--coral); }
.lkLine { stroke: var(--card); stroke-width: 2.5; stroke-linecap: round; }
.lkDark { fill: var(--card); }
.lkChain { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 3.5 2.5; stroke-linecap: round; }
.lkCoin { fill: var(--gold); }
.lockQ { font: 400 1.8rem/1 var(--display); color: rgb(255 255 255 / .45); }

/* 7 · Pricing */
.earlyNote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 40px;
  color: var(--muted-paper);
}

.earlyNote strong {
  padding: 3px 8px;
  background: var(--yellow);
  border-radius: 4px;
  color: var(--ink);
}

.priceGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(48px, 7vh, 72px);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line-paper);
}

.planHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-paper);
}

.planHead h3 { font: 400 1.6rem/1 var(--display); }

.planTag {
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 5px;
  color: #5230dd;
  font: 600 .72rem/1 var(--hud);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.planPrice { display: flex; align-items: baseline; gap: 8px; }
.planPrice strong { font: 400 clamp(2.5rem, 3.6vw, 3.2rem)/1 var(--display); letter-spacing: -.03em; }
.planPrice span { color: var(--muted-paper); font-weight: 600; }
.planContext { margin-top: 8px; color: var(--muted-paper); font-size: .88rem; }
.planDesc { margin: 16px 0 24px; }
.planBtn { width: 100%; }

.planList {
  display: grid;
  gap: 11px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-paper);
}

.planList li {
  position: relative;
  padding-left: 24px;
  line-height: 1.4;
}

.planList li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

/* Pro is the one on screen */
.planPro {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 40px 70px -40px rgb(15 14 21 / .8);
  transform: translateY(-18px);
}

.planPro .planHead,
.planPro .planList { border-color: var(--line-screen); }
.planPro .planTag { color: var(--yellow); }
.planPro .planPrice span,
.planPro .planContext { color: var(--muted-screen); }

/* Footer */
.foot {
  padding: clamp(72px, 12vh, 140px) var(--pad-x) 36px;
  background: var(--ink);
  color: var(--paper);
}

.footLine {
  font-size: clamp(3rem, 9vw, 9.5rem);
  line-height: .9;
}

.footKey { margin-top: clamp(32px, 5vh, 48px); }

.footRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(56px, 8vh, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--line-screen);
}

.foot .barBrand img { height: 30px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot nav a { padding: 8px 2px; color: var(--muted-screen); font-weight: 600; text-decoration: none; }
.foot nav a:hover { color: var(--paper); }

/* Reveal: things arrive by sliding up out of their own baseline */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 70ms);
}

.js [data-reveal].isIn { opacity: 1; transform: none; }

/* Offscreen loops pause */
.isIdle *,
.isIdle *::before { animation-play-state: paused !important; }

@media (max-width: 1080px) {
  .navToggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    color: inherit;
    border: 1.5px solid currentColor;
    border-radius: 9px;
    cursor: pointer;
  }

  .navToggle svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

  .barNav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 6px var(--pad-x) 18px;
    background: var(--bar-bg);
    box-shadow: inset 0 -1px 0 var(--bar-line);
  }

  .bar.isOpen .barNav { display: flex; }

  .barNav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 1.1rem;
    opacity: 1;
    border-bottom: 1px solid var(--bar-line);
  }

  .barNav + .barActions { margin-left: auto; }

  .heroHead { grid-template-columns: 1fr; }

  .machine { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 32px; }
  .machineArrow { display: none; }

  .dash { grid-template-columns: 1fr; }
  .dashSide { border-right: 0; border-bottom: 1px solid var(--line-screen); }
  .dashSide dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 24px; }

  /* The planet moves under the headline and hangs off the right edge. */
  .world { min-height: 0; align-content: start; gap: 0; }

  .planet {
    position: relative;
    top: auto;
    right: auto;
    width: 88vw;
    margin: 0 -16vw -14vw auto;
  }

  .tapeNote { margin-top: -18vw; }

  .cosmetics { grid-template-columns: 1fr; }
  .dropS { top: auto; bottom: -12%; width: 80vw; opacity: .5; }

  .priceGrid { grid-template-columns: minmax(0, 520px); justify-content: center; gap: 24px; }
  .planPro { transform: none; }
}

@media (max-width: 760px) {
  :root { --bar-h: 60px; }

  .bar { gap: 12px; }
  .barBrand img { height: 26px; }
  .barActions { gap: 8px; }
  .barLink { font-size: .95rem; }

  .hero { height: 240vh; }
  .heroPin { min-height: 560px; }
  .heroHead { gap: 16px; }
  .heroTitle { font-size: clamp(2.6rem, 12.4vw, 4rem); }
  .heroSide { gap: 18px; }
  .deckCard { width: min(54vw, 220px); }

  .split,
  .worldHead { grid-template-columns: 1fr; }

  .gameRow { display: grid; grid-template-columns: 1fr; row-gap: 88px; }
  .gameUnitA,
  .gameUnitB { grid-column: 1; grid-row: auto; margin-top: 0; }
  .gameInfo .key { width: 100%; }

  .machine { grid-template-columns: 1fr; }

  .dashMain { grid-template-columns: 1fr; }
  .dashPanel { min-height: 200px; }
  .calGrid { grid-auto-rows: 20px; }

  .world { min-height: 0; gap: 0; }

  .planet {
    position: relative;
    top: auto;
    right: auto;
    width: 125vw;
    margin: 24px 0 -30vw -4vw;
  }

  .tapeNote { justify-self: center; margin-top: -4vw; }

  .dropShelf { grid-template-columns: 1fr 1fr; }
  .locker { grid-template-columns: 1fr 1fr; }
}

/* No pinned scroll: the finished hand is shown as a still */
.hero.isStatic { height: auto; }
.hero.isStatic .heroPin { position: relative; top: 0; }

/* Reduced motion: nothing travels, loops stop, but content still fades in gently
   and colour changes still ease, so state changes stay legible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
  }

  .js [data-reveal] { transform: none; transition: opacity .4s ease; transition-delay: 0s; }
  .key,
  .arrowLink span,
  .digitStrip,
  .weekRow li::before { transition: none; }
  .key:active { transform: none; }
  .snailTrack .snail { transform: translateX(calc(100cqw - 72px)); }
  .scanBar { display: none; }

  .globeLon ellipse:nth-child(1) { rx: 97px; }
  .globeLon ellipse:nth-child(2) { rx: 71px; }
  .globeLon ellipse:nth-child(3) { rx: 26px; }
  .globeLon ellipse:nth-child(n+4) { display: none; }
}