@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

/* 2026-08-23 — Live Sky Atlas refinement.
   The phone always fits the real visual viewport; the globe combines the
   photographic Earth with the original live-network canvas. */
@media (max-width: 767px) {
  .feed-phone--reference {
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(86vw, calc((100dvh - 92px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 0.46));
    max-width: 350px;
    height: auto;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    transform: translate3d(-50%, var(--feed-y, 0px), 0) scale(var(--feed-scale, 1));
    transform-origin: 50% 50%;
  }
}

.world-stage {
  background:
    radial-gradient(circle at 50% 48%, rgba(26, 102, 173, 0.22), transparent 34%),
    linear-gradient(180deg, #06142c 0%, #030817 55%, #07162d 100%);
}

.world-stage::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  opacity: 0.44;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(214, 244, 255, 0.75) 0 0.8px, transparent 1.2px),
    radial-gradient(circle at 74% 14%, rgba(214, 244, 255, 0.5) 0 0.7px, transparent 1.1px),
    radial-gradient(circle at 42% 76%, rgba(153, 220, 255, 0.45) 0 0.8px, transparent 1.2px);
  background-size: 83px 83px, 131px 131px, 173px 173px;
  -webkit-mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
  pointer-events: none;
}

.earth-wrap {
  isolation: isolate;
}

.earth-photo {
  z-index: 1;
  border-color: rgba(130, 215, 255, 0.24);
  background: #01040a;
  box-shadow:
    0 0 0 1px rgba(108, 206, 255, 0.06),
    0 0 84px rgba(51, 168, 255, 0.2),
    0 38px 110px rgba(0, 0, 0, 0.56);
}

.earth-photo::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(1, 5, 15, 0.78) 0%, transparent 32%, transparent 63%, rgba(1, 5, 15, 0.28) 100%),
    repeating-linear-gradient(0deg, transparent 0 11.8%, rgba(153, 221, 255, 0.055) 12%, transparent 12.2%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.earth-photo img {
  filter: saturate(0.72) contrast(1.14) brightness(0.64) hue-rotate(-5deg);
  transform: scale(1.06);
}

#earth-canvas {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: calc(0.55 + var(--world-network, 0) * 0.45);
  mix-blend-mode: screen;
  pointer-events: none;
}

.earth-terminator {
  position: absolute;
  z-index: 3;
  inset: 1.2%;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 74% 42%, rgba(115, 204, 255, 0.11), transparent 24%),
    linear-gradient(103deg, rgba(0, 3, 10, 0.72) 4%, rgba(0, 5, 14, 0.12) 43%, rgba(255, 167, 92, 0.07) 76%, rgba(54, 147, 255, 0.11));
  box-shadow: inset -22px -8px 52px rgba(58, 154, 255, 0.12);
  transform: rotate(calc(-7deg + var(--world-network, 0) * 5deg));
  pointer-events: none;
}

.earth-atmosphere-ring {
  position: absolute;
  z-index: 5;
  inset: -1.5%;
  border: 1px solid rgba(128, 220, 255, 0.5);
  border-radius: 50%;
  box-shadow:
    inset 0 0 30px rgba(84, 186, 255, 0.12),
    0 0 20px rgba(95, 195, 255, 0.18),
    0 0 70px rgba(49, 146, 255, 0.18);
  opacity: calc(0.35 + var(--world-pulse, 0) * 0.65);
  pointer-events: none;
}

.earth-orbit {
  z-index: 6;
  border-color: rgba(127, 216, 255, calc(0.15 + var(--world-network, 0) * 0.28));
  box-shadow: 0 0 30px rgba(81, 191, 255, calc(var(--world-network, 0) * 0.18));
}

.earth-orbit::before {
  position: absolute;
  right: 8%;
  bottom: 7%;
  width: 4px;
  height: 4px;
  content: "";
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(130, 228, 255, 0.95);
}

.earth-label {
  z-index: 8;
  border-color: rgba(121, 220, 255, 0.42);
  background: rgba(2, 13, 30, 0.82);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.34), 0 0 28px rgba(77, 198, 255, 0.14);
}

.world-card {
  border: 1px solid rgba(148, 220, 255, 0.2);
  background: rgba(4, 15, 32, 0.8);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 34px var(--portal-glow, rgba(91, 190, 255, 0.16));
}

.world-card::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  width: clamp(42px, 7vw, 108px);
  height: 1px;
  content: "";
  opacity: calc(var(--world-network, 0) * 0.72);
  background: linear-gradient(90deg, rgba(100, 211, 255, 0.68), transparent);
  box-shadow: 0 0 10px rgba(93, 205, 255, 0.48);
  transform-origin: 0 50%;
  pointer-events: none;
}

.world-card:nth-of-type(odd)::after {
  right: calc(100% + 2px);
  transform: rotate(180deg);
}

.world-card:nth-of-type(even)::after {
  left: calc(100% + 2px);
}

.world-card__visual {
  border-radius: inherit;
}

@media (max-width: 767px) {
  .world-copy {
    top: max(7.5vh, 72px);
  }

  .world-copy h2 {
    font-size: clamp(29px, 8.7vw, 39px);
    line-height: 1.34;
    text-shadow: 0 4px 26px rgba(0, 3, 15, 0.95);
  }

  .world-copy__lead {
    max-width: 310px;
    font-size: 9.5px;
    line-height: 1.8;
  }

  .world-live {
    top: 74px;
    right: 14px;
    left: auto;
  }

  .earth-wrap {
    top: 27%;
    width: min(78vw, 322px);
    height: min(78vw, 322px);
  }

  .world-card {
    border-radius: 14px;
  }

  .world-card::after {
    width: 42px;
  }

  .world-stage.is-world-complete .earth-wrap {
    top: 25%;
    width: min(72vw, 296px);
    height: min(72vw, 296px);
  }

  .world-stage.is-world-complete .world-card {
    --portal-width: min(20vw, 78px);
  }

  .world-stage.is-world-complete .world-note {
    bottom: max(2.2vh, 14px);
  }
}

@media (max-width: 420px) and (max-height: 700px) {
  .world-copy h2 {
    font-size: 27px;
  }

  .world-copy__lead {
    display: none;
  }

  .earth-wrap {
    top: 25%;
    width: min(66vw, 260px);
    height: min(66vw, 260px);
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 767px) {
    .feed-phone--reference {
      width: min(72vw, 300px);
    }
  }
}

@font-face {
  font-family: "SkyShare Story";
  src: url("../fonts/skyshare-serif-jp-subset.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #f8fbff;
  --muted: rgba(239, 246, 255, 0.68);
  --navy: #071225;
  --night: #040914;
  --line: rgba(255, 255, 255, 0.16);
  --blue: #6bbcff;
  --cyan: #55d6dc;
  --purple: #9a7ced;
  --orange: #f3a45d;
  --gold: #f4ce75;
  --font-latin: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;
  --font-story: "SkyShare Story", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--night);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-jp);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img,
picture,
svg,
canvas {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #0b2545;
}

::selection {
  background: rgba(107, 188, 255, 0.34);
  color: #fff;
}

.skip-link {
  position: fixed;
  z-index: 999;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-180%);
  border-radius: 999px;
  background: #fff;
  color: #071225;
  font-size: 13px;
  font-weight: 700;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Remain off-screen even when reduced-motion rules neutralize transforms. */
.skip-link:not(:focus) {
  clip-path: inset(50%);
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reading-progress {
  position: fixed;
  z-index: 120;
  inset: 0 0 auto;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #62baf3, #7bd0c3 28%, #f0d06f 54%, #efa050 75%, #e87870);
  will-change: transform;
}

.journey-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  padding: 14px clamp(24px, 4vw, 72px);
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(3, 8, 18, 0.78) 0%, rgba(3, 8, 18, 0.58) 70%, rgba(3, 8, 18, 0) 100%);
  opacity: 1;
  transform: translateY(0);
  transition: background-color 500ms ease, border-color 500ms ease, min-height 500ms ease, backdrop-filter 500ms ease, opacity 420ms ease, transform 520ms var(--ease-cinema);
}

body.is-finale-visible .journey-header {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

body.is-finale-visible .reading-progress {
  opacity: 0;
  transition: opacity 320ms ease;
}

body.is-scrolled .journey-header {
  min-height: 68px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(5, 10, 22, 0.58);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-latin);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand img {
  border-radius: 9px;
  box-shadow: 0 6px 22px rgba(3, 21, 45, 0.18);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 38px);
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.desktop-nav a:not(.nav-cta) {
  color: rgba(255, 255, 255, 0.96);
  transition: color 180ms ease;
}

.desktop-nav a:hover {
  color: #fff;
}

.nav-cta {
  padding: 10px 17px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.menu-button,
.mobile-menu {
  display: none;
}

.scene,
.sticky-stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.opening {
  height: 100svh;
  min-height: 680px;
  isolation: isolate;
  background: #92bad5;
}

.opening__photo,
.opening__photo img,
.finale__photo,
.finale__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.opening__photo img,
.finale__photo img {
  object-fit: cover;
}

.opening__photo img {
  transform: translate3d(0, var(--opening-shift, 0px), 0) scale(var(--opening-scale, 1.025));
  transform-origin: 50% 62%;
  will-change: transform;
}

.opening__veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 20, 39, 0.68) 0%, rgba(6, 20, 39, 0.28) 42%, transparent 70%),
    linear-gradient(0deg, rgba(5, 13, 28, 0.46) 0%, transparent 42%),
    linear-gradient(180deg, rgba(7, 18, 36, 0.18), transparent 28%);
}

.opening__copy {
  position: absolute;
  z-index: 2;
  top: 26%;
  left: clamp(28px, 9vw, 144px);
  max-width: 720px;
  transform: translate3d(0, var(--opening-copy-shift, 0px), 0);
  opacity: var(--opening-copy-opacity, 1);
  will-change: opacity, transform;
}

.scene-label {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.scene-label span {
  color: #fff;
}

.opening h1,
.story-copy h2,
.delivery-copy h2,
.world-copy h2,
.ranking-intro h2,
.final-lockup h2 {
  margin: 0;
  font-family: var(--font-story);
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  font-synthesis: none;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.42;
  text-wrap: balance;
}

.opening h1 {
  font-size: clamp(48px, 6.1vw, 92px);
  line-height: 1.34;
  text-shadow: 0 8px 38px rgba(6, 20, 39, 0.2);
}

.opening__identity {
  display: block;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--font-jp);
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 500;
  letter-spacing: 0.11em;
  line-height: 1.7;
  text-shadow: none;
}

.opening h1 em {
  font-style: normal;
}

.opening__copy > p:last-child {
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.9;
}

.opening__time {
  position: absolute;
  z-index: 2;
  right: clamp(28px, 5vw, 80px);
  bottom: clamp(34px, 6vh, 74px);
  margin: 0;
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.opening__time span {
  margin-left: 5px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
}

.sample-mark {
  position: absolute;
  z-index: 12;
  right: clamp(24px, 4vw, 64px);
  bottom: 18px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(3, 8, 18, 0.72);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-latin);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.2em;
  pointer-events: none;
}

.sample-mark--dark {
  background: rgba(255, 255, 255, 0.84);
  color: #243e58;
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: 32px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-latin);
  font-size: 8px;
  letter-spacing: 0.28em;
}

.scroll-cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.26);
}

.scroll-cue i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: #fff;
  transform: translateY(-100%);
  animation: scroll-line 2.2s var(--ease-cinema) infinite;
}

@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  50%, 100% { transform: translateY(100%); }
}

.mobile-only {
  display: none;
}

.story-scroll {
  position: relative;
  background: var(--night);
}

.story-scroll--capture {
  height: 360vh;
}

.story-scroll--delivery {
  height: 300vh;
}

.story-scroll--world {
  height: 330vh;
}

.story-scroll--ranking {
  height: 430vh;
}

.sticky-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
}

.capture-stage {
  --capture-copy: 1;
  --post-copy: 0;
  --camera-opacity: 1;
  --post-opacity: 0;
  --post-ready: 0;
  --sunset: 0;
  --birth: 0;
  background: #8dc8ed;
  color: #0b203c;
}

.capture-stage__sky,
.capture-stage__sky picture,
.capture-stage__sky img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.capture-stage__sky img {
  object-fit: cover;
  object-position: 50% 34%;
  filter: saturate(0.92) brightness(1.04);
  transform: scale(var(--capture-scale, 1.06));
  will-change: transform;
}

.capture-stage__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(242, 250, 255, 0.92) 0%, rgba(242, 250, 255, 0.55) 38%, rgba(220, 239, 250, 0.08) 68%),
    linear-gradient(180deg, rgba(249, 253, 255, 0.2), rgba(246, 211, 195, 0.3));
}

.capture-stage__wash::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(100deg, rgba(47, 36, 91, 0.74), rgba(194, 102, 139, 0.42) 52%, rgba(247, 157, 91, 0.58)),
    linear-gradient(0deg, #eea05f, transparent 60%);
  opacity: var(--sunset);
}

.story-copy {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: clamp(30px, 8vw, 130px);
  width: min(40vw, 600px);
  transform: translateY(-50%);
}

.story-copy .scene-label {
  color: #314a63;
}

.story-copy .scene-label span {
  color: #0b203c;
}

.story-copy h2 {
  font-size: clamp(40px, 5.1vw, 76px);
}

.story-copy--capture {
  opacity: var(--capture-copy);
  transform: translate3d(0, var(--capture-copy-y, -50%), 0);
}

.story-copy--post {
  color: #fff;
  opacity: var(--post-copy);
  transform: translate3d(0, var(--post-copy-y, -44%), 0);
  text-shadow: 0 8px 34px rgba(38, 24, 62, 0.24);
}

.story-copy--post .scene-label,
.story-copy--post .scene-label span {
  color: rgba(255, 255, 255, 0.8);
}

.phone {
  position: absolute;
  z-index: 8;
  right: clamp(40px, 11vw, 180px);
  top: 50%;
  width: clamp(270px, 24vw, 370px);
  aspect-ratio: 9 / 19.3;
  padding: 8px;
  transform: translate3d(0, calc(-50% + var(--phone-y, 42px)), 0) scale(var(--phone-scale, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 52px;
  background: #05070c;
  box-shadow: 0 40px 90px rgba(11, 29, 48, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: var(--phone-opacity, 0);
  will-change: transform, opacity;
}

.phone__sensor {
  position: absolute;
  z-index: 20;
  top: 18px;
  left: 50%;
  width: 29%;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #020306;
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 44px;
  background: #05070c;
  container-type: inline-size;
}

/* Keep the camera chapter as one complete 414 x 900 app screen.
   Explicit insets prevent a stale/partial responsive rule from collapsing
   the phone to its bottom navigation strip. */
.phone--capture {
  aspect-ratio: 414 / 900;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}

.phone--capture .phone__screen {
  position: absolute;
  inset: 8px;
  width: auto;
  height: auto;
  min-height: 0;
}

.phone-status,
.feed-phone__status {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  color: #fff;
  font-family: var(--font-latin);
  font-size: 10px;
}

.phone-status span,
.feed-phone__status span {
  font-size: 7px;
  letter-spacing: 0.1em;
}

/* The capture chapter mirrors the real app screen from the supplied reference.
   The photograph stays live HTML so the story image can change without
   redrawing or distorting the Japanese interface. */
.capture-real-screen {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: #08090e;
  transition: opacity 260ms linear, transform 600ms var(--ease-cinema);
  will-change: opacity, transform;
}

.capture-real-screen--camera {
  opacity: var(--camera-opacity);
}

.capture-real-screen--preview {
  opacity: var(--post-opacity);
  transform: translate3d(0, var(--post-screen-y, 24px), 0);
}

.capture-real-photo,
.capture-real-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.capture-real-photo img {
  object-fit: cover;
  object-position: 50% 50%;
  filter: blur(1.15cqw) saturate(0.88) brightness(0.76);
  transform: scale(1.1);
}

.capture-real-screen::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(40, 21, 12, 0.27), rgba(241, 176, 145, 0.1)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 23%, transparent 70%, rgba(0, 0, 0, 0.32));
  pointer-events: none;
}

.ios-status {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 14.5cqw;
  padding: 0 8.2cqw;
  color: #fff;
  font-family: var(--font-latin);
  font-size: 4.05cqw;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.ios-status b {
  position: relative;
  z-index: 2;
  font: inherit;
}

.ios-island {
  position: absolute;
  top: 1.25cqw;
  left: 50%;
  width: 31.5cqw;
  height: 9.1cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #000;
}

.ios-island i {
  position: absolute;
  top: 50%;
  right: 31%;
  width: 1.45cqw;
  height: 1.45cqw;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #1ecf68;
  box-shadow: 0 0 0.7cqw rgba(30, 207, 104, 0.28);
}

.ios-indicators {
  display: flex;
  align-items: center;
  gap: 1.7cqw;
  height: 100%;
}

.ios-signal {
  display: flex;
  align-items: flex-end;
  gap: 0.55cqw;
  height: 4.5cqw;
}

.ios-signal span {
  display: block;
  width: 1.05cqw;
  border-radius: 0.5cqw;
  background: #fff;
}

.ios-signal span:nth-child(1) { height: 1.65cqw; }
.ios-signal span:nth-child(2) { height: 2.55cqw; }
.ios-signal span:nth-child(3) { height: 3.55cqw; }
.ios-signal span:nth-child(4) { height: 4.45cqw; }

.ios-wifi {
  position: relative;
  width: 6.4cqw;
  height: 4.8cqw;
  overflow: hidden;
}

.ios-wifi::before,
.ios-wifi::after {
  position: absolute;
  left: 50%;
  content: "";
  transform: translateX(-50%);
  border: 0.85cqw solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
}

.ios-wifi::before {
  top: 0.4cqw;
  width: 6cqw;
  height: 5cqw;
}

.ios-wifi::after {
  top: 2.45cqw;
  width: 2.4cqw;
  height: 2.1cqw;
}

.ios-battery {
  display: grid;
  min-width: 7.1cqw;
  height: 4.3cqw;
  padding: 0 1.1cqw;
  place-items: center;
  border-radius: 1.4cqw;
  background: rgba(255, 255, 255, 0.96);
  color: rgba(36, 32, 31, 0.72);
  font-size: 2.85cqw;
  font-style: normal;
  font-weight: 700;
}

.ios-battery::after {
  position: absolute;
  right: 6.9cqw;
  width: 0.75cqw;
  height: 2cqw;
  content: "";
  border-radius: 0 0.6cqw 0.6cqw 0;
  background: rgba(255, 255, 255, 0.55);
}

.camera-flash-off,
.camera-gallery {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(13, 10, 16, 0.72);
  color: rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.camera-flash-off {
  top: 14.2cqw;
  right: 3.9cqw;
  width: 12.4cqw;
  height: 12.4cqw;
}

.camera-gallery {
  bottom: 32.8cqw;
  left: 6.8cqw;
  width: 14.2cqw;
  height: 14.2cqw;
}

.camera-flash-off svg {
  width: 5.4cqw;
  height: 5.4cqw;
  fill: rgba(255, 255, 255, 0.72);
  stroke: #19161b;
  stroke-linecap: round;
  stroke-width: 2.5;
}

.camera-gallery svg {
  width: 6.2cqw;
  height: 6.2cqw;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.camera-shutter {
  position: absolute;
  z-index: 5;
  bottom: 30.9cqw;
  left: 50%;
  display: grid;
  width: 18.5cqw;
  height: 18.5cqw;
  transform: translateX(-50%) scale(var(--shutter-scale, 1));
  place-items: center;
  border: 1.45cqw solid rgba(246, 247, 246, 0.54);
  border-radius: 50%;
  background: rgba(33, 39, 30, 0.32);
  box-shadow: 0 0 5cqw rgba(236, 245, 218, 0.2);
}

.camera-shutter i {
  width: 14.2cqw;
  height: 14.2cqw;
  border-radius: 50%;
  background: #f5f5f4;
}

.camera-tabs {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 29.5cqw;
  padding: 3.4cqw 2.2cqw 5.8cqw;
  background: rgba(4, 4, 13, 0.96);
}

.camera-tabs > span {
  position: relative;
  display: grid;
  grid-template-rows: 8cqw 4cqw;
  align-items: center;
  justify-items: center;
  color: rgba(201, 200, 208, 0.34);
}

.camera-tabs > span::before {
  position: absolute;
  z-index: -1;
  top: -1.9cqw;
  width: 13cqw;
  height: 13cqw;
  content: "";
  border: 0.45cqw solid rgba(108, 214, 244, 0.54);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 182, 214, 0.54), rgba(79, 70, 152, 0.7));
  box-shadow: 0 0 4cqw rgba(88, 193, 229, 0.2);
  opacity: 0;
}

.camera-tabs svg {
  width: 6.1cqw;
  height: 6.1cqw;
  fill: currentColor;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.camera-tabs small {
  font-size: 2.75cqw;
  line-height: 1;
  white-space: nowrap;
}

.camera-tabs > span.is-active {
  color: #ffd15f;
}

.camera-tabs > span.is-active::before {
  opacity: 1;
}

.ios-home-indicator {
  position: absolute;
  z-index: 12;
  bottom: 2.2cqw;
  left: 50%;
  width: 36cqw;
  height: 1.25cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #fff;
}

.capture-real-screen--preview::before {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 75cqw;
  content: "";
  background: linear-gradient(0deg, rgba(8, 4, 4, 0.92), rgba(20, 9, 8, 0.5) 54%, transparent);
}

.preview-close {
  position: absolute;
  z-index: 6;
  top: 17.2cqw;
  left: 6.2cqw;
  width: 5.8cqw;
  height: 5.8cqw;
}

.preview-close::before,
.preview-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7.2cqw;
  height: 0.7cqw;
  content: "";
  border-radius: 99px;
  background: #fff;
}

.preview-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.preview-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.preview-bottom {
  position: absolute;
  z-index: 6;
  right: 5.8cqw;
  bottom: 12.2cqw;
  left: 5.8cqw;
}

.safety-confirmation {
  display: grid;
  grid-template-columns: 4.5cqw 1fr;
  align-items: center;
  gap: 3.2cqw;
  min-height: 15.6cqw;
  padding: 2.8cqw 3.8cqw;
  border: 0.28cqw solid rgba(255, 255, 255, 0.2);
  border-radius: 3.6cqw;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.safety-confirmation p {
  margin: 0;
  font-size: 2.8cqw;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.safety-checkbox {
  position: relative;
  display: grid;
  width: 4.4cqw;
  height: 4.4cqw;
  place-items: center;
  overflow: hidden;
  border: 0.3cqw solid rgba(255, 255, 255, 0.48);
  border-radius: 0.65cqw;
}

.safety-checkbox::before {
  position: absolute;
  inset: -1px;
  content: "";
  background: #12c7df;
  opacity: var(--post-ready);
}

.safety-checkbox svg {
  position: relative;
  z-index: 1;
  width: 4.3cqw;
  height: 4.3cqw;
  fill: none;
  stroke: #071216;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 3;
  opacity: var(--post-ready);
}

.preview-actions {
  display: grid;
  grid-template-columns: 31% 1fr;
  gap: 4cqw;
  margin-top: 4cqw;
}

.post-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  height: 13cqw;
  overflow: hidden;
  border-radius: 99px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 3.8cqw;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.post-action svg {
  position: relative;
  z-index: 2;
  width: 4.5cqw;
  height: 4.5cqw;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.post-action--retake {
  border: 0.35cqw solid rgba(255, 255, 255, 0.46);
  background: rgba(7, 4, 6, 0.12);
}

.post-action--submit {
  background: linear-gradient(90deg, rgba(18, 197, 220, 0.31), rgba(141, 117, 219, 0.31));
  color: rgba(255, 255, 255, calc(0.34 + var(--post-ready) * 0.66));
}

.post-action--submit i {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, #12c7dc, #8d75db);
  box-shadow: 0 2.8cqw 7cqw rgba(34, 198, 215, 0.28);
  opacity: var(--post-ready);
}

.post-action--submit svg {
  fill: currentColor;
  stroke: none;
}

.post-action--submit svg,
.post-action--submit b {
  position: relative;
  z-index: 2;
}

.post-action--submit b {
  font: inherit;
}

.camera-view,
.post-view {
  position: absolute;
  inset: 0;
  transition: opacity 260ms linear, transform 600ms var(--ease-cinema);
}

.camera-view {
  background: #05070c;
  opacity: var(--camera-opacity);
}

.camera-view picture,
.camera-view img {
  width: 100%;
  height: 100%;
}

.camera-view img {
  object-fit: cover;
  object-position: 53% center;
}

.camera-view::after {
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  content: "";
  background: linear-gradient(0deg, rgba(2, 4, 9, 0.96), rgba(2, 4, 9, 0));
}

.camera-view__grid {
  position: absolute;
  z-index: 2;
  inset: 50px 0 24%;
  background:
    linear-gradient(90deg, transparent 33.1%, rgba(255, 255, 255, 0.2) 33.3%, transparent 33.5%, transparent 66.3%, rgba(255, 255, 255, 0.2) 66.5%, transparent 66.7%),
    linear-gradient(0deg, transparent 33.1%, rgba(255, 255, 255, 0.2) 33.3%, transparent 33.5%, transparent 66.3%, rgba(255, 255, 255, 0.2) 66.5%, transparent 66.7%);
}

.camera-view__top {
  position: absolute;
  z-index: 3;
  top: 48px;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;
  color: #fff;
  font-family: var(--font-latin);
}

.camera-view__top span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(4, 7, 13, 0.32);
  font-size: 11px;
}

.focus-ring {
  position: absolute;
  z-index: 4;
  top: 44%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%) scale(var(--focus-scale, 1.35));
  border: 1px solid rgba(255, 255, 255, var(--focus-opacity, 0));
  border-radius: 18px;
  opacity: var(--focus-opacity, 0);
}

.focus-ring i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
}

.camera-view__bottom {
  position: absolute;
  z-index: 4;
  inset: auto 0 28px;
  display: grid;
  grid-template-columns: 1fr 78px 1fr;
  align-items: center;
  color: rgba(255, 255, 255, 0.66);
  font-size: 8px;
  text-align: center;
}

.camera-view__bottom i {
  display: block;
  width: 68px;
  height: 68px;
  margin: auto;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px #05070c, inset 0 0 0 32px #fff;
  transform: scale(var(--shutter-scale, 1));
}

.post-view {
  display: flex;
  flex-direction: column;
  padding: 48px 17px 22px;
  background: linear-gradient(165deg, #213c70, #674480 55%, #dd8659);
  opacity: var(--post-opacity);
  transform: translate3d(0, var(--post-screen-y, 24px), 0);
}

.post-view__head {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  min-height: 52px;
  color: #fff;
  font-size: 11px;
  text-align: center;
}

.post-view__head b {
  font-size: 15px;
}

.post-view__photo {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(16, 15, 37, 0.22);
}

.post-view__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-view__meta {
  display: flex;
  justify-content: space-between;
  margin: 13px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 9px;
}

.post-view__meta span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(10, 15, 30, 0.18);
}

.post-view button {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #182a52;
  font-size: 11px;
  font-weight: 700;
}

.shutter-flash {
  position: absolute;
  z-index: 30;
  inset: 0;
  background: #fff;
  opacity: var(--flash-opacity, 0);
  pointer-events: none;
}

.birth-signal {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 12%;
  width: 44%;
  height: 20px;
  opacity: var(--birth);
}

.birth-signal span {
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(var(--birth));
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, #5ec9ee 26%, #9a7ced 56%, #f3a45d);
  box-shadow: 0 0 7px rgba(103, 196, 239, 0.42);
}

.birth-signal i {
  position: absolute;
  top: 50%;
  left: var(--birth-left, 100%);
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #8cd8f3;
}

.delivery-stage {
  --path: 0;
  --delivery-first: 1;
  --delivery-key: 0;
  --feed-in: 0;
  background: #0b1b3c;
  color: #fff;
}

.delivery-stage__photo,
.delivery-stage__photo img,
.delivery-stage__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.delivery-stage__photo img {
  object-fit: cover;
  filter: saturate(0.76) brightness(0.68);
  transform: scale(var(--delivery-scale, 1.08)) translate3d(var(--delivery-x, 0px), 0, 0);
  will-change: transform;
}

.delivery-stage__veil {
  background:
    radial-gradient(circle at 72% 46%, rgba(82, 102, 173, 0.08), transparent 34%),
    linear-gradient(90deg, rgba(4, 13, 30, 0.9) 0%, rgba(8, 19, 43, 0.6) 48%, rgba(7, 15, 31, 0.76) 100%),
    linear-gradient(180deg, rgba(49, 38, 91, 0.12), #07152e 94%);
}

.signal-path {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
}

.signal-path path {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--path));
  stroke-linecap: round;
}

.signal-path__glow {
  stroke: url(#signal-gradient);
  stroke-width: 8;
  opacity: 0.13;
  filter: url(#signal-soft);
}

.signal-path__line {
  stroke: url(#signal-gradient);
  stroke-width: 1.4;
  opacity: 0.92;
}

.delivery-copy {
  position: absolute;
  z-index: 6;
  left: clamp(30px, 9vw, 145px);
  top: 48%;
  width: min(48vw, 680px);
  transform: translateY(-50%);
}

.delivery-copy h2 {
  font-size: clamp(48px, 6.2vw, 94px);
}

.delivery-copy--first {
  opacity: var(--delivery-first);
}

.delivery-copy--key {
  opacity: var(--delivery-key);
}

.delivery-copy--key p {
  margin: 0 0 11px;
  color: rgba(255, 255, 255, 0.56);
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: 0.05em;
}

.delivery-copy--key h2 {
  font-size: clamp(38px, 4.8vw, 72px);
}

.feed-phone {
  position: absolute;
  z-index: 7;
  top: 50%;
  right: clamp(34px, 9vw, 145px);
  width: clamp(280px, 25vw, 380px);
  aspect-ratio: 9 / 18.8;
  overflow: hidden;
  transform: translate3d(0, calc(-46% + var(--feed-y, 34px)), 0) scale(var(--feed-scale, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 48px;
  background: linear-gradient(180deg, #071020, #162f5d 54%, #071020);
  box-shadow: 0 42px 100px rgba(0, 0, 0, 0.38), inset 0 0 0 7px #04070f;
  opacity: var(--feed-in);
  will-change: opacity, transform;
}

.feed-phone::before {
  position: absolute;
  z-index: 9;
  top: 15px;
  left: 50%;
  width: 29%;
  height: 23px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #020306;
  content: "";
}

.feed-phone__status {
  top: 7px;
  padding: 0 25px;
}

.feed-phone__brand {
  position: relative;
  z-index: 2;
  padding: 78px 28px 24px;
}

.feed-phone__brand b,
.feed-phone__brand span {
  display: block;
}

.feed-phone__brand b {
  font-family: var(--font-latin);
  font-size: 27px;
  letter-spacing: -0.03em;
}

.feed-phone__brand span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
}

.feed-card {
  position: relative;
  margin: 0 20px;
  overflow: hidden;
  border-radius: 28px;
  background: #11131c;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.25);
}

.feed-card > picture,
.feed-card > picture img {
  width: 100%;
  height: 270px;
}

.feed-card > picture img {
  object-fit: cover;
}

.feed-card__phase,
.feed-card__place {
  position: absolute;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(6, 10, 19, 0.64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 8px;
}

.feed-card__phase {
  top: 12px;
  right: 12px;
}

.feed-card__place {
  top: 230px;
  left: 12px;
}

.feed-card__person {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 15px 12px;
}

.feed-card__person i,
.today-winner footer i {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #6bbcff, #9a7ced);
  font-size: 10px;
  font-style: normal;
}

.feed-card__person span,
.today-winner footer span {
  display: grid;
  gap: 2px;
}

.feed-card__person b {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: 500;
}

.feed-card__person small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 8px;
}

.reactions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 0;
  padding: 0 12px 16px;
  list-style: none;
}

.reactions li {
  padding: 8px 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #f4ce75;
  font-family: var(--font-latin);
  font-size: 10px;
  text-align: center;
}

.reactions b {
  margin-left: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
}

.feed-phone .sample-mark {
  right: 25px;
  bottom: 14px;
  font-size: 6px;
}

.world-stage {
  --earth-dot-color: #dcecff;
  --earth-route-color: #78c9ff;
  --earth-marker-color: #f5fbff;
  --earth-glow-color: #4da3ff;
  overflow: hidden;
  perspective: 1400px;
  background: #030916;
  color: #fff;
}

.world-stage__atmosphere {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse at 50% 57%, rgba(27, 113, 178, 0.32), transparent 33%),
    radial-gradient(ellipse at 12% 38%, rgba(22, 179, 199, 0.17), transparent 25%),
    radial-gradient(ellipse at 88% 28%, rgba(120, 86, 224, 0.18), transparent 26%),
    conic-gradient(from 210deg at 50% 58%, rgba(16, 224, 211, 0.04), rgba(67, 92, 255, 0.13), rgba(253, 133, 188, 0.07), rgba(16, 224, 211, 0.04)),
    linear-gradient(180deg, #061125 0%, #020713 53%, #07182f 100%);
  transform: scale(1.08) translate3d(var(--world-atmosphere-x, 0px), var(--world-atmosphere-y, 0px), 0);
  will-change: transform;
}

.world-stage__atmosphere::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.world-stage__grid {
  position: absolute;
  z-index: 1;
  inset: 14% 14% 12%;
  border-radius: 50%;
  opacity: calc(var(--earth-opacity, 0) * 0.24);
  background:
    repeating-radial-gradient(circle at 50% 55%, transparent 0 72px, rgba(137, 211, 255, 0.14) 73px 74px),
    linear-gradient(90deg, transparent 49.92%, rgba(124, 202, 255, 0.18) 50%, transparent 50.08%);
  -webkit-mask-image: radial-gradient(ellipse, #000 0 48%, transparent 74%);
  mask-image: radial-gradient(ellipse, #000 0 48%, transparent 74%);
  transform: rotate(-8deg) scale(var(--earth-scale, 0.88));
  will-change: opacity, transform;
}

.world-copy {
  position: absolute;
  z-index: 8;
  top: 8vh;
  left: 50%;
  width: min(880px, 84vw);
  opacity: var(--world-copy-opacity, 1);
  transform: translateX(-50%) translateY(var(--world-copy-y, 0px));
  text-align: center;
  will-change: opacity, transform;
}

.world-copy h2 {
  margin-bottom: 18px;
  font-family: var(--font-jp);
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 1.46;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.world-copy h2 em {
  color: transparent;
  font-style: normal;
  background: linear-gradient(100deg, #fff 4%, #9ee7ff 45%, #e1c3ff 95%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(98, 203, 255, 0.2));
}

.world-copy__lead {
  margin: 0 auto;
  color: rgba(224, 239, 255, 0.65);
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.95;
  letter-spacing: 0.08em;
}

.world-live {
  position: absolute;
  z-index: 9;
  top: 88px;
  left: 3.5vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(134, 211, 255, 0.18);
  border-radius: 999px;
  background: rgba(3, 13, 30, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 35px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: var(--world-live-opacity, 0);
  transform: translateY(var(--world-live-y, 8px));
}

.world-live__status,
.world-live__copy,
.world-live b {
  font-family: var(--font-latin);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.world-live__status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8af4de;
}

.world-live__status i,
.earth-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #48e6c4;
  box-shadow: 0 0 0 4px rgba(72, 230, 196, 0.1), 0 0 14px rgba(72, 230, 196, 0.72);
  animation: world-live-pulse 1.8s ease-in-out infinite;
}

.world-live__copy {
  color: rgba(215, 236, 255, 0.45);
}

.world-live b {
  color: rgba(240, 250, 255, 0.86);
}

@keyframes world-live-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.1); }
}

.earth-wrap {
  position: absolute;
  z-index: 2;
  top: 17%;
  left: 50%;
  width: min(78vw, 960px);
  height: min(78vw, 960px);
  transform: translate3d(calc(-50% + var(--earth-x, 0px)), var(--earth-y, 0px), 0) scale(var(--earth-scale, 0.88));
  opacity: var(--earth-opacity, 0);
  will-change: opacity, transform;
}

#earth-canvas {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.earth-orbit {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 83%;
  height: 31%;
  border: 1px solid rgba(126, 207, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-17deg);
  box-shadow: 0 0 42px rgba(77, 163, 255, 0.05);
}

.earth-orbit::after {
  position: absolute;
  top: 50%;
  left: -3px;
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: #c9f5ff;
  box-shadow: 0 0 18px rgba(127, 224, 255, 0.88);
}

.earth-orbit--two {
  width: 67%;
  height: 43%;
  opacity: 0.46;
  transform: translate(-50%, -50%) rotate(32deg);
}

.earth-label {
  position: absolute;
  bottom: 20%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(137, 204, 246, 0.18);
  border-radius: 999px;
  background: rgba(7, 17, 35, 0.58);
  color: rgba(226, 244, 255, 0.67);
  font-size: 9px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.world-card {
  position: absolute;
  z-index: 6;
  width: var(--portal-width, clamp(166px, 14.5vw, 226px));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: rgba(5, 14, 29, 0.18);
  box-shadow:
    0 30px 76px rgba(0, 0, 0, 0.44),
    0 0 46px var(--portal-glow, rgba(100, 190, 255, 0.18));
  isolation: isolate;
  opacity: var(--card-opacity, 0);
  transform: translate3d(var(--card-x, 0), var(--card-y, 20px), var(--card-z, 0px)) scale(var(--card-scale, 0.92)) rotateX(var(--card-tilt-x, 0deg)) rotateY(var(--card-tilt-y, 0deg)) rotate(var(--card-rotate, 0deg));
  will-change: opacity, transform, filter;
}

.world-card::before {
  position: absolute;
  z-index: -1;
  inset: 10%;
  content: "";
  border-radius: inherit;
  background: var(--portal-glow, rgba(100, 190, 255, 0.18));
  filter: blur(30px);
  opacity: 0.72;
}

.world-card__visual {
  position: relative;
  height: auto;
  aspect-ratio: var(--portal-ratio, 4 / 5);
  overflow: hidden;
  border: 1px solid rgba(225, 244, 255, 0.3);
  border-radius: inherit;
  background: #0b1830;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(92, 189, 255, 0.1);
}

.world-card__visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 64%, rgba(2, 8, 19, 0.12)),
    linear-gradient(120deg, rgba(130, 221, 255, 0.05), transparent 38%);
  pointer-events: none;
}

.world-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--world-image-scale, 1.06));
  transition: transform 700ms var(--ease-out);
}

.world-card--one {
  top: 29%;
  left: 3.5%;
  --card-rotate: -3.5deg;
  --portal-glow: rgba(255, 156, 107, 0.2);
}

.world-card--two {
  top: 57%;
  left: 8%;
  --card-rotate: 2.5deg;
  --portal-width: clamp(178px, 15.5vw, 238px);
  --portal-ratio: 5 / 4;
  --portal-glow: rgba(255, 185, 91, 0.22);
}

.world-card--three {
  top: 28%;
  right: 3.5%;
  --card-rotate: 3.5deg;
  --portal-glow: rgba(189, 219, 255, 0.2);
}

.world-card--four {
  top: 57%;
  right: 8%;
  --card-rotate: -2.5deg;
  --portal-width: clamp(178px, 15.5vw, 238px);
  --portal-ratio: 5 / 4;
  --portal-glow: rgba(108, 210, 255, 0.22);
}

.world-card--five {
  bottom: 15%;
  left: 27%;
  --card-rotate: -1.5deg;
  --portal-width: clamp(150px, 12vw, 188px);
  --portal-ratio: 1 / 1;
  --portal-glow: rgba(163, 135, 255, 0.2);
}

.world-card--six {
  right: 27%;
  bottom: 15%;
  --card-rotate: 1.5deg;
  --portal-width: clamp(150px, 12vw, 188px);
  --portal-ratio: 1 / 1;
  --portal-glow: rgba(255, 163, 89, 0.2);
}

.world-clocks {
  position: absolute;
  z-index: 8;
  bottom: 3.2vh;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(680px, 70vw);
  padding: 10px 7px;
  transform: translateX(-50%) translateY(var(--world-clocks-y, 12px));
  border: 1px solid rgba(157, 217, 255, 0.14);
  border-radius: 18px;
  background: rgba(4, 13, 29, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: var(--world-clocks-opacity, 0);
}

.world-clocks > span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
  padding: 0 13px;
  border-right: 1px solid rgba(155, 216, 255, 0.1);
}

.world-clocks > span:last-child { border-right: 0; }

.world-clocks small,
.world-clocks b,
.world-clocks em {
  font-family: var(--font-latin);
  font-style: normal;
}

.world-clocks small {
  grid-column: 1 / -1;
  color: rgba(188, 221, 246, 0.56);
  font-size: 7px;
  letter-spacing: 0.16em;
}

.world-clocks b {
  color: rgba(245, 251, 255, 0.86);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.world-clocks em {
  align-self: end;
  color: rgba(104, 213, 255, 0.7);
  font-size: 6px;
  letter-spacing: 0.12em;
}

.world-note {
  position: absolute;
  z-index: 8;
  bottom: 12.8vh;
  left: 50%;
  display: grid;
  gap: 7px;
  width: min(620px, 76vw);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  opacity: var(--world-note, 0);
}

.world-note strong {
  color: rgba(246, 251, 255, 0.92);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-shadow: 0 8px 32px rgba(48, 169, 255, 0.18);
}

.ranking-stage {
  background: #050713;
  color: #fff;
}

.ranking-stage::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 45%, rgba(92, 76, 150, 0.2), transparent 36%),
    linear-gradient(145deg, #08172e, #1b2048 49%, #412a47 100%);
  opacity: 0.95;
}

.ranking-intro {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  width: min(820px, 86vw);
  transform: translate(-50%, -50%);
  opacity: var(--ranking-intro, 1);
  text-align: center;
}

.ranking-intro h2 {
  font-family: var(--font-jp);
  font-size: clamp(40px, 5.2vw, 78px);
  line-height: 1.46;
  letter-spacing: -0.02em;
}

.ranking-intro > p:last-child {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 0.05em;
  line-height: 1.9;
}

.rank-reveal {
  position: absolute;
  z-index: 5;
  inset: 7vh 5vw;
  overflow: hidden;
  border-radius: 32px;
  background: #061020;
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: scale(1.035);
  visibility: hidden;
  transition: opacity 320ms linear, transform 900ms var(--ease-cinema);
}

.rank-reveal picture,
.rank-reveal img {
  width: 100%;
  height: 100%;
}

.rank-reveal img {
  object-fit: cover;
}

.rank-reveal::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(4, 9, 20, 0.05), transparent 54%, rgba(4, 9, 20, 0.72));
}

.rank-reveal > span {
  position: absolute;
  z-index: 2;
  bottom: 7vh;
  left: 5vw;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-latin);
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: 0.22em;
}

.rank-reveal > span b {
  color: var(--gold);
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 300;
  letter-spacing: -0.06em;
}

.rank-reveal--first {
  inset: 0;
  border-radius: 0;
}

.ranking-stage[data-rank="third"] .rank-reveal--third,
.ranking-stage[data-rank="second"] .rank-reveal--second,
.ranking-stage[data-rank="first"] .rank-reveal--first {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

.ranking-stage.is-ui-entering .rank-reveal {
  opacity: 0;
  visibility: hidden;
}

.today-ui {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
  width: min(920px, 92vw);
  height: min(880px, 90svh);
  padding: clamp(22px, 3vw, 38px);
  overflow: hidden;
  transform: translate(-50%, calc(-46% + var(--today-y, 24px))) scale(var(--today-scale, 0.96));
  border: 1px solid rgba(121, 197, 236, 0.16);
  border-radius: 40px;
  background:
    radial-gradient(circle at 20% 20%, rgba(42, 108, 148, 0.22), transparent 28%),
    linear-gradient(155deg, #071223, #162f61 60%, #2a244f);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.42);
  opacity: var(--today-opacity, 0);
  will-change: opacity, transform;
}

.today-ui__head {
  grid-column: 1 / -1;
  text-align: center;
}

.today-ui__head p {
  margin: 0 0 6px;
  color: #55c2dc;
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
}

.today-ui__head h3 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.today-ui__head time {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.today-winner {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 206, 117, 0.28);
  border-radius: 28px;
  background: #10111b;
}

.today-winner > picture,
.today-winner > picture img {
  width: 100%;
  height: calc(100% - 90px);
}

.today-winner > picture img {
  object-fit: cover;
}

.today-winner__rank,
.today-winner__place,
.today-winner__score {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  background: rgba(7, 9, 20, 0.76);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.today-winner__rank {
  top: 16px;
  left: 16px;
  padding: 9px 14px;
  color: var(--gold);
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.today-winner__place {
  bottom: 106px;
  left: 16px;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
}

.today-winner__score {
  right: 16px;
  bottom: 106px;
  padding: 8px 12px;
  color: var(--gold);
  font-family: var(--font-latin);
  font-size: 10px;
}

.today-winner footer {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 90px;
  padding: 0 18px;
}

.today-winner footer span {
  min-width: 0;
}

.today-winner footer span b {
  overflow: hidden;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-winner footer span small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 8px;
}

.today-winner footer em {
  margin-left: auto;
  padding: 8px 11px;
  border: 1px solid rgba(244, 206, 117, 0.32);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-latin);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.today-runners {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  min-height: 0;
}

.today-runners article {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: #10111b;
}

.today-runners picture,
.today-runners img {
  width: 100%;
  height: 100%;
}

.today-runners img {
  object-fit: cover;
  opacity: 0.76;
}

.today-runners article::after {
  position: absolute;
  inset: 45% 0 0;
  content: "";
  background: linear-gradient(0deg, rgba(8, 9, 18, 0.96), transparent);
}

.today-runners b,
.today-runners span {
  position: absolute;
  z-index: 2;
  left: 14px;
}

.today-runners b {
  top: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(7, 9, 20, 0.72);
  font-size: 10px;
}

.today-runners span {
  bottom: 14px;
  font-family: var(--font-latin);
  font-size: 10px;
}

.today-ui .sample-mark {
  right: 30px;
  bottom: 12px;
  font-size: 6px;
}

.finale {
  display: grid;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  background: #071424;
  color: #fff;
}

.finale__photo img {
  object-position: center 45%;
  filter: saturate(0.92) contrast(1.04) brightness(0.82);
  transform: scale(1.025);
}

.finale__veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 72% at 50% 45%, rgba(3, 11, 25, 0.64) 0 34%, rgba(3, 11, 25, 0.38) 58%, transparent 81%),
    linear-gradient(180deg, rgba(3, 12, 26, 0.14), rgba(4, 14, 29, 0.22) 42%, rgba(2, 8, 18, 0.76)),
    linear-gradient(90deg, rgba(4, 14, 29, 0.18), transparent 42%, rgba(4, 14, 29, 0.18));
}

.final-lockup {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: min(720px, 90vw);
  padding: 10vh 24px 7vh;
  text-align: center;
}

.final-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 9px 16px 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(3, 12, 27, 0.4);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  backdrop-filter: blur(16px) saturate(1.18);
}

.final-brand > img {
  width: clamp(62px, 5.4vw, 76px);
  height: clamp(62px, 5.4vw, 76px);
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 22%;
  background: #fff;
  box-shadow: 0 16px 42px rgba(2, 10, 22, 0.34), 0 0 0 8px rgba(255, 255, 255, 0.05);
}

.final-brand > span {
  display: grid;
  gap: 2px;
  text-align: left;
}

.final-brand small {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(248, 251, 255, 0.92);
  font-size: clamp(11px, 0.9vw, 12px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.48);
}

.final-brand small i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffbf3e, #56d9ec);
  box-shadow: 0 0 0 4px rgba(86, 217, 236, 0.09), 0 0 14px rgba(86, 217, 236, 0.55);
}

.final-brand b {
  font-family: var(--font-latin);
  font-size: clamp(27px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-shadow: 0 7px 28px rgba(0, 0, 0, 0.38);
}

.final-lockup .scene-label {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: clamp(38px, 6vh, 58px) 0 15px;
  color: rgba(225, 239, 250, 0.8);
  font-size: 10px;
}

.final-lockup .scene-label::before,
.final-lockup .scene-label::after {
  width: 30px;
  height: 1px;
  content: "";
  background: rgba(207, 233, 250, 0.26);
}

.final-lockup h2 {
  font-size: clamp(38px, 4.7vw, 68px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.34;
  text-shadow: 0 12px 42px rgba(1, 8, 18, 0.26);
}

.final-lockup h2 em {
  color: #c9edff;
  font-style: normal;
}

.final-lockup__message {
  margin: 18px 0 36px;
  color: rgba(235, 245, 252, 0.88);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.03em;
  line-height: 1.8;
}

.store-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}

.store-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 194px;
  min-width: 0;
  min-height: 58px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 14px;
  background: #05080e;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3), 0 0 34px rgba(116, 210, 255, 0.08);
  transition: transform 220ms var(--ease-cinema), border-color 220ms ease, background-color 220ms ease;
}

.store-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.7);
  background: #000;
}

.store-button svg {
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  fill: #fff;
}

.store-button span {
  display: grid;
  gap: 2px;
  font-family: var(--font-latin);
  line-height: 1.15;
  text-align: left;
}

.store-button span b {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.store-button small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.store-button--google .google-play-icon {
  fill: none;
}

.final-lockup__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  color: rgba(213, 234, 247, 0.48);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.final-lockup__note i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #54dfbf;
  box-shadow: 0 0 0 4px rgba(84, 223, 191, 0.1), 0 0 12px rgba(84, 223, 191, 0.54);
}

.brand-context {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  column-gap: clamp(56px, 9vw, 144px);
  row-gap: 22px;
  padding: clamp(72px, 9vw, 132px) clamp(24px, 8vw, 128px);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 74% 24%, rgba(60, 154, 211, 0.12), transparent 34%),
    linear-gradient(145deg, #071426, #030914 72%);
  color: rgba(227, 240, 249, 0.72);
}

.brand-context::after {
  position: absolute;
  right: -8vw;
  bottom: -22vw;
  width: 46vw;
  height: 46vw;
  border: 1px solid rgba(126, 203, 238, 0.1);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 5vw rgba(91, 162, 214, 0.025), 0 0 0 10vw rgba(91, 162, 214, 0.018);
  pointer-events: none;
}

.brand-context__eyebrow {
  grid-column: 1;
  margin: 0;
  color: #70d5ef;
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
}

.brand-context h2 {
  grid-column: 1;
  margin: 0;
  color: #f6f8fb;
  font-family: var(--font-story);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.55;
}

.brand-context__body {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.brand-context__body > p {
  margin: 0;
  font-size: clamp(13px, 1.15vw, 16px);
  letter-spacing: 0.025em;
  line-height: 2.05;
}

.brand-context ul {
  z-index: 1;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.brand-context li {
  padding: 9px 13px;
  border: 1px solid rgba(166, 219, 241, 0.16);
  border-radius: 999px;
  background: rgba(130, 196, 223, 0.055);
  color: rgba(229, 243, 250, 0.72);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.brand-context__guide {
  z-index: 1;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 24px;
  padding: 24px 28px;
  border: 1px solid rgba(142, 218, 241, 0.26);
  border-radius: 16px;
  background: rgba(113, 195, 225, 0.05);
  color: #dfeef5;
  font-size: 14px;
  line-height: 1.8;
  text-decoration: none;
}

.brand-context__guide strong {
  color: #8cdef2;
  font-weight: 500;
}

.brand-context__guide:hover {
  border-color: #8cdef2;
  background: rgba(113, 195, 225, 0.1);
}

.brand-faq {
  z-index: 1;
  grid-column: 1 / -1;
  margin-top: 24px;
  color: #ccdae4;
}

.brand-faq h3 {
  margin: 0 0 20px;
  color: #f6f8fb;
  font-family: var(--font-story);
  font-size: 24px;
  font-weight: 500;
}

.brand-faq details {
  border-bottom: 1px solid rgba(166, 219, 241, 0.18);
}

.brand-faq summary {
  padding: 20px 0;
  color: #e2edf4;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.7;
  cursor: pointer;
}

.brand-faq p {
  max-width: 80ch;
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 2;
}

.brand-faq a {
  color: #8cdef2;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.brand-context__guide:focus-visible,
.brand-faq summary:focus-visible,
.brand-faq a:focus-visible {
  outline: 2px solid #8cdef2;
  outline-offset: 5px;
}

.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 28px;
  padding: 36px clamp(24px, 5vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #03060d;
  color: rgba(255, 255, 255, 0.52);
}

.brand--footer {
  font-size: 16px;
}

.site-footer p {
  max-width: 640px;
  margin: 0;
  font-size: 10px;
  line-height: 1.7;
}

.site-footer nav {
  display: flex;
  gap: 18px;
  font-size: 10px;
  white-space: nowrap;
}

.site-footer nav a:hover {
  color: #fff;
}

.site-footer__credits {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.site-footer__credits > small {
  font-family: var(--font-latin);
  font-size: 9px;
  white-space: nowrap;
}

.site-footer .site-footer__operator {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45em;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
  line-height: 1.8;
}

.site-footer__operator strong {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

.site-footer__operator span {
  white-space: nowrap;
}

.noscript {
  position: fixed;
  z-index: 200;
  right: 18px;
  bottom: 18px;
  left: 18px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  color: #071225;
  font-size: 12px;
  text-align: center;
}

html:not(.js) .story-scroll {
  height: auto;
}

html:not(.js) .sticky-stage {
  position: relative;
}

html:not(.js) .capture-stage {
  --camera-opacity: 0;
  --phone-opacity: 1;
  --post-opacity: 1;
  --post-ready: 1;
  --sunset: 0.48;
}

html:not(.js) .story-copy--capture {
  top: 34%;
  opacity: 1;
}

html:not(.js) .story-copy--post {
  top: 66%;
  opacity: 1;
}

html:not(.js) .delivery-stage {
  --delivery-first: 1;
  --delivery-key: 1;
  --feed-in: 0.72;
  --path: 1;
}

html:not(.js) .delivery-copy--first {
  top: 34%;
}

html:not(.js) .delivery-copy--key {
  top: 66%;
}

html:not(.js) .world-card {
  --card-opacity: 1;
  --card-y: 0px;
  --card-scale: 1;
  --card-z: 0px;
}

html:not(.js) .earth-wrap {
  --earth-opacity: 1;
  --earth-scale: 1;
  border: 1px solid rgba(180, 220, 245, 0.14);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 31%, rgba(61, 130, 181, 0.28), rgba(8, 31, 60, 0.38) 64%, rgba(3, 12, 27, 0.8));
  box-shadow: 0 0 80px rgba(61, 130, 181, 0.08);
}

html:not(.js) .world-note {
  --world-note: 1;
}

html:not(.js) .world-live {
  --world-live-opacity: 1;
  --world-live-y: 0px;
}

html:not(.js) .world-clocks {
  --world-clocks-opacity: 1;
  --world-clocks-y: 0px;
}

html:not(.js) .ranking-stage {
  min-height: 1600px;
}

html:not(.js) .ranking-intro {
  top: 18%;
  opacity: 1;
}

html:not(.js) .today-ui {
  --today-opacity: 1;
  --today-scale: 1;
  --today-y: 0px;
  top: 68%;
}

@media (min-width: 768px) and (max-width: 1100px) {
  .story-copy {
    left: 6vw;
    width: 40vw;
  }

  .phone,
  .feed-phone {
    right: 7vw;
  }

  .world-card--five,
  .world-card--six {
    display: none;
  }

  .today-ui {
    width: 86vw;
  }

  .site-footer {
    grid-template-columns: auto 1fr auto;
  }

  .site-footer__credits {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .journey-header {
    min-height: 66px;
    padding: 12px 18px;
  }

  body.is-scrolled .journey-header {
    min-height: 60px;
  }

  .brand {
    gap: 8px;
    font-size: 18px;
  }

  .brand img {
    width: 29px;
    height: 29px;
  }

  .desktop-nav {
    display: none;
  }

  .menu-button {
    position: relative;
    z-index: 3;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(8, 15, 29, 0.18);
  }

  .menu-button span {
    position: absolute;
    width: 17px;
    height: 1px;
    background: #fff;
    transition: transform 220ms ease;
  }

  .menu-button span:first-child { transform: translateY(-3px); }
  .menu-button span:last-child { transform: translateY(3px); }
  .menu-button[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 84px 28px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(3, 8, 18, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu > a {
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-latin);
    font-size: 24px;
  }

  html:not(.js) .menu-button {
    display: none;
  }

  html:not(.js) .mobile-menu[hidden] {
    position: fixed;
    z-index: 101;
    inset: 12px 66px auto auto;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html:not(.js) .mobile-menu a {
    display: none;
  }

  @media (max-height: 520px) {
    .mobile-menu {
      align-content: start;
      padding-top: 68px;
      padding-bottom: 24px;
    }

    .mobile-menu > a {
      padding-block: 11px;
      font-size: 20px;
    }

  }

  .opening {
    min-height: 650px;
  }

  .opening__photo img {
    object-position: center 53%;
  }

  .opening__veil {
    background:
      linear-gradient(180deg, rgba(5, 14, 29, 0.26) 0%, rgba(5, 14, 29, 0.02) 34%, rgba(5, 14, 29, 0.66) 100%),
      linear-gradient(90deg, rgba(6, 18, 37, 0.35), transparent 82%);
  }

  .opening__copy {
    top: 20%;
    left: 24px;
    width: calc(100% - 48px);
  }

  .scene-label {
    margin-bottom: 17px;
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .opening h1 {
    font-size: clamp(44px, 13vw, 62px);
    line-height: 1.35;
  }

  .opening__identity {
    max-width: 310px;
    margin-bottom: 17px;
    font-size: 10px;
    letter-spacing: 0.075em;
  }

  .opening__copy > p:last-child {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.8;
  }

  .mobile-only {
    display: block;
  }

  .opening__time {
    right: 22px;
    bottom: 64px;
    font-size: 10px;
  }

  .scroll-cue {
    left: 24px;
    bottom: 22px;
    align-items: flex-start;
    transform: none;
  }

  .scroll-cue i {
    width: 44px;
    height: 1px;
  }

  .scroll-cue i::after {
    transform: translateX(-100%);
    animation-name: scroll-line-x;
  }

  @keyframes scroll-line-x {
    0% { transform: translateX(-100%); }
    50%, 100% { transform: translateX(100%); }
  }

  .sample-mark {
    right: 18px;
    bottom: 13px;
    font-size: 6px;
  }

  .story-scroll--capture { height: 390vh; }
  .story-scroll--delivery { height: 330vh; }
  .story-scroll--world { height: 340vh; }
  .story-scroll--ranking { height: 440vh; }

  .sticky-stage {
    min-height: 620px;
  }

  .capture-stage__sky img {
    object-position: 52% 50%;
  }

  .capture-stage__wash {
    background:
      linear-gradient(180deg, rgba(240, 250, 255, 0.92) 0%, rgba(240, 250, 255, 0.32) 43%, rgba(220, 239, 250, 0.04) 74%),
      linear-gradient(0deg, rgba(245, 205, 180, 0.3), transparent 50%);
  }

  .story-copy {
    top: 13.5vh;
    left: 24px;
    width: calc(100% - 48px);
    transform: none;
  }

  .story-copy h2 {
    font-size: clamp(33px, 9.4vw, 44px);
  }

  .story-copy--capture {
    transform: translate3d(0, var(--capture-mobile-y, 0), 0);
  }

  .story-copy--post {
    transform: translate3d(0, var(--post-mobile-y, 8px), 0);
  }

  .phone {
    top: auto;
    right: auto;
    bottom: 3.5vh;
    left: 50%;
    width: min(69vw, 298px);
    transform: translate3d(-50%, var(--phone-y, 34px), 0) scale(var(--phone-scale, 0.94));
    border-radius: 42px;
  }

  .phone__screen {
    border-radius: 34px;
  }

  .phone__sensor {
    top: 14px;
    height: 19px;
  }

  .camera-view__bottom {
    grid-template-columns: 1fr 66px 1fr;
  }

  .camera-view__bottom i {
    width: 58px;
    height: 58px;
  }

  .birth-signal {
    bottom: 9%;
    width: 54%;
  }

  .delivery-stage__photo img {
    object-position: 50% center;
  }

  .delivery-stage__veil {
    background:
      linear-gradient(180deg, rgba(4, 13, 30, 0.86) 0%, rgba(8, 19, 43, 0.44) 46%, rgba(5, 13, 28, 0.82) 100%),
      linear-gradient(90deg, rgba(7, 17, 34, 0.3), rgba(20, 26, 68, 0.4));
  }

  .signal-path {
    width: 160%;
    transform: translateX(-30%);
  }

  .delivery-copy {
    top: 13vh;
    left: 24px;
    width: calc(100% - 48px);
    transform: none;
  }

  .delivery-copy h2 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .delivery-copy--key {
    top: 16vh;
  }

  .delivery-copy--key p {
    font-size: 12px;
  }

  .delivery-copy--key h2 {
    font-size: clamp(31px, 9.2vw, 42px);
  }

  .feed-phone {
    top: auto;
    right: auto;
    bottom: 2.5vh;
    left: 50%;
    width: min(82vw, 330px);
    transform: translate3d(-50%, var(--feed-y, 34px), 0) scale(var(--feed-scale, 0.94));
    border-radius: 42px;
  }

  .feed-card > picture,
  .feed-card > picture img {
    height: 240px;
  }

  .feed-card__place {
    top: 202px;
  }

  .world-copy {
    top: 7.7vh;
    width: calc(100% - 34px);
  }

  .world-copy h2 {
    margin-bottom: 12px;
    font-size: clamp(29px, 8.2vw, 38px);
    line-height: 1.42;
  }

  .world-copy__lead {
    max-width: 330px;
    font-size: 12px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  .world-live {
    top: calc(68px + 1.5vh);
    right: 12px;
    left: auto;
    gap: 7px;
    padding: 7px 9px;
  }

  .world-live__copy {
    display: none;
  }

  .world-live__status,
  .world-live b {
    font-size: 7px;
  }

  .earth-wrap {
    top: 19%;
    width: min(118vw, 610px);
    height: min(118vw, 610px);
  }

  .earth-label {
    bottom: 22%;
    padding: 7px 10px;
    font-size: 7px;
  }

  .world-card {
    width: min(39vw, 150px);
    padding: 0;
    border-radius: 18px;
  }

  .world-card__visual {
    height: auto;
    border-radius: inherit;
  }

  .world-card--one { top: 31%; left: 8px; }
  .world-card--two { top: 58%; left: 12px; }
  .world-card--three { top: 37%; right: 8px; }
  .world-card--four { top: 64%; right: 12px; }
  .world-card--five,
  .world-card--six { display: none; }

  .world-clocks {
    bottom: 2.1vh;
    width: calc(100% - 20px);
    padding: 8px 3px;
    border-radius: 14px;
  }

  .world-clocks > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 3px;
    text-align: center;
  }

  .world-clocks small { font-size: 6.5px; }
  .world-clocks b { font-size: 11.5px; }
  .world-clocks em { display: none; }

  .world-note {
    bottom: 11.7vh;
    width: calc(100% - 30px);
  }

  .world-note strong {
    font-size: 14px;
  }

  .rank-reveal {
    inset: 5vh 16px;
    border-radius: 25px;
  }

  .rank-reveal--first {
    inset: 0;
    border-radius: 0;
  }

  .rank-reveal > span {
    bottom: 8vh;
    left: 25px;
    font-size: 10px;
  }

  .rank-reveal > span b {
    font-size: 48px;
  }

  .ranking-intro {
    width: calc(100% - 40px);
  }

  .ranking-intro h2 {
    font-size: clamp(34px, 9.6vw, 44px);
  }

  .ranking-intro > p:last-child {
    margin-top: 18px;
    font-size: 12px;
  }

  .today-ui {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1.65fr) minmax(0, 0.75fr);
    gap: 12px;
    width: calc(100% - 24px);
    height: min(860px, 94svh);
    padding: 25px 14px 21px;
    border-radius: 29px;
  }

  .today-ui__head p {
    font-size: 7px;
  }

  .today-ui__head h3 {
    font-size: 24px;
  }

  .today-ui__head time {
    font-size: 9px;
  }

  .today-winner {
    border-radius: 22px;
  }

  .today-winner > picture,
  .today-winner > picture img {
    height: calc(100% - 68px);
  }

  .today-winner footer {
    height: 68px;
    padding: 0 13px;
  }

  .today-winner footer i {
    width: 31px;
    height: 31px;
  }

  .today-winner footer span b {
    font-size: 10px;
  }

  .today-winner footer em {
    padding: 6px 8px;
    font-size: 6px;
  }

  .today-winner__rank {
    top: 11px;
    left: 11px;
    padding: 7px 10px;
    font-size: 9px;
  }

  .today-winner__place,
  .today-winner__score {
    bottom: 78px;
    padding: 6px 9px;
    font-size: 7px;
  }

  .today-runners {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
  }

  .today-runners article {
    border-radius: 18px;
  }

  .today-runners b {
    top: 9px;
    left: 9px;
    font-size: 8px;
  }

  .today-runners span {
    bottom: 9px;
    left: 9px;
    font-size: 7px;
  }

  .today-ui .sample-mark {
    right: 22px;
    bottom: 8px;
  }

  .finale {
    min-height: 100svh;
  }

  .finale__photo img {
    object-position: center 45%;
  }

  .final-lockup {
    width: calc(100% - 36px);
    padding: 9vh 0 5vh;
  }

  .final-brand {
    gap: 12px;
    padding: 8px 14px 8px 8px;
    border-radius: 19px;
  }

  .final-brand > img {
    width: 58px;
    height: 58px;
    box-shadow: 0 13px 34px rgba(2, 10, 22, 0.34), 0 0 0 6px rgba(255, 255, 255, 0.05);
  }

  .final-brand small {
    font-size: 11px;
  }

  .final-brand b {
    font-size: 27px;
  }

  .final-lockup .scene-label {
    margin-top: clamp(31px, 5.4vh, 46px);
    margin-bottom: 13px;
    font-size: 9px;
  }

  .final-lockup .scene-label::before,
  .final-lockup .scene-label::after {
    width: 20px;
  }

  .final-lockup h2 {
    font-size: clamp(34px, 10.2vw, 44px);
    line-height: 1.34;
  }

  .final-lockup__message {
    max-width: 320px;
    margin: 13px 0 28px;
    font-size: 13px;
    line-height: 1.75;
  }

  .store-actions {
    flex-direction: column;
    width: min(236px, 76vw);
    gap: 9px;
  }

  .store-button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
  }

  .store-button--google {
    min-height: 54px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 34px 24px calc(34px + env(safe-area-inset-bottom));
  }

  .brand-context {
    grid-template-columns: 1fr;
    row-gap: 17px;
    padding: 64px 24px 70px;
  }

  .brand-context__eyebrow,
  .brand-context h2,
  .brand-context__body,
  .brand-context ul {
    grid-column: 1;
  }

  .brand-context__body { grid-row: auto; }

  .brand-context__body > p {
    font-size: 12px;
    line-height: 1.95;
  }

  .brand-context h2 {
    font-size: clamp(27px, 8.7vw, 38px);
    line-height: 1.55;
  }

  .brand-context li {
    padding: 8px 11px;
    font-size: 9px;
  }

  .site-footer nav {
    flex-wrap: wrap;
  }

  html:not(.js) .capture-stage,
  html:not(.js) .delivery-stage {
    min-height: 960px;
  }

  html:not(.js) .story-copy--capture,
  html:not(.js) .delivery-copy--first {
    top: 11%;
  }

  html:not(.js) .story-copy--post,
  html:not(.js) .delivery-copy--key {
    top: 24%;
  }

  html:not(.js) .phone,
  html:not(.js) .feed-phone {
    width: min(58vw, 250px);
  }
}

@media (max-width: 767px) and (max-height: 720px) {
  .story-copy {
    top: 10.5vh;
  }

  .story-copy h2 {
    font-size: clamp(30px, 8.4vw, 38px);
  }

  .phone {
    bottom: 2vh;
    width: min(55vw, 216px);
  }
}

@media (max-width: 380px) {
  .opening__copy,
  .story-copy,
  .delivery-copy {
    left: 20px;
    width: calc(100% - 40px);
  }

  .opening h1 {
    font-size: 42px;
  }

  .phone {
    width: 66vw;
  }

  .feed-phone {
    width: 78vw;
  }

  .feed-phone__brand {
    padding-top: 68px;
  }

  .feed-card > picture,
  .feed-card > picture img {
    height: 210px;
  }

  .feed-card__place {
    top: 172px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .opening__photo img,
  .capture-stage__sky img,
  .delivery-stage__photo img,
  .phone,
  .feed-phone,
  .today-ui,
  .rank-reveal {
    transform: none;
  }

  .phone {
    transform: translateY(-50%);
  }

  .feed-phone {
    transform: translateY(-50%);
  }

  .world-stage .earth-wrap {
    transform: translate3d(calc(-50% + var(--earth-x, 0px)), var(--earth-y, -42px), 0) scale(var(--earth-scale, 0.78));
  }

  .world-card {
    --card-scale: 1;
    --card-z: 0px;
    --card-tilt-x: 0deg;
    --card-tilt-y: 0deg;
  }

  .scroll-cue i::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .phone,
  .feed-phone {
    transform: translateX(-50%);
  }
}

/* The story now uses real SkyShare photography and captured app screens. */
.feed-phone--actual {
  container-type: inline-size;
  aspect-ratio: 414 / 900;
  padding: 8px;
  isolation: isolate;
  contain: layout paint;
  background: #03050a;
}

.feed-phone--actual::before {
  display: none;
}

.actual-app-screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.feed-phone--actual .actual-app-screen {
  position: relative;
  z-index: 1;
  border-radius: 40px;
}

.story-feed-card {
  position: absolute;
  z-index: 8;
  top: 19.55%;
  right: 5.25%;
  left: 5.25%;
  display: grid;
  grid-template-rows: 61% 21% 18%;
  height: 49.3%;
  overflow: hidden;
  border-radius: 28px;
  background: #10111a;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  contain: layout paint;
}

.story-feed-card__photo {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.story-feed-card__photo::after {
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(180deg, transparent, rgba(3, 8, 16, 0.72));
  content: "";
}

.story-feed-card__photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

.story-feed-card__type,
.story-feed-card__place {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(18, 25, 58, 0.72);
  color: #fff;
  font-size: clamp(8px, 2.7cqw, 11px);
  line-height: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.story-feed-card__type {
  top: 7%;
  right: 4%;
  padding: 2.5cqw 3.4cqw;
  background: rgba(65, 69, 153, 0.82);
}

.story-feed-card__place {
  bottom: 5%;
  left: 5%;
  padding: 2.5cqw 3.6cqw;
  color: rgba(255, 255, 255, 0.88);
}

.story-feed-card__meta {
  display: flex;
  align-items: center;
  gap: 3cqw;
  min-width: 0;
  padding: 2.2cqw 3.4cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(10, 12, 19, 0.98);
}

.story-feed-card__avatar {
  flex: 0 0 auto;
  width: 12.5cqw;
  height: 12.5cqw;
  padding: 0.7cqw;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #f06a62, #f2a54c);
}

.story-feed-card__avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: 50% 22%;
}

.story-feed-card__meta > span {
  display: grid;
  min-width: 0;
  gap: 0.8cqw;
}

.story-feed-card__meta b {
  overflow: hidden;
  color: #fff;
  font-size: clamp(10px, 4cqw, 16px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-feed-card__meta small {
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(7px, 2.6cqw, 10px);
}

.story-feed-card__meta em {
  margin-left: auto;
  padding: 2.6cqw 3cqw;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(6px, 2.35cqw, 9px);
  font-style: normal;
  white-space: nowrap;
}

.story-feed-card__reactions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2cqw;
  padding: 2.5cqw 3.2cqw 3cqw;
  background: #0a0c13;
}

.story-feed-card__reactions span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  border: 1px solid rgba(244, 194, 81, 0.7);
  border-radius: 4cqw;
  color: #f8c950;
  font-size: clamp(7px, 2.65cqw, 11px);
}

.story-feed-card__reactions span:nth-child(2) {
  border-color: rgba(184, 221, 208, 0.72);
  color: #69d2f0;
}

.story-feed-card__reactions span:nth-child(3) {
  border-color: rgba(240, 166, 75, 0.72);
  color: #f2a54c;
}

.story-feed-card__reactions b {
  color: inherit;
  font-family: var(--font-latin);
  font-weight: 600;
}

.today-ui--0822 {
  display: block;
  width: min(414px, calc(100vw - 28px), 42.32svh);
  height: auto;
  aspect-ratio: 414 / 900;
  padding: 7px;
  border-radius: 43px;
  background: #03050a;
}

.ranking-app-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background:
    radial-gradient(circle at 8% 7%, rgba(28, 46, 72, 0.96) 0 17%, transparent 17.2%),
    linear-gradient(170deg, #031321 0%, #081128 34%, #0b2f59 100%);
  color: #fff;
  container-type: inline-size;
}

.ranking-app-screen::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(116deg, transparent 0 48%, rgba(80, 107, 151, 0.1) 48.2% 48.5%, transparent 48.7%),
    linear-gradient(76deg, transparent 0 61%, rgba(80, 107, 151, 0.09) 61.2% 61.5%, transparent 61.7%);
  content: "";
}

.ranking-app-status {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 11.5cqw;
  padding: 0 5.5cqw;
  font-family: var(--font-latin);
  font-size: 4.2cqw;
}

.ranking-app-status span {
  font-size: 3.1cqw;
  letter-spacing: 0.04em;
}

.ranking-app-status i {
  padding: 0.2cqw 1.2cqw;
  border-radius: 1.6cqw;
  background: #fff;
  color: #111526;
  font-style: normal;
  letter-spacing: 0;
}

.ranking-app-sparkles {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.ranking-app-sparkles i {
  position: absolute;
  width: 1.4cqw;
  height: 1.4cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
}

.ranking-app-sparkles i:nth-child(1) { top: 5.5cqw; left: 10cqw; }
.ranking-app-sparkles i:nth-child(2) { top: 12cqw; left: 27cqw; }
.ranking-app-sparkles i:nth-child(3) { top: 20cqw; left: 15cqw; }
.ranking-app-sparkles i:nth-child(4) { top: 14cqw; left: 58cqw; }
.ranking-app-sparkles i:nth-child(5) { top: 8cqw; right: 11cqw; }
.ranking-app-sparkles i:nth-child(6) { top: 25cqw; right: 8cqw; }
.ranking-app-sparkles i:nth-child(7) { top: 31cqw; left: 32cqw; }
.ranking-app-sparkles i:nth-child(8) { top: 27cqw; left: 48cqw; }
.ranking-app-sparkles i:nth-child(9) { top: 34cqw; right: 23cqw; }
.ranking-app-sparkles i:nth-child(10) { top: 18cqw; right: 34cqw; }
.ranking-app-sparkles i:nth-child(11) { top: 6cqw; left: 39cqw; }
.ranking-app-sparkles i:nth-child(12) { top: 30cqw; left: 7cqw; }

.ranking-app-head {
  position: absolute;
  z-index: 2;
  top: 14cqw;
  left: 0;
  width: 100%;
  text-align: center;
}

.ranking-app-head p {
  margin: 0;
  color: #18bad0;
  font-family: var(--font-latin);
  font-size: 2.7cqw;
  font-weight: 600;
  letter-spacing: 0.34em;
}

.ranking-app-head h3 {
  margin: 2cqw 0 0;
  font-size: 7.6cqw;
  font-weight: 700;
  letter-spacing: -0.06em;
}

.ranking-app-head h3 span {
  display: inline-block;
  margin-left: 1.5cqw;
  font-size: 6cqw;
  transform: translateY(-0.5cqw);
}

.ranking-app-head time {
  display: block;
  margin-top: 1.1cqw;
  color: rgba(255, 255, 255, 0.52);
  font-size: 4cqw;
}

.ranking-app-winner {
  position: absolute;
  z-index: 2;
  top: 38.8cqw;
  right: 3.7cqw;
  left: 3.7cqw;
  height: 88cqw;
  overflow: hidden;
  border: 1px solid rgba(52, 186, 206, 0.38);
  border-radius: 6.6cqw;
  background: #10111c;
  box-shadow: 0 6cqw 13cqw rgba(0, 0, 0, 0.24);
}

.ranking-app-winner > img {
  display: block;
  width: 100%;
  height: 65cqw;
  object-fit: cover;
  object-position: 50% 50%;
}

.ranking-app-winner::after {
  position: absolute;
  z-index: 1;
  top: 38cqw;
  right: 0;
  left: 0;
  height: 28cqw;
  background: linear-gradient(180deg, transparent, rgba(4, 7, 14, 0.62));
  content: "";
}

.ranking-app-rank,
.ranking-app-place,
.ranking-app-score {
  position: absolute;
  z-index: 3;
  border-radius: 999px;
  background: rgba(9, 11, 24, 0.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ranking-app-rank {
  top: 3.4cqw;
  left: 3.4cqw;
  padding: 2.5cqw 3.4cqw;
  border: 1px solid rgba(244, 195, 72, 0.38);
  color: #ffd05b;
  font-family: var(--font-latin);
  font-size: 3.6cqw;
}

.ranking-app-place {
  top: 55cqw;
  left: 3.4cqw;
  padding: 2cqw 3cqw;
  color: rgba(255, 255, 255, 0.66);
  font-size: 2.8cqw;
}

.ranking-app-score {
  top: 55cqw;
  right: 3.4cqw;
  padding: 2cqw 3cqw;
  font-family: var(--font-latin);
  font-size: 2.8cqw;
}

.ranking-app-winner footer {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 2.7cqw;
  height: 23cqw;
  padding: 0 3.6cqw;
  background: #10111c;
}

.ranking-app-winner footer > i,
.ranking-app-runners footer > i {
  display: grid;
  flex: 0 0 auto;
  width: 11.5cqw;
  height: 11.5cqw;
  place-items: center;
  border: 0.7cqw solid rgba(96, 174, 255, 0.8);
  border-radius: 50%;
  background: linear-gradient(145deg, #2d91df, #8b79ef);
  font-family: var(--font-latin);
  font-size: 4.2cqw;
  font-style: normal;
}

.ranking-app-winner footer > span,
.ranking-app-runners footer > span {
  display: grid;
  min-width: 0;
  gap: 0.7cqw;
}

.ranking-app-winner footer span b {
  font-family: var(--font-latin);
  font-size: 4cqw;
}

.ranking-app-winner footer small,
.ranking-app-runners footer small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.42);
  font-size: 2.5cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-app-winner footer em {
  margin-left: auto;
  padding: 2.4cqw 3.2cqw;
  border: 1px solid rgba(244, 195, 72, 0.36);
  border-radius: 999px;
  color: #ffd05b;
  font-size: 2.7cqw;
  font-style: normal;
  white-space: nowrap;
}

.ranking-app-runners {
  position: absolute;
  z-index: 2;
  top: 132cqw;
  right: 3.7cqw;
  left: 3.7cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2cqw;
  height: 58cqw;
}

.ranking-app-runners article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5.3cqw;
  background: #10111c;
}

.ranking-app-runners article > img {
  display: block;
  width: 100%;
  height: 42cqw;
  object-fit: cover;
}

.ranking-app-runners article:first-child > img {
  object-position: 50% 44%;
}

.ranking-app-runners article:last-child > img {
  object-position: 52% 48%;
}

.ranking-app-runner-rank,
.ranking-app-runner-score {
  position: absolute;
  z-index: 2;
  padding: 1.5cqw 2.2cqw;
  border-radius: 999px;
  background: rgba(9, 11, 24, 0.84);
  font-size: 2.7cqw;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.ranking-app-runner-rank {
  top: 2.5cqw;
  left: 2.5cqw;
}

.ranking-app-runner-score {
  top: 35cqw;
  right: 2.2cqw;
  font-family: var(--font-latin);
  font-size: 2.3cqw;
}

.ranking-app-runners footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 2cqw;
  height: 16cqw;
  padding: 0 2.5cqw;
  background: #10111c;
}

.ranking-app-runners footer > i {
  width: 8.5cqw;
  height: 8.5cqw;
  border-width: 0.5cqw;
  font-size: 2.8cqw;
}

.ranking-app-runners footer span b {
  display: block;
  max-width: 31cqw;
  overflow: hidden;
  font-family: var(--font-latin);
  font-size: 2.9cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-app-tabs {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 25cqw;
  padding: 3cqw 2.8cqw 5.8cqw;
  background: rgba(5, 5, 13, 0.98);
}

.ranking-app-tabs span {
  display: grid;
  place-items: center;
  align-content: start;
  gap: 1cqw;
  color: rgba(255, 255, 255, 0.3);
}

.ranking-app-tabs svg {
  width: 6cqw;
  height: 6cqw;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.5;
}

.ranking-app-tabs small {
  font-size: 2.5cqw;
}

.ranking-app-tabs .is-active {
  color: #66b7ff;
}

.ranking-app-tabs .is-active svg {
  box-sizing: content-box;
  margin-top: -2.6cqw;
  padding: 2.7cqw;
  border: 0.5cqw solid rgba(255, 255, 255, 0.27);
  border-radius: 50%;
  background: rgba(76, 99, 145, 0.52);
  box-shadow: 0 0 5cqw rgba(74, 156, 255, 0.22);
}

.ranking-app-home {
  position: absolute;
  z-index: 7;
  bottom: 2cqw;
  left: 50%;
  width: 36cqw;
  height: 1.3cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #fff;
}

@media (max-width: 767px) {
  .opening h1 {
    font-size: clamp(38px, 10.4vw, 46px);
    letter-spacing: -0.065em;
  }

  .feed-phone--actual .actual-app-screen {
    border-radius: 34px;
  }

  .today-ui--0822 {
    width: min(calc(100vw - 24px), 42.32svh);
    height: auto;
    padding: 6px;
    border-radius: 34px;
  }

  .ranking-app-screen {
    border-radius: 29px;
  }
}

/* 2026-08-23 final art direction: reference-accurate feed, a clear post handoff,
   a photographic global network, and a compact store lockup. */
.story-copy--post {
  z-index: 10;
  top: 50%;
  left: 50%;
  width: min(84vw, 900px);
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
  pointer-events: none;
}

.story-copy--post h2 {
  font-size: clamp(48px, 6.3vw, 92px);
  letter-spacing: 0.015em;
  line-height: 1.34;
  text-wrap: balance;
  text-shadow: 0 15px 56px rgba(30, 11, 36, 0.42);
}

.story-copy--post .scene-label {
  justify-content: center;
  margin-bottom: 18px;
}

.capture-stage__wash::after {
  background:
    radial-gradient(circle at 72% 30%, rgba(255, 202, 136, 0.5), transparent 34%),
    linear-gradient(105deg, rgba(50, 29, 83, 0.82), rgba(180, 74, 112, 0.52) 48%, rgba(249, 143, 75, 0.72)),
    linear-gradient(0deg, rgba(222, 89, 51, 0.96), transparent 64%);
}

.feed-phone--reference {
  aspect-ratio: 414 / 900;
  padding: 7px;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  border-radius: 50px;
  background: #02050b;
  box-shadow: 0 42px 110px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.feed-phone--reference::before {
  display: none;
}

.feed-reference-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 43px;
  background:
    radial-gradient(circle at -8% 2%, rgba(65, 82, 112, 0.3) 0 27%, transparent 27.2%),
    linear-gradient(180deg, #020914 0%, #07152d 53%, #183665 100%);
  color: #fff;
  container-type: inline-size;
  font-family: var(--font-gothic);
}

.feed-reference-status {
  position: absolute;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12cqw;
  padding: 1.5cqw 7.6cqw 0;
  font-family: var(--font-latin);
}

.feed-reference-status b {
  font-size: 4.35cqw;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.feed-reference-time {
  display: flex;
  align-items: center;
  gap: 1.35cqw;
}

.feed-reference-muted {
  display: block;
  width: 4.4cqw;
  height: 4.4cqw;
}

.feed-reference-muted svg {
  width: 100%;
  height: 100%;
  fill: #fff;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feed-reference-indicators {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
}

.feed-reference-signal {
  width: 6.2cqw;
  height: 3.8cqw;
  background: linear-gradient(90deg, transparent 0 4%, #fff 4% 17%, transparent 17% 26%, #fff 26% 42%, transparent 42% 51%, #fff 51% 68%, transparent 68% 77%, #fff 77% 100%);
  clip-path: polygon(0 100%, 0 72%, 17% 72%, 17% 100%, 27% 100%, 27% 52%, 43% 52%, 43% 100%, 53% 100%, 53% 28%, 69% 28%, 69% 100%, 79% 100%, 79% 0, 100% 0, 100% 100%);
}

.feed-reference-wifi {
  width: 5.3cqw;
  height: 3.7cqw;
  border-top: 1.1cqw solid #fff;
  border-radius: 50% 50% 0 0;
  transform: translateY(0.8cqw);
}

.feed-reference-battery {
  display: grid;
  place-items: center;
  min-width: 7.8cqw;
  height: 4.2cqw;
  border-radius: 1.4cqw;
  background: #fff;
  color: #192233;
  font-size: 2.6cqw;
  font-style: normal;
  font-weight: 700;
}

.feed-reference-head {
  position: absolute;
  z-index: 8;
  top: 14.8cqw;
  right: 5.2cqw;
  left: 5.2cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feed-reference-head > span,
.feed-reference-head b,
.feed-reference-head small {
  display: block;
}

.feed-reference-head b {
  font-family: var(--font-latin);
  font-size: 7.4cqw;
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
}

.feed-reference-head small {
  margin-top: 2.2cqw;
  color: rgba(255, 255, 255, 0.66);
  font-size: 3.2cqw;
  letter-spacing: 0.02em;
}

.feed-reference-bell {
  display: grid;
  place-items: center;
  width: 14.3cqw;
  height: 14.3cqw;
  border: 0.45cqw solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(53, 64, 85, 0.7);
  box-shadow: inset 0 0 0 0.2cqw rgba(255, 255, 255, 0.06);
}

.feed-reference-bell svg {
  width: 6.2cqw;
  height: 6.2cqw;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.feed-reference-card {
  position: absolute;
  z-index: 5;
  left: 5cqw;
  width: 90cqw;
  overflow: hidden;
  border-radius: 9.5cqw;
  background: #05070e;
  box-shadow: 0 2.6cqw 8cqw rgba(0, 0, 0, 0.24);
}

.feed-reference-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-reference-card::after {
  position: absolute;
  z-index: 1;
  inset: 42% 0 0;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(2, 5, 10, 0.78) 32%, rgba(2, 4, 8, 0.98) 78%);
  pointer-events: none;
}

.feed-reference-card--primary {
  top: 41.5cqw;
  height: 110.5cqw;
}

.feed-reference-card--primary > img {
  object-position: 50% 48%;
}

.feed-reference-type,
.feed-reference-place {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2cqw;
  border: 0.3cqw solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(28, 31, 65, 0.72);
  color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}

.feed-reference-type {
  top: 4.7cqw;
  right: 4.7cqw;
  padding: 2.7cqw 4cqw;
  font-size: 3.3cqw;
  font-weight: 650;
}

.feed-reference-type svg,
.feed-reference-place svg {
  width: 4.4cqw;
  height: 4.4cqw;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.feed-reference-place {
  bottom: 43cqw;
  left: 4.6cqw;
  padding: 2.5cqw 3.8cqw;
  background: rgba(12, 18, 26, 0.55);
  font-size: 3.2cqw;
}

.feed-reference-place svg {
  fill: #fff;
  stroke: #fff;
}

.feed-reference-person {
  position: absolute;
  z-index: 4;
  right: 4.5cqw;
  bottom: 17.4cqw;
  left: 4.5cqw;
  display: grid;
  grid-template-columns: 11.5cqw 1fr auto;
  align-items: center;
  gap: 3cqw;
  min-height: 15cqw;
  padding-top: 3cqw;
  border-top: 0.25cqw solid rgba(255, 255, 255, 0.14);
}

.feed-reference-person > i {
  width: 11.5cqw;
  height: 11.5cqw;
  overflow: hidden;
  border: 0.8cqw solid #f1b24e;
  border-radius: 50%;
  background: #13233b;
}

.feed-reference-person > i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-reference-person > span b,
.feed-reference-person > span small {
  display: block;
}

.feed-reference-person > span b {
  font-size: 4.6cqw;
  line-height: 1.1;
}

.feed-reference-person > span small {
  margin-top: 1.3cqw;
  color: rgba(255, 255, 255, 0.57);
  font-size: 3cqw;
}

.feed-reference-person em {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  padding: 2.8cqw 3.4cqw;
  border: 0.35cqw solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 2.55cqw;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.feed-reference-person em svg {
  width: 4.3cqw;
  height: 4.3cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.feed-reference-reactions {
  position: absolute;
  z-index: 4;
  right: 4.5cqw;
  bottom: 3.4cqw;
  left: 4.5cqw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2cqw;
  padding-top: 3cqw;
  border-top: 0.25cqw solid rgba(255, 255, 255, 0.13);
}

.feed-reference-reactions span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3cqw;
  min-height: 11.5cqw;
  border: 0.45cqw solid rgba(242, 194, 84, 0.76);
  border-radius: 5cqw;
  background: rgba(92, 70, 21, 0.5);
  color: #ffd66a;
  font-size: 4.1cqw;
}

.feed-reference-reactions span:nth-child(2) {
  border-color: rgba(191, 222, 213, 0.72);
  background: rgba(55, 77, 72, 0.5);
  color: #75d5f4;
}

.feed-reference-reactions span:nth-child(3) {
  border-color: rgba(232, 164, 77, 0.77);
  background: rgba(99, 60, 24, 0.5);
  color: #ffb253;
}

.feed-reference-reactions b {
  font-family: var(--font-latin);
  font-size: 3.8cqw;
}

.feed-reference-card--next {
  top: 156.5cqw;
  height: 83cqw;
}

.feed-reference-card--next > img {
  object-position: 50% 48%;
}

.feed-reference-card--next::after {
  display: none;
}

.feed-reference-tabs {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 26.5cqw;
  padding: 2.8cqw 2.2cqw 6.3cqw;
  background: rgba(4, 5, 14, 0.99);
}

.feed-reference-tabs span {
  display: grid;
  place-items: center;
  align-content: start;
  gap: 1.4cqw;
  color: rgba(255, 255, 255, 0.3);
}

.feed-reference-tabs i {
  display: grid;
  place-items: center;
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
}

.feed-reference-tabs svg {
  width: 5.7cqw;
  height: 5.7cqw;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.45;
}

.feed-reference-tabs small {
  font-size: 2.5cqw;
}

.feed-reference-tabs .is-active {
  color: #64b9ff;
}

.feed-reference-tabs .is-active i {
  width: 12cqw;
  height: 12cqw;
  margin-top: -2.4cqw;
  border: 0.5cqw solid rgba(255, 255, 255, 0.27);
  background: rgba(74, 91, 127, 0.76);
  box-shadow: 0 0 5cqw rgba(88, 160, 255, 0.23);
}

.feed-reference-home {
  position: absolute;
  z-index: 25;
  bottom: 1.8cqw;
  left: 50%;
  width: 35cqw;
  height: 1.3cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #fff;
}

.earth-wrap {
  top: 23%;
  width: min(46vw, 68vh, 640px);
  height: min(46vw, 68vh, 640px);
}

.earth-photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(124, 205, 255, 0.16);
  border-radius: 50%;
  background: #02050b;
  box-shadow: 0 0 100px rgba(47, 143, 255, 0.18), 0 36px 100px rgba(0, 0, 0, 0.48);
}

.earth-photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 52% 43%, transparent 36%, rgba(1, 4, 10, 0.1) 62%, rgba(1, 4, 10, 0.62) 100%);
  pointer-events: none;
}

.earth-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  filter: saturate(0.86) contrast(1.1) brightness(0.96);
}

.earth-orbit {
  z-index: 2;
  width: 106%;
  height: 31%;
}

.earth-orbit--two {
  width: 92%;
  height: 45%;
}

.earth-label {
  z-index: 4;
  bottom: 2.8%;
  padding: 9px 14px;
  border-color: rgba(137, 221, 255, 0.32);
  background: rgba(2, 11, 25, 0.78);
  color: rgba(240, 250, 255, 0.88);
  font-size: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.26), 0 0 28px rgba(69, 189, 255, 0.11);
}

.world-copy {
  top: 7.5vh;
}

.world-copy h2 {
  color: rgba(250, 253, 255, 0.96);
  text-shadow: 0 3px 30px rgba(0, 7, 21, 0.94), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.world-copy h2 em {
  color: rgba(216, 242, 255, 0.98);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: 0 3px 30px rgba(0, 7, 21, 0.94), 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 24px rgba(106, 211, 255, 0.2);
  filter: none;
}

.world-copy__lead {
  color: rgba(232, 244, 255, 0.84);
  text-shadow: 0 2px 18px rgba(0, 5, 18, 0.96), 0 1px 2px rgba(0, 0, 0, 0.92);
}

.world-card {
  --portal-width: clamp(142px, 12.2vw, 188px);
  z-index: 6;
  border-radius: 20px;
}

.world-card--one,
.world-card--six {
  top: 31%;
  right: auto;
  bottom: auto;
  left: 3%;
}

.world-card--two,
.world-card--seven {
  top: 61%;
  right: auto;
  bottom: auto;
  left: 7%;
}

.world-card--three,
.world-card--eight {
  top: 31%;
  right: 3%;
  bottom: auto;
  left: auto;
}

.world-card--four,
.world-card--nine {
  top: 61%;
  right: 7%;
  bottom: auto;
  left: auto;
}

.world-card--five,
.world-card--ten {
  top: auto;
  right: auto;
  bottom: 14%;
  left: calc(50% - clamp(66px, 5.5vw, 85px));
  display: block;
  --portal-width: clamp(132px, 11vw, 170px);
  --portal-ratio: 1 / 1;
}

.world-card--six { --card-rotate: 3deg; --portal-glow: rgba(255, 164, 90, 0.22); }
.world-card--seven { --card-rotate: -2deg; --portal-ratio: 5 / 4; --portal-glow: rgba(91, 204, 255, 0.22); }
.world-card--eight { --card-rotate: -3deg; --portal-ratio: 5 / 4; --portal-glow: rgba(255, 137, 120, 0.2); }
.world-card--nine { --card-rotate: 2.5deg; --portal-glow: rgba(111, 201, 255, 0.22); }
.world-card--ten { --card-rotate: 1.5deg; --portal-glow: rgba(255, 116, 68, 0.24); }

.world-note {
  bottom: 2.1vh;
}

.final-brand {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.final-brand > img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(2, 10, 22, 0.3);
}

.final-brand > b {
  font-size: clamp(27px, 2.2vw, 32px);
}

.store-button {
  justify-content: center;
  width: 184px;
  min-height: 56px;
  padding: 8px 12px;
  gap: 9px;
}

.store-button span {
  min-width: 104px;
}

@media (max-width: 767px) {
  .story-copy--post {
    top: 47%;
    left: 50%;
    width: calc(100% - 42px);
    transform: translate3d(-50%, -50%, 0);
  }

  .story-copy--post h2 {
    font-size: clamp(38px, 11.2vw, 54px);
    line-height: 1.42;
  }

  .feed-phone--reference {
    width: min(86vw, 350px);
    border-radius: 43px;
  }

  .feed-reference-screen {
    border-radius: 36px;
  }

  .world-copy {
    top: 7.8vh;
    width: calc(100% - 36px);
  }

  .world-copy h2 {
    margin-bottom: 13px;
    font-size: clamp(30px, 9.2vw, 42px);
    line-height: 1.38;
  }

  .world-copy__lead {
    font-size: 10px;
    line-height: 1.85;
    letter-spacing: 0.055em;
  }

  .earth-wrap {
    top: 25%;
    width: min(78vw, 330px);
    height: min(78vw, 330px);
  }

  .earth-label {
    bottom: 2.5%;
    padding: 6px 9px;
    font-size: 7.4px;
    letter-spacing: 0.08em;
  }

  .world-card {
    --portal-width: min(26vw, 104px);
    width: var(--portal-width);
    border-radius: 15px;
  }

  .world-card--one,
  .world-card--six { top: 34%; left: 5px; }

  .world-card--two,
  .world-card--seven { top: 60%; left: 7px; }

  .world-card--three,
  .world-card--eight { top: 36%; right: 5px; }

  .world-card--four,
  .world-card--nine { top: 62%; right: 7px; }

  .world-card--five,
  .world-card--ten {
    bottom: 16%;
    left: calc(50% - min(12vw, 47px));
    display: block;
    --portal-width: min(24vw, 94px);
  }

  .world-note {
    bottom: 1.9vh;
    width: calc(100% - 40px);
    font-size: 9px;
  }

  .final-brand {
    padding: 7px 13px 7px 7px;
  }

  .final-brand > img {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }

  .final-brand > b {
    font-size: 26px;
  }

  .store-actions {
    width: min(210px, 69vw);
  }

  .store-button {
    width: 100%;
    min-height: 54px;
    padding-right: 11px;
    padding-left: 11px;
  }
}

/* The network resolves into one shared sky: ten real posts orbiting one Earth. */
.world-card {
  transition:
    top 760ms var(--ease-out),
    right 760ms var(--ease-out),
    bottom 760ms var(--ease-out),
    left 760ms var(--ease-out),
    width 760ms var(--ease-out),
    box-shadow 760ms var(--ease-out);
}

.world-stage.is-world-complete .earth-photo {
  border-color: rgba(120, 215, 255, 0.34);
  box-shadow:
    0 0 0 1px rgba(110, 205, 255, 0.08),
    0 0 120px rgba(47, 143, 255, 0.28),
    0 42px 110px rgba(0, 0, 0, 0.52);
}

.world-stage.is-world-complete .earth-photo::after {
  background:
    radial-gradient(circle at 50% 25%, transparent 26%, rgba(2, 8, 18, 0.08) 55%, rgba(1, 4, 10, 0.7) 100%),
    linear-gradient(180deg, transparent 38%, rgba(1, 5, 13, 0.2) 68%, rgba(1, 5, 13, 0.72));
}

.world-stage.is-world-complete .world-stage__grid {
  opacity: calc(var(--world-gather, 0) * 0.62);
  filter: drop-shadow(0 0 28px rgba(81, 189, 255, 0.28));
}

.world-stage.is-world-complete .earth-orbit {
  border-color: rgba(128, 218, 255, 0.34);
  box-shadow: 0 0 42px rgba(73, 185, 255, 0.12);
}

.world-stage.is-world-complete .world-card {
  display: block;
  --portal-width: clamp(102px, 8.6vw, 136px);
  --portal-ratio: 1 / 1;
  border-radius: 18px;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.42),
    0 0 36px var(--portal-glow, rgba(100, 190, 255, 0.2));
}

.world-stage.is-world-complete .world-card--one {
  top: 18%; right: auto; bottom: auto; left: 3%; --card-rotate: -3deg;
}
.world-stage.is-world-complete .world-card--two {
  top: 42%; right: auto; bottom: auto; left: 2%; --card-rotate: 2deg;
}
.world-stage.is-world-complete .world-card--three {
  top: 66%; right: auto; bottom: auto; left: 5%; --card-rotate: -1.5deg;
}
.world-stage.is-world-complete .world-card--four {
  top: 18%; right: 3%; bottom: auto; left: auto; --card-rotate: 3deg;
}
.world-stage.is-world-complete .world-card--five {
  top: 42%; right: 2%; bottom: auto; left: auto; --card-rotate: -2deg;
}
.world-stage.is-world-complete .world-card--six {
  top: 66%; right: 5%; bottom: auto; left: auto; --card-rotate: 1.5deg;
}
.world-stage.is-world-complete .world-card--seven {
  top: 13%; right: auto; bottom: auto; left: 20%; --card-rotate: 2deg;
}
.world-stage.is-world-complete .world-card--eight {
  top: 13%; right: 20%; bottom: auto; left: auto; --card-rotate: -2deg;
}
.world-stage.is-world-complete .world-card--nine {
  top: auto; right: auto; bottom: 8%; left: 24%; --card-rotate: -1.5deg;
}
.world-stage.is-world-complete .world-card--ten {
  top: auto; right: 24%; bottom: 8%; left: auto; --card-rotate: 1.5deg;
}

.world-stage.is-world-complete .world-note {
  bottom: 3.2vh;
}

.world-stage.is-world-complete .world-note strong {
  justify-self: center;
  padding: 10px 17px;
  border: 1px solid rgba(129, 211, 255, 0.22);
  border-radius: 999px;
  background: rgba(3, 14, 30, 0.7);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), 0 0 30px rgba(65, 180, 255, 0.1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

@media (max-width: 767px) {
  .world-stage.is-world-complete .earth-wrap {
    top: 20%;
  }

  .world-stage.is-world-complete .world-card {
    --portal-width: min(18.8vw, 74px);
    width: var(--portal-width);
    border-radius: 12px;
  }

  .world-stage.is-world-complete .world-card--one {
    top: 19%; right: auto; bottom: auto; left: 1%; --card-rotate: -3deg;
  }
  .world-stage.is-world-complete .world-card--two {
    top: 35%; right: auto; bottom: auto; left: 0; --card-rotate: 2deg;
  }
  .world-stage.is-world-complete .world-card--three {
    top: 61%; right: auto; bottom: auto; left: 22%; --card-rotate: -2deg;
  }
  .world-stage.is-world-complete .world-card--four {
    top: 19%; right: 1%; bottom: auto; left: auto; --card-rotate: 3deg;
  }
  .world-stage.is-world-complete .world-card--five {
    top: 35%; right: 0; bottom: auto; left: auto; --card-rotate: -2deg;
  }
  .world-stage.is-world-complete .world-card--six {
    top: 61%; right: 22%; bottom: auto; left: auto; --card-rotate: 2deg;
  }
  .world-stage.is-world-complete .world-card--seven {
    top: 49%; right: auto; bottom: auto; left: 5%; --card-rotate: -2.5deg;
  }
  .world-stage.is-world-complete .world-card--eight {
    top: 49%; right: 5%; bottom: auto; left: auto; --card-rotate: 2.5deg;
  }
  .world-stage.is-world-complete .world-card--nine {
    top: 74%; right: auto; bottom: auto; left: 8%; --card-rotate: -2deg;
  }
  .world-stage.is-world-complete .world-card--ten {
    top: 74%; right: 8%; bottom: auto; left: auto; --card-rotate: 2deg;
  }

  .world-stage.is-world-complete .world-note {
    bottom: 1.7vh;
    width: calc(100% - 30px);
  }

  .world-stage.is-world-complete .world-note strong {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.05em;
  }
}

/* Keep these production overrides last: later legacy scene rules must not
   displace the visual-viewport fit or flatten the Live Sky Atlas layers. */
.world-stage {
  background:
    radial-gradient(circle at 50% 48%, rgba(26, 102, 173, 0.22), transparent 34%),
    linear-gradient(180deg, #06142c 0%, #030817 55%, #07162d 100%);
}

.earth-wrap {
  isolation: isolate;
}

.earth-photo,
.world-stage.is-world-complete .earth-photo {
  z-index: 1;
  border-color: rgba(130, 215, 255, 0.28);
  background: #01040a;
  box-shadow:
    0 0 0 1px rgba(108, 206, 255, 0.07),
    0 0 94px rgba(51, 168, 255, 0.24),
    0 38px 110px rgba(0, 0, 0, 0.56);
}

.earth-photo img {
  filter: saturate(0.72) contrast(1.14) brightness(0.64) hue-rotate(-5deg);
  transform: scale(1.06);
}

#earth-canvas {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: 50%;
  opacity: calc(0.55 + var(--world-network, 0) * 0.45);
  mix-blend-mode: screen;
}

.earth-orbit,
.world-stage.is-world-complete .earth-orbit {
  z-index: 6;
  border-color: rgba(127, 216, 255, calc(0.15 + var(--world-network, 0) * 0.28));
  box-shadow: 0 0 34px rgba(81, 191, 255, calc(var(--world-network, 0) * 0.18));
}

.earth-label {
  z-index: 8;
  border-color: rgba(121, 220, 255, 0.42);
  background: rgba(2, 13, 30, 0.82);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.34), 0 0 28px rgba(77, 198, 255, 0.14);
}

.world-card,
.world-stage.is-world-complete .world-card {
  border: 1px solid rgba(148, 220, 255, 0.2);
  background: rgba(4, 15, 32, 0.8);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 34px var(--portal-glow, rgba(91, 190, 255, 0.16));
}

@media (max-width: 767px) {
  .feed-phone--reference {
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(86vw, calc((100dvh - 92px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 0.46));
    max-width: 350px;
    height: auto;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    transform: translate3d(-50%, var(--feed-y, 0px), 0) scale(var(--feed-scale, 1));
    transform-origin: 50% 50%;
  }

  .world-live {
    top: 74px;
    right: 14px;
    left: auto;
  }

  .earth-wrap {
    top: 27%;
    width: min(78vw, 322px);
    height: min(78vw, 322px);
  }

  .world-stage.is-world-complete .earth-wrap {
    top: 25%;
    width: min(72vw, 296px);
    height: min(72vw, 296px);
  }

  .world-stage.is-world-complete .world-card {
    --portal-width: min(20vw, 78px);
  }
}

/* 2026-08-23 — Ten real, full-frame community skies. */
.story-scroll--world {
  height: 820vh;
  background: #020713;
}

.world-stage--chapters {
  isolation: isolate;
  overflow: hidden;
  background: #020713;
}

.world-stage--chapters::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 4, 13, 0.24) 0%, transparent 31%, transparent 56%, rgba(0, 4, 13, 0.82) 100%),
    linear-gradient(90deg, rgba(0, 4, 13, 0.34), transparent 50%, rgba(0, 4, 13, 0.1));
  content: "";
  pointer-events: none;
}

.world-stage--real-skies::before {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 4vh, 52px);
  left: clamp(24px, 4vw, 64px);
  color: rgba(236, 247, 255, 0.72);
  content: "10 REAL SKIES / SKYSHARE";
  font: 600 0.66rem/1 var(--font-sans);
  letter-spacing: 0.24em;
  pointer-events: none;
}

.world-chapter {
  --chapter-opacity: 0;
  --chapter-scale: 1.035;
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: var(--chapter-opacity);
  pointer-events: none;
  transform: scale(var(--chapter-scale));
  transform-origin: 50% 52%;
  transition: visibility 0s linear 420ms;
  visibility: hidden;
  will-change: opacity, transform;
}

.world-chapter.is-active {
  transition-delay: 0s;
  visibility: visible;
}

.world-chapter__ambient,
.world-chapter__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.world-chapter__ambient {
  object-fit: cover;
  filter: blur(34px) brightness(0.55) saturate(1.18);
  transform: scale(1.13);
}

.world-chapter__visual {
  z-index: 1;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.03);
}

.world-chapter__copy {
  position: absolute;
  z-index: 3;
  bottom: clamp(54px, 8vh, 104px);
  left: clamp(28px, 6.5vw, 108px);
  width: min(760px, calc(100% - 56px));
  color: #fff;
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.82);
}

.world-chapter__copy p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: rgba(214, 236, 255, 0.82);
  font: 600 0.74rem/1.2 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.world-chapter__copy p span {
  color: #75dcff;
  font-variant-numeric: tabular-nums;
}

.world-chapter__copy h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.55rem, 5.5vw, 6rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.world-chapter__copy small {
  display: block;
  max-width: 620px;
  margin-top: 18px;
  color: rgba(238, 246, 255, 0.76);
  font: 400 clamp(0.86rem, 1.4vw, 1.05rem)/1.85 var(--font-sans);
  letter-spacing: 0.05em;
}

.world-chapter__copy--final h3 {
  font-size: clamp(3.3rem, 7.2vw, 7.8rem);
}

.world-chapter-nav {
  position: absolute;
  z-index: 4;
  right: clamp(18px, 3vw, 46px);
  bottom: clamp(26px, 4vh, 52px);
  display: flex;
  gap: 9px;
}

.world-chapter-nav i {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: transparent;
  transition: width 300ms ease, border-color 300ms ease, background 300ms ease;
}

.world-chapter-nav i.is-active {
  width: 28px;
  border-color: #7ce5ff;
  border-radius: 8px;
  background: #7ce5ff;
  box-shadow: 0 0 18px rgba(124, 229, 255, 0.54);
}

/* Camera and preview are mutually exclusive, matching the actual app states. */
.capture-stage:not(.is-preview-mode) .capture-real-screen--preview,
.capture-stage.is-preview-mode .capture-real-screen--camera {
  opacity: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

.capture-stage:not(.is-preview-mode) .capture-real-screen--camera,
.capture-stage.is-preview-mode .capture-real-screen--preview {
  pointer-events: auto;
  visibility: visible;
}

.phone--capture .camera-tabs {
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 26.5cqw;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 2.4cqw 1.4cqw 4.8cqw;
  background: #05050e;
  overflow: hidden;
}

.phone--capture .camera-tabs > span {
  box-sizing: border-box;
  min-width: 0;
  grid-template-rows: 7.8cqw 3.5cqw;
  align-content: start;
  gap: 0.35cqw;
}

.phone--capture .camera-tabs > span::before {
  top: -2.1cqw;
  width: 14.5cqw;
  height: 14.5cqw;
}

.phone--capture .camera-tabs svg {
  width: 5.8cqw;
  height: 5.8cqw;
}

.phone--capture .camera-tabs small {
  max-width: 100%;
  font-size: 2.65cqw;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .story-scroll--world {
    height: 800vh;
  }

  .world-stage--real-skies::before {
    top: 84px;
    left: 20px;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
  }

  .world-chapter__copy {
    right: 24px;
    bottom: 68px;
    left: 24px;
    width: auto;
  }

  .world-chapter__copy p {
    margin-bottom: 10px;
    font-size: 0.65rem;
  }

  .world-chapter__copy h3 {
    font-size: clamp(1.85rem, 8.6vw, 3rem);
    line-height: 1.14;
  }

  .world-chapter__copy--final h3 {
    font-size: clamp(2.15rem, 10.2vw, 3.55rem);
  }

  .world-chapter__copy small {
    max-width: 32em;
    margin-top: 12px;
    font-size: 0.76rem;
    line-height: 1.75;
  }

  .world-chapter-nav {
    right: 20px;
    bottom: 28px;
  }

  .phone--capture {
    top: calc(72px + env(safe-area-inset-top, 0px) + 8px);
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(86vw, 350px, calc((100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 0.46));
    height: auto;
    max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    aspect-ratio: 414 / 900;
    transform: translate3d(-50%, var(--phone-y, 0px), 0) scale(var(--phone-scale, 1));
    transform-origin: 50% 50%;
  }

  .phone--capture .phone__screen {
    inset: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-chapter {
    transform: none !important;
    transition: none;
  }
}

/* World bridge: a short conceptual hand-off into the ten real skies. */
.story-scroll--world {
  height: 900vh;
}

.world-stage--real-skies {
  --bridge-opacity: 1;
  --bridge-network: 0;
  --bridge-focus: 0;
  --bridge-y: 0px;
  --gallery-opacity: 0;
  background: #020713;
}

.world-stage--real-skies::before {
  content: none;
}

.world-bridge {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  color: #f4f9ff;
  opacity: var(--bridge-opacity);
  transform: translate3d(0, var(--bridge-y), 0);
  background:
    radial-gradient(circle at 53% 48%, rgba(35, 142, 213, 0.28), transparent 25%),
    radial-gradient(circle at 84% 18%, rgba(123, 87, 205, 0.23), transparent 33%),
    radial-gradient(circle at 13% 70%, rgba(15, 112, 167, 0.18), transparent 30%),
    linear-gradient(132deg, #020b1c 0%, #06152e 46%, #100d2a 100%);
  pointer-events: none;
  will-change: opacity, transform;
}

.world-bridge::before,
.world-bridge::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.world-bridge::before {
  opacity: 0.58;
  background-image:
    radial-gradient(circle, rgba(220, 245, 255, 0.85) 0 0.8px, transparent 1.15px),
    radial-gradient(circle, rgba(144, 214, 255, 0.58) 0 0.7px, transparent 1.05px),
    radial-gradient(circle, rgba(255, 255, 255, 0.48) 0 0.65px, transparent 1px);
  background-position: 0 0, 31px 43px, 74px 18px;
  background-size: 89px 89px, 137px 137px, 181px 181px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.76) 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.76) 72%, transparent 100%);
}

.world-bridge::after {
  z-index: 7;
  background:
    linear-gradient(180deg, rgba(1, 5, 15, 0.38), transparent 21%, transparent 72%, rgba(1, 5, 15, 0.72)),
    linear-gradient(90deg, rgba(1, 5, 15, 0.34), transparent 34%, transparent 70%, rgba(1, 5, 15, 0.22));
}

.world-bridge__copy {
  position: absolute;
  z-index: 8;
  top: clamp(96px, 13vh, 146px);
  left: clamp(42px, 7vw, 112px);
  width: min(720px, 50vw);
}

.world-bridge__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: #7bdff5;
  font: 600 0.69rem/1 var(--font-sans);
  letter-spacing: 0.3em;
}

.world-bridge__eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54e7cc;
  box-shadow: 0 0 0 7px rgba(84, 231, 204, 0.09), 0 0 18px rgba(84, 231, 204, 0.76);
}

.world-bridge__copy h2 {
  margin: 0;
  color: #f8fbff;
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 4.1vw, 5.6rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.055em;
  text-wrap: balance;
  text-shadow: 0 10px 50px rgba(0, 0, 0, 0.38);
}

.world-bridge__copy h2 em {
  color: transparent;
  font-style: normal;
  background: linear-gradient(102deg, #f5fbff 6%, #8fddff 48%, #d9b1ff 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.world-bridge__lead {
  margin: 28px 0 0;
  color: rgba(220, 236, 250, 0.7);
  font: 400 clamp(0.88rem, 1.2vw, 1.05rem)/1.95 var(--font-sans);
  letter-spacing: 0.075em;
}

.world-bridge__routes {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.world-bridge__routes path {
  fill: none;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--bridge-network));
  vector-effect: non-scaling-stroke;
  opacity: 1;
}

.world-bridge__route--arrival {
  stroke: url("#world-route-arrival");
  filter: drop-shadow(0 0 4px rgba(67, 205, 255, 0.9)) drop-shadow(0 0 11px rgba(89, 128, 255, 0.55));
}

.world-bridge__route--sunset {
  stroke: url("#world-route-sunset");
  filter: drop-shadow(0 0 4px rgba(255, 118, 111, 0.92)) drop-shadow(0 0 12px rgba(255, 190, 79, 0.54));
}

.world-bridge__route--moon {
  stroke: url("#world-route-moon");
  filter: drop-shadow(0 0 4px rgba(117, 137, 255, 0.92)) drop-shadow(0 0 12px rgba(182, 117, 255, 0.52));
}

.world-bridge__route--rain {
  stroke: url("#world-route-rain");
  filter: drop-shadow(0 0 4px rgba(76, 153, 255, 0.9)) drop-shadow(0 0 11px rgba(67, 213, 255, 0.5));
}

.world-bridge__route--dawn {
  stroke: url("#world-route-dawn");
  filter: drop-shadow(0 0 4px rgba(76, 228, 186, 0.9)) drop-shadow(0 0 12px rgba(255, 205, 82, 0.5));
}

.world-bridge__source,
.world-bridge__teaser {
  position: absolute;
  z-index: 6;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(142, 220, 255, 0.28);
  border-radius: 26px;
  background: rgba(4, 13, 29, 0.82);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52), 0 0 38px rgba(75, 184, 255, 0.13);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  aspect-ratio: 4 / 3;
}

.world-bridge__source {
  bottom: clamp(62px, 8vh, 90px);
  left: clamp(42px, 7vw, 112px);
  width: clamp(190px, 18vw, 270px);
  padding: 0;
  transform: translate3d(calc(var(--bridge-focus) * 36px), calc(var(--bridge-focus) * -12px), 0) rotate(-2.5deg);
}

.world-bridge__source img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: inherit;
  object-fit: cover;
}

.world-bridge__globe {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 53%;
  width: min(49vw, 690px);
  aspect-ratio: 1;
  border: 1px solid rgba(139, 223, 255, 0.16);
  border-radius: 50%;
  opacity: calc(0.78 + var(--bridge-network) * 0.22);
  transform: translate(-50%, -42%) scale(calc(0.9 + var(--bridge-network) * 0.1));
  background:
    radial-gradient(circle at 48% 46%, rgba(39, 126, 188, 0.22), transparent 42%),
    radial-gradient(circle, rgba(5, 21, 46, 0.3), rgba(2, 8, 22, 0.82) 72%);
  box-shadow: inset 0 0 70px rgba(59, 170, 232, 0.08), 0 0 92px rgba(55, 158, 231, 0.1);
  will-change: opacity, transform;
}

#earth-canvas.world-bridge__canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 1;
  mix-blend-mode: screen;
}

.world-bridge__globe::before,
.world-bridge__globe::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 111%;
  height: 31%;
  border: 1px solid rgba(111, 213, 255, 0.23);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%) rotate(-14deg);
}

.world-bridge__globe::after {
  width: 104%;
  height: 46%;
  opacity: 0.55;
  transform: translate(-50%, -50%) rotate(31deg);
}

.world-bridge__globe > span {
  position: absolute;
  z-index: 5;
  bottom: 8%;
  left: 50%;
  padding: 10px 16px;
  border: 1px solid rgba(116, 219, 255, 0.28);
  border-radius: 999px;
  color: rgba(218, 241, 255, 0.72);
  background: rgba(3, 15, 34, 0.75);
  font: 600 0.58rem/1 var(--font-sans);
  letter-spacing: 0.22em;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.34);
}

.world-bridge__pulse {
  position: absolute;
  z-index: 5;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(235, 253, 255, 0.9);
  border-radius: 50%;
  background: #87e7ff;
  box-shadow: 0 0 0 9px rgba(118, 222, 255, 0.08), 0 0 22px rgba(118, 222, 255, 0.82);
  opacity: var(--bridge-network);
}

.world-bridge__pulse--one {
  top: 34%;
  left: 64%;
}

.world-bridge__pulse--two {
  top: 65%;
  left: 34%;
}

.world-bridge__teaser {
  width: clamp(150px, 15vw, 220px);
  padding: 0;
}

.world-bridge__teaser img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: inherit;
  object-fit: cover;
}

.world-bridge__teaser--one {
  top: 14%;
  right: 7%;
  transform: rotate(3deg) translate3d(calc(var(--bridge-focus) * -13vw), calc(var(--bridge-focus) * 19vh), 0) scale(calc(1 + var(--bridge-focus) * 1.35));
  transform-origin: 50% 50%;
}

.world-bridge__teaser--two {
  top: 47%;
  right: 3%;
  transform: rotate(-2.5deg);
}

.world-bridge__teaser--three {
  right: 18%;
  bottom: 6%;
  transform: rotate(2deg);
}

.world-bridge__teaser--four {
  top: 48%;
  left: 3%;
  transform: rotate(2.5deg);
}

.world-bridge__next {
  position: absolute;
  z-index: 8;
  right: clamp(26px, 4vw, 62px);
  bottom: clamp(26px, 4vh, 48px);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(213, 235, 249, 0.62);
  font: 600 0.61rem/1 var(--font-sans);
  letter-spacing: 0.24em;
}

.world-bridge__next span {
  color: #7de6ff;
}

.world-bridge__next i {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, #75ddf8, transparent);
}

.world-chapter {
  opacity: calc(var(--chapter-opacity) * var(--gallery-opacity));
}

.world-chapter__index {
  position: absolute;
  z-index: 4;
  bottom: clamp(42px, 6vh, 78px);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 9px;
  color: rgba(240, 249, 255, 0.86);
  font: 600 0.7rem/1 var(--font-sans);
  letter-spacing: 0.25em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.84);
  transform: translateX(-50%);
}

.world-chapter__index span {
  color: #80e3ff;
  font-variant-numeric: tabular-nums;
}

.world-chapter__index small {
  color: rgba(235, 246, 255, 0.76);
  font: inherit;
  font-size: 0.61rem;
}

.world-chapter-nav {
  opacity: var(--gallery-opacity);
}

@media (max-width: 767px) {
  .story-scroll--world {
    height: 880vh;
  }

  .world-bridge__copy {
    top: calc(86px + env(safe-area-inset-top, 0px));
    right: 20px;
    left: 20px;
    width: auto;
    text-align: center;
  }

  .world-bridge__eyebrow {
    justify-content: center;
    margin-bottom: 14px;
    font-size: 0.57rem;
    letter-spacing: 0.23em;
  }

  .world-bridge__copy h2 {
    font-size: clamp(1.9rem, 8.2vw, 2.2rem);
    line-height: 1.14;
    letter-spacing: -0.055em;
  }

  .world-bridge__lead {
    margin-top: 14px;
    font-size: 0.74rem;
    line-height: 1.7;
    letter-spacing: 0.035em;
  }

  .world-bridge__globe {
    top: 52%;
    left: 50%;
    width: min(94vw, 520px);
    transform: translate(-50%, -40%) scale(calc(0.91 + var(--bridge-network) * 0.09));
  }

  .world-bridge__source {
    bottom: 60px;
    left: 14px;
    width: 116px;
    padding: 0;
    border-radius: 17px;
    transform: rotate(-3deg);
  }

  .world-bridge__source img {
    border-radius: inherit;
  }

  .world-bridge__teaser {
    width: 104px;
    padding: 0;
    border-radius: 16px;
  }

  .world-bridge__teaser img {
    border-radius: inherit;
  }

  .world-bridge__teaser--one {
    top: auto;
    right: 14px;
    bottom: 72px;
    transform: rotate(3deg) translate3d(calc(var(--bridge-focus) * -28vw), calc(var(--bridge-focus) * -18vh), 0) scale(calc(1 + var(--bridge-focus) * 2.25));
  }

  .world-bridge__teaser--two {
    top: 45%;
    right: -28px;
    width: 94px;
    opacity: calc(0.5 + var(--bridge-network) * 0.5);
  }

  .world-bridge__teaser--three {
    top: 61%;
    right: 24%;
    bottom: auto;
    display: block;
    width: 88px;
    transform: rotate(2deg);
  }

  .world-bridge__teaser--four {
    top: 48%;
    left: -24px;
    width: 96px;
    transform: rotate(2.5deg);
  }

  .world-bridge__next {
    right: 16px;
    bottom: 25px;
    font-size: 0.51rem;
    letter-spacing: 0.17em;
  }

  .world-bridge__routes {
    opacity: 0.9;
  }

  .world-chapter__index {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    gap: 7px;
    font-size: 0.62rem;
  }

  .world-chapter__index small {
    font-size: 0.52rem;
  }

  .world-chapter-nav {
    right: 16px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    gap: 5px;
  }

  .world-chapter-nav i {
    width: 5px;
    height: 5px;
  }

  .world-chapter-nav i.is-active {
    width: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-bridge__source,
  .world-bridge__teaser {
    transform: none;
  }
}

/* 2026-09-07 — Reference Earth scene and continuous photo expansion. */
.world-stage--real-skies {
  --sky-header: 76px;
  --sky-zoom: 0;
  --network-draw: 1;
  height: 100svh;
  min-height: 0;
}
.world-stage--real-skies::after { content: none; }
.world-bridge--earth {
  inset: var(--sky-header) 0 0;
  transform: none;
  background: #020915;
  pointer-events: auto;
  opacity: var(--bridge-opacity, 1);
}
.world-bridge--earth::before,
.world-bridge--earth::after { content: none; }
.world-bridge__earth-image { position: absolute; inset: 0; }
.world-bridge__earth-image img {
  position:absolute; top:-10%;
  width: 100%; height: 112%; object-fit: fill;
  /* Asset composition already includes the large curved horizon. */
}
.world-bridge--earth .world-bridge__copy {
  top: 13.7%; left: 4.8%; width: 39%; z-index: 4;
}
.world-bridge--earth .world-bridge__copy h2 {
  font-family: var(--font-story);
  font-size: clamp(28px, 3.83vw, 86px);
  font-weight: 500; line-height: 1.22; letter-spacing: -0.035em;
  white-space: nowrap; text-wrap: initial;
}
.world-bridge--earth .world-bridge__copy h2 em {
  background-image: linear-gradient(105deg, #f6f7fc 15%, #8cdff7 46%, #8dc9fa 72%, #bfa4f5);
}
.world-bridge--earth .world-bridge__lead {
  margin-top: 24px; color: #e2dfeb;
  font: 500 clamp(13px, 1.32vw, 27px)/1.8 var(--font-story);
  letter-spacing: .22em;
}
.sky-card {
  position: absolute; z-index: 3; display: block; margin: 0; padding: 0;
  border: 1px solid rgba(163,215,242,.6); border-radius: clamp(15px,1.55vw,30px);
  overflow: hidden; background: #051426; color: #fff;
  box-shadow: 0 12px 35px #010b1d55, 0 0 24px #68b9ec1f;
  isolation: isolate; text-align: left; container-type:size;
}
.sky-card--river { left:44%; top:8%; width:16.3%; height:24.7%; cursor:zoom-in; }
.sky-card--auckland { left:72.5%; top:12.3%; width:18%; height:28%; transform:rotate(-.8deg); }
.sky-card--vancouver { left:15.35%; top:47%; width:20.1%; height:29%; transform:rotate(-1deg); }
.sky-card--nairobi { left:51.2%; top:62%; width:18.4%; height:27%; transform:rotate(.4deg); }
.sky-card--atacama { left:80.25%; top:48.3%; width:16.7%; height:27.6%; transform:rotate(-1.3deg); }
.sky-card img, .sky-card__landscape { width:100%; height:100%; display:block; object-fit:cover; }
.sky-card__landscape {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max(100cqw, 133.333cqh); height:max(75cqw, 100cqh);
  background-size:200% 200%;
}
.sky-card--auckland .sky-card__landscape { background-position:0 0; }
.sky-card--vancouver .sky-card__landscape { background-position:100% 0; }
.sky-card--nairobi .sky-card__landscape { background-position:0 100%; }
.sky-card--atacama .sky-card__landscape { background-position:100% 100%; }
.sky-card__caption {
  position:absolute; inset:auto 0 0; display:grid; gap:4px;
  padding:30px 18px 14px;
  background:linear-gradient(transparent, #020611b3 60%, #020611dc);
  color:#fff; font:400 clamp(10px,.94vw,20px)/1.2 var(--font-jp); letter-spacing:.04em;
}
.sky-card__caption b { font-weight:500; }
.sky-card__caption > span { color:#e5e8ee; font-size:.9em; }
.sky-card__expand {
  position:absolute; top:12px; right:12px; width:26px; height:26px;
  display:grid; place-items:center; border-radius:50%; background:#06132480;
  opacity:0; transition:opacity .2s;
}
.sky-card--river:hover .sky-card__expand, .sky-card--river:focus-visible .sky-card__expand { opacity:1; }
.sky-card--river:focus-visible { outline:3px solid #9aeaff; outline-offset:5px; }
.sky-network { position:absolute; inset:0; width:100%; height:100%; z-index:2; overflow:visible; pointer-events:none; }
.sky-network__paths path {
  fill:none; stroke:#b3dfff; stroke-width:1.2; vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round; shape-rendering:geometricPrecision;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--network-draw));
  filter:drop-shadow(0 0 4px #68bcff);
}
.sky-network__nodes circle, .sky-network__travellers circle { fill:#f3ffff; filter:drop-shadow(0 0 6px #53d9ff) drop-shadow(0 0 12px #53d9ff); }
.sky-network__nodes .is-warm { fill:#fff7ee; filter:drop-shadow(0 0 6px #ffb082) drop-shadow(0 0 12px #ffb082); }
.sky-network__travellers { opacity:var(--network-draw); }
.sky-network-note {
  position:absolute; left:3.9%; bottom:8.5%; margin:0; color:#aab6c3;
  font:400 clamp(8px,.68vw,15px)/1.8 var(--font-latin); letter-spacing:.26em;
}
.sky-network-note i { display:block; width:74px; height:1px; margin-top:23px; background:linear-gradient(90deg,#95d9f2,transparent); }
.world-stage--real-skies .world-chapter {
  top:var(--sky-header); transform:none; transition:none; z-index:5;
  opacity:var(--chapter-opacity,0);
}
.world-stage--real-skies .world-chapter__visual { filter:none; transform:scale(var(--chapter-scale,1)); }
.world-stage--real-skies .world-chapter--look { will-change:clip-path; background:#020713; }
.world-stage--real-skies .world-chapter--look .world-chapter__ambient { opacity:var(--sky-zoom); }
.world-stage--real-skies .world-chapter--look .world-chapter__visual {
  transform:translate3d(var(--photo-x,0px),var(--photo-y,0px),0) scale(var(--photo-scale,1));
  transform-origin:center; will-change:transform;
}
.world-stage--real-skies .world-chapter--look .world-chapter__index { opacity:var(--sky-index,0); }
.world-stage--real-skies .world-chapter__index { bottom:6%; }
.world-chapter-nav { z-index:8; }
.world-chapter-nav button {
  position:relative; width:20px; height:32px; padding:0; border:0;
  background:transparent; cursor:pointer;
}
.world-chapter-nav button::after {
  position:absolute; top:13px; left:7px; content:""; width:7px; height:7px;
  border:1px solid #ffffff99; border-radius:50%; transition:background .2s;
}
.world-chapter-nav button.is-active { width:38px; }
.world-chapter-nav button.is-active::after { width:28px; left:5px; background:#7ce5ff; border-color:#7ce5ff; border-radius:9px; box-shadow:0 0 16px #7ce5ff80; }
.world-chapter-nav button:focus-visible { outline:2px solid #7ce5ff; border-radius:6px; }
.sky-return {
  position:absolute; z-index:8; top:calc(var(--sky-header) + 18px); left:24px;
  padding:10px 16px; border:1px solid #ffffff50; border-radius:24px;
  color:#fff; background:#08111d90; font:400 12px/1.3 var(--font-jp); cursor:pointer;
  backdrop-filter:blur(12px);
}
.sky-return[hidden] { display:none; }
body.is-world-visible .journey-header {
  height:76px; min-height:76px; padding-inline:3.9%;
  background:rgba(3,12,24,.91); transform:none; opacity:1; pointer-events:auto;
}
body.is-world-visible .nav-cta { background:#ffffff0a; }
@media (max-width: 767px) {
  .world-stage--real-skies { --sky-header:72px; }
  body.is-world-visible .journey-header { height:72px; min-height:72px; padding-inline:20px; }
  .world-bridge__earth-image img { top:0; height:100%; object-fit:cover; object-position:62% center; }
  .world-bridge--earth .world-bridge__copy { top:5%; left:6%; right:auto; width:88%; text-align:left; }
  .world-bridge--earth .world-bridge__copy h2 { font-size:clamp(25px,7vw,46px); line-height:1.3; }
  .world-bridge--earth .world-bridge__lead { margin-top:14px; font-size:12px; letter-spacing:.15em; }
  .sky-card--river { left:42%; top:30%; width:30%; height:19%; }
  .sky-card--auckland { left:68%; top:52%; width:28%; height:18%; }
  .sky-card--vancouver { left:4%; top:45%; width:34%; height:20%; }
  .sky-card--nairobi { left:13%; top:72%; width:35%; height:19%; }
  .sky-card--atacama { left:60%; top:76%; width:32%; height:19%; }
  .sky-card__caption { padding:20px 9px 9px; gap:3px; font-size:10px; }
  .sky-network-note { bottom:3%; left:6%; font-size:7px; line-height:1.7; }
  .sky-network-note i { display:none; }
  .world-chapter-nav { right:12px; bottom:14px; gap:0; }
  .world-chapter-nav button { width:22px; height:44px; }
  .world-chapter-nav button::after { top:19px; }
  .world-stage--real-skies .world-chapter__index { bottom:74px; }
  .sky-return { left:14px; font-size:11px; }
}
@media (max-height: 630px) and (max-width: 767px) {
  .world-bridge--earth .world-bridge__copy { top:3%; }
  .world-bridge--earth .world-bridge__copy h2 { font-size:25px; }
  .world-bridge--earth .world-bridge__lead { margin-top:7px; }
  .sky-card--river { top:33%; height:20%; }
  .sky-card__caption { font-size:9px; padding-bottom:6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-network__travellers { display:none; }
  .sky-card, .sky-card__expand { transition:none; }
  .world-stage--real-skies .world-chapter__visual { will-change:auto; }
}
html:not(.js) .world-bridge--earth { position:relative; inset:auto; min-height:calc(100svh - 72px); }
html:not(.js) .world-stage--real-skies { height:auto; padding-top:72px; }
html:not(.js) .world-chapter-nav, html:not(.js) .sky-card__expand,
html:not(.js) .sky-network { display:none; }

/* Keep image URLs in HTML; reveal only near-future animation frames in JS. */
html.js .world-stage--real-skies .world-chapter:not(.is-preloaded) { display:none; }

/* Static photo sequence for readers who do not run the story animation. */
html:not(.js) .world-stage--real-skies::after { display:none; }
html:not(.js) .world-stage--real-skies .world-chapter {
  position:relative; inset:auto; display:block; margin:24px auto;
  width:min(100%, 1200px); height:80svh; min-height:380px;
  opacity:1; visibility:visible; transform:none; transition:none;
  pointer-events:auto; will-change:auto;
}
html:not(.js) .world-stage--real-skies .world-chapter__visual {
  transform:none; will-change:auto;
}
html:not(.js) .world-stage--real-skies .world-chapter__ambient,
html:not(.js) .world-stage--real-skies .world-chapter__index { opacity:1; }

.world-bridge.is-ready .sky-card__landscape { background-image:url("../film/world-cities-20260907-seo-1200.webp"); }
[hidden][data-src] { display:none !important; }
@media(max-width:767px) { .world-bridge.is-ready .sky-card__landscape { background-image:url("../film/world-cities-20260907-seo-800.webp"); } }