.ai-cinema {
  --chip-stage-height: calc(100svh - 64px);
  --chip-outro-space: 160px;
  position: relative;
  height: calc(var(--chip-stage-height) + 240svh);
  margin-bottom: var(--chip-outro-space);
  background: #fff;
  color: #191f28;
  scroll-margin-top: 0;
}
/* Extend the white surface without changing the sticky animation's length. */
.ai-cinema::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--chip-outro-space);
  background: inherit;
  pointer-events: none;
}
/* A native sticky scene: scrolling remains controlled by the visitor. */
.ai-pin {
  position: sticky;
  top: 64px;
  height: var(--chip-stage-height);
  overflow: clip;
}
.ai-story {
  position: absolute;
  z-index: 2;
  top: clamp(52px, 9svh, 108px);
  left: 24px;
  right: 24px;
  text-align: center;
  pointer-events: none;
}
.ai-story-beat { position: absolute; inset: 0 0 auto; opacity: 0; will-change: transform, opacity; }
.ai-story-intro { opacity: 1; }
.ai-story h2, .ai-story h3 {
  margin: 0;
  font-size: clamp(40px, 4.5vw, 68px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.055em;
  word-break: keep-all;
}
.ai-story-intro h2 { font-size: clamp(44px, 5vw, 76px); }
.ai-story h3 span { color: #008667; }
.ai-mobile-break { display: none; }
.ai-theater { position: absolute; inset: 0; scroll-margin-top: 86px; }
.ai-universe { position: relative; height: 100%; }
.ai-core-render { position: absolute; inset: 0; touch-action: pan-y; }
.ai-core-render canvas { display: block; width: 100%; height: 100%; }
.ai-core-fallback {
  position: absolute;
  left: 50%;
  top: var(--chip-y, 46%);
  transform: translate(-50%, -50%) rotate(-12deg) scale(var(--chip-scale, .34));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  border: 2px solid #a2aba6;
  border-radius: 30px;
  background: #29302d;
  color: #f2f5f3;
  box-shadow: 0 8px 0 #bbc2be, 0 13px 0 #55665d, 0 30px 45px #1f29231a;
}
.ai-core-fallback > span { font: 700 30px/1 Arial, sans-serif; letter-spacing: -1px; }
.ai-core-fallback > small { margin-top: 20px; color: #b8c8be; font: 500 16px/1 Arial, sans-serif; letter-spacing: 1px; }
.ai-core-render[data-renderer="webgl"] .ai-core-fallback { display: none; }
.ai-motion-toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #68736c;
  cursor: pointer;
}
.ai-motion-toggle[hidden] { display: none; }
.ai-motion-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ai-play-svg { display: none; }
.ai-motion-toggle[aria-pressed="true"] .ai-pause-svg { display: none; }
.ai-motion-toggle[aria-pressed="true"] .ai-play-svg { display: block; }
.ai-motion-toggle:focus-visible { outline: 2px solid #08734e; outline-offset: 3px; }
@media (hover: hover) { .ai-motion-toggle:hover { background: #17241b08; color: #202422; } }
@media (max-width: 760px) {
  .ai-cinema { --chip-outro-space: 96px; height: calc(var(--chip-stage-height) + 210svh); }
  .ai-story { top: clamp(48px, 10svh, 84px); left: 20px; right: 20px; }
  .ai-story h2, .ai-story h3 { font-size: clamp(28px, 8.1vw, 42px); line-height: 1.35; letter-spacing: -.05em; }
  .ai-story-intro h2 { font-size: clamp(32px, 8.6vw, 46px); }
  .ai-mobile-break { display: initial; }
  .ai-motion-toggle { right: 12px; bottom: 16px; }
}
@media (max-height: 570px) and (min-width: 761px) {
  .ai-story { top: 24px; }
  .ai-story h2, .ai-story h3 { font-size: 36px; line-height: 1.2; }
}
@media (max-height: 570px) and (max-width: 760px) {
  .ai-story { top: 28px; }
  .ai-story h2, .ai-story h3 { font-size: 28px; line-height: 1.25; }
}
@media (max-height: 570px) and (min-width: 560px) {
  .ai-mobile-break { display: none; }
}
/* The same content in reading order, without a long pinned sequence. */
@media (prefers-reduced-motion: reduce) {
  .ai-cinema { height: auto; }
  .ai-pin { position: relative; top: 0; height: auto; padding: 64px 24px 32px; }
  .ai-story { position: relative; inset: auto; display: grid; gap: 40px; }
  .ai-story-beat { position: relative; opacity: 1 !important; transform: none !important; will-change: auto; }
  .ai-story h2 { font-size: 24px; color: #6b7684; }
  .ai-story h3 { font-size: clamp(28px, 4vw, 48px); }
  .ai-theater { position: relative; height: 360px; margin-top: 12px; }
}