.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}.story .story-inner{max-width:72rem;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{flex-shrink:0}.story .frame{width:220px;border:6px solid var(--color-inverse-surface);border-radius:2rem;overflow:hidden;box-shadow:0 24px 48px color-mix(in srgb,var(--color-primary) 15%,transparent);background:var(--color-inverse-surface);@media(min-width:1024px){width:280px;border-width:8px;border-radius:2.5rem}}.story .screen{background-color:var(--color-surface-container-lowest);display:flex;flex-direction:column;height:360px;@media(min-width:1024px){height:460px}}.story .header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background-color:var(--color-surface-container);border-bottom:var(--border-ghost)}.story .avatar{width:2.5rem;height:2.5rem;border-radius:var(--radius-full);object-fit:contain;background:var(--color-primary-fixed);padding:.25rem}.story .header-text{display:flex;flex-direction:column}.story .name{font-family:var(--font-hebrew);font-weight:var(--weight-bold);font-size:var(--text-body-md);color:var(--color-primary)}.story .status{font-size:var(--text-label-sm);color:var(--color-on-surface-variant)}.story .messages{flex:1;overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.story .bubble{display:flex;flex-direction:column;gap:.25rem;background-color:var(--color-surface-container);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md);max-width:90%;opacity:.5;transition:all .3s ease;&.hidden{display:none}&.latest{background-color:var(--color-primary-fixed);opacity:1;.text{color:var(--color-on-primary-fixed)}}.content{display:flex;flex-direction:column;gap:.25rem}.typing{display:flex;align-items:center;gap:.35rem;padding:.25rem 0}.typing-dot{width:.4rem;height:.4rem;border-radius:var(--radius-full);background-color:var(--color-outline);animation:story-dot-bounce 1.4s ease-in-out infinite;&:nth-child(2){animation-delay:.2s}&:nth-child(3){animation-delay:.4s}}.label{font-family:var(--font-hebrew);font-size:var(--text-label-sm);font-weight:var(--weight-bold);color:var(--color-primary)}.text{font-family:var(--font-hebrew);font-size:var(--text-body-sm);color:var(--color-on-surface-variant);line-height:1.4}}@keyframes story-dot-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.3rem)}}.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:width .3s ease,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{position:relative;min-height:15rem;@media(min-width:1024px){min-height:13rem}}.story .slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease;&.active{opacity:1;pointer-events:auto;position:relative}.label{font-family:var(--font-hebrew);font-size:var(--text-label-lg);font-weight:var(--weight-bold);color:var(--color-primary);letter-spacing:.05em;margin-bottom:var(--space-3)}.title{font-family:var(--font-display);font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);font-weight:800;color:var(--color-on-surface);margin-bottom:var(--space-5);letter-spacing:-.01em;line-height:1.2}.body{font-family:var(--font-body);font-size:var(--text-body-lg);color:var(--color-on-surface-variant);line-height:1.8;max-width:32rem}}.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 .screen{height:280px}.story .phone-col{gap:var(--space-3)}.story .slides{min-height:0}.story .slide .label{margin-bottom:var(--space-2)}.story .slide .title{font-size:1.5rem;margin-bottom:var(--space-3)}.story .slide .body{font-size:var(--text-body-md);line-height:1.6}}