/* Two readers, one page: soft periwinkle spreads for the kids' parts and the hero, plain paper for the grown-ups,
   a night band for the games. Navy ink and the app's own blue carry it; yellow only marks "guilt-free".
   Scalloped edges, like a Wiggler's cape hem, join the bands. */
:root {
  --sky: #E8EDFC;
  --sky-deep: #D5DDF8;
  --paper: #F7F8FD;
  --card: #FFFFFF;
  --ink: #213873;
  --ink-soft: #4F5F8F;
  --blue: #3D6CF0;
  --blue-deep: #2448B8;
  --night: #1B2D61;
  --night-text: #EEF1FF;
  --night-soft: #B9C4EC;
  --screen: #DCE5FF;
  --bezel: #0E111B;
  --bezel-edge: #343A4A;
  --sun: #FAD64D;
  --coral: #F2604A;
  --bubble-teal: #5FD9E6;
  --bubble-pink: #F27CC2;
  --bubble-green: #7FDC8A;
  --caught: #2FAE5E;

  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --size-body: 1.125rem;
  --size-small: 0.95rem;
  --size-h3: 1.3rem;
  --size-h2: clamp(2.1rem, 5vw, 3.4rem);
  --size-h1: clamp(3rem, 7vw, 5.2rem);

  --line: 3px solid var(--ink);
  --radius: 28px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--sky); }
/* Quick taps are taps: no double-tap zoom on a phone when a button is pressed twice in a row. Scrolling and
   pinch-zoom still work. */
html, body, a, button { touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  /* The header's color: every section paints its own ground, and iPhone Safari tints the strip behind the clock
     from this one */
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--size-body);
  font-weight: 500;
  line-height: 1.55;
}
img, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 900; line-height: 1.05; text-wrap: balance; }
h1 { font-size: var(--size-h1); letter-spacing: -0.025em; }
h2 { font-size: var(--size-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--size-h3); line-height: 1.2; }
h4 { font-size: 1.15rem; line-height: 1.2; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
.sky { background: var(--sky); }
.paper { background: var(--paper); }
.night { background: var(--night); color: var(--night-text); }

/* The loading screen: a cover in the header's color that the page loads behind. The Wiggler dances and the tiles
   spell WIGGLE the way letters are caught in the games. When the page is ready the cover lifts like a curtain,
   its scalloped hem last. Without scripts it is not shown; if they fail, it takes itself away. */
.loader {
  position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px;
  background: var(--sky); touch-action: none;
  transition: translate 0.95s cubic-bezier(0.7, 0, 0.2, 1);
  animation: loader-failsafe 0.4s 9s forwards;
}
.loader.is-leaving { translate: 0 calc(-100% - 40px); }
.loader::before, .loader::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; }
.loader::before {
  height: 30px;
  background:
    linear-gradient(var(--sky-deep), var(--sky-deep)) top / 100% 7px no-repeat,
    radial-gradient(circle at 22px 7px, var(--sky-deep) 21.5px, transparent 22px) 0 0 / 44px 30px repeat-x;
}
.loader::after {
  height: 22px;
  background: radial-gradient(circle at 22px 0, var(--sky) 21.5px, transparent 22px) 0 0 / 44px 22px repeat-x;
}
.loader-stage { display: block; width: min(48vw, 210px); aspect-ratio: 2 / 3.2; }
.loader-word { display: flex; gap: clamp(5px, 1.6vw, 9px); }
.loader-word span {
  display: grid; place-items: center; width: clamp(40px, 11.5vw, 64px); aspect-ratio: 1; border-radius: 22%;
  font-weight: 900; font-size: clamp(1.5rem, 6.4vw, 2.4rem); line-height: 1;
  background: #FFFFFF; color: var(--caught);
  animation: tile-catch 0.56s both; animation-delay: calc(var(--i) * 0.28s);
}
/* Waiting, then the one to catch (as the game shows it), then caught with a little hop */
@keyframes tile-catch {
  0% { background: rgba(33, 56, 115, 0.1); color: rgba(33, 56, 115, 0.35); }
  1%, 40% { background: var(--sun); color: var(--blue); translate: 0 0; }
  41% { background: #FFFFFF; color: var(--caught); translate: 0 0; }
  70% { background: #FFFFFF; color: var(--caught); translate: 0 -9px; }
  100% { background: #FFFFFF; color: var(--caught); translate: 0 0; }
}
.loader-note { font-weight: 900; font-size: 1.15rem; color: var(--ink-soft); }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

/* The top */
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.45rem; letter-spacing: -0.01em; text-decoration: none; }
.brand img { border-radius: 11px; }
.brand.small { font-size: 1.15rem; }
.brand.small img { border-radius: 8px; }
.top-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; font-weight: 700; font-size: 1rem; }
.top-links a { text-decoration: none; padding-block: 6px; border-bottom: 3px solid transparent; }
.top-links a:hover { border-bottom-color: var(--blue); }

/* Hero */
.hero { padding-block: 28px 76px; margin-top: -1px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero-words { display: grid; gap: 24px; min-width: 0; }
.eyebrow { font-weight: 900; font-size: var(--size-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); text-wrap: balance; }
.mark { position: relative; white-space: nowrap; z-index: 0; }
.mark::before {
  content: ""; position: absolute; z-index: -1;
  inset: 52% -0.12em 4% -0.1em;
  background: var(--sun); border-radius: 0.18em; rotate: -1.5deg;
}
.lede { font-size: 1.3rem; line-height: 1.5; max-width: 30em; }
.pluses { display: grid; gap: 10px; font-weight: 700; }
.pluses li { display: flex; align-items: center; gap: 12px; }
.pluses li::before {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7.5 13.5l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.actions { display: grid; gap: 12px; justify-items: start; margin-top: 4px; }
.actions.centered { justify-items: center; text-align: center; }
.store-note { font-size: var(--size-small); font-weight: 700; color: var(--ink-soft); }
.waitlist-hint { max-width: 36ch; }
.soon { font-weight: 900; font-size: 1.2rem; line-height: 1; padding: 16px 28px; border: var(--line); border-radius: 999px; background: var(--card); }

.button {
  display: inline-block;
  font: inherit; font-weight: 900; font-size: 1.2rem; line-height: 1;
  color: #FFFFFF; background: var(--blue);
  padding: 18px 30px; border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 0 var(--blue-deep);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 7px 0 var(--blue-deep); }
.button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--blue-deep); }

/* Devices: an iPad and an iPhone drawn to their real proportions. Sizes are shares of the device's own width
   (container units), so a frame looks the same at any size. */
.device { container-type: inline-size; width: 100%; min-width: 0; }
.device-frame {
  position: relative; background: var(--bezel);
  box-shadow: inset 0 0 0 0.5cqw var(--bezel-edge), 0 3cqw 6cqw -3.5cqw rgba(16, 24, 56, 0.55);
}
.device-screen { position: relative; overflow: hidden; background: #000000; }
.device-screen > img, .device-screen > video, .device-screen > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.ipad .device-frame { padding: 3.4cqw; border-radius: 5.4cqw; }
.ipad .device-frame::before {
  content: ""; position: absolute; top: 1.25cqw; left: 50%; width: 0.9cqw; height: 0.9cqw; translate: -50% 0;
  border-radius: 50%; background: var(--bezel-edge);
}
.ipad .device-screen { border-radius: 1.8cqw; aspect-ratio: 1180 / 820; }
.iphone .device-frame { padding: 2.7cqw; border-radius: 15.5cqw; }
.iphone .device-frame::before {
  content: ""; position: absolute; z-index: 2; top: 5.3cqw; left: 50%; width: 29.5cqw; height: 8.7cqw; translate: -50% 0;
  border-radius: 4.4cqw; background: #000000;
}
.iphone .device-screen { border-radius: 12.8cqw; aspect-ratio: 1206 / 2622; }

/* The hero picture: an iPad with three Wigglers dancing in front of it */
.hero-art { position: relative; min-width: 0; aspect-ratio: 1 / 1.04; }
.hero-ipad { position: absolute; z-index: 1; top: 0; left: 7%; width: 86%; }
.glass { background: var(--screen); }
.bubble {
  position: absolute; left: var(--x); top: var(--y); translate: -50% 0;
  width: clamp(40px, 7.5vw, 62px); aspect-ratio: 1;
  display: grid; place-items: center;
  font-weight: 900; font-size: clamp(1.2rem, 2.8vw, 1.8rem); line-height: 1; color: var(--ink);
  background: var(--c); border: var(--line); border-radius: 50%;
  animation: float-bubble 4.2s ease-in-out infinite alternate; animation-delay: var(--d, 0s);
}
.bubble::after {
  content: ""; position: absolute; left: 16%; top: 13%; width: 34%; height: 22%;
  background: #FFFFFF; opacity: 0.75; border-radius: 50%; rotate: -24deg;
}
.hero-art .stage { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.stage.line { display: block; width: 100%; max-width: 900px; aspect-ratio: 3 / 1; }
@keyframes float-bubble { from { translate: -50% 0; } to { translate: -50% -6px; } }

/* Bands and their scalloped top edge */
.band { position: relative; padding-block: 0 88px; margin-top: -1px; }
.scallop {
  height: 22px; margin-bottom: 66px;
  background: radial-gradient(circle at 22px 0, var(--from) 21.5px, transparent 22px) repeat-x;
  background-size: 44px 22px;
}
.tag {
  display: inline-block; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 7px 14px 6px; border: var(--line); border-radius: 999px; margin-bottom: 18px;
}
.night .tag { border-color: var(--night-soft); color: var(--night-soft); }
.intro { font-size: 1.3rem; line-height: 1.5; max-width: 34em; margin-top: 18px; }

/* Grown-ups */
.mirror {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 40px 48px; align-items: center;
  margin-top: 48px; padding: 44px; background: var(--sky); border-radius: var(--radius);
}
.mirror-words { display: grid; gap: 14px; min-width: 0; }
.mirror-words h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.mirror-words p { color: var(--ink-soft); font-size: 1.2rem; }
.mirror-scene {
  display: grid; grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.4fr); gap: 3%; align-items: end; min-width: 0;
}
.mirror-scene figure { display: grid; gap: 12px; min-width: 0; }
.mirror-scene figcaption { text-align: center; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.mirror-kid .stage { display: block; width: 100%; aspect-ratio: 5 / 8.4; }
.mirror-link { width: clamp(22px, 4vw, 40px); margin-bottom: clamp(78px, 10.5vw, 136px); fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.studio {
  background:
    linear-gradient(to right, #F2604A 0 20%, #FAD64D 20% 40%, #6FCB73 40% 60%, #4FA3F0 60% 80%, #9B6BF0 80% 100%) bottom / 100% 20% no-repeat,
    #5A2AA6;
}

.steps { counter-reset: step; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 36px; border-top: 2px solid var(--sky-deep); }
.steps li { counter-increment: step; position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; }
.steps li::before {
  content: counter(step); position: absolute; top: -6px; left: 50px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue); color: #FFFFFF; font-weight: 900; font-size: 1rem; line-height: 1;
}
.steps p { color: var(--ink-soft); }
.pict { width: 64px; height: 64px; flex: none; fill: var(--card); stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pict .dot { fill: var(--ink); stroke: none; }

.proofs { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 24px; margin-top: 24px; }
.proof {
  display: grid; gap: 28px; align-content: space-between; min-width: 0;
  padding: 36px; background: var(--card); border: 2px solid var(--sky-deep); border-radius: var(--radius);
}
.proof.tall { grid-row: span 2; }
.proof-words { display: grid; gap: 10px; }
.proof-words h3 { font-size: 1.5rem; }
.proof-words p { color: var(--ink-soft); }
.proof .iphone { max-width: 316px; margin-inline: auto; }
.trio { display: flex; justify-content: center; padding-block: 4px; }
.trio span {
  display: grid; place-items: center; width: 30%; max-width: 124px; aspect-ratio: 1; margin-inline: -1.5%;
  border: var(--line); border-radius: 50%; background: var(--c);
  font-weight: 900; font-size: clamp(0.95rem, 2vw, 1.15rem);
}

.promise { display: flex; gap: 24px; align-items: center; margin-top: 24px; padding: 30px 36px; background: var(--sky); border-radius: var(--radius); }
.promise > div { display: grid; gap: 6px; min-width: 0; }
.promise p { color: var(--ink-soft); }

.facts { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: 44px; }
.facts dt { font-weight: 900; font-size: 0.85rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd { font-weight: 900; font-size: 1.3rem; line-height: 1.25; }

/* Games */
.games { display: grid; gap: 64px; margin-top: 44px; }
.game { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.game.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.game.flip .device { order: 2; }
.game-words { display: grid; gap: 14px; min-width: 0; }
.game-words p { color: var(--night-soft); font-size: 1.2rem; }
.game h3 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.game .device-frame { box-shadow: inset 0 0 0 0.5cqw var(--bezel-edge), 0 0 0 0.35cqw rgba(185, 196, 236, 0.35); }
/* Over a clip the browser would not start on its own (an iPhone in Low Power Mode): a button that starts it */
.play-prompt {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 8px;
  padding: 12px; border: 0; cursor: pointer; font: inherit; color: #FFFFFF; text-align: center;
  background: rgba(14, 17, 27, 0.5);
}
.play-icon {
  display: grid; place-items: center; width: clamp(52px, 12cqw, 76px); aspect-ratio: 1; margin-bottom: 4px;
  border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 0 rgba(14, 17, 27, 0.55);
}
.play-icon::before {
  content: ""; width: 34%; aspect-ratio: 0.87; background: var(--blue); clip-path: polygon(0 0, 100% 50%, 0 100%);
  translate: 10% 0;
}
.play-prompt strong { font-weight: 900; font-size: clamp(1.05rem, 3.6cqw, 1.5rem); line-height: 1.1; }
.play-prompt small { font-weight: 700; font-size: clamp(0.8rem, 2.4cqw, 1rem); line-height: 1.3; opacity: 0.92; }
.more { margin-top: 48px; font-weight: 900; font-size: 1.3rem; color: var(--night-soft); }

/* Customizing */
.panel { background: var(--card); border: var(--line); border-radius: var(--radius); margin-top: 40px; }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 28px; }
.figure { width: 100%; max-width: 360px; aspect-ratio: 2 / 3.3; margin-inline: auto; }
.figure canvas { display: block; width: 100%; height: 100%; }
.controls { display: grid; gap: 14px; min-width: 0; width: 100%; max-width: 420px; margin-inline: auto; }
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pick-name { display: grid; text-align: center; min-width: 0; }
.pick-name small, .paint-name small { font-weight: 900; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.pick-name strong, .paint-name strong { font-weight: 900; font-size: 1.35rem; line-height: 1.2; }
.arrow {
  width: 54px; height: 54px; border-radius: 50%; border: var(--line); background: var(--card); cursor: pointer; padding: 0;
  display: grid; place-items: center; box-shadow: 0 4px 0 var(--ink); transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.arrow:hover { background: var(--sky); }
.arrow::before { content: ""; width: 13px; height: 13px; border-left: 5px solid var(--ink); border-bottom: 5px solid var(--ink); border-radius: 2px; rotate: 45deg; translate: 3px 0; }
.arrow.next::before { rotate: -135deg; translate: -3px 0; }
.arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.builder-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.button.quiet { color: var(--ink); background: var(--card); box-shadow: 0 0 0 3px var(--ink) inset, 0 6px 0 var(--ink); }
.button.quiet:hover { box-shadow: 0 0 0 3px var(--ink) inset, 0 7px 0 var(--ink); }
.button.quiet:active { box-shadow: 0 0 0 3px var(--ink) inset, 0 2px 0 var(--ink); }
.button.quiet[aria-pressed="true"] { background: var(--sky); }

.second { margin-top: 84px; }
.garage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px; }
.car { display: grid; gap: 16px; min-width: 0; }
.car img { width: 100%; border-radius: 20px; background: var(--sky); aspect-ratio: 880 / 486; }
.kinds { display: inline-flex; justify-self: center; border: var(--line); border-radius: 999px; overflow: hidden; }
.kinds button { font: inherit; font-weight: 900; font-size: 1rem; color: var(--ink); background: var(--card); border: 0; padding: 10px 20px; cursor: pointer; }
.kinds button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.paint-side { display: grid; gap: 16px; min-width: 0; }
.paint-name { display: grid; }
.paints { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 10px; }
.paint { aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: var(--sky); cursor: pointer; overflow: hidden; outline-offset: 2px; }
.paint img { width: 100%; height: 100%; border-radius: 50%; scale: 1.05; }
.paint[aria-pressed="true"] { outline: 4px solid var(--coral); }
.stars-note { margin-top: 36px; font-weight: 900; font-size: 1.2rem; text-align: center; }

/* Last call and the foot */
.last-row { display: grid; gap: 28px; justify-items: center; text-align: center; }
.foot { padding-block: 34px; font-size: var(--size-small); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }

/* Narrow screens */
@media (max-width: 860px) {
  .hero-grid, .mirror, .proofs, .builder, .garage { grid-template-columns: minmax(0, 1fr); }
  .game, .game.flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .game.flip .device { order: 0; }
  .games { gap: 48px; }
  .hero { padding-block: 12px 56px; }
  .hero-grid { gap: 36px; }
  .hero-art { max-width: 520px; width: 100%; margin-inline: auto; }
  .mirror { padding: 28px 22px; gap: 32px; }
  .proof { padding: 26px 22px; }
  .proof.tall { grid-row: auto; }
  .promise { padding: 24px 22px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .steps li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; }
  .steps li .pict { grid-row: span 2; }
  .band { padding-bottom: 64px; }
  .scallop { margin-bottom: 48px; }
  .builder, .garage { padding: 20px; }
  /* Stacked, the Wiggler is kept short enough that it and its controls are on screen together */
  .builder { gap: 14px; }
  .figure { max-width: none; aspect-ratio: auto; height: 300px; height: min(40svh, 300px); }
  .second { margin-top: 64px; }
}
@media (max-width: 560px) {
  .promise { flex-direction: column; align-items: flex-start; gap: 14px; }
  .top-links { display: none; }
  .lede, .intro { font-size: 1.18rem; }
  .stage.line { aspect-ratio: 1.45 / 1; }
  /* On a phone the builder and the paint picker each fit one screen, so a tap and its result are seen together */
  .figure { height: 270px; height: min(38svh, 270px); }
  .controls { gap: 8px; }
  .pick { gap: 10px; }
  .arrow { width: 44px; height: 44px; box-shadow: 0 3px 0 var(--ink); }
  .pick-name small { font-size: 0.72rem; line-height: 1.3; }
  .pick-name strong { font-size: 1.1rem; }
  .builder-actions { gap: 10px; margin-top: 6px; }
  .builder-actions .button { font-size: 1rem; padding: 14px 18px; }
  .garage { gap: 14px; }
  .car { gap: 12px; }
  .paint-side { gap: 10px; }
  .paint-name { display: flex; align-items: baseline; gap: 10px; }
  .paints { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
  .paint { outline-offset: 1px; }
  .paint[aria-pressed="true"] { outline-width: 3px; }
  .soon { font-size: 1.02rem; padding: 15px 20px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bubble { animation: none; }
  .button, .arrow { transition: none; }
  .loader { transition: opacity 0.3s; }
  .loader.is-leaving { translate: none; opacity: 0; }
  .loader-word span { animation: none; }
}