/* ==================================================================
   Luminous memory: the September 2026 homepage refresh.

   The same night palette, ember mark and violet memory accent, rendered as
   light. Hairlines are lit from above, chrome is glass, headings come into
   focus, signals travel along the network, and surfaces catch the pointer's
   light at their edge. Loaded last on the homepage; the earlier sheets keep
   the layout and behavior contracts. Every animation here is gated on
   motion being allowed, and content is visible without JavaScript.
   ================================================================== */
:root {
  --lum-night-0: #05080f;
  --lum-night-1: #080d18;
  --lum-night-2: #0c1220;
  --lum-ink: #f1f4ff;
  --lum-soft: #b0bcd4;
  --lum-faint: #95a3be;
  --lum-hair: rgba(255, 255, 255, 0.075);
  --lum-hair-strong: rgba(255, 255, 255, 0.14);
  --lum-hair-lit: rgba(255, 255, 255, 0.26);
  --lum-ember: #e8612b;
  --lum-ember-hot: #ff7d4a;
  --lum-apricot: #f4b493;
  --lum-violet: #aca8ff;
  --lum-violet-soft: #c9c6ff;
  --lum-action: #b33e16;
  --lum-action-2: #c24a1c;
  --lum-glass: linear-gradient(160deg, rgba(31, 43, 70, 0.66), rgba(13, 20, 36, 0.82));
  --lum-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  --lum-depth: 0 40px 80px -40px rgba(0, 0, 0, 0.85), 0 18px 36px -24px rgba(3, 6, 14, 0.9);
  --lum-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lum-ease-quiet: cubic-bezier(0.22, 1, 0.36, 1);
  --lum-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  --lab-bg: var(--lum-night-1);
  --lab-bg-2: #0b1222;
  --lab-soft: var(--lum-soft);
  --lab-faint: var(--lum-faint);
  --lab-line: var(--lum-hair);
  background: var(--lum-night-1);
}

body {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(88, 80, 190, 0.1), transparent 70%),
    var(--lum-night-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  color: #fff;
  background: rgba(232, 97, 43, 0.55);
}

/* ---------------- Header: glass that condenses as the page moves ---------------- */
.lab-nav {
  background: rgba(8, 13, 24, 0.42);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background-color 400ms var(--lum-ease-quiet), border-color 400ms var(--lum-ease-quiet), padding 400ms var(--lum-ease-quiet);
}

.lab-nav.is-scrolled {
  background: rgba(8, 13, 24, 0.78);
  border-bottom-color: var(--lum-hair);
}

.lab-brand img {
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px -6px rgba(232, 97, 43, 0.55);
}

.lab-nav-links {
  gap: 6px;
}

.lab-nav-links a {
  position: relative;
  padding-inline: 12px;
  border-radius: 999px;
  color: var(--lum-soft);
  font-size: 13px;
  font-weight: 560;
  transition: color 200ms ease, background-color 240ms ease;
}

.lab-nav-links a:hover {
  color: var(--lum-ink);
  background: rgba(255, 255, 255, 0.05);
}

.lab-nav-links a.is-current {
  color: var(--lum-ink);
}

.lab-nav-links a::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lum-ember-hot);
  box-shadow: 0 0 10px 1px rgba(255, 125, 74, 0.8);
  opacity: 0;
  transform: translateX(-50%) scale(0.4);
  transition: opacity 300ms ease, transform 400ms var(--lum-ease);
}

.lab-nav-links a.is-current::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.lab-nav-login {
  color: var(--lum-soft);
}

.lab-nav-signup {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--lum-action-2), var(--lum-action));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px -8px rgba(232, 97, 43, 0.7);
}

.lab-nav-signup:hover {
  background: linear-gradient(180deg, #b5451b, #962f0f);
}

.lum-nav-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.lum-nav-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(232, 97, 43, 0.2), var(--lum-ember-hot) 40%, var(--lum-apricot) 60%, var(--lum-violet));
  box-shadow: 0 0 12px rgba(255, 125, 74, 0.6);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------------- Hero ---------------- */
.lab-hero {
  background:
    radial-gradient(900px 520px at 50% 118%, rgba(232, 97, 43, 0.13), transparent 70%),
    radial-gradient(760px 520px at 88% 8%, rgba(108, 100, 230, 0.16), transparent 70%),
    radial-gradient(640px 480px at 6% 42%, rgba(84, 84, 184, 0.09), transparent 70%),
    var(--lum-night-1);
}

.lab-hero-sticky::after {
  /* A soft vignette seats the field in the page. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 46%, transparent 55%, rgba(5, 8, 15, 0.55) 100%);
  pointer-events: none;
}

.lab-constellation {
  z-index: 0;
}

.lab-hero-copy {
  z-index: 2;
  will-change: opacity, filter, transform;
}

.lab-hero-copy::before {
  /* A quiet clearing behind the words keeps them crisp while the network
     drifts behind; it is a shadow, not a panel. */
  content: "";
  position: absolute;
  inset: -12% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(8, 13, 24, 0.74), rgba(8, 13, 24, 0.38) 55%, transparent);
  pointer-events: none;
}

.lab-eyebrow {
  color: var(--lum-violet-soft);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0.02em;
}

.lab-hero-copy > .lab-eyebrow > span {
  position: relative;
  padding: 8px 16px 8px 32px;
  border: 1px solid rgba(172, 168, 255, 0.24);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(172, 168, 255, 0.1), rgba(172, 168, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px -14px rgba(120, 112, 255, 0.6);
}

.lab-hero-copy > .lab-eyebrow > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--lum-ember-hot);
  box-shadow: 0 0 0 3px rgba(255, 125, 74, 0.16), 0 0 12px rgba(255, 125, 74, 0.9);
}

.lab-h1 {
  margin-top: 26px;
  font-size: clamp(52px, 7.4vw, 108px);
  font-weight: 680;
  line-height: 1;
  letter-spacing: -0.062em;
  text-wrap: balance;
}

.lab-h1 .lab-line:first-child {
  color: var(--lum-ink);
  text-shadow: 0 2px 30px rgba(8, 13, 24, 0.6);
}

.lab-h1 .lab-italic {
  color: var(--lum-violet);
  text-shadow: 0 0 46px rgba(150, 140, 255, 0.45), 0 0 2px rgba(201, 198, 255, 0.4);
}

.lab-h1 .lab-line {
  /* Room for the settling glow and descenders inside each line mask. */
  padding-bottom: 0.06em;
  overflow: visible;
}

.lab-lede {
  max-width: 540px;
  margin-top: 28px;
  color: #bcc7dd;
  font-size: 18px;
  line-height: 1.7;
}

.lab-hero-copy .lab-section-detail {
  max-width: 470px;
  margin-top: 16px;
  color: var(--lum-faint);
  font-size: 14.5px;
  line-height: 1.7;
}

.lab-hero-cta {
  margin-top: 42px;
}

.lab-hero-cta > span {
  gap: 26px;
}

/* ---------------- Buttons: ember with a passing sheen ---------------- */
.lab-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 54px;
  padding: 15px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--lum-action-2), var(--lum-action));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 140, 90, 0.18),
    0 16px 44px -12px rgba(232, 97, 43, 0.75);
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
  transition: box-shadow 300ms var(--lum-ease-quiet), background 300ms ease;
}

.lab-button:hover {
  background: linear-gradient(180deg, #b8471c, #9a3310);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 150, 100, 0.3),
    0 20px 56px -12px rgba(255, 110, 60, 0.85);
}

.lab-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.28) 48%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}

.lab-button > span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: -10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13px;
}

.lab-quiet {
  color: var(--lum-soft);
  font-size: 14.5px;
  font-weight: 560;
  text-decoration-color: rgba(255, 255, 255, 0.24);
  text-underline-offset: 7px;
  transition: color 200ms ease, text-decoration-color 300ms ease;
}

.lab-quiet:hover {
  color: var(--lum-ink);
  text-decoration-color: var(--lum-apricot);
}

/* ---------------- Scroll cue ---------------- */
.lab-scroll-hint {
  z-index: 2;
  bottom: 30px;
  color: var(--lum-faint);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.lab-scroll-hint span {
  width: 18px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: transparent;
}

.lab-scroll-hint span::after {
  top: 5px;
  left: 50%;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--lum-apricot);
  box-shadow: 0 0 8px rgba(244, 180, 147, 0.9);
  opacity: 0.9;
}

/* ---------------- Memory pins beside the headline ---------------- */
.lum-pins {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.lum-pin {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  will-change: transform, opacity;
}

.lab-hero[data-memory-pins="on"] .lum-pin {
  display: block;
}

.lum-pin-body {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  color: #dde3f4;
  background: linear-gradient(180deg, rgba(28, 39, 64, 0.72), rgba(14, 21, 37, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 36px -16px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px;
  font-weight: 520;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.lum-pin-body i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lum-ember-hot);
  box-shadow: 0 0 0 3px rgba(255, 125, 74, 0.14), 0 0 10px rgba(255, 125, 74, 0.9);
}

.lum-pin[data-tone="violet"] .lum-pin-body i {
  background: var(--lum-violet);
  box-shadow: 0 0 0 3px rgba(172, 168, 255, 0.16), 0 0 10px rgba(172, 168, 255, 0.95);
}

/* ---------------- The formed mark's name ---------------- */
.lum-formed {
  position: absolute;
  top: 70%;
  left: 50%;
  z-index: 2;
  display: none;
  margin: 0;
  color: var(--lum-ink);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 650;
  letter-spacing: -0.045em;
  white-space: nowrap;
  text-shadow: 0 0 40px rgba(232, 97, 43, 0.35);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
}

.lab-hero[data-constellation-morph="ready"] .lum-formed {
  display: block;
}

.lab-test-note {
  z-index: 2;
}

/* ---------------- Marquee: a stream of fragments ---------------- */
.lab-marquee {
  position: relative;
  padding-block: 26px;
  border-block: 1px solid var(--lum-hair);
  background: linear-gradient(180deg, rgba(17, 25, 43, 0.72), rgba(10, 16, 29, 0.72));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.lab-marquee-track span {
  color: #a5b2cc;
  font-size: 15px;
  font-weight: 480;
  letter-spacing: -0.01em;
}

.lab-marquee-track span:nth-child(4n + 1) {
  color: #d9def0;
}

.lab-marquee-track i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-bottom: 4px;
  border-radius: 50%;
  overflow: hidden;
  color: transparent;
  background: var(--lum-ember-hot);
  box-shadow: 0 0 10px rgba(255, 125, 74, 0.9);
  font-size: 0;
  vertical-align: middle;
}

.lab-marquee-track i:nth-of-type(even) {
  background: var(--lum-violet);
  box-shadow: 0 0 10px rgba(172, 168, 255, 0.9);
}

/* ---------------- Motion toggle ---------------- */
/* motion-controls.css loads after this sheet and owns the toggle's behavior. */
html .lab-motion-toggle {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--lum-soft);
  background: rgba(14, 21, 37, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 30px -12px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------------- Motion: only when motion is allowed and running ---------------- */
/* Entrances fade and lift; none animates blur, which crashes WebKit's
   software renderer (the Linux WebKit the site's browser tests run). */
@keyframes lum-focus-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
}

@keyframes lum-focus-in-still {
  from {
    opacity: 0;
  }
}

@keyframes lum-sheen {
  to {
    transform: translateX(130%);
  }
}

@keyframes lum-signal {
  from {
    background-position: -40% 0, 0 0;
  }
  to {
    background-position: 160% 0, 0 0;
  }
}

@keyframes lum-orbit-travel {
  0% {
    offset-distance: 0%;
    opacity: 0.8;
    scale: 0.85;
  }
  25% {
    opacity: 0.45;
    scale: 0.7;
  }
  50% {
    opacity: 0.8;
    scale: 0.85;
  }
  75% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    offset-distance: 100%;
    opacity: 0.8;
    scale: 0.85;
  }
}

@keyframes lum-breathe {
  50% {
    opacity: 0.55;
    transform: scale(1.12);
  }
}

@keyframes lum-cue {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes lum-node-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(255, 125, 74, 0.16), 0 0 12px rgba(255, 125, 74, 0.9);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 125, 74, 0), 0 0 18px rgba(255, 125, 74, 1);
  }
}

@keyframes lum-glare {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes lum-pin-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Headlines rise into place, like a memory surfacing. */
  html:not([data-motion-paused="true"]) .lab-reveal-ready > span {
    transition: transform 1100ms var(--lum-ease), opacity 900ms var(--lum-ease);
  }

  html:not([data-motion-paused="true"]) .lab-hero-copy > :nth-child(2) > * > span,
  html:not([data-motion-paused="true"]) .lab-hero-copy > :nth-child(2) > * {
    transition-delay: 90ms;
  }

  html:not([data-motion-paused="true"]) .lab-h1 .lab-line + .lab-line > span {
    transition-delay: 220ms;
  }

  html:not([data-motion-paused="true"]) .lab-hero-copy > .lab-lede > span {
    transition-delay: 380ms;
  }

  html:not([data-motion-paused="true"]) .lab-hero-copy > .lab-lede + .lab-lede > span {
    transition-delay: 480ms;
  }

  html:not([data-motion-paused="true"]) .lab-hero-copy > .lab-hero-cta > span {
    transition-delay: 600ms;
  }

  html:not([data-motion-paused="true"]) .lab-closer-line + .lab-closer-line > span {
    transition-delay: 160ms;
  }

  html:not([data-motion-paused="true"]) .lab-closer-line + .lab-closer-line + .lab-closer-line > span {
    transition-delay: 320ms;
  }

  /* Objects and introductions come into focus once, in order. */
  html.lum-reveals[data-motion-paused="false"] .lum-reveal:not(.lum-in) {
    opacity: 0;
  }

  html.lum-reveals[data-motion-paused="false"] .lum-reveal.lum-in {
    animation: lum-focus-in 1100ms var(--lum-ease) backwards;
    animation-delay: calc(var(--lum-order, 0) * 90ms);
  }

  /* The workspace holds the phone preview, whose reserved box never moves:
     it fades in without the lift and scale. */
  html.lum-reveals[data-motion-paused="false"] .showcase-workspace.lum-reveal.lum-in {
    animation-name: lum-focus-in-still;
  }

  html[data-motion-paused="false"] .lab-button:hover::before,
  html[data-motion-paused="false"] .lab-nav-signup:hover::before {
    animation: lum-sheen 900ms var(--lum-ease) forwards;
  }

  html[data-motion-paused="false"] .lab-card-meta::after {
    animation: lum-signal 4.2s linear infinite;
  }

  html[data-motion-paused="false"] .lab-card:nth-child(2) .lab-card-meta::after { animation-delay: 0.84s; }
  html[data-motion-paused="false"] .lab-card:nth-child(3) .lab-card-meta::after { animation-delay: 1.68s; }
  html[data-motion-paused="false"] .lab-card:nth-child(4) .lab-card-meta::after { animation-delay: 2.52s; }

  html[data-motion-paused="false"] .lab-hero-copy > .lab-eyebrow > span::before {
    animation: lum-node-pulse 2.8s ease-in-out infinite;
  }

  html[data-motion-paused="false"] .lab-scroll-hint span::after {
    animation: lum-cue 2.2s var(--lum-ease-quiet) infinite;
  }

  html[data-motion-paused="false"] .lum-pin-body {
    animation: lum-pin-in 1400ms var(--lum-ease) backwards;
    animation-delay: 1.1s;
  }

  html[data-motion-paused="false"] .lum-pin:nth-child(2) .lum-pin-body { animation-delay: 1.3s; }
  html[data-motion-paused="false"] .lum-pin:nth-child(3) .lum-pin-body { animation-delay: 1.5s; }
  html[data-motion-paused="false"] .lum-pin:nth-child(4) .lum-pin-body { animation-delay: 1.7s; }

  html[data-motion-paused="false"] .lum-orbit-ring i {
    animation: lum-orbit-travel 16s linear infinite;
    animation-delay: -2.2s;
  }

  html[data-motion-paused="false"] .lum-orbit-ring i:nth-child(2) {
    animation-delay: -10.2s;
  }

  html[data-motion-paused="false"] .lum-orbit-ring--inner i {
    animation-duration: 11s;
    animation-direction: reverse;
    animation-delay: -4.2s;
  }

  html[data-motion-paused="false"] .lum-orbit::before {
    animation: lum-breathe 5.5s ease-in-out infinite;
  }

  html[data-motion-paused="false"] .showcase-workspace.lum-in .browser-frame::after,
  html[data-motion-paused="false"] .showcase-workspace.lum-in .phone-screen::after {
    animation: lum-glare 1500ms var(--lum-ease-quiet) 700ms both;
  }

  /* The desktop frame settles flat as it arrives (luminous.js sets --lum-tilt).
     Phones keep an untransformed preview so its reserved box never moves. */
  html[data-motion-paused="false"] .showcase-stage[data-preview-stage] .showcase-panel[data-preview-panel="desktop"] {
    transform: rotateX(calc(var(--lum-tilt, 0) * 16deg)) translateY(calc(var(--lum-tilt, 0) * 30px)) scale(calc(1 - var(--lum-tilt, 0) * 0.05));
  }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1000px) {
  .lab-nav-links a {
    padding-inline: 8px;
    font-size: 12px;
  }

  .lab-keep-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-keep-list li:first-child {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .lab-h1 {
    font-size: clamp(46px, 12vw, 72px);
    letter-spacing: -0.058em;
  }

  .lab-lede {
    font-size: 16px;
  }

  .lab-hero-copy > .lab-eyebrow > span {
    padding: 7px 14px 7px 28px;
    font-size: 12px;
  }

  .lab-hero-copy > .lab-eyebrow > span::before {
    left: 12px;
  }

  .lab-card {
    padding: 26px 22px 22px;
  }

  .lab-card-body {
    font-size: 19px;
  }

  .showcase-stage {
    padding: 14px;
    border-radius: 22px;
  }

  .showcase-story {
    padding: 22px 20px 6px;
  }

  .lab-keep-list li,
  .lab-keep-list li:first-child {
    padding: 24px;
  }

  .lab-keep-list li:first-child strong {
    font-size: 22px;
  }

  .lum-orbit {
    width: 160px;
    height: 160px;
    margin-bottom: 30px;
  }

  .lum-orbit::before {
    inset: 30px;
  }

  .lab-button > span[aria-hidden="true"] {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-constellation {
    opacity: 0.9;
  }

  .lum-orbit-ring,
  .lum-orbit::before,
  .lab-card,
  .lab-card::before,
  .lab-keep-list li,
  .lab-keep-list li::before {
    animation: none !important;
    transition: none !important;
  }

  .lab-card:hover,
  .lab-keep-list li:hover {
    transform: none;
  }
}

@media (pointer: coarse) {
  .lab-card:hover {
    transform: none;
  }
}

/* The vault preview's files arrive one after another. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion-paused="false"] .lab-keep-list li.lum-in .lum-vault code {
    animation: lum-focus-in 900ms var(--lum-ease) backwards;
  }

  html[data-motion-paused="false"] .lab-keep-list li.lum-in .lum-vault code:nth-child(1) { animation-delay: 500ms; }
  html[data-motion-paused="false"] .lab-keep-list li.lum-in .lum-vault code:nth-child(2) { animation-delay: 650ms; }
  html[data-motion-paused="false"] .lab-keep-list li.lum-in .lum-vault code:nth-child(3) { animation-delay: 800ms; }
}

/* Small and short screens: the motion control becomes a compact round button
   so it never sits on top of the words. Its text stays in the accessibility
   tree as the button's name; the glyph shows pause or play. */
@media (max-width: 560px), (max-height: 500px) {
  html .lab-motion-toggle {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
  }

  html .lab-motion-toggle::before {
    content: "";
    display: block;
    width: 10px;
    height: 12px;
    margin: auto;
    background: linear-gradient(90deg, #c9d2e6 0 34%, transparent 34% 66%, #c9d2e6 66%);
  }

  html[data-motion-paused="true"] .lab-motion-toggle::before {
    width: 11px;
    margin-left: calc(50% - 4px);
    background: #c9d2e6;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}

@media (max-width: 380px) {
  .lab-week-head h2,
  .lab-keep-head h2,
  .showcase-heading h2 {
    font-size: 32px;
  }

  .lab-closer-line {
    font-size: 30px;
  }
}

/* Landscape phones: a slimmer header leaves the short screen to the content. */
@media (max-height: 500px) {
  .lab-nav {
    padding-block: 6px;
  }

  .lab-nav-signup {
    padding-block: 8px;
  }
}