/* The app concept sits directly over the world it helps grow. */
.story-document { scroll-snap-type: none; }
.action-hero { position: relative; isolation: isolate; background: oklch(.86 .065 220); scroll-margin-top: var(--story-header); overflow: clip; }
.hero-anchor { position: absolute; top: 0; left: 0; }
.action-hero-scene { position: absolute; inset: auto 0 0; width: 100%; height: auto; object-fit: contain; object-position: center bottom; mask-image: linear-gradient(180deg, transparent, black 15%); z-index: -2; }
.action-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, oklch(.2 .055 190 / .82), oklch(.2 .055 190 / .65) 36%, oklch(.2 .055 190 / .08) 63%, transparent), linear-gradient(180deg, oklch(.2 .055 190 / .12), transparent 65%); }
.action-art-credit { position: absolute; bottom: 16px; right: 4.1%; background: oklch(.24 .04 170 / .9); color: var(--surface); padding: 3px 8px; font-size: 9px; line-height: 1.7; }
.action-hero-layout { width: min(1280px, calc(100% - 112px)); margin: auto; display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); align-items: center; gap: clamp(40px, 5.2vw, 84px); padding-block: 50px 110px; min-height: calc(100svh - var(--story-header)); }
.action-hero-copy { padding-bottom: 24px; min-width: 0; color: var(--surface); }
.action-hero-category { display: flex; align-items: center; gap: 10px; margin-bottom: 27px; color: oklch(.95 .025 205); font-size: 16px; font-weight: 550; }
.action-hero-category img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.action-hero h1 { font-size: clamp(48px, 5.1vw, 74px); font-weight: 720; line-height: 1.04; letter-spacing: -.04em; text-wrap: initial; }
.action-hero h1 > span { display: block; }
.action-hero h1 em { color: var(--accent); font-style: normal; }
.action-hero-description { max-width: 38ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.75; margin-top: 27px; color: oklch(.96 .012 205); }
.action-hero-intro { max-width: 38ch; margin-top: 17px; font-size: 14px; color: oklch(.93 .025 205); line-height: 1.7; }
.action-hero-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 27px; margin-top: 31px; }
.action-hero-links .pixel-button { padding: 13px 20px; gap: 25px; background: var(--accent); color: var(--ink); }
.action-video-link { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; line-height: 1.35; font-size: 12px; padding-block: 6px; }
.action-video-link > span { grid-row: span 2; align-self: center; font-size: 27px; }
.action-video-link > small { color: oklch(.92 .018 205); font-size: 10px; margin-top: 4px; }
.action-video-link:hover { color: var(--accent); }
.action-beta-note { margin-top: 17px; font-size: 12px; color: oklch(.96 .012 205); }
.action-town-tagline { margin-top: 35px; font-family: var(--display); font-size: 21px; color: oklch(.96 .025 205); }
.action-world-link { display: inline-flex; align-items: center; gap: 20px; margin-top: 5px; font-size: 12px; color: oklch(.95 .015 205); min-height: 44px; }
.action-world-link span { font-size: 20px; }
.action-world-link:hover { color: var(--accent); }

/* The generated image supplies the app window, without a second frame. */
.app-ui-preview { position: relative; width: 100%; max-width: 290px; min-width: 0; margin: 16px 0 24px; justify-self: end; align-self: start; }
.app-ui-image { display: block; width: 100%; height: auto; }
.app-ui-ali { position: absolute; width: 72px; height: 108px; object-fit: contain; bottom: 8%; left: -55px; pointer-events: none; }
.app-ui-preview figcaption { width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 4px 9px; background: oklch(.2 .055 190 / .88); color: oklch(.98 .008 205); font-size: 10px; line-height: 1.6; text-align: center; }

@media (min-width: 1600px) { .action-hero-layout { min-height: calc(100svh - var(--story-header)); } }
@media (max-width: 1150px) and (min-width: 861px) {
  .action-hero-layout { width: calc(100% - 72px); gap: 35px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .action-hero h1 { font-size: clamp(43px, 5vw, 58px); }
  .action-hero-links { gap: 18px; }
  .action-hero-links .pixel-button { padding-inline: 16px; gap: 17px; font-size: 12px; }
}
@media (max-width: 860px) {
  .app-ui-ali { display: none; }
  .app-ui-preview { max-width: 230px; justify-self: end; margin-top: 3px; }
  .action-hero-layout { width: min(640px, calc(100% - 60px)); grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 42px 72px; }
  .action-hero-copy { padding: 0; }
  .action-hero-category { margin-bottom: 22px; font-size: 14px; }
  .action-hero h1 { font-size: clamp(46px, 8.2vw, 68px); }
  .action-hero h1 > span { display: inline; }
  .action-hero-description { max-width: 42ch; margin-top: 23px; font-size: 17px; }
  .action-hero-intro { margin-top: 14px; max-width: none; font-size: 13px; }
  .action-hero-links { margin-top: 25px; }
  .action-town-tagline { margin-top: 25px; }
  .action-world-link { margin-top: 0; }
  .action-hero-shade { background: linear-gradient(180deg, oklch(.2 .055 190 / .9), oklch(.2 .055 190 / .8) 39%, oklch(.2 .055 190 / .1) 75%, transparent); }
  .action-hero-scene { inset: 0; height: 100%; object-fit: cover; object-position: 56% bottom; mask-image: none; }
}
@media (max-width: 480px) {
  .app-ui-preview figcaption { font-size: 9px; }
  .action-hero-layout { width: calc(100% - 44px); gap: 25px; padding-block: 31px 200px; }
  .action-hero h1 { font-size: clamp(41px, 11vw, 51px); line-height: 1.07; letter-spacing: -.035em; }
  .action-hero-category { font-size: 13px; margin-bottom: 20px; }
  .action-hero-description { font-size: 15px; line-height: 1.75; margin-top: 21px; }
  .action-hero-intro { font-size: 12px; max-width: 33ch; }
  .action-hero-links { gap: 22px; }
  .action-hero-links .pixel-button { min-height: 47px; padding-inline: 16px; font-size: 12px; gap: 18px; }
  .action-video-link { font-size: 11px; column-gap: 5px; }
  .action-video-link > span { font-size: 23px; }
  .action-video-link > small { font-size: 9px; }
  .action-beta-note { margin-top: 14px; font-size: 10px; }
  .action-town-tagline { margin-top: 23px; font-size: 18px; }
  .action-world-link { margin-top: 0; font-size: 11px; }
}
@media (max-width: 360px) {
  .action-hero-layout { width: calc(100% - 36px); }
  .action-hero h1 { font-size: 39px; }
  .action-hero-links { gap: 16px; }
  .action-video-link { font-size: 10px; }
}