.story-chat{display:flex;flex-direction:column;height:100%;padding-top:54px;background:#f2f2f7;font-family:var(--font-body);.chat-header{display:flex;align-items:center;gap:12px;padding:14px 20px;background:#fff;border-bottom:1px solid #e5e5ea;.avatar{width:44px;height:44px;padding:3px;background:#ffd9e2;border-radius:50%}.who{display:flex;flex-direction:column}.name{font-size:17px;font-weight:700;color:#1c1c1e}.status{font-size:13px;color:#1b7f3b}}.chat-messages{flex:1;display:flex;flex-direction:column;gap:12px;padding:20px 18px 110px;overflow-y:auto;scrollbar-width:none}.bubble{align-self:flex-start;max-width:82%;padding:12px 16px;background:#fff;border-radius:20px;border-start-start-radius:6px;box-shadow:0 1px 2px #0000000f;transition:opacity .3s ease;&.hidden{display:none}&:not(.latest){opacity:.6}&.latest{background:#ffd9e2;box-shadow:0 6px 16px -8px #8d495f73}.content{display:flex;flex-direction:column;gap:4px}.label{font-size:12px;font-weight:700;color:#8d495f}.text{font-size:17px;line-height:1.4;color:#1c1c1e}.typing{display:flex;gap:5px;padding:4px 2px;&[hidden]{display:none}}.typing:not([hidden])+.content{display:none}}.typing-dot{width:8px;height:8px;background:#8d495f;border-radius:50%;opacity:.4;animation:story-typing 1s ease-in-out infinite;&:nth-child(2){animation-delay:.15s}&:nth-child(3){animation-delay:.3s}}}@keyframes story-typing{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.story{background-color:var(--color-surface-container-low);padding:5rem var(--space-5) var(--space-8);display:flex;align-items:center;justify-content:center;min-height:100svh;@media(min-width:1024px){min-height:calc(100svh - 6rem);padding-top:var(--space-8)}}.story .story-inner{max-width:var(--page-width);width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-8);@media(min-width:1024px){flex-direction:row;gap:var(--space-16);align-items:center}}.story .phone-col{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}.story .phone{width:min(280px,calc((100svh - 14rem) * 420 / 868));@media(max-width:1023px){width:180px}}.story .story-content{flex:1;width:100%;display:flex;flex-direction:column;gap:var(--space-5)}.story .dots{display:flex;align-items:center;gap:var(--space-2)}.story .dot{width:.5rem;height:.5rem;padding:0;border:none;border-radius:var(--radius-full);background-color:var(--color-surface-dim);cursor:pointer;transition:background-color .3s ease}.story .dot.done{background-color:var(--color-primary-container)}.story .dot.active{width:1.5rem;background-color:var(--color-primary)}.story .slides{display:grid}.story .slide{grid-area:1 / 1;display:flex;flex-direction:column;justify-content:flex-start;visibility:hidden;&.active{visibility:visible}.number{font-family:var(--font-display);font-size:clamp(2.5rem,1.6rem + 3vw,4rem);font-weight:var(--weight-extrabold);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--color-primary-container);margin-bottom:var(--space-2)}.title{font-family:var(--font-display);font-size:clamp(1.75rem,1.2rem + 1.6vw,2.6rem);font-weight:800;color:var(--color-on-surface);margin-bottom:var(--space-4);letter-spacing:-.01em;line-height:1.2}.body{font-family:var(--font-body);font-size:var(--text-title-lg);color:var(--color-on-surface-variant);line-height:1.7;max-width:34rem}}.story .controls{display:flex;align-items:center;justify-content:center;gap:var(--space-4)}.story .nav-arrow,.story .playpause{flex-shrink:0;border-radius:var(--radius-full);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,opacity .15s ease,background-color .2s ease;&:active{transform:scale(.92)}&:disabled{opacity:.35;cursor:default}}.story .nav-arrow{width:2.75rem;height:2.75rem;background:var(--color-surface-container-lowest);box-shadow:var(--shadow-ambient);color:var(--color-primary);& svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}&:not(:disabled):hover{background-color:var(--color-primary-fixed)}}.story .playpause{position:relative;width:3.5rem;height:3.5rem;background:var(--color-surface-container-lowest);box-shadow:var(--shadow-ambient);color:var(--color-primary);.icon-pause,.icon-play{width:1.3rem;height:1.3rem;fill:currentColor}.icon-play{display:none}.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;pointer-events:none}.ring-track{fill:none;stroke:var(--color-surface-dim);stroke-width:3}.ring-fill{fill:none;stroke:var(--color-primary);stroke-width:3;stroke-linecap:round}}.story[data-state=paused] .playpause .icon-play,.story[data-state=ended] .playpause .icon-play{display:block}.story[data-state=paused] .playpause .icon-pause,.story[data-state=ended] .playpause .icon-pause,.story[data-reduce] .playpause{display:none}@media(max-width:1023px){.story{padding-top:4.5rem;padding-bottom:var(--space-5)}.story .story-inner{gap:var(--space-5)}.story .phone-col{gap:var(--space-3)}.story .slide .title{font-size:clamp(1.25rem,.45rem + 4vw,1.5rem);margin-bottom:var(--space-3)}.story .slide .body{font-size:var(--text-body-md);line-height:1.6}}.story-cta{padding:0 var(--space-5) var(--space-16);.inner{max-width:var(--page-width);margin:0 auto}}