.as-story{--as-surface:color-mix(in oklch, var(--secondary) 55%, var(--background));--as-accent:var(--primary);--as-copy-ink:var(--foreground);--as-copy-muted:var(--muted-foreground);border:1px solid color-mix(in oklch, var(--primary) 16%, transparent);background:radial-gradient(ellipse at 92% 5%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 60%), var(--as-surface);color:var(--as-copy-ink);border-radius:24px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:42px;margin-block:44px;padding:28px;scroll-margin-top:28px;display:grid}.as-story[data-theme=paper]{--as-surface:color-mix(in oklch, var(--background) 96%, var(--foreground));background:var(--as-surface)}.as-story[data-theme=ink]{--as-surface:var(--foreground);--as-copy-ink:var(--background);--as-copy-muted:color-mix(in oklch, var(--background) 72%, var(--foreground));background:radial-gradient(ellipse at 0% 100%, color-mix(in oklch, var(--primary) 25%, transparent), transparent 60%), var(--as-surface)}.as-copy,.as-player{min-width:0}.as-story .as-eyebrow{color:var(--as-copy-muted);letter-spacing:1.5px;text-transform:uppercase;margin:0 0 15px;font-size:10px;line-height:1.5}.as-story h2{color:var(--as-copy-ink);letter-spacing:-1.05px;max-width:17ch;margin:0 0 18px;font-size:clamp(29px,3vw,38px);line-height:1.16}.as-story .as-description{color:var(--as-copy-muted);max-width:43ch;margin:0;font-size:14px;line-height:1.8}.as-steps{gap:7px;margin-block:26px;display:grid}.as-step{text-align:left;min-height:60px;color:var(--as-copy-muted);cursor:pointer;background:0 0;border:0;align-items:center;gap:12px;padding:8px 0;display:flex}.as-step-number{border:1px solid color-mix(in oklch, var(--as-copy-ink) 17%, transparent);width:34px;height:34px;font-family:var(--font-display);border-radius:11px;flex-shrink:0;place-items:center;font-size:11px;transition:background .35s,color .35s,border-color .35s;display:grid}.as-step-copy{flex:1;gap:4px;min-width:0;display:grid}.as-step-copy strong{font-size:13px;font-weight:500;line-height:1.5;transition:color .35s}.as-step-copy>span{font-size:11px;line-height:1.65}.as-step>svg{opacity:0;flex-shrink:0;transition:opacity .35s,transform .35s;transform:translate(-4px)}.as-step[aria-pressed=true] strong,.as-step:hover strong{color:var(--as-copy-ink)}.as-step[aria-pressed=true] .as-step-number{color:var(--as-surface);background:var(--as-copy-ink);border-color:var(--as-copy-ink)}.as-step[aria-pressed=true]>svg{opacity:1;transform:none}.as-action{margin-top:22px}.as-action a,.as-action button{min-height:44px}.as-story[data-theme=ink] .as-action a{background:var(--background);color:var(--foreground)}.as-player{isolation:isolate;color:var(--foreground);position:relative}.as-player:before{content:"";z-index:-1;background:color-mix(in oklch, var(--primary) 60%, var(--foreground));border-radius:19px;position:absolute;inset:14px -4px 65px 11px;transform:rotate(1.8deg)}.as-story[data-theme=paper] .as-player:before{background:var(--secondary);transform:rotate(-1.6deg)}.as-story[data-theme=ink] .as-player:before{background:var(--primary)}.as-window{border:1px solid color-mix(in oklch, var(--foreground) 14%, transparent);background:var(--background);box-shadow:0 20px 45px color-mix(in oklch, var(--foreground) 10%, transparent), 0 2px 8px color-mix(in oklch, var(--foreground) 5%, transparent);border-radius:16px;overflow:hidden}.as-window-bar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:14px;padding:15px 20px;display:flex}.as-brand{font-family:var(--font-display);letter-spacing:-.3px;align-items:center;font-size:13px;font-weight:600;display:inline-flex}.as-brand-mark{width:23px;height:24px;color:var(--background);background:var(--primary);border-radius:6px 6px 9px 9px;place-items:center;margin-right:8px;display:grid}.as-brand-domain{color:var(--primary)}.as-example{color:var(--muted-foreground);border:1px solid var(--border);border-radius:5px;padding:4px 7px;font-size:9px;line-height:1.3}.as-window-heading{color:var(--muted-foreground);justify-content:space-between;align-items:center;gap:12px;padding:18px 22px 0;font-size:10px;line-height:1.5;display:flex}.as-window-heading>span:first-child{color:var(--foreground);font-weight:500}.as-window-heading>span:last-child{font-variant-numeric:tabular-nums;letter-spacing:.5px}.as-stage{overscroll-behavior-y:contain;scrollbar-width:thin;outline-offset:-4px;height:405px;padding:0;overflow-y:auto}.as-stage:focus-visible{outline:2px solid var(--primary)}.as-scene{animation:.65s cubic-bezier(.16,1,.3,1) both as-scene-enter}.as-controls{border-top:1px solid var(--border);align-items:center;gap:2px;padding:8px 13px 10px 20px;display:flex}.as-timeline{grid-template-columns:repeat(var(--as-step-count), minmax(0, 1fr));flex:1;gap:10px;margin-right:5px;display:grid}.as-timeline>button{text-align:left;min-height:44px;color:var(--muted-foreground);cursor:pointer;background:0 0;border:0;align-content:center;gap:7px;padding:0;font-size:9px;line-height:1.35;display:grid}.as-timeline>button[data-current=true]{color:var(--foreground)}.as-progress-track{background:color-mix(in oklch, var(--foreground) 11%, transparent);border-radius:4px;height:2px;display:block;overflow:hidden}.as-progress-track>span{background:var(--primary);transform-origin:0;width:100%;height:100%;display:block;transform:scaleX(0)}.as-timeline>button[data-current=true] .as-progress-track>span{animation:linear forwards as-progress}.as-timeline>button[data-completed=true] .as-progress-track>span{opacity:.4;transform:scaleX(1)}.as-control{width:44px;height:44px;color:var(--muted-foreground);cursor:pointer;background:0 0;border:0;border-radius:50%;flex-shrink:0;place-items:center;transition:background .2s,color .2s;display:grid}.as-control:hover{color:var(--foreground);background:var(--secondary)}.as-control:disabled{opacity:.45;cursor:default}.as-caption{justify-content:center;align-items:center;gap:6px;margin-top:16px;display:flex}.as-story .as-caption p{color:var(--as-copy-muted);margin:0;font-size:10px;line-height:1.5}.as-caption-dot{background:var(--primary);border-radius:50%;flex-shrink:0;width:4px;height:4px}.as-story .as-playback-note{min-height:2.8em;color:var(--as-copy-muted);text-align:center;margin:5px 0 0;font-size:9px;line-height:1.5}.as-player[data-active=false] .as-progress-track>span{animation-play-state:paused}.as-player[data-manual=true] .as-scene,.as-player[data-manual=true] .as-scene *{animation:none!important}.as-player[data-manual=true] .as-timeline>button[data-current=true] .as-progress-track>span{animation:none;transform:scaleX(1)}@keyframes as-scene-enter{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes as-progress{to{transform:scaleX(1)}}@media (width<=1000px){.as-story{gap:25px;padding:32px 26px}.as-window-heading{padding-inline:17px}}@media (width<=860px){.as-story{border-radius:20px;grid-template-columns:minmax(0,1fr);gap:27px;padding:29px 24px}.as-story h2{max-width:20ch}.as-description{max-width:54ch}.as-steps{gap:2px;margin-block:19px}.as-player{width:min(100%,530px);margin-inline:auto}.as-action{margin-top:18px}}@media (width<=480px){.as-story{margin-block:32px;padding:26px 18px}.as-story h2{font-size:30px}.as-stage{height:440px;padding:0}.as-window-bar{padding:13px 14px}.as-window-heading{padding:15px 14px 0}.as-controls{padding-inline:11px}.as-timeline{gap:7px}.as-step{gap:10px}.as-story .as-description{font-size:13px}.as-player:before{right:-3px}.as-story .as-caption p{font-size:9px}}@media (width<=360px){.as-story{padding-inline:13px}.as-controls{gap:0;padding-inline:9px}.as-control{width:44px}.as-timeline{gap:5px;margin-right:0}.as-timeline>button{font-size:8px}}@media (prefers-reduced-motion:reduce){.as-player *,.as-step *,.as-control{transition:none!important;animation:none!important}.as-timeline>button[data-current=true] .as-progress-track>span{transform:scaleX(1)}}