@font-face {
  font-family: "Cash Sans";
  src: url("/sites/berd/assets/fonts/CashSans/CashSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cash Sans";
  src: url("/sites/berd/assets/fonts/CashSans/CashSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cash Sans";
  src: url("/sites/berd/assets/fonts/CashSans/CashSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cash Sans";
  src: url("/sites/berd/assets/fonts/CashSans/CashSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cash Sans";
  src: url("/sites/berd/assets/fonts/CashSans/CashSans-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cash Sans Mono";
  src: url("/sites/berd/assets/fonts/CashSans/CashSansMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #e4e4e0;
  --ink: #050505;
  --muted: rgba(5, 5, 5, 0.28);
  --dot: #c9cac4;
  --grid-x: 32px;
  --grid-y: 32px;
  --dot-size: 1px;
  --pink: #ff00a8;
  --green: #79c45c;
  --orange: #ff7f00;
  --yellow: #fbff00;
  --red: #c64937;
  --section-progress: 0;
  --mx: 0;
  --my: 0;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: "Cash Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  /* Prevent elastic overscroll at the document edges. At the final footer this
     keeps continued trackpad/wheel input from exposing the root paper beneath
     the full-viewport strawberry backdrop. */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background:
    radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--grid-x) var(--grid-y) fixed,
    var(--paper);
  cursor: default;
}

button, a { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--yellow); color: var(--ink); }

/* Buzz cursor: 16px white difference circle, expanding to 21.6px over
   interactive controls. Fine-pointer devices only; touch keeps native input. */
.custom-cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: width 140ms ease, height 140ms ease, opacity 120ms ease;
  will-change: width, height, transform;
}

@media (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * { cursor: none !important; }
}

.loader::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--grid-x) var(--grid-y);
}

.loader::before {
  position: absolute;
  z-index: 0;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
  background: var(--paper);
}

.loader.is-complete {
  /* The message has already faded away before this blank loader layer leaves. */
  animation: loader-exit 0.42s cubic-bezier(0.75, 0, 0.25, 1) forwards;
}

.loader__logo {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: 88px;
  height: 88px;
  color: #000;
  transform: translate(-50%, -50%);
  animation: loader-logo-out 0.3s ease 2.75s forwards;
}

.loader__logo .berd-logo__mark,
.loader__logo svg {
  display: block;
  width: 88px !important;
  height: 88px !important;
  max-width: none;
  max-height: none;
  overflow: visible;
}

.loader__message {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 40px);
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 400;
  letter-spacing: -0.04em;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 8px));
  animation:
    loader-message-in 0.45s ease 3.1s forwards,
    loader-message-out 0.4s ease 5.35s forwards;
}

@keyframes loader-logo-out {
  to { opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(0.92); }
}

@keyframes loader-message-in {
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes loader-message-out {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(-50%, calc(-50% - 6px)); }
}

@keyframes loader-exit {
  to { opacity: 0; visibility: hidden; transform: scale(1.02); pointer-events: none; }
}

.site { opacity: 0; }
body.site-ready .site {
  opacity: 1;
  transition: opacity 0.22s ease;
}

@keyframes site-enter { to { opacity: 1; } }

.site-chrome {
  position: fixed;
  inset: 23px 22px auto 24px;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-22px);
}

body.hero-elements-visible .site-chrome {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.65s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

@keyframes chrome-enter { to { opacity: 1; } }

.bird-logo,
.chrome-button,
.built-by,
.block-mark span,
.berd-logo__ink {
  transition: fill 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.bird-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: #000;
  pointer-events: auto;
  text-decoration: none;
  overflow: hidden;
}

.bird-logo__static,
.berd-logo-mount,
.berd-logo__mark {
  position: absolute;
  inset: 0;
  display: block;
  width: 22px;
  height: 22px;
  inline-size: 22px !important;
  block-size: 22px !important;
  max-width: 22px;
  max-height: 22px;
  overflow: hidden;
}

.bird-logo__static {
  width: 22px;
  height: 22px;
  opacity: 1;
  transition: filter 160ms ease;
}

.berd-logo-mount {
  opacity: 0;
  pointer-events: none;
}

.bird-logo.is-animating .bird-logo__static { opacity: 0; }
.bird-logo.is-animating .berd-logo-mount { opacity: 1; }

.berd-logo__ink {
  fill: currentColor;
}

.chrome-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 26px;
  min-width: 86px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #000;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
  box-shadow: none;
  transform: none;
  transition: fill 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.chrome-button:hover,
.chrome-button:focus-visible {
  color: #000;
  background: #fff;
  box-shadow: none;
  transform: none;
}

.chrome-button:active { transform: none; }

body.chrome-light .bird-logo,
body.chrome-light .chrome-button {
  color: var(--red);
}

body.chrome-light .chrome-button {
  background: #fff;
}

body.chrome-light .chrome-button:hover,
body.chrome-light .chrome-button:focus-visible {
  color: #fff;
  background: var(--red);
  box-shadow: none;
}

body.chrome-light .bird-logo__static {
  filter: invert(1);
}

.built-by {
  position: fixed;
  left: 24px;
  bottom: 21px;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000;
  text-decoration: none;
  font-family: "Cash Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  transition: color 160ms ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
}

body.hero-elements-visible .built-by {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.65s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.block-wordmark {
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
}

.built-by:hover,
.built-by:focus-visible {
  color: #666;
}

.built-by:hover .block-wordmark,
.built-by:focus-visible .block-wordmark {
  opacity: 0.6;
}

body.chrome-light .built-by { color: #fff; }
body.chrome-light .block-wordmark { filter: invert(1); }

/* Persistent page chrome inverts while the hero's club mode is active. */
body.is-club-mode .bird-logo,
body.is-club-mode .built-by { color: #fff; }
body.is-club-mode .bird-logo__static,
body.is-club-mode .block-wordmark { filter: invert(1); }
body.is-club-mode .chrome-button {
  color: #000;
  background: #fff;
}
body.is-club-mode .chrome-button:hover,
body.is-club-mode .chrome-button:focus-visible {
  color: #fff;
  background: #000;
}

/* Stu's footer keeps the persistent Built by Block mark black at rest. */
body.footer-is-visible .built-by { color: #000; }
body.footer-is-visible .block-wordmark { filter: none; }

body.chrome-light .built-by:hover,
body.chrome-light .built-by:focus-visible,
body.footer-is-visible .built-by:hover,
body.footer-is-visible .built-by:focus-visible {
  color: #fff;
}

body.footer-is-visible .built-by:hover .block-wordmark,
body.footer-is-visible .built-by:focus-visible .block-wordmark {
  filter: invert(1);
}

body.chrome-light .built-by:hover .block-wordmark,
body.chrome-light .built-by:focus-visible .block-wordmark,
body.footer-is-visible .built-by:hover .block-wordmark,
body.footer-is-visible .built-by:focus-visible .block-wordmark {
  opacity: 1;
}

/* The footer is pinned behind the drawing section, so both panels intersect
   while drawing is still foregrounded. Force all persistent chrome to its dark
   treatment until the drawing panel has actually left the viewport center. */
body.chrome-on-draw .bird-logo { color: #000; }
body.chrome-on-draw .bird-logo__static { filter: none; }
body.chrome-on-draw .chrome-button {
  color: #fff;
  background: #000;
}
body.chrome-on-draw .chrome-button:hover,
body.chrome-on-draw .chrome-button:focus-visible {
  color: #000;
  background: #fff;
}
body.chrome-on-draw .built-by { color: #000; }
body.chrome-on-draw .block-wordmark { filter: none; }

/* Footer treatment: red label text echoes the strawberry/red overlay behind
   the fixed Download Berd control. */
body.footer-is-visible .site-chrome .chrome-button,
body.footer-is-visible.chrome-on-draw .site-chrome .chrome-button {
  color: var(--red) !important;
  background: #000 !important;
}
body.footer-is-visible .site-chrome .chrome-button:hover,
body.footer-is-visible .site-chrome .chrome-button:focus-visible {
  color: var(--red) !important;
  background: #fff !important;
}

.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100vw;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.panel__design {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}


.panel--torus {
  z-index: 2;
  background:
    radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--grid-x) var(--grid-y),
    var(--paper);
  perspective: 760px;
  perspective-origin: 50% 50%;
}

/* ---- Bouncing gloopies hero ---- */
.panel--bounce {
  z-index: 2;
  /* Let feet and lower silhouettes extend beyond the hero instead of being
     clipped at the viewport seam. The margin below is their landing zone. */
  overflow: visible;
  margin-bottom: 14vh;
  margin-bottom: 14svh;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size));
  background-size: var(--grid-x) var(--grid-y);
  transition: background-color 220ms ease;
}

.panel--bounce.is-karaoke-playing { background-color: var(--green); }

.club-strobe {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
  pointer-events: none;
}

.panel--bounce.is-karaoke-playing .club-strobe {
  opacity: 1;
  visibility: visible;
}

.club-strobe__pattern {
  position: absolute;
  inset: -2.5%;
  background-color: var(--green);
  background-image:
    linear-gradient(45deg, #0c0c0c 25%, transparent 25%),
    linear-gradient(-45deg, #0c0c0c 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0c0c0c 75%),
    linear-gradient(-45deg, transparent 75%, #0c0c0c 75%);
  background-size: 38px 38px;
  background-position: 0 0, 0 19px, 19px -19px, -19px 0;
  filter: brightness(0.62) saturate(0.8);
  will-change: transform, filter;
}

.club-strobe__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 56% at 50% 46%, rgba(255, 255, 255, 0.9), transparent 72%);
  opacity: 0;
  will-change: opacity;
}

.club-strobe.is-fallback .club-strobe__pattern {
  animation: club-color-wash 2.5s steps(1, end) infinite;
  filter: brightness(0.85) saturate(0.9);
  transform: none;
}

@keyframes club-color-wash {
  0%, 100% { background-color: var(--green); }
  20% { background-color: #e896d8; }
  40% { background-color: #a0aaf5; }
  60% { background-color: #d8a84c; }
  80% { background-color: #4cc0c8; }
}

@media (prefers-reduced-motion: reduce) {
  .club-strobe__pattern,
  .club-strobe.is-fallback .club-strobe__pattern { animation: none; }
}

.panel--bounce.is-karaoke-playing .bounce-world {
  opacity: 0;
  visibility: hidden;
}

.bounce-world {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Let lower feet extend through the former Section 1 mask during the floating
     Section 2 transition. Physics still limits the amount of downward bleed. */
  overflow: visible;
  transition: opacity 180ms ease, visibility 180ms;
}

.bounce-gloopy {
  position: absolute;
  top: 0;
  left: 0;
  /* Size is set inline by JS (near-full viewport height). Position is driven by
     JS transforms; will-change keeps the physics loop smooth. */
  will-change: transform;
  pointer-events: none;
}

.bounce-gloopy--near-front { z-index: 2; }
.bounce-gloopy--front { z-index: 3; }
.bounce-gloopy--jello { z-index: 4; }
.bounce-gloopy--agent { z-index: 3; }
.bounce-gloopy--hero-avatar { z-index: 4; }
.bounce-gloopy--foreground { z-index: 6; }

.bounce-gloopy video,
.bounce-gloopy img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Gloopie webms and PNGs have alpha, so they overlap cleanly. */
}

@media (prefers-reduced-motion: reduce) {
  .bounce-gloopy { will-change: auto; }
}

.hero-app-preview {
  --hero-preview-parallax: 0px;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(79.2vw, calc(79.2svh * 2149 / 1528));
  aspect-ratio: 2149 / 1528;
  overflow: hidden;
  border-radius: clamp(16px, 1.8vw, 30px);
  background: #f7f7f5;
  box-shadow: none;
  transition: box-shadow 0.8s ease;
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--hero-preview-parallax)));
  pointer-events: none;
}

body.site-ready .hero-app-preview {
  /* The matching boot shell already provides the visual transition. Reveal the
     real frame at full opacity underneath it so their crossfade cannot produce
     a white flash or make the app appear twice. */
  opacity: 1;
  animation: none;
}

body.hero-elements-visible .hero-app-preview {
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.09);
}

.hero-app-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes hero-app-preview-in {
  to { opacity: 1; }
}

.hero-karaoke-ball {
  position: absolute;
  z-index: 4;
  top: 18%;
  left: 12%;
  display: grid;
  place-items: center;
  width: clamp(108px, 10vw, 160px);
  aspect-ratio: 1;
  padding: 18px;
  border: 0;
  border-radius: 50%;
  color: #000;
  background: #ff6a00;
  cursor: pointer;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

.hero-karaoke-ball:hover,
.hero-karaoke-ball:focus-visible {
  color: #ff6a00;
  background: #000;
  outline: none;
}

.hero-karaoke-ball span {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.1;
  animation: hero-karaoke-spin 5s linear infinite;
}

@keyframes hero-karaoke-spin {
  to { transform: rotate(360deg); }
}

.torus-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 760px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}

.torus-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.torus-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  transform-style: preserve-3d;
  will-change: transform;
}

.torus-tile {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: clamp(300px, 38vw, 620px);
  height: clamp(250px, 42vh, 470px);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.torus-tile:nth-child(1) { --torus-angle: 0deg; --torus-y: -115px; --torus-tilt: -10deg; }
.torus-tile:nth-child(2) { --torus-angle: 30deg; --torus-y: 100px; --torus-tilt: 8deg; }
.torus-tile:nth-child(3) { --torus-angle: 60deg; --torus-y: -35px; }
.torus-tile:nth-child(4) { --torus-angle: 90deg; --torus-y: 145px; --torus-tilt: 12deg; }
.torus-tile:nth-child(5) { --torus-angle: 120deg; --torus-y: -120px; --torus-tilt: -9deg; }
.torus-tile:nth-child(6) { --torus-angle: 150deg; --torus-y: 55px; }
.torus-tile:nth-child(7) { --torus-angle: 180deg; --torus-y: -25px; }
.torus-tile:nth-child(8) { --torus-angle: 210deg; --torus-y: 130px; --torus-tilt: 10deg; }
.torus-tile:nth-child(9) { --torus-angle: 240deg; --torus-y: -125px; --torus-tilt: -11deg; }
.torus-tile:nth-child(10) { --torus-angle: 270deg; --torus-y: 70px; }
.torus-tile:nth-child(11) { --torus-angle: 300deg; --torus-y: -45px; }
.torus-tile:nth-child(12) { --torus-angle: 330deg; --torus-y: 135px; --torus-tilt: 11deg; }

.torus-tile img,
.torus-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.13));
  transform-origin: center;
}

.torus-tile--orange img { width: 100%; height: 100%; mix-blend-mode: multiply; }
.torus-tile--gloopy video { width: 100%; height: 100%; }

.torus-hint {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 15px;
  display: grid;
  place-items: center;
  margin: 0;
  translate: -50% 0;
  color: #000;
  opacity: var(--hero-hint-opacity, 1);
  will-change: opacity;
  pointer-events: none;
}

.torus-hint__arrow {
  width: 26px;
  height: 26px;
  animation: torus-hint-bounce 1.6s ease-in-out infinite;
}

@keyframes torus-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(7px); opacity: 1; }
}

.hero-orange {
  position: absolute;
  left: 50%;
  top: calc(50% - 50px);
  z-index: 1;
  width: 84vw;
  height: auto;
  max-height: 84vh;
  transform: translate(-50%, -50%);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: multiply;
}

.hero-floaters {
  position: absolute;
  inset: -22vh -18vw;
  z-index: 4;
  pointer-events: none;
}

.hero-floater {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(187px, 16.15vw, 306px);
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.15));
  mix-blend-mode: normal;
  will-change: transform;
}

.hero-message {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(50.2% + 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
}

.hero-typewriter {
  position: relative;
  margin: 0;
  padding-bottom: 0.12em;
  color: #000;
  font-size: clamp(26px, 2.4vw, 48px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.hero-typewriter span {
  display: inline-block;
  width: 0;
  max-width: max-content;
  overflow: hidden;
  border-right: 2px solid currentColor;
  animation: type-hero 1.85s steps(20, end) 3.26s forwards, caret 0.76s step-end 3.26s infinite;
}

@keyframes type-hero { to { width: 20ch; } }
@keyframes caret { 50% { border-color: transparent; } }

.chrome-button--hero {
  width: 118px;
  min-width: 118px;
}

.panel--started {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Extra breathing room below the unmasked hero feet before this section begins. */
  padding: 28vh 4vw 7vh;
  padding-top: 28svh;
  /* Opaque paper so the fixed footer backdrop never bleeds through. */
  background:
    radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--grid-x) var(--grid-y),
    var(--paper);
}

/* Scroll reveals: headings lead, then supporting content follows in a short
   stagger. Transform-only motion keeps scrolling smooth. */
.examples-title,
.examples-marquee,
.agents-intro,
.agents-wheel {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.95s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.examples-marquee {
  transform: translateY(64px);
}

.started-title {
  opacity: 1;
  transform: none;
}
.started-title [data-type-text] {
  display: block;
  min-height: 0.88em;
}
.started-title.is-typing [data-type-text]:last-child::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.72em;
  margin-left: 0.06em;
  background: currentColor;
  animation: caret 0.76s step-end infinite;
  vertical-align: 0.04em;
}

/* Each part of a step enters independently: the hand-drawn number arrives
   first, followed by its heading and then its supporting copy. */
.started-number,
.started-step h3,
.started-step p {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.75s ease,
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0ms;
}

.started-number { scale: 0.88; }
.started-step h3 { transform: translateY(30px); }
.started-step p { transform: translateY(22px); }

.panel--started.is-sequence-resetting .started-number,
.panel--started.is-sequence-resetting .started-step h3,
.panel--started.is-sequence-resetting .started-step p {
  transition: none !important;
  transition-delay: 0ms !important;
}

.panel--started.is-sequence-ready .started-number {
  opacity: 1;
  scale: 1;
  transition-delay: var(--started-delay);
}

.panel--started.is-sequence-ready .started-step h3,
.panel--started.is-sequence-ready .started-step p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--started-delay);
}

.panel--examples .examples-title {
  transform: translate(-50%, 64px);
}

.agents-intro {
  transform: translateY(64px);
}

.agents-wheel {
  transform: translateY(72px) scale(0.96);
}

.panel--examples.is-content-visible .examples-marquee,
.panel--agents.is-content-visible .agents-intro,
.panel--agents.is-content-visible .agents-wheel {
  opacity: 1;
  transform: translateY(0);
}

.panel--examples.is-content-visible .examples-title {
  opacity: 1;
  transform: translate(-50%, 0);
}

.panel--agents.is-content-visible .agents-wheel {
  transform: translateY(0) scale(1);
}

/* Exit upward when scrolling past a section; sections below the viewport keep
   their default downward offset. This makes reverse scrolling replay naturally. */
.panel--examples.is-above-viewport .examples-marquee,
.panel--agents.is-above-viewport .agents-intro {
  transform: translateY(-64px);
}

.panel--examples.is-above-viewport .examples-title {
  transform: translate(-50%, -64px);
}

.panel--agents.is-above-viewport .agents-wheel {
  transform: translateY(-72px) scale(0.96);
}

.started-step:nth-child(1) { --step-delay: 80ms; }
.started-step:nth-child(2) { --step-delay: 780ms; }
.started-step:nth-child(3) { --step-delay: 1480ms; }
.started-step:nth-child(4) { --step-delay: 2180ms; }
/* A quick cascading wave: number first, then heading and body in close
   succession, while the next column starts before the previous one settles. */
.started-step .started-number { --started-delay: var(--step-delay); }
.started-step h3 { --started-delay: calc(var(--step-delay) + 180ms); }
.started-step p { --started-delay: calc(var(--step-delay) + 340ms); }
.examples-marquee { transition-delay: 120ms; }
.agents-wheel { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .started-number,
  .started-step h3,
  .started-step p,
  .examples-title,
  .examples-marquee,
  .agents-intro,
  .agents-wheel {
    opacity: 1;
    transform: none;
    scale: 1;
    transition: none;
  }

  .panel--examples .examples-title { transform: translateX(-50%); }
  .agents-wheel { transform: none; }
}

.started-title {
  width: 70vw;
  margin: 0 auto 9vh;
  font-size: clamp(56px, 9vw, 150px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-align: center;
}

.started-title span {
  display: block;
}

.started-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 76px);
  align-items: start;
}

.started-step {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.started-number {
  display: block;
  width: min(48%, 105px);
  transition: filter 220ms ease;
  height: auto;
  aspect-ratio: 218 / 198;
  margin-inline: auto;
  animation: started-number-float 4.8s ease-in-out infinite;
  transform: translateY(0);
}

.started-step:nth-child(2) .started-number { animation-delay: -1.2s; }
.started-step:nth-child(3) .started-number { animation-delay: -2.4s; }
.started-step:nth-child(4) .started-number { animation-delay: -3.6s; }

@keyframes started-number-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.started-step h3 {
  margin: 16px 0 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.started-step p {
  max-width: 220px;
  margin: 14px 0 0;
  color: rgba(0, 0, 0, 0.52);
  font-size: 14px;
  line-height: 1.25;
}

.chrome-button--step {
  margin-top: 22px;
}

.panel--agents {
  position: relative;
  display: block;
  min-height: calc(100vh + 170px);
  min-height: calc(100svh + 170px);
  overflow: hidden;
  padding: 0;
  perspective: 1400px;
  background:
    radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--grid-x) var(--grid-y),
    var(--paper);
}

.agents-intro {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: clamp(24px, 3.5vw, 72px);
  width: min(24vw, 360px);
  translate: 0 -50%;
  text-align: left;
}

.agents-eyebrow {
  margin: 0 0 12px;
  color: rgba(0, 0, 0, 0.52);
  font-family: "Cash Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.agents-title {
  margin: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: normal;
}

.agents-title > span {
  display: block;
}

.agents-description {
  max-width: 300px;
  margin: 18px 0 0;
  color: rgba(0, 0, 0, 0.52);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
}

.agents-wheel {
  position: absolute;
  /* Preserve the existing card position inside the original viewport, while
     the taller panel adds 120px above and 50px below the carousel. */
  top: calc(39vh + 120px);
  top: calc(39svh + 120px);
  right: 0;
  width: 72%;
  height: min(81vh, 845px);
  margin: 0;
  translate: 0 -50%;
  /* Very deep perspective so the ring reads as 3D depth without foreshortening
     (squishing) the billboarded card faces. Depth is conveyed via scale/opacity. */
  perspective: 4000px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.agents-wheel.is-dragging {
  cursor: grabbing;
}

.agent-card {
  position: absolute;
  pointer-events: auto;
  cursor: inherit;
  left: 50%;
  top: 50%;
  /* Narrower, taller card proportions matching the updated agent designs. */
  width: clamp(320px, 25vw, 500px);
  height: auto;
  aspect-ratio: 430 / 645;
  transform-origin: center;
  /* Card faces are flat, fully opaque billboards. Depth comes from scale and
     surface tint—not transparency. */
  transform-style: flat;
  opacity: 1;
  will-change: transform;
}

.agent-card-surface {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  /* Fully opaque at every depth. JS progressively mixes in a cool shadow tint
     as cards recede around the ring. */
  background: var(--agent-card-tint, #eee) !important;
  opacity: 1 !important;
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  filter: blur(var(--agent-card-blur, 0px));
  will-change: transform, background-color, filter;
  transition: background-color 180ms linear, filter 180ms linear;
}

.agent-card:hover .agent-card-surface,
.agent-card:focus-within .agent-card-surface {
  background: #fff !important;
}

.agent-card header,
.agent-card .agent-portrait,
.agent-card .agent-copy {
  opacity: 1;
}

.agent-card header {
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 22px 24px 0;
  font-family: "Cash Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.agent-portrait {
  display: block;
  align-self: center;
  justify-self: center;
  width: 78%;
  height: 70%;
  min-height: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.agent-copy {
  padding: 0 24px 24px;
}

.agent-copy h3 {
  margin: 0 0 12px;
  font-size: clamp(26px, 2.1vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
}

.agent-copy p {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.25;
}

.agent-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 0;
}

.agent-meta > div {
  padding-left: 10px;
  border-left: 1px solid #111;
}

.agent-meta dt {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.agent-meta dd {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.25;
}

.panel--app {
  /* ABOVE the hero (z-index 0 backdrop) so this whole section reads as a single
     CARD that slides up and over the top of the fixed hero as you scroll. */
  z-index: 3;
  display: grid;
  place-items: center;
  /* Transparent around the inset card so the area behind it is the actual
     pinned hero—not a second paper panel that creates a visible page break.
     As --card reaches 1, .app-pattern expands to full-bleed and covers the hero. */
  background: transparent;
  /* No clipping: the card is allowed its own rounded corners and shadow. */
  overflow: visible;
}

/* --- Section 2 as a rising / expanding card ---
   The background AND contents live on one card. As you scroll into the section
   it comes up over the hero as an inset, rounded card, then expands in place to
   full width/height once it locks in (corners flatten, insets go to zero).
   Scroll back up and it reverses — shrinking back down into a card.

   Driven by --section-progress (0 = card entering from below, 1 = locked and
   fully expanded), which script.js sets per-panel on scroll. --card is that
   progress eased so most of the expansion happens as the section settles. */
.panel--app {
  --card: clamp(0, calc(var(--section-progress, 0) * 1.35 - 0.15), 1);
}

.app-pattern {
  position: absolute;
  /* Card inset: a chunky margin when entering, shrinking to a full-bleed 0 as
     the section locks into place. This is the "stretches to full width and
     height of the window" moment. */
  inset: calc((1 - var(--card)) * clamp(20px, 5vw, 88px));
  z-index: 0;
  /* Transparent until the Don't Click Here Easter egg restores the checkerboard. */
  background: transparent;
  transition: background-color 220ms ease;
  /* Rounded like a card until it fills the frame, then square. */
  border-radius: calc((1 - var(--card)) * clamp(20px, 3vw, 44px));
  /* A soft lift so it reads as a card floating over the hero; fades as it locks
     flush to the viewport edges. */
  box-shadow: none;
  will-change: inset, border-radius;
}

.panel--app.is-karaoke-playing .app-pattern {
  background-color: var(--green);
  background-image:
    linear-gradient(45deg, var(--pink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--pink) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--pink) 75%),
    linear-gradient(-45deg, transparent 75%, var(--pink) 75%);
  background-size: 76px 76px;
  background-position: 0 0, 0 38px, 38px -38px, -38px 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Skip the scroll-driven card animation; present it already expanded. */
  .panel--app { --card: 1; }
  .app-pattern { inset: 0; border-radius: 0; box-shadow: none; }
}

.app-showcase {
  position: relative;
  z-index: 2;
  width: min(74.6vw, calc(74.6svh * 2149 / 1528));
  aspect-ratio: 2149 / 1528;
}

.app-placeholder {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: clamp(18px, 2vw, 34px);
  background: #f7f7f5;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 72px, 0) scale(0.965);
  will-change: opacity, transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* Static app screenshot (replaces the archived interactive embed). Fills the
   card frame and keeps its aspect via the image's own ratio. */
.app-still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.panel--app.is-revealed .app-placeholder {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 0.72s ease 0.36s,
    transform 1.02s cubic-bezier(0.18, 0.78, 0.2, 1) 0.22s;
}

.app-embed-shell {
  width: auto;
  aspect-ratio: 2149 / 1528;
  overflow: hidden;
  user-select: auto;
}

.app-embed-fallback,
.app-embed {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.app-embed-fallback {
  z-index: 0;
  object-fit: cover;
}

.app-embed {
  z-index: 1;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 240ms ease;
}

.app-embed-shell.is-loaded .app-embed { opacity: 1; background: #e9e8e2; }
.app-embed-shell.is-loaded .app-embed-fallback { opacity: 0; }
.app-embed-fallback { transition: opacity 240ms ease; }
/* The screenshot remains underneath and reappears if the frame fails. */

.app-karaoke-button {
  position: absolute;
  z-index: 4;
  top: auto;
  right: auto;
  bottom: clamp(14px, 2.35%, 24px);
  left: clamp(14px, 2.35%, 24px);
  translate: 0;
  width: auto;
  min-width: 112px;
}

.app-karaoke-button {
  opacity: 0;
  transform: translateY(12px);
}
.panel--app.is-revealed .app-karaoke-button {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease 0.85s, transform 0.5s ease 0.85s;
}


/* The final agents panel moves away to reveal a viewport-pinned footer. The
   stage contributes one viewport of document height while the footer itself
   remains stationary in the background. */
.footer-reveal-stage {
  position: relative;
  isolation: isolate;
  height: calc(200vh + 170px);
  height: calc(200svh + 170px);
}

.footer-reveal-stage .panel--agents {
  position: relative;
  z-index: 2;
}

.footer-reveal-stage .panel--footer {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  margin-top: -100vh;
  margin-top: -100svh;
}

/* Legacy print/footer stage retained for the 404 drawing page. */
.print-footer-stage {
  position: relative;
  isolation: isolate;
  height: 230vh;
  height: 230svh;
}

.print-footer-stage .panel--print {
  position: relative;
  z-index: 2;
}

.print-footer-stage--footer-only {
  height: 100vh;
  height: 100svh;
}

.print-footer-stage--footer-only .panel--footer {
  margin-top: 0;
}

.print-footer-stage .panel--footer {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-top: -100vh;
  margin-top: -100svh;
  z-index: 0;
}

.panel--footer .panel__design { transform: scale(1.025); }

.footer-files-ball {
  position: absolute;
  z-index: 7;
  top: 18%;
  left: 15%;
  display: flex;
  /* Match the Don't Click Here ball exactly. */
  width: clamp(108px, 10vw, 160px);
  aspect-ratio: 1;
  padding: 20px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #000;
  background: var(--yellow);
  text-align: center;
  text-decoration: none;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

.footer-files-ball__copy {
  position: relative;
  display: block;
  width: 100%;
  height: 2.2em;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
  animation: footer-files-copy-spin 3s linear infinite;
}

.footer-files-ball__never,
.footer-files-ball__click {
  position: absolute;
  inset: 50% auto auto 50%;
  width: max-content;
  max-width: none;
  font: inherit;
  line-height: inherit;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.footer-files-ball__never {
  animation: footer-files-never-cycle 2s steps(1, end) infinite;
}

.footer-files-ball__never > span {
  display: block;
}

.footer-files-ball__click {
  animation: footer-files-click-cycle 2s steps(1, end) infinite;
}

@keyframes footer-files-copy-spin {
  to { transform: rotate(360deg); }
}

@keyframes footer-files-never-cycle {
  0%, 49.999% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes footer-files-click-cycle {
  0%, 49.999% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.footer-files-ball:hover,
.footer-files-ball:focus-visible {
  color: var(--yellow);
  background: #000;
  outline: none;
}

.footer-files-ball:hover .footer-files-ball__copy,
.footer-files-ball:focus-visible .footer-files-ball__copy {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.footer-files-ball:hover .footer-files-ball__never,
.footer-files-ball:focus-visible .footer-files-ball__never {
  position: static;
  opacity: 1;
  animation: none;
  transform: none;
}

.footer-files-ball:hover .footer-files-ball__click,
.footer-files-ball:focus-visible .footer-files-ball__click {
  display: none;
}

/* The goo wrapper keeps the exact framing/position the static plate used
   (full-bleed cover), with the interactive WebGL toy layered over the still
   fallback. */
.strawberry-goo {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Match the flat red field baked into the updated Stu artwork, so any area
     outside the image reads as one continuous strawberry-red background. */
  background: #c23e29;
}

.strawberry-footer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The full Stu-1 source stays intact; this is a viewport-only face crop. */
  object-position: 58% 64%;
  /* Zoom and position only in the viewport; the complete source stays intact. */
  transform: translate(140px, 20px) scale(3);
  transform-origin: 58% 64%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Interactive gloopie-goo, framed identically to the static plate (cover).
   Transparent so the footer's red frame shows through; sits just above the
   fallback image and owns pointer events so you can pull Stu around. */
.strawberry-goo-embed {
  position: absolute;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  /* Overscan the interactive layer slightly so deformation can never reveal
     the edge of the plate on wide desktop viewports. */
  transform: scale(1.15);
  transform-origin: center;
  background: transparent;
  /* The static plate uses object-fit: cover. The toy frames by HEIGHT and
     cover-fits its own canvas, so matching width/height here reproduces the
     same on-screen framing without letterboxing. */
}

@media (prefers-reduced-motion: reduce) {
  /* No autoplay wobble here (the toy is idle until dragged), but honour the
     preference by keeping the static plate as the resting state. */
  .strawberry-goo-embed { opacity: 1; }
}

.hotspot {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: white;
  background: #000;
  text-decoration: none;
  box-shadow: none;
}

.hotspot--community {
  left: 50%;
  bottom: 9.8vh;
  translate: -50% 0;
  background: transparent;
  color: transparent;
  min-width: 28vw;
  min-height: 7vh;
}

.chrome-button--files {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 19vh;
  translate: -50% 0;
}

.panel--print {
  display: grid;
  place-items: center;
  /* A taller runway gives the centered 3D Gloopies equal breathing room above
     and below, separating them from Built with Berd and the drawing section. */
  min-height: 130vh;
  min-height: 130svh;
  /* Opaque paper so the fixed footer backdrop never bleeds through as this
     section passes over it near the bottom of the page. */
  background:
    radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--grid-x) var(--grid-y),
    var(--paper);
  text-align: center;
}

.print-content {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(560px, 780px) minmax(180px, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 64px);
  width: calc(100% - 48px);
}

.print-model-column {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.print-model-stage {
  position: relative;
  width: min(56vw, 780px);
  height: min(78vh, 690px);
  transform-style: preserve-3d;
}

.print-gloopy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  /* Per-model size adjustments are anchored at the top. Earbud additionally
     moves down by 20px before scaling, while bottom reductions raise the feet. */
  transform-origin: 50% 0;
  translate: 0 var(--gloopie-top-offset, 0px);
  scale: var(--gloopie-hidden-scale, 0.94);
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-bar-height: 0px;
}

.print-gloopy.is-active {
  opacity: 1;
  scale: var(--gloopie-model-scale, 1);
  pointer-events: auto;
}

.print-gloopy.is-popping-in {
  opacity: 0;
  scale: var(--gloopie-pop-in-scale, 0.72);
}

.print-gloopy.is-popping-out {
  opacity: 0;
  scale: var(--gloopie-pop-out-scale, 1.12);
  pointer-events: none;
}

.print-gloopy--interactive:active { cursor: grabbing; }

/* Rotation is performed by model-viewer's real 3D camera orbit in script.js,
   never by rotating this HTML stage (which would flatten the canvas like a card). */
@media (prefers-reduced-motion: reduce) {
  .print-gloopy { transition: opacity 240ms ease; }
}

.print-copy {
  z-index: 3;
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 2.2vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.print-copy > span { display: block; }

.print-copy--left {
  justify-self: start;
  text-align: left;
}
.print-copy--right {
  justify-self: end;
  text-align: right;
}

.print-content .chrome-button--files {
  position: static;
  margin-top: 4px;
  translate: none;
  flex: 0 0 auto;
}

.panel--examples {
  /* Give the section a longer lead-in while preserving room for the cards. */
  min-height: 110vh;
  min-height: 110svh;
  /* Opaque paper so the fixed footer backdrop never bleeds through. */
  background:
    radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--grid-x) var(--grid-y),
    var(--paper);
}

.examples-title {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 25.5vh;
  margin: 0;
  transform: translateX(-50%);
  color: var(--ink);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.examples-marquee {
  position: absolute;
  z-index: 3;
  inset: 39.5vh 0 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.examples-marquee.is-dragging {
  cursor: grabbing;
}

.examples-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: examples-slide 42s linear infinite;
}

.examples-group {
  display: flex;
  gap: clamp(18px, 1.6vw, 32px);
  padding-right: clamp(18px, 1.6vw, 32px);
}

.project-card {
  /* Keep every project preview on the same compact square footprint. */
  width: clamp(320px, 26vw, 500px);
  margin: 0;
  color: var(--ink);
}

.project-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0;
  background: #000;
}

/* Alternate between only two silhouettes: clipped corners, then square. */
.project-card:nth-child(odd) .project-card__visual {
  clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%);
}
.project-card:nth-child(even) .project-card__visual {
  clip-path: inset(0);
}

/* Placeholder treatment until the final project previews are ready. */
.project-card__visual > *,
.project-card__visual::before {
  visibility: hidden;
}

.project-card h3 {
  margin: 22px 18px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-align: center;
}

.project-card p {
  max-width: 92%;
  margin: 16px auto 0;
  color: rgba(0, 0, 0, 0.5);
  font-family: "Cash Sans", sans-serif;
  font-size: clamp(12px, 0.88vw, 17px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: none;
}

.project-card__visual--logo .project-berd-logo {
  display: grid;
  place-items: center;
  width: min(200px, 70%);
  height: min(200px, 70%);
  color: #fff;
  visibility: visible;
}

.project-card__visual--logo .project-berd-logo svg,
.project-card__visual--logo .project-berd-logo .berd-logo__mark {
  position: static;
  display: block;
  width: 100% !important;
  height: 100% !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  max-width: none;
  max-height: none;
  overflow: visible;
  visibility: visible;
}

.project-card__visual--website {
  padding: 0;
  background: #000;
}

.project-card__visual--website .project-website-frame {
  position: relative;
  width: 72%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper);
  visibility: visible;
}

.project-card__visual--website .project-website-embed {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  /* Render a real desktop-sized page, then uniformly scale that complete
     viewport into the preview. This keeps every px-based detail—checker tiles,
     chrome, toolbar, type, and controls—in the correct miniature proportion. */
  width: 1920px;
  height: 1200px;
  border: 0;
  background: var(--paper);
  transform: scale(var(--project-website-scale, 0.25));
  transform-origin: top left;
  visibility: visible;
}

.project-card__visual--synth {
  grid-template-columns: repeat(2, minmax(80px, 125px));
  gap: 20px;
  background: #fff;
}

.project-card__visual--synth i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 5%, #ff00a8 6% 38%, #ff7f00 39% 68%, #111 69%);
  box-shadow: 0 0 40px rgba(255, 0, 168, 0.28);
}

.project-card__visual--deck {
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
}

.project-card__visual--website,
.project-card__visual--synth {
  background: #000;
}

.project-card__visual--deck .presentation-shape,
.project-card__visual--deck .presentation-slides,
.project-card__visual--deck .presentation-track,
.project-card__visual--deck .presentation-track img {
  visibility: visible;
}

.presentation-shape {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #000;
}

.presentation-slides {
  position: relative;
  width: 70%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
  /* Cover subpixel rounding at the track's right edge so the following slide
     never peeks through while the current frame is parked. */
  clip-path: inset(0 1px 0 0);
}

.presentation-slides::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: #000;
  pointer-events: none;
}

.presentation-track {
  display: flex;
  width: 500%;
  height: 100%;
  animation: presentation-slide 5s infinite;
}

.presentation-track img {
  display: block;
  width: 20%;
  height: 100%;
  min-width: 20%;
  flex: 0 0 20%;
  object-fit: cover;
}

@keyframes presentation-slide {
  0%, 15% { transform: translateX(0); }
  20%, 35% { transform: translateX(-20%); }
  40%, 55% { transform: translateX(-40%); }
  60%, 75% { transform: translateX(-60%); }
  80%, 95% { transform: translateX(-80%); }
  100% { transform: translateX(-80%); }
}

@keyframes examples-slide {
  to { transform: translateX(-50%); }
}

.draw-script,
.draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.draw-script {
  z-index: 2;
  inset: 10%;
  width: 80%;
  height: 80%;
  pointer-events: none;
}

.draw-script-brush {
  display: block;
}

.draw-canvas {
  z-index: 3;
  touch-action: none;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.draw-brush-cursor {
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  display: none;
  width: var(--brush-cursor-size, 34px);
  height: var(--brush-cursor-size, 34px);
  border: 1.5px solid #000;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.draw-brush-cursor img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.14));
}

.panel--draw.is-cursor-active .draw-brush-cursor { display: block; }
.panel--draw-404:not(.is-script-started) .draw-brush-cursor { display: none; }
.panel--draw-404:not(.is-script-started) .draw-canvas { pointer-events: none; }
.panel--draw.is-eraser-active .draw-brush-cursor { width: 62px; height: 62px; }
.panel--draw.is-avatar-active .draw-brush-cursor {
  width: var(--avatar-cursor-size, 120px);
  height: var(--avatar-cursor-size, 120px);
  border: 0;
  background: transparent;
}
.panel--draw.is-avatar-active .draw-brush-cursor img { display: block; }

@media (pointer: coarse) {
  .draw-canvas { cursor: auto; }
  .draw-brush-cursor { display: none !important; }
}

.draw-404-checkerboard {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #79c45c;
  background-image:
    linear-gradient(45deg, var(--pink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--pink) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--pink) 75%),
    linear-gradient(-45deg, transparent 75%, var(--pink) 75%);
  background-size: 30.4px 30.4px;
  background-position: 0 0, 0 15.2px, 15.2px -15.2px, -15.2px 0;
  animation: draw-404-checkerboard-drift 16s linear infinite;
  will-change: background-position;
}

@keyframes draw-404-checkerboard-drift {
  to {
    background-position:
      0 30.4px,
      0 45.6px,
      15.2px 15.2px,
      -15.2px 30.4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw-404-checkerboard { animation: none; }
}

.panel--draw-404 .draw-404-intro {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  width: min(88vw, 600px);
  margin: 0;
  color: #000;
  text-align: center;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 8px));
  transition: opacity 380ms ease, transform 380ms ease;
  pointer-events: none;
}

.panel--draw-404.is-intro-visible .draw-404-intro {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.panel--draw-404.is-intro-complete .draw-404-intro {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 8px));
}

.panel--draw-404 .draw-script,
.panel--draw-404 .draw-pollies,
.panel--draw-404 .draw-tools {
  opacity: 0;
}

.panel--draw-404.is-intro-complete .draw-script,
.panel--draw-404.is-intro-complete .draw-pollies {
  opacity: 1;
  transition: opacity 350ms ease 450ms;
}

.panel--draw-404.is-intro-complete .draw-pollie {
  opacity: 0;
}

.panel--draw-404.is-intro-complete.is-script-complete .draw-pollie {
  opacity: 1;
}

.panel--draw-404.is-intro-complete.is-script-complete .draw-tools {
  opacity: 1;
}

.page-404 .site-chrome,
.page-404 .built-by {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.page-404 .site { opacity: 1; }

.panel--draw {
  /* Opaque foreground panel in the bounded footer stage. It scrolls upward at
     normal speed while the footer underneath remains pinned and dead-still. */
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--grid-x) var(--grid-y),
    var(--paper);
}

.panel--draw-404 { background: #79c45c; }

/* Sections 3–7 share one viewport-anchored dotted-paper field. The panels stay
   opaque for correct hero/footer layering, while their dots remain stationary
   and all section content moves over the same background plane. */
.panel--started,
.panel--agents,
.panel--examples,
.panel--print,
.panel--draw {
  background-attachment: fixed;
  background-position: 0 0;
}

.draw-pollies {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.draw-pollie {
  position: absolute;
  width: clamp(78px, 8vw, 150px);
  height: clamp(100px, 15vh, 190px);
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.1));
  opacity: 0;
  scale: 0.5;
  transition: opacity 240ms ease, scale 420ms cubic-bezier(0.34, 1.56, 0.64, 1), visibility 120ms;
}

.panel--draw.is-script-complete .draw-pollie {
  opacity: 1;
  scale: 1;
}
.panel--draw.is-script-complete .draw-pollie:nth-child(1) { transition-delay: 0ms; }
.panel--draw.is-script-complete .draw-pollie:nth-child(2) { transition-delay: 70ms; }
.panel--draw.is-script-complete .draw-pollie:nth-child(3) { transition-delay: 140ms; }
.panel--draw.is-script-complete .draw-pollie:nth-child(4) { transition-delay: 210ms; }
.panel--draw.is-script-complete .draw-pollie:nth-child(5) { transition-delay: 280ms; }

.draw-pollie.is-erased {
  opacity: 0;
  visibility: hidden;
}

.draw-pollie--one { left: 7vw; top: 14vh; transform: rotate(-5deg); }
/* The upper-right turtle illustration—not the toolbar icon or brush stamp—is
   exactly half the dimensions of the other pre-positioned Pollies. */
.draw-pollie--two {
  right: 15vw;
  top: 15vh;
  width: clamp(39px, 4vw, 75px);
  height: clamp(50px, 7.5vh, 95px);
  transform: rotate(6deg);
  image-rendering: auto;
}
.draw-pollie--three { left: 14vw; bottom: 10vh; transform: rotate(4deg); }
.draw-pollie--four { right: calc(33vw - 4px); bottom: calc(28vh - 20px); transform: rotate(-4deg); }
.draw-pollie--five { right: 7vw; top: 42vh; transform: rotate(3deg); }

.draw-tools {
  position: absolute;
  z-index: 6;
  right: 24px;
  bottom: 24px;
  display: grid;
  opacity: 0;
  scale: 0.78;
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity 220ms ease 360ms, scale 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 360ms;
  grid-template-rows: repeat(4, 1fr);
  width: 44px;
  height: 168px;
  border: 2px solid #000;
  background: #fff;
}

.panel--draw.is-script-complete .draw-tools {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
}

.draw-tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  border-bottom: 2px solid #000;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
}

.draw-tool:last-child { border-bottom: 0; }
.draw-tool {
  transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.draw-tool:hover,
.draw-tool:focus-visible {
  z-index: 2;
  color: #000;
  background: var(--paper);
  transform: none;
}
.draw-tool.active { background: transparent; }
.draw-tool.active:hover,
.draw-tool.active:focus-visible { background: var(--paper); }

.draw-tool--pen span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000;
}

.draw-tool--pen:hover span,
.draw-tool--pen:focus-visible span { background: #000; }
.draw-tool:hover img,
.draw-tool:focus-visible img { filter: none; }

.draw-tool img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.draw-avatar-picker {
  position: relative;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #000;
}

.draw-avatar-picker > .draw-tool { border-bottom: 0; }

/* Avatar artwork is 30% larger in the picker, except the turtle, which keeps
   its original footprint. Button hit areas remain unchanged. */
.draw-tool--avatar img,
.draw-tool--avatar-option img {
  width: 23.4px;
  height: 23.4px;
}

.draw-tool--avatar-option[data-avatar="turtle"] img,
.draw-tool--avatar-current[data-avatar="turtle"] img {
  width: 9px;
  height: 9px;
}

/* Supplied 2× exports displayed at their intended half-resolution sizes.
   Button hit areas and drawing actions remain unchanged. */
.draw-tool--eraser .draw-tool-icon {
  width: 33px;
  height: 33px;
}

.draw-tool--clear .draw-tool-icon {
  width: 23px;
  height: 23px;
}

.draw-tool--eraser .draw-tool-icon,
.draw-tool--clear .draw-tool-icon {
  display: block;
  object-fit: contain;
  image-rendering: auto;
}

.draw-avatar-options {
  position: absolute;
  top: -1px;
  right: calc(100% - 1px);
  display: flex;
  height: calc(100% + 2px);
  border: 2px solid #000;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  pointer-events: none;
}

.draw-avatar-options .draw-tool {
  width: 42px;
  height: 100%;
  border-right: 2px solid #000;
  border-bottom: 0;
  background: #fff;
}

.draw-avatar-options .draw-tool:last-child { border-right: 0; }

.draw-avatar-picker:hover .draw-avatar-options,
.draw-avatar-picker:focus-within .draw-avatar-options {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.panel--footer::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Above the goo embed (z-index 2) so Stu keeps the footer's red cast, but
     pointer-events:none lets drags pass straight through to the toy. */
  z-index: 3;
  pointer-events: none;
  background: rgba(160, 28, 18, 0.18);
  backdrop-filter: blur(0.6px);
}

.footer-quote {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: min(78vw, 2060px);
  transform: translate(-50%, -50%);
  color: var(--yellow);
  font-size: clamp(44px, 6vw, 142px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.055em;
  text-align: center;
  white-space: pre-wrap;
}

.footer-quote::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.88em;
  margin-left: 0.05em;
  translate: 0 0.08em;
  background: currentColor;
  animation: caret-solid 0.74s step-end infinite;
}

.panel--footer.quote-done .footer-quote::after { display: none; }
@keyframes caret-solid { 50% { opacity: 0; } }

.footer-legal,
.footer-open-source {
  position: absolute;
  z-index: 5;
  bottom: 21px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.footer-legal {
  left: 50%;
  display: flex;
  align-items: center;
  translate: -50% 0;
  white-space: nowrap;
}

.footer-legal a,
.footer-open-source {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-open-source:hover,
.footer-open-source:focus-visible {
  color: #fff !important;
}

.footer-legal > span:not(.footer-built-in-berd) { margin: 0 10px; }

.footer-see-how {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-open-source {
  right: 24px;
  color: var(--ink) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-github-icon {
  flex: 0 0 auto;
  display: block;
}

.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 22px;
  translate: -50% 220%;
  max-width: min(92vw, 620px);
  border-radius: 999px;
  padding: 12px 18px;
  color: white;
  background: #000;
  font-size: 15px;
  line-height: 1.25;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.18);
  transition: translate 220ms ease;
}

.toast:empty { display: none; }
.toast.show { translate: -50% 0; }

@media (max-width: 900px) {
  :root { --grid-x: 32px; --grid-y: 32px; }
  html,
  body,
  .site {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  .panel { width: 100%; max-width: 100%; }
  .site-chrome {
    right: 16px;
    left: 16px;
    top: 18px;
    bottom: auto;
    width: calc(100% - 32px);
    max-width: none;
  }
  .site-chrome .chrome-button--get-app {
    position: absolute;
    top: 0;
    right: 0;
  }
  .hero-app-preview {
    width: calc(100% - 32px);
    border-radius: clamp(8px, 0.9vw, 15px);
  }
  /* Mobile compositing can anti-alias the rounded app edge against the bright
     strobe glow, creating a pale halo. In club mode use a hard clip and remove
     all exterior glow/shadow from the app frame. */
  body.is-club-mode .hero-app-preview {
    box-shadow: none !important;
    outline: 0;
    clip-path: inset(0 round clamp(8px, 0.9vw, 15px));
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  body.is-club-mode .club-strobe__glow { display: none; }
  .built-by { left: 16px; bottom: 21px; }
  .hero-orange { width: 100vw; max-height: 72vh; top: calc(50% - 38px); }
  .hero-typewriter { font-size: clamp(48px, 16vw, 76px); }
  .hero-floaters { inset: -18vh -38vw; }
  .hero-floater { width: clamp(153px, 32.3vw, 221px); }
  .app-showcase { width: 92vw; height: auto; aspect-ratio: 2149 / 1528; }
  .app-placeholder { width: 100%; height: 100%; max-height: none; transform: translate3d(0, 48px, 0) scale(0.975); }
  .app-embed-shell { width: 100%; height: 100%; }
  /* Mobile-only: halve the lead-in above Built with Berd while preserving the
     existing title-to-cards spacing, then shorten the runway into Agents. */
  .panel--examples { min-height: 88svh; }
  .examples-title { top: 12.75vh; }
  .examples-marquee { inset: 26.75vh 0 0; }
  .panel--agents {
    /* Shorten both gaps around the card graphic while keeping enough height
       for the full carousel and its footer handoff. */
    min-height: 125svh;
    width: calc(100% + 2px);
    max-width: none;
    margin-left: -1px;
    padding: 0;
    overflow: hidden;
    background:
      radial-gradient(circle, var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--grid-x) var(--grid-y),
      var(--paper);
  }
  .agents-intro {
    top: 4.5vh;
    left: 50%;
    width: calc(100% - 96px);
    translate: -50% 0;
    text-align: center;
  }
  .agents-eyebrow {
    margin-bottom: 8px;
    font-size: 10px;
  }
  .agents-title {
    font-size: 25px;
    line-height: 1;
    white-space: normal;
  }
  .agents-title > span { display: block; }
  .agents-description {
    max-width: 280px;
    margin: 10px auto 0;
    font-size: 14px;
  }
  .agents-wheel {
    /* Tighten the intro-to-card gap by another 50% on mobile. */
    top: calc(4.5vh + 170px + 15px);
    right: auto;
    bottom: auto;
    width: 100%;
    height: 68vh;
    margin: 0;
    translate: none;
  }
  .agent-card { width: min(78vw, 429px); height: auto; aspect-ratio: 430 / 610; }
  .agent-card.is-focused .agent-card-surface { background: #fff !important; }
  /* Mobile footer gets a wider portrait crop than desktop, revealing more of
     Stu while keeping the same focal point. */
  .strawberry-footer {
    object-position: 56% 61%;
    transform: translate(72px, 12px) scale(2.15);
    transform-origin: 56% 61%;
  }
  .strawberry-goo-embed { transform: scale(1.06); }

  .footer-reveal-stage {
    /* Keep one full viewport for the pinned footer while reducing the prior
       170px post-card runway by 40% (to 102px). */
    height: calc(225svh + 102px);
    /* `hidden` creates a scroll container and breaks the sticky footer in
       mobile browsers. `clip` still suppresses the edge sliver without
       changing the footer's sticky containing block. */
    overflow-x: clip;
    overflow-y: visible;
    background: transparent;
  }
  .footer-reveal-stage .panel--footer {
    position: sticky;
    top: 0;
    display: block;
    visibility: visible;
  }
  .agent-card header { padding: 17px 18px 0; font-size: 10px; }
  .agent-copy { padding: 0 18px 20px; }
  .agent-copy h3 { margin-bottom: 8px; font-size: 27px; }
  .agent-copy p { font-size: 11px; }
  .panel--started {
    min-height: 75svh;
    /* Add 40px breathing room above this section and another 40px before
       Built with Berd, without changing desktop spacing. */
    padding: calc(9vh + 40px) 7vw calc(4vh + 40px);
    overflow-y: visible;
  }
  .panel--bounce { margin-bottom: 10vh; margin-bottom: 10svh; }
  .started-title {
    width: 86vw;
    margin-bottom: 6vh;
    font-size: clamp(48px, 13vw, 92px);
  }
  .started-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 20px; }
  .started-number { width: min(48%, 70px); height: auto; aspect-ratio: 218 / 198; }
  .started-step h3 { margin-top: 12px; font-size: 25px; }
  .started-step p { font-size: 12px; }
  .print-content { grid-template-columns: 1fr minmax(240px, 60vw) 1fr; gap: 8px; width: calc(100% - 24px); }
  .print-model-stage { width: 100%; height: 68vh; }
  .print-copy { font-size: clamp(18px, 4.8vw, 28px); }
  .print-content .chrome-button--files { margin-top: 4px; }
  .draw-tools { right: 14px; bottom: 14px; }
  .footer-legal {
    right: 16px;
    bottom: 54px;
    left: auto;
    display: grid;
    width: auto;
    justify-items: end;
    gap: 7px;
    line-height: 1;
    text-align: right;
    translate: none;
    white-space: nowrap;
  }
  .footer-legal > span:not(.footer-built-in-berd) { display: none; }
  .footer-legal > span { margin: 0; }
  .footer-open-source {
    right: 16px;
    bottom: 20px;
    min-height: 13px;
    justify-content: flex-end;
    width: auto;
    text-align: right;
  }
}

/* Short mobile viewports need content-driven minimums: svh-only section sizes
   can end before card captions and agent copy finish, clipping text and pulling
   the next section upward. Desktop and taller phones keep the layout above. */
@media (max-width: 900px) and (max-height: 720px) {
  .panel--examples { min-height: 780px; }
  .examples-marquee {
    top: 180px;
    bottom: auto;
    height: 560px;
  }
  .panel--agents { min-height: 900px; }
  .agents-wheel {
    top: 285px;
    height: 520px;
  }
  .footer-reveal-stage { height: calc(100svh + 1002px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
  .loader.is-complete { animation-duration: 0.15s !important; }
  .app-placeholder { opacity: 1; transform: none; }
  .hero-typewriter span { width: auto; }
  .started-number { animation: none !important; }
}