.story-stage { position: absolute; inset: 0; z-index: 24; pointer-events: none; overflow: hidden; --story-direction: -1; }
.story-stage[hidden] { display: none !important; }
.story-stage[data-side="right"] { --story-direction: 1; }
.story-edge { position: absolute; left: 0; bottom: 13%; width: 25%; height: 57%; background: radial-gradient(ellipse at left bottom, #020d2070, transparent 70%); }
.story-character { position: absolute; left: -2.5%; bottom: 12.8%; width: 29%; height: 64%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 6px #0007); pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.story-bubble { position: absolute; left: 2.5%; bottom: 72%; width: 26%; min-height: 13%; padding: 1.65cqw 2.5cqw; border: max(2px, .22cqw) solid #061223; border-radius: 50%; background: #fffbed; color: #081321; box-shadow: 0 .35cqw 0 #0004, 0 .5cqw 1.5cqw #0003; transform: rotate(-2deg); pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.story-previewing .story-character, .story-previewing .story-bubble { cursor: default; }
.story-tail { position: absolute; left: 37%; bottom: -2.8cqw; width: 4.2cqw; height: 3.36cqw; overflow: visible; pointer-events: none; fill: #fffbed; stroke: #061223; stroke-width: 4; stroke-linecap: round; }
.story-line { position: relative; margin: 0; font-size: clamp(13px, 1.45cqw, 30px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; text-align: center; text-wrap: balance; }
.story-stage[data-side="right"] .story-character { right: -2%; left: auto; }
.story-stage[data-side="right"] .story-bubble { right: 2.5%; left: auto; transform: rotate(2deg); }
.story-stage[data-side="right"] .story-edge { left: auto; right: 0; transform: scaleX(-1); }
.story-stage[data-side="right"] .story-tail { left: auto; right: 37%; transform: scaleX(-1); }
.story-entering .story-character { animation: story-arrive 560ms cubic-bezier(.16, 1, .3, 1) both; }
.story-entering .story-bubble { animation: story-speak 360ms 160ms cubic-bezier(.16, 1, .3, 1) both; }
.story-leaving .story-character, .story-leaving .story-bubble { animation: story-leave 230ms ease-in both; }
.story-review-controls { position: relative; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 700; }
.story-review-controls[hidden] { display: none; }
.story-review-controls [hidden] { display: none !important; }
.story-previewing .story-bubble { bottom: 62%; }
.story-review-controls button { min-width: 32px; min-height: 32px; padding: 5px 8px; border: 1px solid #08132138; border-radius: 8px; color: #081321; background: #fff9; cursor: pointer; }
.story-review-controls [data-story-back] { flex-basis: 75%; border-radius: 18px; }
.story-stage button:focus-visible { outline: 3px solid #07832d; outline-offset: 2px; }
.story-review-section .story-preview { color: #a3ff70; padding: 8px 14px; min-height: 44px; border: 1px solid #a3ff7055; border-radius: 8px; background: #ffffff08; cursor: pointer; }
.story-review-section ol { padding-left: 24px; }
.story-review-section li { padding: 8px 0; }
.story-review-section li p { margin: 0 0 8px; }
.story-review-section .story-response { border-left: 2px solid #a3ff7080; padding-left: 12px; color: #b9d2c0; }
.story-review-section .story-trigger { font-size: 14px; color: #91adb9; }
@keyframes story-arrive { from { translate: calc(var(--story-direction) * 108%) 1%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes story-speak { from { translate: calc(var(--story-direction) * 12px) 8px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes story-leave { to { translate: calc(var(--story-direction) * 40px) 0; opacity: 0; } }
@media (max-width: 700px) { .story-character { width: 32%; height: 63%; } .story-bubble { width: 36%; bottom: 71%; padding: 16px 24px; } .story-line { font-size: clamp(12px, 1.8cqw, 16px); } .story-review-controls { gap: 4px; font-size: 10px; margin-top: 6px; } .story-review-controls button { min-height: 28px; } }
@media (max-width: 760px) and (orientation: portrait) {
  .phone-story { position: fixed; inset: 0; }
  .phone-story .story-edge { display: none; }
  .phone-story .story-character { bottom: 220px; left: -3%; width: 48%; height: min(29dvh, 230px); }
  .phone-story[data-side="right"] .story-character { left: auto; right: -1%; }
  .phone-story .story-bubble { bottom: 232px; left: 41%; width: 56%; min-height: 0; padding: 25px 26px; transform: rotate(-2deg); }
  .phone-story[data-side="right"] .story-bubble { left: auto; right: 41%; transform: rotate(2deg); }
  .phone-story .story-tail { left: -19px; bottom: 26%; width: 40px; height: 32px; transform: rotate(80deg); }
  .phone-story[data-side="right"] .story-tail { left: auto; right: -19px; transform: rotate(-80deg) scaleX(-1); }
  .phone-story .story-line { font-size: 14px; line-height: 1.25; }
  .phone-story .story-review-controls { margin-top: 10px; }
  body:has(.feature-counter:not([hidden])) .phone-story .story-character { bottom: 265px; }
  body:has(.feature-counter:not([hidden])) .phone-story .story-bubble { bottom: 277px; }
}
@media (prefers-reduced-motion: reduce) { .story-stage * { animation: none !important; } }