/* Story navigation uses the same lavender and rounded controls as Mira's interface. */
.mira-stories { position:relative; }
.mira-story-progress { position:absolute; top:10px; left:18px; right:18px; z-index:8; display:flex; align-items:center; gap:5px; height:44px; }
.mira-story-segment { display:flex; align-items:center; flex:1 1 0; min-width:0; height:44px; padding:0; border:0; background:transparent; border-radius:5px; cursor:pointer; }
.mira-story-rail { display:block; position:relative; overflow:hidden; height:4px; width:100%; border-radius:5px; background:rgba(104,70,168,.18); }
.mira-story-fill { display:block; height:100%; width:100%; border-radius:inherit; background:#7951ed; transform:scaleX(0); transform-origin:left center; }
.mira-story-pause { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:13px; color:#6a49bf; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.8); border-radius:50%; cursor:pointer; }
.mira-story-pause svg { width:16px; height:16px; }
.mira-story-hit { position:absolute; z-index:6; top:52px; bottom:74px; width:50%; padding:0 9px; display:flex; align-items:center; border:0; border-radius:16px; color:#7650d5; background:transparent; cursor:pointer; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
.mira-story-hit--prev { left:0; justify-content:flex-start; }
.mira-story-hit--next { right:0; justify-content:flex-end; }
.mira-story-arrow { display:grid; place-items:center; width:34px; height:42px; border:1px solid rgba(255,255,255,.95); border-radius:14px; background:rgba(255,255,255,.85); box-shadow:0 4px 14px #59398d16; transition:background .18s,transform .18s; }
.mira-story-arrow svg { width:21px; height:21px; pointer-events:none; }
.mira-story-hit:active .mira-story-arrow { transform:scale(.94); background:#ede3ff; }
.mira-story-hit:focus-visible, .mira-story-segment:focus-visible, .mira-story-pause:focus-visible { outline:3px solid #a98bdf; outline-offset:3px; }
.mira-stories.h-snap { padding-top:60px; }
.mira-stories.h-snap .h-snap-frame, .mira-stories.h-snap .h-snap-cap { animation:none!important; opacity:0!important; transition:opacity .22s ease; }
.mira-stories.h-snap .h-snap-frame.is-story-active, .mira-stories.h-snap .h-snap-cap.is-story-active { opacity:1!important; }
.mira-stories[data-story-running="false"] .h-cv-bars i { animation-play-state:paused!important; }
.h-dh-stage.mira-stories { padding-top:0; margin-top:56px; }
.h-dh-stage .mira-story-progress { top:-56px; left:0; right:0; }
.h-dh-stage .mira-story-hit { bottom:0; top:0; }
.h-dh-stage .mira-story-arrow { background:rgba(255,255,255,.88); }
.h-car.mira-stories .mira-story-progress { position:relative; top:auto; left:auto; right:auto; margin:0 16px 10px; }
.h-car.mira-stories .mira-story-hit { bottom:80px; }
.h-car.mira-stories .h-car-dots, .h-car.mira-stories .h-car-prev, .h-car.mira-stories .h-car-next { display:none; }
@media (hover:hover) { .mira-story-hit:hover .mira-story-arrow, .mira-story-pause:hover { background:#f0e8ff; } }
@media (max-width:420px) { .mira-story-progress { left:12px; right:12px; } .mira-story-hit { padding-inline:5px; } .mira-story-arrow { width:29px; height:40px; border-radius:12px; } }
@media (prefers-reduced-motion:reduce) { .mira-story-arrow, .mira-stories.h-snap .h-snap-frame, .mira-stories.h-snap .h-snap-cap { transition:none; } }