#marketing.story-world {
  --story-ink: #f7f3ff;
  --story-secondary: #c8c6df;
  --story-violet: #c5baff;
  --story-gold: #ecd2a3;
  --story-line: #b9b1fa35;
  --story-top: 71px;
  position: relative;
  isolation: isolate;
  color: var(--story-ink);
  background: #070814;
}

.story-world .world-stage {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 74% 44%, #27205088, transparent 57%),
    radial-gradient(ellipse at 23% 78%, #17234273, transparent 51%),
    #070814;
}

.story-world .world-stage::before,
.story-world.world-lit-pulse .world-stage::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: radial-gradient(ellipse at 71% 48%, #f6cf844a, #bb93ec15 27%, transparent 58%);
  animation: story-ignite .9s ease-out both;
}

@keyframes story-ignite {
  from { opacity: 0; transform: scale(.95); }
  22% { opacity: .9; }
  to { opacity: 0; transform: scale(1.1); }
}

.story-world .world-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.story-world .world-stage::before {
  content: "";
  background:
    radial-gradient(ellipse at 51% 49%, #9a8af216, transparent 52%),
    radial-gradient(1px 1px at 30px 33px, #c6d3ff91 50%, transparent 76%),
    radial-gradient(1px 1px at 95px 57px, #d8bded67 50%, transparent 76%);
  background-size: auto, 157px 179px, 221px 251px;
}

.story-world .world-vignette {
  background:
    linear-gradient(0deg, #070814e8, #0708141a 19%, transparent 31% 79%, #07081463),
    linear-gradient(90deg, #070814c9, #07081411 48%, transparent 63%, #07081448);
}

.story-world #particle-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.story-world .world-fallback {
  position: absolute;
  top: 45%;
  left: 68%;
  width: clamp(200px, 52vw, 700px);
  aspect-ratio: 1;
  opacity: .8;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, #fff1cb 0 1px, #efce9061 2px, transparent 8%),
    radial-gradient(circle at 50% 50%, #b498f04a, #5945bc12 36%, transparent 65%);
  border-radius: 50%;
}

.story-world .world-fallback i {
  position: absolute;
  inset: 24% 2%;
  border: 1px dotted #c8a4ff9c;
  border-radius: 50%;
  box-shadow: 0 0 25px #aa91ff29, inset 0 0 22px #9f8dff35;
  transform: rotate(-27deg);
}

.story-world .world-fallback i:nth-child(2) {
  inset: 27% 12%;
  border-color: #77baffba;
  transform: rotate(36deg);
}

.story-world .world-fallback i:nth-child(3) {
  inset: 16% 9%;
  border-color: #ebd0aa7b;
  transform: rotate(-49deg);
}

.story-world .world-stage:has(canvas[data-particles-active]) .world-fallback {
  display: none;
}

.story-world .story-chapter,
.story-world .story-end {
  position: relative;
  border-bottom: 1px solid #a9a4e126;
  scroll-margin-top: 0;
}

.story-world .story-chapter {
  display: grid;
  align-items: center;
  min-height: calc(100vh - var(--story-top));
  min-height: calc(100svh - var(--story-top));
  padding-block: clamp(66px, 10vh, 125px) clamp(99px, 13vh, 150px);
}

.story-world .story-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 7vw, 110px);
  align-items: center;
}

.story-world .story-layout > * { min-width: 0; }

.story-world .story-copy {
  position: relative;
  isolation: isolate;
  max-width: 540px;
}

.story-world .story-copy::before {
  position: absolute;
  z-index: -1;
  inset: -38px -55px;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at 38% 50%, #070814f5 0%, #070814d9 42%, #07081445 64%, transparent 79%);
}

.story-world .story-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  color: var(--story-gold);
  font-size: 12px;
  font-weight: 710;
  letter-spacing: .13em;
}

.story-world .story-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  flex: 0 0 auto;
  background: #f3d3a2a6;
  box-shadow: 0 0 12px #f3d3a25e;
}

.story-world h1,
.story-world .story-chapter h2,
.story-world .story-end h2 {
  color: var(--story-ink);
  text-wrap: balance;
  line-height: 1.14;
  letter-spacing: -.058em;
}

.story-world h1 { font-size: clamp(54px, 6.7vw, 97px); }
.story-world .story-chapter h2 { font-size: clamp(39px, 5.15vw, 74px); }
.story-world .story-end h2 { font-size: clamp(36px, 4.5vw, 62px); }

.story-world .story-copy :is(h1, h2) em {
  color: #d6c9ff;
  background: linear-gradient(99deg, #fff2d7 4%, #ded5ff 51%, #a9afff);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

.story-world .story-lead {
  max-width: 35em;
  margin-top: 19px;
  color: var(--story-secondary);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.85;
  text-wrap: pretty;
}

.story-world .story-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 23px;
}

.story-world .story-actions .button { min-height: 47px; white-space: normal; text-align: center; }
.story-world .story-actions .button.primary,
.story-world .story-end .button.primary {
  border-color: #f2ddaf;
  background: #efdbb5;
  color: #251c30;
  box-shadow: 0 5px 28px #e9bf7c23;
}

.story-world .story-actions .button.primary:hover,
.story-world .story-end .button.primary:hover { background: #fff0d2; }
.story-world .story-actions .button.outline { background: #101023dc; }

.story-world #lab.story-chapter {
  padding-top: clamp(79px, 12vh, 134px);
}

.story-world #lab .story-copy {
  max-width: 720px;
  grid-column: 1 / -1;
}

.story-world #lab .story-lead { max-width: 390px; }

.story-world .world-readout {
  position: absolute;
  right: max(48px, calc((100% - 1240px) / 2));
  bottom: clamp(84px, 13vh, 150px);
  display: flex;
  gap: 8px 12px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 38ch;
  padding: 7px 12px;
  border-left: 1px solid #c7b5f45d;
  color: #d4ccef;
  background: #0a0b1ac9;
  font-size: 12px;
  letter-spacing: .075em;
}

.story-world .world-readout strong { color: var(--story-gold); font-size: 12px; }

.story-world .story-console,
.story-world .story-play {
  position: relative;
  align-self: center;
  max-width: 610px;
  padding: clamp(19px, 3.1vw, 34px);
  border: 1px solid var(--story-line);
  border-radius: 17px;
  background: linear-gradient(144deg, #1b1835d9, #0b0b1aef 73%);
  box-shadow: 0 15px 50px #05040f62, inset 0 1px 0 #e2d8fd18;
}

.story-world .story-console > :is(h3, header),
.story-world .story-play > :is(h3, header) { margin-bottom: 13px; }

.story-world .story-console h3,
.story-world .story-play h3 { font-size: clamp(17px, 2vw, 24px); }

.story-world .world-fields { display: grid; gap: 17px; }
.story-world .world-choice { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }

.story-world .world-choice legend {
  margin-bottom: 7px;
  padding: 0;
  color: #e5dbfa;
  font-size: 13px;
  font-weight: 730;
}

.story-world .world-choice :is(button, label) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 11px;
  border: 1px solid #ab9df26b;
  border-radius: 7px;
  background: #16162d;
  color: #eee8fe;
  font-size: 13px;
  cursor: pointer;
}

.story-world .world-choice :is(button, label):hover { background: #292449; }
.story-world .world-choice button[aria-pressed="true"],
.story-world .world-choice label:has(:checked) {
  border-color: #dacbfc;
  background: #ddd0ff;
  color: #201630;
  font-weight: 740;
}

.story-world .world-choice input[type="radio"] { width: 15px; height: 15px; margin: 0; accent-color: #8e68dc; }
.story-world .world-choice label:focus-within { outline: 2px solid #d6c8ff; outline-offset: 3px; }
.story-world .world-choice select { max-width: 100%; border: 1px solid #ab9df26b; border-radius: 7px; background: #17162c; padding: 7px 10px; color: #eee8fe; }

.story-world .world-prompt {
  margin-top: 16px;
  padding: 10px 13px;
  border-left: 2px solid #bea1ffb5;
  background: #26203c8f;
  color: #e7dcf7;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.story-world .world-prompt > :first-child { margin-top: 0; }
.story-world .world-prompt > * + * { margin-top: 4px; }

.story-world .world-surface {
  position: relative;
  min-height: clamp(145px, 22vh, 245px);
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #ad95ff50;
  border-radius: 9px;
  background: #08091429;
  touch-action: pan-y;
  cursor: crosshair;
}

.story-world .world-surface::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, #cec0fa90 14px, transparent 14px) left 9px top 9px / 17px 1px no-repeat,
    linear-gradient(#cec0fa90 14px, transparent 14px) left 9px top 9px / 1px 17px no-repeat,
    linear-gradient(-90deg, #cec0fa90 14px, transparent 14px) right 9px bottom 9px / 17px 1px no-repeat,
    linear-gradient(0deg, #cec0fa90 14px, transparent 14px) right 9px bottom 9px / 1px 17px no-repeat,
    radial-gradient(ellipse at 50% 50%, #ac8cff1f, transparent 58%);
}

.story-world .world-surface:focus-visible { border-color: #dcc9ff; }
.story-world .world-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.story-world .world-result {
  min-height: 2.6em;
  margin-top: 10px;
  color: var(--story-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.story-world #curriculum .lesson-list { border-color: var(--story-line); }
.story-world #curriculum .lesson-list details { border-color: var(--story-line); }
.story-world #curriculum .lesson-list details[open] .lesson-number { color: var(--story-gold); }
.story-world #curriculum .lesson-list details[open] .lesson-title { color: #fff4dc; }

.story-world .story-end {
  min-height: calc(100svh - var(--story-top));
  padding-block: clamp(45px, 9vh, 99px) 87px;
  background: linear-gradient(180deg, #0809132e, #080913bb 75%, #080913db);
}

.story-world .story-end .pricing-section { border: 0; background: none; }
.story-world .story-end .pricing { padding-block: 32px 63px; }
.story-world .story-end .section-heading > p { color: #ddd9ee; text-shadow: 0 2px 9px #070714; }
.story-world .story-end .price-card { border-color: #b3a0df53; background: #151326ef; }
.story-world .story-end .price-card.premium { background: #201932f3; }
.story-world .story-end .price { color: #fff0d4; }
.story-world .story-end .faq { padding-block: 22px 36px; }
.story-world .story-end .faq-list { border-color: var(--story-line); background: #0c0c19c4; }
.story-world .story-end .faq-list summary { padding-left: 10px; }
.story-world .story-end .faq-list details p { padding-left: 10px; }

.story-world .story-navigation {
  position: fixed;
  z-index: 3;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  align-items: center;
  max-width: calc(100% - 24px);
  gap: 1px;
  padding: 4px 5px;
  border: 1px solid #c1b5f34b;
  border-radius: 999px;
  background: #0c0c1bf0;
  box-shadow: 0 10px 32px #07071487;
  transform: translateX(-50%);
}

.story-world :is(.chapter-link, .world-motion) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 44px;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ddd5f1;
  background: transparent;
  font-size: 12px;
  font-weight: 670;
  white-space: nowrap;
}

.story-world :is(.chapter-link, .world-motion):hover { background: #24213b; }
.story-world .chapter-link[aria-current]:not([aria-current="false"]) {
  border-color: #dcc39454;
  background: #362b3a;
  color: #fff1d0;
}

.story-world .world-motion {
  margin-left: 3px;
  padding-inline: 9px;
  color: #f4dcac;
}

.story-world .world-motion[aria-pressed="true"] {
  border-color: #b6a2e750;
  background: #1d1a35;
}

.story-world :is(.story-chapter, .story-end) a:focus-visible,
.story-world :is(.story-chapter, .story-end) button:focus-visible {
  outline-color: #f2cf93;
}

@media (max-width: 1050px) {
  .story-world .story-layout { gap: 35px; }
  .story-world .story-copy::before { inset-inline: -29px; }
  .story-world .world-readout { right: 33px; }
}

@media (max-width: 810px) {
  #marketing.story-world { --story-top: 59px; }

  .story-world .world-vignette {
    background:
      linear-gradient(0deg, #070814c7, transparent 30% 76%, #07081452),
      radial-gradient(ellipse at center, transparent 28%, #0708146c);
  }

  .story-world .world-fallback { top: 43%; left: 53%; width: min(82vw, 520px); }
  .story-world.world-lit-pulse .world-stage::after {
    background: radial-gradient(ellipse at 50% 69%, #f6cf844a, #bb93ec15 27%, transparent 58%);
  }

  .story-world .story-chapter {
    min-height: calc(100svh - var(--story-top));
    align-items: start;
    padding-block: 39px 93px;
  }

  .story-world .story-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 10vw, 63px);
    align-items: start;
  }

  .story-world h1 { font-size: clamp(41px, 12vw, 76px); }
  .story-world .story-chapter h2 { font-size: clamp(34px, 8.75vw, 61px); }
  .story-world .story-eyebrow { margin-bottom: 12px; font-size: 11px; }
  .story-world .story-lead { margin-top: 13px; line-height: 1.65; }
  .story-world .story-actions { margin-top: 17px; }

  .story-world .story-copy::before {
    inset: -22px -14px -25px;
    background: radial-gradient(ellipse at 45% 39%, #070814f2 12%, #070814cc 45%, #0708144d 62%, transparent 80%);
  }

  .story-world #lab.story-chapter {
    min-height: max(630px, calc(100svh - var(--story-top)));
    padding-top: 42px;
  }

  .story-world #lab .story-copy { grid-column: auto; }
  .story-world .world-readout { bottom: 88px; right: 18px; max-width: calc(100% - 36px); }
  .story-world .story-console,
  .story-world .story-play { width: 100%; padding: 17px; border-radius: 13px; }

  .story-world #project .story-console,
  .story-world #curriculum .story-console { margin-top: min(22vw, 112px); }

  .story-world #experiment .story-play { margin-top: min(10vw, 48px); }
  .story-world .story-end { padding-top: 49px; }
  .story-world .story-end .pricing { padding-block: 12px 48px; }
  .story-world .story-end .faq { padding-bottom: 25px; }

  .story-world .story-navigation { bottom: max(10px, env(safe-area-inset-bottom)); }
  .story-world :is(.chapter-link, .world-motion) { min-height: 40px; padding-inline: 8px; font-size: 11px; }
  .story-world .world-motion { margin-left: 0; }
}

@media (max-width: 375px) {
  .story-world :is(.chapter-link, .world-motion) { padding-inline: 5px; }
  .story-world .story-console, .story-world .story-play { padding: 13px; }
  .story-world .world-choice { gap: 5px; }
  .story-world .world-choice :is(button, label) { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-world *, .story-world *::before, .story-world *::after {
    animation: none !important;
    transition: none !important;
  }
}

.story-world .story-next {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding-inline: 4px;
  color: #eadcfc;
  font-size: 14px;
  font-weight: 700;
}
.story-world .story-next:hover { text-decoration: underline; text-underline-offset: 5px; }
.story-world .story-copy > .story-next { margin-top: 12px; }

.story-world .world-prompt > span {
  display: block;
  color: var(--story-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.story-world #world-surface-hint {
  position: absolute;
  right: 12px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  pointer-events: none;
  color: #e3dafa;
  background: #0d0d20d9;
  font-size: 11px;
}

.story-world #experiment .story-play {
  background: linear-gradient(180deg, #0c0c1d30 16%, #12112878 62%, #0d0b1bee 86%);
}

.story-world .world-mark,
.story-world .world-segment {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  pointer-events: none;
}

.story-world .world-mark {
  width: 19px;
  height: 19px;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ffffdf 0 10%, #fedca2 17%, #fdce7b91 30%, transparent 64%);
  box-shadow: 0 0 21px #f4c980a6;
  animation: story-mark-appear .34s ease-out both;
}
.story-world .world-mark::before,
.story-world .world-mark::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse 40% 16% at 50% 50%, #fdd891d8, transparent);
}
.story-world .world-mark::before { transform: rotate(54deg); }
.story-world .world-mark::after { transform: rotate(-54deg); }

.story-world[data-scene="forest"] .world-mark {
  background: radial-gradient(circle, #ffffe1 0 10%, #c9f0a6 18%, #94f4bb8c 33%, transparent 65%);
  box-shadow: 0 0 20px #6aebbfa8;
}
.story-world[data-scene="forest"] .world-mark::before,
.story-world[data-scene="forest"] .world-mark::after {
  background: radial-gradient(ellipse 40% 16% at 50% 50%, #bcf4b4d1, transparent);
}
.story-world[data-rule="stars"] .world-mark {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #fff 0 10%, #d8e0ffed 13%, #adbcff87 25%, transparent 54%);
  box-shadow: 0 0 20px #a3aaffcf;
}
.story-world[data-rule="stars"] .world-mark::before,
.story-world[data-rule="stars"] .world-mark::after {
  background: radial-gradient(ellipse 7% 47% at 50% 50%, #e4d9fcea 2%, #e0daff50 39%, transparent);
}
.story-world[data-rule="stars"] .world-mark::before { transform: rotate(14deg); }
.story-world[data-rule="stars"] .world-mark::after { transform: rotate(104deg); }
.story-world .world-segment {
  width: var(--length, 0);
  height: 1px;
  display: block;
  transform: rotate(var(--angle, 0rad));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #ecdcffaf, #b4bbffd9, #ecdcffaf);
  box-shadow: 0 0 7px #a3aaffae;
}
@keyframes story-mark-appear {
  from { opacity: .4; transform: translate(-50%, -50%) scale(.35); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.story-world[data-active-chapter="experiment"] .world-vignette {
  background: linear-gradient(90deg, #070814c9, #0708140d 60%, #0708141a);
}
.story-world[data-active-chapter="curriculum"] .world-vignette {
  background: linear-gradient(90deg, #07081416, transparent 38%, #070814c9);
}
.story-world[data-active-chapter="pricing"] .world-vignette {
  background: linear-gradient(0deg, #070814cb, transparent 52%, #0708145c);
}
.story-world[data-scene="forest"] .world-stage {
  background: radial-gradient(ellipse at 60% 50%, #14384787, transparent 57%), #070814;
}
.story-world[data-scene="sunset"] .world-stage {
  background: radial-gradient(ellipse at 60% 50%, #5134408a, transparent 56%), #070814;
}

.story-world[data-particle-form="spark"] .world-fallback i { inset: 4% 39%; }
.story-world[data-particle-form="spiral"] .world-fallback i { inset: 19% 5%; transform: rotate(-47deg); }
.story-world[data-particle-form="spiral"] .world-fallback i:nth-child(2) { inset: 28% 8%; transform: rotate(-36deg); }
.story-world[data-particle-form="spiral"] .world-fallback i:nth-child(3) { inset: 37% 14%; transform: rotate(-27deg); }
.story-world[data-particle-form="sphere"] .world-fallback i { inset: 10%; }
.story-world[data-particle-form="sphere"] .world-fallback i:nth-child(2) { inset: 22% 10%; }
.story-world[data-particle-form="sphere"] .world-fallback i:nth-child(3) { inset: 10% 30%; }
.story-world[data-particle-form="garden"] .world-fallback i { inset: 18% 24%; }
.story-world[data-particle-form="garden"] .world-fallback i:nth-child(2) { inset: 18% 26%; transform: rotate(72deg); }
.story-world[data-particle-form="garden"] .world-fallback i:nth-child(3) { inset: 18% 26%; transform: rotate(-72deg); }
.story-world[data-particle-form="network"] .world-fallback i { inset: 20% 5%; border-radius: 0; }
.story-world[data-particle-form="portal"] .world-fallback i { inset: 13%; }
.story-world[data-particle-form="portal"] .world-fallback i:nth-child(2) { inset: 9%; }
.story-world[data-particle-form="portal"] .world-fallback i:nth-child(3) { inset: 20%; }
.story-world[data-active-chapter="project"] .world-fallback,
.story-world[data-active-chapter="pricing"] .world-fallback { left: 50%; }
.story-world[data-active-chapter="curriculum"] .world-fallback { left: 32%; }

@media (min-width: 811px) {
  .story-world #curriculum .story-layout { gap: 18px 65px; }
  .story-world #curriculum .story-layout > * { grid-column: 2; }
  .story-world #curriculum .story-copy { max-width: 560px; }
}
@media (max-width: 810px) {
  .story-world[data-active-chapter] .world-fallback { left: 50%; }
  .story-world[data-active-chapter="curriculum"] .world-vignette {
    background: linear-gradient(0deg, #070814bc, transparent 54%, #07081459);
  }
}

.story-world[data-motion="paused"] :is(.world-mark, .world-stage, .world-fallback) { animation: none; }
.story-world .story-chapter:focus-within { scroll-margin-bottom: 70px; }