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

.product-showcase { padding-top: 100px; padding-bottom: 112px; }
.product-showcase .section-head { margin-bottom: 34px; }
.story-stage { --story-duration: 9600ms; --story-ease: cubic-bezier(.2,.8,.2,1); position: relative; width: 100%; max-width: 1270px; margin: 0 auto; aspect-ratio: 16 / 9; display: grid; place-items: center; isolation: isolate; overflow: hidden; border: 1px solid #2A3038; border-radius: 22px; background: #0B0D10; box-shadow: 0 28px 85px #0008, 0 0 70px #b7f34a0a; }
.story-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 16% 45%, #b7f34a28, transparent 36%), linear-gradient(90deg, #0b0d10c9, #0b0d1040 48%, #0b0d10cc); }
.story-atmosphere { position: absolute; inset: -2%; width: 104%; height: 104%; z-index: -2; object-fit: cover; filter: blur(9px) brightness(.35) saturate(.8); transform: scale(1.035); }
.story-window { position: relative; width: 88%; border: 1px solid #333a42; border-radius: 14px; overflow: hidden; background: #14171C; box-shadow: 0 30px 90px #000b, 0 0 0 1px #ffffff0a; opacity: 1; }
.story-browser-bar { height: 37px; display: flex; align-items: center; gap: 15px; padding: 0 14px; border-bottom: 1px solid #2A3038; color: #9CA6B2; background: #14171C; font: 500 10px/1.2 "DM Sans",sans-serif; }
.story-browser-dots { display: inline-flex; gap: 5px; }
.story-browser-dots i { width: 7px; height: 7px; border-radius: 50%; background: #46505a; }
.story-browser-dots i:first-child { background: #ff665b; }.story-browser-dots i:nth-child(2) { background: #f5be4f; }.story-browser-dots i:last-child { background: #5cc86b; }
.story-browser-address { flex: 1; max-width: 31%; padding: 5px 10px; border: 1px solid #2A3038; border-radius: 5px; background: #1C2026; text-align: center; }
.story-browser-brand { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #F4F7F9; font-weight: 700; letter-spacing: .01em; }
.story-browser-brand img { border-radius: 4px; }
.story-player { position: relative; aspect-ratio: 16 / 8.5; overflow: hidden; background: #101418; }
.story-frame, .story-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-frame { object-fit: cover; object-position: center 43%; filter: brightness(.75) saturate(.86); }
.story-vignette { background: linear-gradient(180deg, #06080c55, transparent 28%, transparent 48%, #05070acd 100%); }
.story-topline { position: absolute; top: 4%; left: 4%; right: 4%; display: flex; justify-content: space-between; color: #f4f7f9a6; font-size: clamp(8px,.8vw,11px); font-weight: 800; letter-spacing: .13em; text-shadow: 0 1px 5px #000; }
.story-subtitles { position: absolute; z-index: 3; left: 8%; right: 8%; bottom: 14%; display: grid; justify-items: center; gap: 4px; text-align: center; pointer-events: none; }
.story-original, .story-translated { max-width: 100%; padding: 3px 9px; border-radius: 6px; font: 700 clamp(16px,2.05vw,28px)/1.32 "DM Sans",sans-serif; letter-spacing: -.018em; text-shadow: 0 2px 5px #000, 0 1px 1px #000; }
.story-original { color: #F4F7F9; background: #080a0b88; }
.story-word { padding: 1px 3px 2px; margin: 0 -1px; border-radius: 3px; color: inherit; background: transparent; text-shadow: inherit; }
.story-translated { color: #dbf0ff; background: #102330d9; border: 1px solid #55c8ff42; font-size: clamp(12px,1.45vw,19px); font-weight: 600; opacity: 0; transform: translateY(5px); text-shadow: 0 1px 4px #000; }
.story-controls { position: absolute; z-index: 4; bottom: 0; left: 0; right: 0; height: 9%; min-height: 26px; display: flex; align-items: center; gap: clamp(8px,1.5vw,19px); padding: 0 3%; color: #f4f7f9; background: linear-gradient(0deg,#05070be8,#05070b64); font-size: clamp(9px,.85vw,12px); font-weight: 700; }
.story-play { font-size: 14px; }.story-volume { font-size: 13px; }.story-clock { white-space: nowrap; color: #d5dce2; }
.story-track { height: 4px; flex: 1; border-radius: 8px; background: #f4f7f980; overflow: hidden; }.story-track i { display: block; width: 31%; height: 100%; border-radius: inherit; background: #B7F34A; }
.story-cc { display: grid; place-items: center; min-width: 29px; height: 21px; padding: 0 4px; border: 1px solid #ffffffa8; border-radius: 4px; background: #1C2026; color: #fff; font-size: 10px; font-weight: 800; }
.story-fullscreen { font-size: 18px; }
.story-translation-card { position: absolute; z-index: 5; right: 13%; bottom: 26%; width: min(31%, 300px); min-width: 230px; padding: clamp(11px,1.3vw,17px); border: 1px solid #3a434e; border-radius: 9px; background: #14171cf2; color: #F4F7F9; box-shadow: 0 18px 48px #000a, 0 0 0 1px #ffffff08; backdrop-filter: blur(12px); opacity: 0; transform: translateY(8px) scale(.98); transform-origin: 55% 100%; }
.story-card-title { display: flex; align-items: center; gap: 8px; color: #B7F34A; }.story-card-title strong { font-size: clamp(16px,1.5vw,20px); }.story-speaker { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #B7F34A; background: #b7f34a1b; font-size: 18px; }.story-bookmark { width: 21px; height: 21px; margin-left: auto; fill: transparent; stroke: #B7F34A; stroke-width: 1.8; stroke-linejoin: round; }
.story-phonetic { margin: 5px 0 10px 34px; color: #9CA6B2; font-size: clamp(9px,.82vw,11px); }.story-phonetic span { margin-left: 6px; color: #c4ccd4; }
.story-meaning { font-size: clamp(12px,1.05vw,15px); font-weight: 700; }.story-context { display: grid; gap: 4px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #2A3038; color: #dce5ea; font-size: clamp(10px,.89vw,12px); line-height: 1.35; }.story-context small { color: #9CA6B2; font-size: 10px; }
.story-card-footer { display: flex; align-items: center; gap: 7px; margin-top: 12px; }.story-save { position: relative; display: inline-grid; align-items: center; justify-items: center; min-height: 28px; padding: 5px 11px; border-radius: 6px; background: #B7F34A; color: #0B0D10; font-size: clamp(9px,.8vw,11px); font-weight: 800; white-space: nowrap; }.story-save-label, .story-saved-label { grid-area: 1 / 1; }.story-saved-label { display: none; }.story-save-confirm { color: #B7F34A; font-size: 9px; font-weight: 700; opacity: 0; transform: translateX(-4px); white-space: nowrap; }
.story-menu { position: absolute; z-index: 5; right: 3%; bottom: 11%; width: clamp(238px,28%,300px); padding: 10px; border: 1px solid #3b444d; border-radius: 9px; background: #14171cf7; box-shadow: 0 17px 50px #000b; color: #F4F7F9; opacity: 0; transform: translateY(8px) scale(.98); transform-origin: 90% 100%; }
.story-menu-title { display: flex; align-items: center; gap: 7px; padding: 4px 5px 8px; border-bottom: 1px solid #2A3038; font-size: 11px; }.story-menu-title img { border-radius: 4px; }
.story-menu-row { display: flex; align-items: center; gap: 9px; min-height: 29px; padding: 5px 6px; border-radius: 5px; font-size: 10px; white-space: nowrap; }.story-menu-row b { margin-left: auto; color: #9CA6B2; font-size: 9px; font-weight: 600; }.story-check { color: #B7F34A; font-size: 13px; font-weight: 800; }.story-row-icon { color: #9CA6B2; font-size: 11px; }.story-lock { font-size: 11px; }.story-menu-divider { height: 1px; margin: 5px 0; background: #2A3038; }.story-double { background: #1C2026; }.story-double b { padding: 3px 5px; border-radius: 4px; color: #0B0D10; background: #B7F34A; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.story-cursor { position: absolute; z-index: 9; left: 0; top: 0; width: 32px; height: 38px; overflow: visible; fill: #fff; stroke: #0B0D10; stroke-width: 2.3; stroke-linejoin: round; filter: drop-shadow(0 2px 2px #000b) drop-shadow(0 5px 9px #0008); pointer-events: none; opacity: 0; transform: translate3d(var(--cursor-start-x, 50px),var(--cursor-start-y, 55px),0); }

.story-stage.is-armed .story-window { animation: story-reset var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-armed .story-cursor { animation: story-cursor var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-armed .story-word { animation: story-highlight var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-armed .story-translation-card { animation: story-card var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-armed .story-bookmark { animation: story-bookmark var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-armed .story-save-label { animation: story-save-label var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-armed .story-saved-label { display: inline; animation: story-saved-label var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-armed .story-save-confirm { animation: story-confirm var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-armed .story-menu { animation: story-menu var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-armed .story-translated { animation: story-second-line var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
.story-stage.is-playing { --story-play-state: running; }

@keyframes story-reset { 0%,92% { opacity: 1; } 96% { opacity: 0; } 99.9% { opacity: 0; } 100% { opacity: 1; } }
@keyframes story-cursor {
  0%,9% { opacity: 0; transform: translate3d(var(--cursor-start-x),var(--cursor-start-y),0) scale(1); }
  10% { opacity: 1; transform: translate3d(var(--cursor-start-x),var(--cursor-start-y),0) scale(1); animation-timing-function: var(--story-ease); }
  18% { opacity: 1; transform: translate3d(var(--cursor-word-x),var(--cursor-word-y),0) scale(1); }
  19.5%,28% { transform: translate3d(var(--cursor-word-x),var(--cursor-word-y),0) scale(1); opacity: 1; }
  29% { transform: translate3d(var(--cursor-word-x),var(--cursor-word-y),0) scale(1); animation-timing-function: var(--story-ease); }
  38% { transform: translate3d(var(--cursor-save-x),var(--cursor-save-y),0) scale(1); }
  40% { transform: translate3d(var(--cursor-save-x),var(--cursor-save-y),0) scale(1); }
  41% { transform: translate3d(var(--cursor-save-x),var(--cursor-save-y),0) scale(.82); }
  42%,47% { transform: translate3d(var(--cursor-save-x),var(--cursor-save-y),0) scale(1); }
  48% { transform: translate3d(var(--cursor-save-x),var(--cursor-save-y),0) scale(1); animation-timing-function: var(--story-ease); }
  56% { transform: translate3d(var(--cursor-cc-x),var(--cursor-cc-y),0) scale(1); }
  58% { transform: translate3d(var(--cursor-cc-x),var(--cursor-cc-y),0) scale(.82); }
  59%,63% { transform: translate3d(var(--cursor-cc-x),var(--cursor-cc-y),0) scale(1); }
  64% { transform: translate3d(var(--cursor-cc-x),var(--cursor-cc-y),0) scale(1); animation-timing-function: var(--story-ease); }
  72% { transform: translate3d(var(--cursor-double-x),var(--cursor-double-y),0) scale(1); }
  73% { transform: translate3d(var(--cursor-double-x),var(--cursor-double-y),0) scale(.82); }
  74%,89% { opacity: 1; transform: translate3d(var(--cursor-double-x),var(--cursor-double-y),0) scale(1); }
  91%,100% { opacity: 0; transform: translate3d(var(--cursor-double-x),var(--cursor-double-y),0) scale(1); }
}
@keyframes story-highlight { 0%,18% { color: #F4F7F9; background: transparent; text-shadow: inherit; } 20%,92% { color: #0B0D10; background: #B7F34A; text-shadow: none; } 96%,100% { color: #F4F7F9; background: transparent; text-shadow: inherit; } }
@keyframes story-card { 0%,20% { opacity: 0; transform: translateY(8px) scale(.98); } 23%,49% { opacity: 1; transform: translateY(0) scale(1); } 53%,100% { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes story-bookmark { 0%,40% { fill: transparent; } 42%,100% { fill: #B7F34A; } }
@keyframes story-save-label { 0%,40% { opacity: 1; } 41%,100% { opacity: 0; } }
@keyframes story-saved-label { 0%,40% { opacity: 0; } 41%,100% { opacity: 1; } }
@keyframes story-confirm { 0%,40% { opacity: 0; transform: translateX(-4px); } 43%,48% { opacity: 1; transform: translateX(0); } 52%,100% { opacity: 0; transform: translateX(4px); } }
@keyframes story-menu { 0%,58% { opacity: 0; transform: translateY(8px) scale(.98); } 61%,74% { opacity: 1; transform: translateY(0) scale(1); } 76%,100% { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes story-second-line { 0%,74% { opacity: 0; transform: translateY(5px); } 77%,92% { opacity: 1; transform: translateY(0); } 96%,100% { opacity: 0; transform: translateY(5px); } }

@media (max-width: 900px) { .story-translation-card { right: 7%; width: 34%; }.story-menu { width: 270px; }.story-browser-bar { height: 31px; } }
@media (max-width: 700px) {
  .product-showcase { padding-top: 82px; padding-bottom: 88px; }
  .product-showcase .section-head { margin-bottom: 25px; }
  .story-stage { aspect-ratio: 4 / 5; border-radius: 16px; }
  .story-window { width: 94%; border-radius: 10px; }
  .story-browser-bar { height: 30px; }
  .story-browser-address, .story-browser-dots { display: none; }
  .story-player { aspect-ratio: 4 / 5; }
  .story-frame { object-position: 50% 50%; }
  .story-vignette { background: linear-gradient(180deg,#05070c60,transparent 23%,#05070c15 47%,#05070ce6 100%); }
  .story-topline { font-size: 9px; }
  .story-translation-card { top: 8%; bottom: auto; left: 6%; right: 6%; width: auto; min-width: 0; padding: 14px; }
  .story-card-title strong { font-size: 18px; }
  .story-phonetic, .story-context { font-size: 11px; }
  .story-meaning { font-size: 14px; }
  .story-subtitles { left: 3%; right: 3%; bottom: 14%; gap: 6px; }
  .story-original { font-size: clamp(16px,4.5vw,23px); }
  .story-translated { font-size: clamp(13px,3.5vw,17px); }
  .story-controls { min-height: 32px; gap: 11px; font-size: 9px; }
  .story-cursor, .story-menu { display: none; }
  .story-stage.is-armed .story-translation-card { animation: story-mobile-card var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
  .story-stage.is-armed .story-translated { animation: story-mobile-second-line var(--story-duration) linear infinite both; animation-play-state: var(--story-play-state,paused); }
  @keyframes story-mobile-card { 0%,20% { opacity: 0; transform: translateY(8px) scale(.98); } 23%,92% { opacity: 1; transform: translateY(0) scale(1); } 96%,100% { opacity: 0; transform: translateY(8px) scale(.98); } }
  @keyframes story-mobile-second-line { 0%,74% { opacity: 0; transform: translateY(5px); } 77%,92% { opacity: 1; transform: translateY(0); } 96%,100% { opacity: 0; transform: translateY(5px); } }
}
@media (max-width: 390px) { .story-translation-card { top: 7%; left: 4%; right: 4%; padding: 10px; }.story-context { margin-top: 6px; padding-top: 6px; }.story-card-footer { margin-top: 8px; }.story-volume, .story-clock { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .story-stage .story-window, .story-stage .story-cursor, .story-stage .story-word, .story-stage .story-translation-card, .story-stage .story-bookmark, .story-stage .story-save-label, .story-stage .story-saved-label, .story-stage .story-save-confirm, .story-stage .story-menu, .story-stage .story-translated { animation: none !important; }
  .story-stage .story-word { color: #0B0D10; background: #B7F34A; text-shadow: none; }
  .story-stage .story-translation-card { opacity: 1; transform: none; }
  .story-stage .story-bookmark { fill: #B7F34A; }
  .story-stage .story-save-label { display: none; }.story-stage .story-saved-label { display: inline; }
  .story-stage .story-menu, .story-stage .story-cursor { display: none; }
  .story-stage .story-translated { opacity: 1; transform: none; }
}
body.demo-capture { margin: 0; overflow: hidden; background: #0B0D10; }
body.demo-capture .site-shell > *:not(main), body.demo-capture main > *:not(.product-showcase), body.demo-capture .product-showcase .section-head, body.demo-capture .skip { display: none !important; }
body.demo-capture .site-shell, body.demo-capture main { width: 100%; max-width: none; min-height: 100vh; padding: 0; margin: 0; }
body.demo-capture .product-showcase { width: 100%; min-height: 100vh; padding: 0 2vw; display: grid; place-items: center; }
body.demo-capture .story-stage { width: min(96vw, calc(96vh * 16 / 9)); max-width: none; border-radius: 16px; }
@media (max-width: 700px) { body.demo-capture .story-stage { width: min(96vw, calc(96vh * 4 / 5)); } }