:root {
  --panel-strong: rgba(251, 247, 241, 0.94);
  --line: rgba(78, 91, 96, 0.14);
  --line-strong: rgba(78, 91, 96, 0.26);
  --text: #1e2120;
  --muted: #5f695f;
  --teal: #7c9988;
  --shadow: 0 24px 60px rgba(33, 35, 31, 0.12);
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --max-width: 1180px;
  --space-section: 6.5rem;        /* breathing room above layer-1 sections */
  --space-section-bottom: 8rem;   /* extra air below each section */
  --space-subsection: 2.75rem;    /* between sub-sections inside a section */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Last-resort backdrop for the canvas. The fixed background layer (body::before)
     is oversized so it covers the strip exposed when a mobile toolbar slides away
     or the page is over-scrolled, so this colour is only seen on a deep bounce.
     It's the gradient's bottom tone, since the bottom edge is by far the most
     common place a reveal happens (scrolling down through content). */
  background-color: #e8e0d2;
}

/* night mode (science): deep-sky backdrop, matching the near-black bg bottom */
html:has(body.dark) {
  background-color: #0e0f08;
}

/* rainbow mode (home): pale backdrop matching the rainbow base */
html:has(.rainbow-mode) {
  background-color: #f3ecef;
}

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background-color: #e8e0d2;
  min-height: 100vh;
}

/* The page gradient lives on a fixed background layer rather than on the body
   itself, so it stays put while the page scrolls (background-attachment: fixed is
   unreliable on mobile Safari, which is what made the background scroll there).
   z-index:-1 keeps it behind all page content.

   It is deliberately OVERSIZED past the viewport (inset:-15%): when a mobile
   toolbar slides away — or the page is over-scrolled — the newly exposed strip is
   covered by the gradient continuing, not by a bare canvas colour. The linear's
   edge bands (solid for the first/last ~11.5%) keep those exposed margins a clean
   top/bottom tone, while the visible viewport (≈11.5%–88.5% of this box) still
   reads as the original #f5efe5 → #e8e0d2 gradient. This is the mechanism that
   made the science page's space mode look seamless — there the near-black bg just
   hid the seam; here the gradient physically reaches into the reveal. */
body::before {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 11% 11%, rgba(127, 143, 160, 0.14), transparent 21%),
    radial-gradient(circle at 75% 13%, rgba(181, 184, 139, 0.16), transparent 19%),
    linear-gradient(180deg, #f5efe5 0% 11.5%, #f1eadf 50%, #e8e0d2 88.5% 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.page-shell {
  position: relative;
  overflow-x: hidden;
}

.ambient {
  position: fixed;
  inset: auto;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.ambient-one {
  width: 26rem;
  height: 26rem;
  top: 6rem;
  left: -6rem;
  background: rgba(124, 153, 136, 0.18);
}

.ambient-two {
  width: 24rem;
  height: 24rem;
  top: 24rem;
  right: -8rem;
  background: rgba(184, 141, 119, 0.14);
}

.grid-overlay {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(78, 91, 96, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 91, 96, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 92%);
  pointer-events: none;
  z-index: 0;
}

.section {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 0 auto;
}

/* ============================================================
   Floating menu. No header bar — the page reads as if it has
   none. A single hamburger, top right, opens a right-side drawer.
   ============================================================ */
.menu-toggle {
  position: fixed;
  top: 1.55rem;
  right: 1.55rem;
  z-index: 120;
  width: 2.9rem;
  height: 2.9rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.menu-toggle span {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease, background-color 260ms ease;
}

/* Open: the toggle sits over the dark drawer, so it turns to cream. */
body.nav-open .menu-toggle {
  color: #f4efe6;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 20, 17, 0.46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease;
}

body.nav-open .nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 110;
  height: 100vh;
  /* dvh tracks the live viewport, so the drawer always reaches the bottom even
     as the mobile toolbar shows/hides on scroll (svh would leave a gap once the
     toolbar retracts and the visible area grows) */
  height: 100dvh;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 2.6rem 2.6rem 3rem;
  background:
    radial-gradient(135% 80% at 100% 0%, rgba(86, 78, 58, 0.2), transparent 64%),
    linear-gradient(180deg, rgba(34, 35, 29, 0.5) 0%, rgba(23, 24, 18, 0.58) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(135%);
  backdrop-filter: blur(30px) saturate(135%);
  border-left: 1px solid rgba(244, 239, 230, 0.12);
  box-shadow: -34px 0 64px rgba(18, 18, 14, 0.3);
  transform: translateX(101%);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

body.nav-open .site-nav {
  transform: translateX(0);
}

.site-nav a {
  width: max-content;
  max-width: 100%;
  padding: 0.5rem 0;
  font-family: "Newsreader", serif;
  font-weight: 500;
  font-size: 1.95rem;
  line-height: 1.12;
  color: #ece3d3;
  opacity: 0;
  transform: translateX(16px);
  transition: color 220ms ease, opacity 420ms ease, transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Links arrive in sequence after the drawer settles. */
body.nav-open .site-nav a {
  opacity: 1;
  transform: translateX(0);
}

body.nav-open .site-nav a:nth-child(1) { transition-delay: 130ms; }
body.nav-open .site-nav a:nth-child(2) { transition-delay: 185ms; }
body.nav-open .site-nav a:nth-child(3) { transition-delay: 240ms; }
body.nav-open .site-nav a:nth-child(4) { transition-delay: 295ms; }

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    color: #cdab6e;
  }
}

.site-nav a:focus-visible {
  color: #cdab6e;
  outline: none;
}

.site-nav a[aria-current="page"] {
  color: #cdab6e;
}

body.nav-open {
  overflow: hidden;
}

/* Sits above everything, including the floating hamburger (z 120),
   so dragged notes are never clipped by other UI. */
.note-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
}

/* Each zone is a faint dashed outline pinned to its corner; they fade in
   while the box is open to show where the notes belong. Above the floating
   menu (z 120) but below the note layer (z 130) so dragged notes always
   pass over them. */
/* Sized to the note (10.8rem x 7.1rem) plus the gap between the zone's
   0.9rem corner inset and the note's 1.5rem snap position, so a snapped
   note sits centered with 0.6rem of air on all sides. */
.drop-zone {
  position: fixed;
  z-index: 125;
  width: 12rem;
  height: 8.3rem;
  border: 1.5px dashed rgba(70, 76, 58, 0.42);
  border-radius: var(--radius-md);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.drop-zone-one {
  left: 0.9rem;
  top: 0.9rem;
}

.drop-zone-two {
  right: 0.9rem;
  top: 0.9rem;
}

.drop-zone-three {
  left: 0.9rem;
  bottom: 0.9rem;
}

.drop-zone-four {
  right: 0.9rem;
  bottom: 0.9rem;
}

.drop-zone.is-active {
  opacity: 1;
}

.drop-zone.is-active.is-match {
  border-color: rgba(70, 76, 58, 0.78);
  background: rgba(70, 76, 58, 0.08);
  transform: scale(1.04);
}

/* The open nav drawer is dark and sits under the right-side zones (z 110
   vs 125), so their dark borders vanish against it — flip them to cream. */
body.nav-open .drop-zone-two,
body.nav-open .drop-zone-four {
  border-color: rgba(244, 239, 230, 0.55);
}

body.nav-open .drop-zone-two.is-active.is-match,
body.nav-open .drop-zone-four.is-active.is-match {
  border-color: rgba(244, 239, 230, 0.92);
  background: rgba(244, 239, 230, 0.12);
}

.rainbow-mode {
  --text: #161812;
  --muted: #25302b;
  color: var(--text);
}

/* The rainbow base gradient rides the fixed, full-viewport background layer
   (body::before) — the same fixed-layer method as the science page's space mode
   — so it stays put while the page scrolls instead of scrolling away with the
   content. The animated colour blobs stay on .rainbow-mode::before above it. */
body:has(.rainbow-mode)::before {
  background:
    linear-gradient(115deg, rgba(255, 38, 38, 0.26), rgba(255, 152, 0, 0.24), rgba(255, 235, 59, 0.22), rgba(36, 214, 87, 0.23), rgba(0, 188, 255, 0.25), rgba(108, 92, 255, 0.25), rgba(236, 72, 153, 0.24)),
    linear-gradient(180deg, #fff8f8 0%, #fbffe9 35%, #effcff 68%, #fff6fc 100%);
  background-size: 240% 240%, 100% 100%;
  animation: rainbow-pan 6s ease-in-out infinite alternate;
}

.rainbow-mode::before {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 0, 102, 0.2), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(255, 225, 0, 0.2), transparent 26%),
    radial-gradient(circle at 18% 82%, rgba(0, 230, 118, 0.18), transparent 28%),
    radial-gradient(circle at 76% 78%, rgba(0, 176, 255, 0.2), transparent 30%),
    radial-gradient(circle at 52% 50%, rgba(174, 74, 255, 0.18), transparent 34%);
  background-size: 140% 140%;
  animation: rainbow-drift 7s ease-in-out infinite alternate;
}

.rainbow-mode .eyebrow {
  color: #682a9f;
}

.rainbow-mode .hero h1 span {
  color: #174f9c;
}

.rainbow-mode .site-nav,
.rainbow-mode .hero-text,
.rainbow-mode .hero-subtext,
.rainbow-mode .about-intro p,
.rainbow-mode .about-card p,
.rainbow-mode .section-heading p,
.rainbow-mode .science-label,
.rainbow-mode .science-card p,
.rainbow-mode .science-disclaimer,
.rainbow-mode .waitlist-copy p,
.rainbow-mode .panel p,
.rainbow-mode .stage-card small,
.rainbow-mode .waitlist-form span,
.rainbow-mode .site-footer {
  color: #25302b;
}

.rainbow-mode .panel,
.rainbow-mode .about-card,
.rainbow-mode .science-card,
.rainbow-mode .waitlist-panel,
.rainbow-mode .stage-card {
  border-color: rgba(30, 33, 32, 0.2);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 14px 34px rgba(68, 95, 176, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  animation: none;
}

.rainbow-mode .game-panel {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  .rainbow-mode .about-card:hover,
  .rainbow-mode .science-card:hover {
    transform: none;
    border-color: rgba(30, 33, 32, 0.2);
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 14px 34px rgba(68, 95, 176, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.34);
    cursor: default;
  }
}

.rainbow-mode .stage-card,
.rainbow-mode .stage-card.active {
  border-color: rgba(30, 33, 32, 0.2);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}

.rainbow-mode .puzzle-note {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.55rem) scale(0.72);
}

.rainbow-mode .loot-box-button {
  --loot-line: rgba(27, 32, 34, 0.34);
  --loot-inner: #231a49;
}

.rainbow-mode .mystery-box-svg {
  filter: none;
}

.rainbow-mode .site-footer {
  border-top-color: rgba(30, 33, 32, 0.22);
}

.rainbow-mode .about-card,
.rainbow-mode .science-card,
.rainbow-mode .stage-card,
.rainbow-mode .waitlist-panel,
.rainbow-mode .waitlist-form input,
.rainbow-mode .waitlist-form select {
  border-color: rgba(30, 33, 32, 0.2);
}

.rainbow-mode .waitlist-form input,
.rainbow-mode .waitlist-form select {
  background-color: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}

.rainbow-mode .xp-bar {
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 0 0 1px rgba(30, 33, 32, 0.12);
}

.rainbow-mode .xp-bar span {
  background: linear-gradient(90deg, #ff6b6b, #ffd43b, #51cf66, #22b8cf, #845ef7, #f06595, #ff6b6b);
  background-size: 280% 100%;
  box-shadow: 0 0 26px rgba(132, 94, 247, 0.24);
  animation: rainbow-button-flow 2.8s linear infinite;
}

.rainbow-mode .button-primary {
  background: linear-gradient(90deg, #ff6b6b, #ffd43b, #51cf66, #22b8cf, #845ef7, #f06595, #ff6b6b);
  background-size: 280% 100%;
  color: #11180f;
  animation: rainbow-button-flow 2.8s linear infinite;
}

@keyframes rainbow-pan {
  from {
    background-position: 0% 50%, center;
  }

  to {
    background-position: 100% 50%, center;
  }
}

@keyframes rainbow-drift {
  from {
    background-position: 0% 0%;
    transform: rotate(0deg) scale(1);
  }

  to {
    background-position: 100% 75%;
    transform: rotate(6deg) scale(1.04);
  }
}

@keyframes rainbow-button-flow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

.button,
.status-pill {
  font-family: "Manrope", sans-serif;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-2px);
  }
}

.button:focus-visible {
  transform: translateY(-2px);
}

.section {
  padding: var(--space-section) 0 var(--space-section-bottom);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  align-items: center;
  gap: 2rem;
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
  padding-top: 3.6rem;
  padding-bottom: 2.6rem;
}

.eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d7f61;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
}

.hero h1,
.about-intro h2,
.section-heading h1,
.section-heading h2,
.waitlist-copy h2,
.waitlist-copy h3 {
  margin: 0;
  line-height: 0.98;
  font-family: "Newsreader", serif;
  font-size: clamp(3rem, 6vw, 5.6rem);
  letter-spacing: 0;
  font-weight: 500;
}

.hero h1 .accent-word {
  color: #677686;
  display: inline-block;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 700;
}

/* Headline word cube — a precision 3D roller.
   An invisible "ghost" copy of the word (.word-cube__measure) stays in the
   normal text flow to lock the baseline and width; the visible cube is
   overlaid on top and is the only part that moves. This sidesteps the
   baseline quirk that affects nested 3D-transformed inline elements. */
.hero h1 .rotating-word {
  position: relative;
  display: inline-block;
  vertical-align: baseline;   /* host baseline comes from the ghost below */
  line-height: 1;
  white-space: nowrap;
  perspective: 18em;          /* scales with the headline; subtle, not gimmicky */
}

/* The ghost: invisible, but it sets the slot's exact baseline and width. */
.hero h1 .word-cube__measure {
  visibility: hidden;
}

/* Visible cube, overlaid exactly on the ghost. Pushed back half its depth so
   the resting word sits at z = 0 — pixel-identical in size to the headline.
   The depth only reveals itself mid-tumble. */
.hero h1 .word-cube__stage {
  position: absolute;
  left: 0;
  top: 0;
  height: 1em;
  transform: translateZ(-0.5em);
  transform-style: preserve-3d;
}

.hero h1 .word-cube__inner {
  position: relative;
  display: block;
  height: 1em;
  transform: rotateX(0deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Motion is only enabled while actively tumbling, so the instant snap-back
   to the next word is invisible. Easing = fast launch, long soft settle. */
.hero h1 .word-cube__inner.is-rolling {
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero h1 .word-cube__face {
  position: absolute;
  left: 0;
  top: 0;
  height: 1em;
  line-height: 1;
  white-space: nowrap;
  backface-visibility: hidden;
}

.hero h1 .word-cube__face--front {
  transform: translateZ(0.5em);
}

.hero h1 .word-cube__face--bottom {
  transform: rotateX(90deg) translateZ(0.5em);
  transform-origin: 50% 50%;
}

/* Respect users who prefer reduced motion: swap words instantly, no spin. */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .word-cube__inner.is-rolling {
    transition: none;
  }
}

.hero-text,
.hero-subtext,
.about-intro p,
.about-card p,
.section-heading p,
.science-card p,
.waitlist-copy p,
.panel p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.03rem;
}

.hero-text {
  margin: 1.15rem 0 0.65rem;
  font-size: 1.08rem;
  max-width: 40rem;
}

.hero-subtext {
  max-width: 38rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.45rem 0 1rem;
}

.button-primary {
  border: 0;
  background: linear-gradient(135deg, #d4ceba, #8fa293);
  color: #1f2623;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(124, 153, 136, 0.16);
}

.status-pill {
  border: 1px solid var(--line);
  background: rgba(255, 252, 247, 0.65);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
}

.hero-stage {
  display: grid;
  gap: 1rem;
}

.panel {
  background: linear-gradient(180deg, rgba(255, 251, 245, 0.95), rgba(247, 241, 233, 0.88));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.mission-panel {
  padding: 1.4rem;
}

.panel-topline,
.xp-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.panel-topline,
.status-pill,
.stage-id {
  color: #6f7d8a;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mission-panel h2,
.mission-panel h3,
.about-card h3,
.science-card h3,
.evidence-heading h3 {
  font-family: "Newsreader", serif;
  margin: 1rem 0 0.4rem;
  font-weight: 500;
}

.mission-panel h3 {
  font-size: 2rem;
}

.xp-block {
  margin: 1.2rem 0 1.5rem;
}

.xp-bar {
  margin-top: 0.6rem;
  width: 100%;
  height: 0.95rem;
  border-radius: 999px;
  background: rgba(111, 125, 138, 0.12);
  overflow: hidden;
}

.xp-bar span {
  display: block;
  width: 84%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8ba191, #ccc7a7);
  box-shadow: 0 0 28px rgba(124, 153, 136, 0.2);
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.stage-card,
.about-card,
.science-card,
.waitlist-panel {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 251, 245, 0.72);
}

.stage-card {
  padding: 1rem;
}

.stage-card strong {
  display: block;
  margin: 0.25rem 0 0.3rem;
}

.stage-card small {
  color: var(--muted);
}

.stage-card.active {
  border-color: rgba(181, 184, 139, 0.42);
  box-shadow: inset 0 0 0 1px rgba(181, 184, 139, 0.1);
}

.section-heading {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.about-company {
  text-align: center;
}

.about-intro {
  max-width: 50rem;
  margin: 0 auto var(--space-subsection);
}

.about-intro h2 {
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto;
  text-align: left;
}

.about-card {
  padding: 1.35rem;
  background:
    radial-gradient(circle at top right, rgba(127, 143, 160, 0.12), transparent 34%),
    rgba(255, 251, 245, 0.72);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.about-card h3 {
  font-size: 1.55rem;
  line-height: 1.12;
}

.section-heading h1,
.section-heading h2,
.waitlist-copy h2,
.waitlist-copy h3 {
  font-size: clamp(2.4rem, 4vw, 4.4rem);
}

.science-card {
  padding: 1.35rem;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .about-card:hover,
  .science-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    background: rgba(252, 248, 241, 0.96);
  }
}

.science-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 1.25rem;
  align-items: start;
}

.science-stack {
  display: grid;
  gap: 1rem;
}

.science-card-wide {
  background:
    linear-gradient(135deg, rgba(255, 251, 245, 0.9), rgba(236, 229, 216, 0.72)),
    rgba(255, 251, 245, 0.72);
}

.science-label,
.citation,
.science-disclaimer {
  color: var(--muted);
}

.science-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.science-card .citation {
  margin: 0.95rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #9b9278;
}

.science-evidence {
  margin-top: var(--space-subsection);
}

.evidence-heading {
  max-width: 52rem;
  margin-bottom: 1.6rem;
}

.evidence-heading h3 {
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.03;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.evidence-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.evidence-card .citation {
  margin-top: auto;
  padding-top: 1rem;
}

.science-disclaimer {
  max-width: 58rem;
  margin: var(--space-subsection) 0 0;
  line-height: 1.65;
  font-size: 0.9rem;
}

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 1rem;
  align-items: start;
}

.game-panel {
  padding: 0;
}

.loot-box-feature {
  display: grid;
  place-items: center;
}

.loot-box-button {
  position: relative;
  display: grid;
  place-items: center;
  --loot-line: rgba(35, 40, 42, 0.36);
  --loot-inner: #0e0b1a;
  width: min(100%, 32rem);
  height: 29rem;
  margin: 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  touch-action: manipulation;
  transform-origin: center center;
}

.mystery-box-svg {
  width: min(100%, 32rem);
  height: auto;
  overflow: visible;
  filter: none;
  transform-box: fill-box;
  transform-origin: center center;
}

/* The shadow stays planted while the box above it lifts, shakes, and presses:
   .box-rig owns the idle shake (an animation, so it can't share a transform
   with anything else) and .box-lift owns the hover lift / press-down. */
.box-rig {
  transform-box: fill-box;
  transform-origin: center center;
  animation: mystery-box-shake 1.7s ease-in-out infinite;
}

.box-lift {
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 180ms ease;
}

.box-ground-shadow {
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 180ms ease, opacity 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .loot-box-button:not(.is-open):hover .box-rig {
    animation: mystery-box-shake-excited 0.7s ease-in-out infinite;
  }

  .loot-box-button:hover .box-lift {
    transform: translateY(-10px);
  }

  .loot-box-button:hover .box-ground-shadow {
    transform: scale(1.07);
    opacity: 0.72;
  }
}

.loot-box-button:not(.is-open):focus-visible .box-rig {
  animation: mystery-box-shake-excited 0.7s ease-in-out infinite;
}

.loot-box-button:focus-visible .box-lift {
  transform: translateY(-10px);
}

.loot-box-button:focus-visible .box-ground-shadow {
  transform: scale(1.07);
  opacity: 0.72;
}

.loot-box-button:active .box-lift {
  transform: translateY(7px) scale(0.985);
  transition-duration: 90ms;
}

.loot-box-button:active .box-ground-shadow {
  transform: scale(0.94);
  opacity: 1;
  transition-duration: 90ms;
}

.loot-box-button.is-open .box-rig {
  animation: none;
}

.box-core,
.box-open-pieces {
  transform-box: fill-box;
  transform-origin: center center;
}

.box-open-pieces {
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 520ms cubic-bezier(0.2, 0.88, 0.22, 1);
}

.box-left-face,
.box-right-face,
.box-top-face,
.box-flap {
  stroke: var(--loot-line);
  stroke-linejoin: round;
  stroke-width: 4;
  transition: fill 260ms ease, filter 260ms ease, opacity 260ms ease, transform 520ms cubic-bezier(0.2, 0.88, 0.22, 1);
  transform-box: fill-box;
  animation: loot-prism-shift 5.2s linear infinite;
}

.box-left-face {
  fill: url(#lootPrismLeft);
}

.box-right-face {
  fill: url(#lootPrismRight);
  animation-delay: -1.7s;
}

.box-top-face {
  fill: url(#lootPrismTop);
  animation-delay: -3.4s;
  transform-origin: center center;
}

.box-flap {
  fill: url(#lootPrismFlap);
  opacity: 0;
  animation-delay: -2.6s;
}

.box-flap-back-left,
.box-flap-back-right,
.box-flap-front-left,
.box-flap-front-right {
  transform: scale(0.86);
}

.box-flap-back-left {
  transform-origin: right bottom;
}

.box-flap-back-right {
  transform-origin: left bottom;
}

.box-flap-front-left {
  transform-origin: right top;
}

.box-flap-front-right {
  transform-origin: left top;
}

.loot-box-button.is-open .box-top-face {
  fill: var(--loot-inner);
  animation: none;
  filter: none;
}

.loot-box-button.is-open .box-open-pieces,
.loot-box-button.is-open .box-flap {
  opacity: 1;
}

.loot-box-button.is-open .box-open-pieces,
.loot-box-button.is-open .box-flap {
  transform: translate(0, 0) scale(1);
}

/* The galaxy revealed inside the box when it opens (mirrors the Science page). */
.box-inside {
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease 160ms;
}
.loot-box-button.is-open .box-inside { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .box-inside { transition: opacity 200ms ease; }
}

/* Cream stock, sepia ink, but set in plain Manrope rather than italic
   serif for easy reading. */
.puzzle-note {
  position: fixed;
  z-index: 82;
  width: 10.8rem;
  min-height: 7.1rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid rgba(92, 82, 50, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbf3d6, #f6ead0);
  box-shadow: 0 12px 24px rgba(40, 38, 30, 0.2);
  color: #5c5232;
  font-family: "Manrope", sans-serif;
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: left;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transform: rotate(0deg);
  transition: left 520ms cubic-bezier(0.2, 0.86, 0.24, 1), top 520ms cubic-bezier(0.2, 0.86, 0.24, 1), transform 180ms ease, opacity 220ms ease;
}

.puzzle-note.is-dragging {
  z-index: 90;
  cursor: grabbing;
  transform: rotate(0deg) scale(1.04);
  transition: none;
}

.puzzle-note.is-returning {
  pointer-events: none;
  opacity: 0;
  transition:
    left 440ms cubic-bezier(0.3, 0.02, 0.18, 1),
    top 440ms cubic-bezier(0.3, 0.02, 0.18, 1),
    transform 440ms cubic-bezier(0.3, 0.02, 0.18, 1),
    opacity 240ms ease 160ms;
}

.puzzle-note strong {
  position: absolute;
  top: 0.46rem;
  right: 0.58rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  border-radius: 999px;
  background: rgba(92, 82, 50, 0.82);
  color: #fbf3d6;
  font-family: "Manrope", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
}

.puzzle-note span {
  display: block;
  padding-right: 1.35rem;
}

.puzzle-note.is-selected {
  border-color: rgba(103, 118, 134, 0.54);
  box-shadow: 0 18px 38px rgba(103, 118, 134, 0.2);
}

.puzzle-note.is-correct {
  border-color: rgba(99, 119, 93, 0.34);
  box-shadow: 0 18px 36px rgba(99, 119, 93, 0.18);
}

@keyframes mystery-box-shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  8% {
    transform: translate(-0.16rem, 0.02rem) rotate(-1.6deg);
  }

  16% {
    transform: translate(0.16rem, -0.02rem) rotate(1.6deg);
  }

  24% {
    transform: translate(-0.1rem, 0) rotate(-1deg);
  }

  32% {
    transform: translate(0.1rem, 0) rotate(1deg);
  }

  42% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Faster, bigger shake while hovered — "I'm ready, click me". */
@keyframes mystery-box-shake-excited {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  12% {
    transform: translate(-0.3rem, 0.05rem) rotate(-2.6deg);
  }

  28% {
    transform: translate(0.3rem, -0.05rem) rotate(2.6deg);
  }

  44% {
    transform: translate(-0.22rem, 0.03rem) rotate(-1.9deg);
  }

  60% {
    transform: translate(0.22rem, -0.03rem) rotate(1.9deg);
  }

  76% {
    transform: translate(-0.12rem, 0) rotate(-1deg);
  }

  90% {
    transform: translate(0.12rem, 0) rotate(0.8deg);
  }
}

@keyframes loot-prism-shift {
  from {
    filter: hue-rotate(0deg) saturate(0.96) brightness(1.02);
  }

  to {
    filter: hue-rotate(360deg) saturate(0.96) brightness(1.02);
  }
}

.waitlist-panel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.2rem;
  padding: 1.6rem;
  background:
    radial-gradient(circle at top right, rgba(127, 143, 160, 0.11), transparent 28%),
    linear-gradient(180deg, rgba(251, 247, 241, 0.96), rgba(244, 238, 229, 0.88));
}

.waitlist-form {
  display: grid;
  gap: 0.9rem;
}

.waitlist-form label {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.waitlist-form span {
  color: var(--muted);
}

.waitlist-form input,
.waitlist-form select,
.waitlist-form .dropdown-trigger {
  /* selects size to their widest option and inputs to a default character
     count, so pin both to the column instead of their intrinsic width */
  width: 100%;
  min-width: 0;
  min-height: 3.35rem;
  border-radius: 16px;
  border: 1px solid rgba(78, 91, 96, 0.15);
  background-color: rgba(255, 253, 249, 0.82);
  color: var(--text);
  padding: 0.9rem 1rem;
  outline: none;
  font-size: 16px;
}

.waitlist-form select,
.waitlist-form .dropdown-trigger {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235f695f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

.waitlist-form input:focus,
.waitlist-form select:focus,
.waitlist-form .dropdown-trigger:focus,
.waitlist-form .dropdown.is-open .dropdown-trigger {
  border-color: rgba(124, 153, 136, 0.5);
  box-shadow: 0 0 0 4px rgba(124, 153, 136, 0.08);
}

/* ============================================================
   Custom dropdown — JS enhances every <select> (dropdownSelect
   in js/script.js) into a themed trigger + listbox so the menu
   looks the same in every browser and always opens below the
   field. The native select stays hidden in the form; without
   JS it renders as before, with its options tinted to match.
   ============================================================ */
option {
  background-color: #fbf7f1;
  color: #1e2120;
}

.dropdown {
  position: relative;
}

.dropdown .dropdown-native {
  display: none;
}

.dropdown-trigger {
  text-align: left;
}

.dropdown-list {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border: 1px solid rgba(78, 91, 96, 0.18);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 251, 245, 0.99), rgba(247, 241, 233, 0.97));
  box-shadow: 0 18px 44px rgba(33, 35, 31, 0.18);
  max-height: 17rem;
  overflow: auto;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 220ms;
}

.dropdown.is-open .dropdown-list {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 140ms ease;
}

/* hover and keyboard share one highlight; the trigger keeps real focus
   and aria-activedescendant points here, so this IS the visible focus */
.dropdown-option.is-active {
  background: rgba(124, 153, 136, 0.16);
}

.dropdown-option[aria-selected="true"] {
  font-weight: 600;
}

.dropdown-option[aria-selected="true"]::after {
  content: "\2713";
  color: #c4a877;
  font-weight: 700;
}

.site-footer {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2rem), var(--max-width));
  /* the top margin adds air between the last section and the footer rule */
  margin: 2.5rem auto 0;
  padding: 0.5rem 0 3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  border-top: 1px solid rgba(78, 91, 96, 0.08);
}

.site-footer p {
  margin: 1rem 0 0;
  font-family: "Newsreader", serif;
  color: var(--text);
}

.site-footer span {
  margin-top: 1rem;
}

.site-footer .footer-email {
  margin-top: 1rem;
  color: var(--muted);
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer .footer-email:hover { color: #c4a877; }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .hero,
  .about-grid,
  .science-layout,
  .evidence-grid,
  .product-layout,
  .waitlist-panel {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: var(--space-section);
  }

  .loot-box-feature {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --space-section: 4.25rem;
    --space-section-bottom: 5.25rem;
    --space-subsection: 2.25rem;
  }

  .button {
    min-height: 2.75rem;
    padding: 0.7rem 0.95rem;
    font-size: 0.92rem;
  }

  .section {
    width: min(calc(100% - 1.5rem), var(--max-width));
  }

  .hero {
    /* tighter top/bottom air on mobile so more of the loot-box puzzle (which
       sits below the copy in the single-column layout) is in view at a glance */
    gap: 0.9rem;
    padding-top: 2.5rem;
    padding-bottom: 1.25rem;
  }

  .site-footer {
    width: min(calc(100% - 1.5rem), var(--max-width));
    padding-bottom: 2rem;
    flex-direction: column;
  }

  .hero h1,
  .about-intro h2,
  .section-heading h1,
  .section-heading h2,
  .waitlist-copy h2,
  .waitlist-copy h3 {
    font-size: clamp(2.35rem, 11vw, 3.35rem);
    line-height: 1;
  }

  .hero-text,
  .hero-subtext,
  .about-intro p,
  .about-card p,
  .section-heading p,
  .science-card p,
  .science-disclaimer,
  .waitlist-copy p,
  .panel p {
    font-size: 0.98rem;
    line-height: 1.58;
  }

  .evidence-heading h3 {
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }

  .stage-grid,
  .product-layout {
    grid-template-columns: 1fr;
  }

  /* Taller than the note's min-height so a long, multi-line note (e.g.
     note 3) still snaps fully inside the dashed outline. Width stays put —
     the note is fixed-width and the left/right zones nearly meet on a
     ~360px screen. */
  .drop-zone {
    width: 10.3rem;
    height: 9.5rem;
  }

  .puzzle-note {
    width: 9.1rem;
    min-height: 6.35rem;
    font-size: 0.9rem;
  }
}

@media (pointer: coarse) {
  .menu-toggle,
  .button,
  .site-nav a,
  .loot-box-button,
  .puzzle-note {
    min-width: 44px;
    min-height: 44px;
  }

  .puzzle-note {
    cursor: default;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

}

@media (max-width: 520px) {
  .hero-actions,
  .hero-actions .button,
  .waitlist-form .button {
    width: 100%;
  }

  .game-panel,
  .mission-panel,
  .waitlist-panel,
  .about-card,
  .science-card {
    border-radius: 18px;
    padding: 1rem;
  }

  .loot-box-button {
    width: min(100%, 22rem);
    /* trim the reserved height down to the box's own size (the SVG is ~19rem
       tall at this width) and shrink the top margin, so the puzzle sits higher
       with less dead space around it */
    height: 19.2rem;
    margin-top: 0.2rem;
  }

  .mystery-box-svg {
    width: min(100%, 21rem);
  }

  .panel-topline,
  .xp-labels {
    gap: 0.55rem;
  }

  .status-pill {
    padding: 0.45rem 0.7rem;
  }

  .waitlist-form input,
  .waitlist-form select,
  .waitlist-form .dropdown-trigger {
    min-height: 3.1rem;
  }
}

@media (max-width: 380px) {
  .menu-toggle {
    width: 2.55rem;
    height: 2.55rem;
  }
}

/* ============================================================
   The constellation lab (Science page).
   Connect the stars into an A to erupt into night.
   ============================================================ */
.lab {
  text-align: center;
}

/* The lab is centered for the game, but its heading follows the same
   left-aligned section-heading pattern as every other page. */
.lab .section-heading {
  text-align: left;
  margin-bottom: var(--space-subsection);
}

.lab-bench {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 28rem);
  margin: 0 auto;
}

/* Featured study — the climax of the science case. */
.science-feature {
  margin-top: var(--space-subsection);
  padding: 1.75rem 1.9rem;
}

.science-feature h3 {
  margin: 0 0 0.85rem;
  font-family: "Newsreader", serif;
  font-weight: 500;
  line-height: 1.12;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

/* Status + rinse */
.lab-status {
  margin: 1.8rem 0 0;
  min-height: 1.5rem;
  font-family: "Manrope", sans-serif;
  font-size: 1.05rem;
  color: var(--muted);
}

.lab-reset {
  margin-top: 1rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font-family: "Manrope", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  transition: color 200ms ease, border-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .lab-reset:hover {
    color: var(--text);
    border-color: var(--text);
  }
}

/* The detonation flash */
.lab-burst {
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.98), rgba(255, 224, 156, 0.85) 22%, rgba(255, 120, 80, 0.5) 42%, transparent 70%);
}

.lab-burst.is-active { animation: lab-flash 740ms ease-out; }

@keyframes lab-flash {
  0% { opacity: 0; transform: scale(0.6); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.7); }
}

/* ============================================================
   Night mode — the page after the eruption.
   ============================================================ */
body.dark {
  --panel-strong: rgba(40, 42, 32, 0.92);
  --line: rgba(240, 234, 217, 0.12);
  --line-strong: rgba(240, 234, 217, 0.24);
  --text: #f1ead8;
  --muted: #b3ac98;
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
  background-color: #0e0f08;
}

/* night mode swaps the fixed gradient layer for the deep-sky palette */
body.dark::before {
  background:
    radial-gradient(circle at top left, rgba(127, 143, 160, 0.12), transparent 28%),
    radial-gradient(circle at 82% 2%, rgba(181, 184, 139, 0.1), transparent 24%),
    linear-gradient(180deg, #15160f 0%, #121309 58%, #0e0f08 100%);
}

/* Smooth the flip for elements without their own transitions. */
body,
.eyebrow,
.site-footer,
.site-footer p,
.section-heading h1,
.section-heading h2,
.evidence-heading h3,
.lab-status {
  transition: color 600ms ease, background-color 600ms ease;
}

body.dark .eyebrow { color: #c4a877; }

body.dark .stage-card,
body.dark .about-card,
body.dark .science-card,
body.dark .waitlist-panel {
  background: rgba(36, 37, 29, 0.6);
  border-color: rgba(240, 234, 217, 0.12);
}

body.dark .science-card-wide {
  background:
    linear-gradient(135deg, rgba(46, 47, 36, 0.88), rgba(30, 31, 23, 0.7)),
    rgba(36, 37, 29, 0.6);
}

body.dark .about-card {
  background:
    radial-gradient(circle at top right, rgba(127, 143, 160, 0.14), transparent 36%),
    rgba(36, 37, 29, 0.6);
}

body.dark .hero h1 .accent-word { color: #9fb3c4; }

body.dark .site-footer { border-top-color: rgba(240, 234, 217, 0.1); }

body.dark .citation {
  color: #cdbf9c;
}

/* ============================================================
   Law School Quest — walking sprite + drag-and-drop proof.
   ============================================================ */
.lsq-tagline {
  margin: 0.55rem 0 0;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--muted);
}

.lsq {
  /* wide enough for the longest sentence line to stay on one row,
     so the puzzle holds at four lines on desktop */
  max-width: 64rem;
  margin: 0 0 var(--space-subsection);
}

.lsq-sentence {
  font-family: "Newsreader", serif;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 2;
  color: var(--text);
}

/* each phrase is its own line, so the puzzle reads as four rows;
   on narrow screens the phrases still wrap naturally inside their row */
.lsq-line {
  display: block;
}

.lsq-blank {
  display: inline-block;
  /* smaller and more discreet — a faint recess that blends into the page rather
     than a heavy boxed slot */
  min-width: 4.5em;
  min-height: 1.5em;
  margin: 0 0.15em;
  padding: 0.05em 0.45em;
  text-align: center;
  vertical-align: middle;
  border-radius: 7px;
  background: rgba(60, 56, 40, 0.025);
  box-shadow: inset 0 1px 3px rgba(40, 40, 30, 0.07), inset 0 0 0 1px rgba(78, 91, 96, 0.06);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.lsq-blank.is-over {
  background: rgba(124, 153, 136, 0.2);
  box-shadow: inset 0 0 0 2px var(--teal);
}

.lsq-blank.is-filled {
  background: transparent;
  box-shadow: none;
}

.lsq-wonder {
  margin: 1.4rem 0 0;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--muted);
}

.lsq-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
  transition: opacity 600ms ease;
}

.lsq-bank.is-done { opacity: 0; pointer-events: none; }

.lsq-word {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-strong);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, opacity 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .lsq-word:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(40, 40, 30, 0.1); }
}

.lsq-word.is-selected { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(124, 153, 136, 0.32); }
.lsq-word.is-dragging { cursor: grabbing; box-shadow: 0 14px 26px rgba(40, 40, 30, 0.24); transform: scale(1.05); }

/* a word resting inside a blank reads as part of the sentence */
.lsq-blank .lsq-word {
  padding: 0 0.05em;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: "Newsreader", serif;
  font-weight: 500;
  font-size: inherit;
  color: var(--text);
}

.lsq-blank .lsq-word:hover { transform: none; box-shadow: none; }

.lsq-result { margin-top: 1.9rem; }

.lsq-proof,
.lsq-cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1200ms ease, transform 1200ms ease;
}

.lsq-result.is-visible .lsq-proof { opacity: 1; transform: none; }
.lsq-result.is-visible .lsq-cta { opacity: 1; transform: none; transition-delay: 750ms; }

.lsq-proof {
  margin: 0;
  font-family: "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.05;
  color: var(--text);
}

.lsq-cta {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.lsq-cta a {
  color: var(--teal);
  border-bottom: 1px solid currentColor;
}

/* cursor glitter on success */
.glitter {
  position: fixed;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  pointer-events: none;
  z-index: 200;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #f3d07c 45%, rgba(243, 208, 124, 0) 70%);
  opacity: 0;
}

.glitter.is-go { animation: glitter-pop 820ms ease-out forwards; }

@keyframes glitter-pop {
  0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--gx), var(--gy)) scale(1) rotate(160deg); }
}

/* Law School Quest — wrong-answer bounce + reset feedback */
.lsq-word.is-bounce { animation: lsq-bounce 560ms cubic-bezier(0.28, 0.84, 0.42, 1); }
@keyframes lsq-bounce {
  0% { transform: translateY(-12px) scale(1.05); }
  28% { transform: translateY(0) scale(1); }
  46% { transform: translateY(-7px); }
  66% { transform: translateY(0); }
  82% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.lsq-blank.is-wrong { animation: lsq-wrong 420ms ease; border-radius: 4px; }
@keyframes lsq-wrong {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(201, 144, 154, 0.32); }
}
/* flat underline — square off the blank's radius so the inset line has no rounded ends */
.lsq-blank.is-correct { border-radius: 0; box-shadow: inset 0 -2px 0 rgba(108, 138, 91, 0.55); }

.lsq-hint {
  margin: 1rem 0 0; text-align: center;
  font-family: "Manrope", sans-serif; font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--muted); opacity: 0.78;
}
.lsq.is-done .lsq-hint, .lsq-bank.is-done ~ .lsq-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .lsq-word.is-bounce, .lsq-blank.is-wrong { animation: none !important; }
}

/* Visible keyboard focus across every custom-interactive element (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.fill-blank:focus-visible,
.lsq-word:focus-visible,
.star-hit:focus-visible,
.puzzle-note:focus-visible {
  outline: 2px solid #c4a877;
  outline-offset: 3px;
  border-radius: 3px;
}