/* The product's own blue screen becomes a small narrated stage. */
.story-section {
  --story-surface: #edf4fb;
  --story-light: #c6def6;
  --story-ink: #142b46;
  --story-muted: #51657b;
  --story-line: #b8c9da;
  max-width: 1440px;
  margin: 0 auto;
  padding: 112px 6% 80px;
  color: var(--story-ink);
  scroll-margin-top: 60px;
}
.hero-voice {
  position: absolute; top: 26px; left: 6%; z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 17px; border-radius: 30px;
  border: 1px solid var(--line); background: #ffffffed;
  font-size: 13px; font-weight: 550;
  transition: background 180ms ease, transform 160ms var(--ease-out);
}
.hero-voice svg { width: 19px; height: 19px; }
.hero-voice:active { transform: scale(.97); }
.story-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 42px; }
.story-heading .overline { color: var(--story-muted); }
.story-heading h2 { font-size: clamp(44px, 5.3vw, 72px); font-weight: 650; line-height: 1.04; letter-spacing: -.055em; margin-top: 20px; }
.story-heading > p { font-size: 19px; line-height: 1.5; color: var(--story-muted); padding-bottom: 5px; }
.story-stage { position: relative; height: clamp(480px, 46vw, 610px); border-radius: 24px; isolation: isolate; overflow: hidden; background: var(--story-surface); }
.story-scene { position: absolute; inset: 0; display: grid; grid-template-columns: 42% 58%; align-items: center; padding: 54px 5%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 250ms var(--ease-out), visibility 250ms; }
.story-scene.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.story-scene-copy { position: relative; z-index: 2; padding-bottom: 35px; }
.story-eyebrow { color: var(--story-muted); font-size: 11px; font-weight: 650; letter-spacing: 2px; margin-bottom: 26px; }
.story-scene h3 { font-size: clamp(52px, 6.4vw, 92px); line-height: .98; letter-spacing: -.065em; font-weight: 650; }
.story-line { display: block; opacity: 0; transform: translateY(20%); transition: transform 650ms var(--ease-out), opacity 650ms var(--ease-out); }
.story-line:nth-child(2) { transition-delay: 70ms; }
.story-scene.is-active .story-line { opacity: 1; transform: translateY(0); }
.story-accent { color: var(--blue); }
.story-caption { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; letter-spacing: -.025em; margin-top: 25px; color: var(--story-muted); opacity: 0; transform: translateY(8px); transition: opacity 650ms var(--ease-out) 140ms, transform 650ms var(--ease-out) 140ms; }
.story-scene.is-active .story-caption { opacity: 1; transform: translateY(0); }
.story-section:not(.is-in-view) .story-line, .story-section:not(.is-in-view) .story-caption { opacity: 0; transform: translateY(12px); }
.story-art { position: relative; height: 100%; min-height: 290px; display: grid; place-items: center; }
.story-art-word { position: absolute; font-size: clamp(130px, 16vw, 230px); font-weight: 800; line-height: 1; letter-spacing: -.08em; color: var(--story-light); top: 5%; left: 0; z-index: -1; }
.story-orbit { position: absolute; width: 86%; aspect-ratio: 1; border: 1px solid var(--story-line); border-radius: 50%; z-index: -1; opacity: .6; }
.story-console { width: 121%; max-width: none; margin-left: -3%; filter: drop-shadow(0 22px 14px #142b4620); transform: translateX(7%) rotate(-9deg); opacity: 0; transition: transform 900ms var(--ease-out), opacity 650ms var(--ease-out); }
.story-scene.is-active .story-console { transform: translateX(0) rotate(-9deg); opacity: 1; }
.story-art-note { position: absolute; bottom: 8%; left: 16%; font-size: 10px; letter-spacing: 1.9px; font-weight: 600; color: var(--story-muted); }
.story-stage-footer { position: absolute; bottom: 24px; left: 5%; right: 5%; display: flex; justify-content: space-between; gap: 20px; font-size: 10px; font-weight: 550; letter-spacing: 1px; color: var(--story-muted); z-index: 3; }
.story-device { background: #f2f5f8; }
.story-device .story-art-word { top: 4%; left: 6%; color: #d7e0e9; }
.story-device .story-console { transform: translateX(7%) rotate(5deg); }
.story-device.is-active .story-console { transform: translateX(0) rotate(5deg); }
.story-callout { position: absolute; top: 9%; right: 4%; display: flex; gap: 18px; align-items: center; font-size: 13px; color: var(--story-muted); background: #ffffffd9; border: 1px solid #d7e0e9; border-radius: 30px; padding: 11px 16px; }
.story-gift { background: #f1eee9; }
.story-gift .story-scene-copy { align-self: start; padding-top: 8%; }
.story-gift h3 { font-size: clamp(44px, 5.1vw, 74px); }
.story-gift-photo { position: absolute; height: 85%; width: 95%; object-fit: cover; top: 0; right: -8%; border-radius: 8px; transform: rotate(4deg); }
.story-gift .story-console { position: absolute; width: 78%; left: -8%; bottom: 2%; transform: translateY(8%) rotate(-10deg); }
.story-gift.is-active .story-console { transform: translateY(0) rotate(-10deg); }
.story-gift-sticker { position: absolute; right: 0; bottom: 2%; width: 115px; height: 115px; border-radius: 50%; display: grid; place-items: center; text-align: center; line-height: 1.2; font-size: 13px; font-weight: 700; letter-spacing: -.4px; background: var(--blue); color: white; transform: rotate(9deg); z-index: 1; }
.story-player { padding: 27px 0 0; }
.story-player-main { display: flex; align-items: center; gap: 12px; }
.story-play { display: inline-flex; align-items: center; justify-content: center; gap: 13px; background: var(--story-ink); color: white; padding: 0 23px; min-height: 52px; min-width: 245px; border-radius: 30px; font-size: 15px; font-weight: 550; transition: transform 160ms var(--ease-out), background 180ms ease; }
.story-play svg { width: 19px; height: 19px; }
.story-play:active, .story-icon-button:active { transform: scale(.97); }
.story-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 46px; min-width: 46px; height: 46px; background: transparent; border-radius: 50%; transition: background 180ms ease, transform 160ms var(--ease-out); }
.story-icon-button svg { width: 21px; height: 21px; }
.story-sound { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.story-sound input { width: 82px; height: 44px; accent-color: var(--story-ink); cursor: pointer; }
.story-clock { display: flex; align-items: center; gap: 8px; margin-left: 20px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--story-muted); min-width: 84px; justify-content: end; }
.story-timeline { height: 36px; position: relative; display: grid; align-items: center; margin-top: 10px; }
.story-track { height: 3px; background: #d9e2eb; border-radius: 3px; overflow: hidden; }
.story-track span { display: block; background: var(--blue); height: 100%; transform-origin: left; transform: scaleX(0); }
.story-timeline input { position: absolute; inset: 0; width: 100%; height: 36px; opacity: 0; margin: 0; cursor: pointer; }
.story-timeline:focus-within { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 5px; }
.story-chapters { display: flex; align-items: center; gap: 22px; }
.story-chapters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: transparent; font-size: 13px; color: var(--story-muted); }
.story-chapters button[aria-current] { font-weight: 650; color: var(--story-ink); }
.story-chapter-dot { width: 6px; height: 6px; border: 1px solid var(--story-muted); border-radius: 50%; }
.story-chapters button[aria-current] .story-chapter-dot { background: var(--blue); border-color: var(--blue); }
.story-voice-note { margin-left: auto; font-size: 12px; color: var(--story-muted); }
.story-player input:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.story-dock { position: fixed; z-index: 18; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 28px; align-items: center; padding: 12px 15px 12px 25px; background: #142b46f5; color: white; border-radius: 50px; box-shadow: 0 8px 35px #142b462b; backdrop-filter: blur(15px); }
.story-dock > div { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.story-dock > div > span { font-size: 9px; letter-spacing: 1px; color: #c6def6; }
.story-dock strong { font-size: 14px; font-weight: 550; }
.story-dock-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #ffffff18; color: white; border-radius: 30px; padding: 0 16px; min-height: 44px; white-space: nowrap; font-size: 13px; }
.story-dock-play svg { width: 17px; height: 17px; }
.story-dock button:focus-visible { outline-color: #c6def6; }
body:has(dialog[open]) .story-dock { display: none; }
.story-noscript { margin-top: 20px; }
.story-section[data-state=error] #story-status { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; margin-top: 16px; color: #9c2727; font-size: 14px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .hero-voice:hover { background: var(--surface); }
  .story-play:hover { background: var(--blue); }
  .story-icon-button:hover { background: #142b460a; }
  .story-dock .story-icon-button:hover, .story-dock-play:hover { background: #ffffff2b; }
  .story-chapters button:hover { color: var(--blue); }
}
@media (max-width: 850px) {
  .story-heading > p { font-size: 17px; }
  .story-scene { padding-left: 5%; padding-right: 5%; }
  .story-scene h3 { font-size: 64px; }
  .story-gift h3 { font-size: 48px; }
  .story-art-note { left: 5%; font-size: 9px; letter-spacing: 1px; }
  .story-callout { font-size: 11px; padding: 9px 12px; right: -3%; }
  .story-art-word { font-size: 145px; }
}
@media (max-width: 600px) {
  .hero-voice { top: 139px; left: 50%; transform: translateX(-50%); min-height: 40px; white-space: nowrap; font-size: 12px; padding: 0 13px; gap: 8px; }
  .hero-voice:active { transform: translateX(-50%) scale(.97); }
  .hero-voice svg { width: 16px; height: 16px; }
  .story-section { padding: 78px 24px 48px; scroll-margin-top: calc(60px + env(safe-area-inset-top)); }
  .story-heading { display: block; margin-bottom: 30px; }
  .story-heading h2 { font-size: 48px; }
  .story-heading > p { font-size: 17px; margin-top: 23px; }
  .story-heading > p br { display: none; }
  .story-stage { margin: 0 -24px; border-radius: 0; height: 610px; }
  .story-scene { grid-template-columns: 1fr; grid-template-rows: 48% 52%; align-items: start; padding: 36px 24px 38px; }
  .story-scene-copy { padding-bottom: 0; }
  .story-eyebrow { font-size: 10px; letter-spacing: 1.6px; margin-bottom: 18px; }
  .story-scene h3 { font-size: clamp(57px, 17vw, 74px); }
  .story-caption { font-size: 17px; line-height: 1.45; margin-top: 18px; }
  .story-art { min-height: 0; height: 100%; width: 100%; }
  .story-art-word { font-size: 130px; top: -5%; left: 10%; }
  .story-orbit { width: 72%; }
  .story-console { width: 106%; margin-left: 0; }
  .story-art-note { bottom: 2%; left: 50%; transform: translateX(-50%); font-size: 9px; white-space: nowrap; }
  .story-stage-footer { left: 24px; right: 24px; bottom: 18px; font-size: 8px; letter-spacing: .5px; }
  .story-device .story-art-word { top: -6%; left: 18%; }
  .story-callout { top: -9%; right: 0; font-size: 11px; }
  .story-gift { grid-template-rows: 45% 55%; }
  .story-gift .story-scene-copy { padding-top: 0; }
  .story-gift h3 { font-size: clamp(45px, 13.3vw, 58px); }
  .story-gift-photo { height: 92%; width: 80%; right: 0; }
  .story-gift .story-console { width: 70%; left: -7%; bottom: 2%; }
  .story-gift-sticker { width: 85px; height: 85px; right: -2%; bottom: -1%; font-size: 10px; }
  .story-player { padding-top: 23px; }
  .story-player-main { flex-wrap: wrap; gap: 4px; }
  .story-play { min-width: 210px; flex: 1 1 calc(100% - 50px); font-size: 14px; padding: 0 17px; min-height: 50px; gap: 9px; }
  .story-sound { margin-left: 0; margin-top: 5px; }
  .story-sound input { width: 72px; }
  .story-clock { margin-left: auto; }
  .story-chapters { gap: 18px; flex-wrap: wrap; }
  .story-chapters button { font-size: 12px; gap: 6px; }
  .story-voice-note { width: 100%; margin-left: 0; font-size: 11px; margin-top: -10px; }
  .story-dock { bottom: calc(89px + env(safe-area-inset-bottom)); left: 12px; right: 12px; transform: none; gap: 12px; justify-content: space-between; border-radius: 36px; padding: 8px 8px 8px 20px; }
  .story-dock-play { font-size: 12px; padding: 0 12px; gap: 6px; }
  .story-dock strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-line, .story-caption, .story-console { transform: none !important; }
  .story-section .story-scene { transition: opacity 160ms ease !important; }
  .story-section .story-line, .story-section .story-caption, .story-section .story-console { transition: opacity 160ms ease !important; }
}