/* Explainer animation. Design: Claude Opus 5.5 (effort high), design/out/03-explainer.md. Edited by hand after. */
/* ---------- 4-step explainer (.xp) ---------- */
.xp-stage{
 position:relative;overflow:hidden;width:100%;max-width:34rem;aspect-ratio:1/1;
 margin:var(--s5) auto var(--s4);background:var(--sand);border-radius:var(--r-lg);
 box-shadow:var(--sh-1);container-type:inline-size;color:var(--ink)
}
.xp-stage p{margin:0;max-width:none}

/* Scenes and end card share one layout */
.xp-scene,.xp-end{
 position:absolute;inset:0;display:flex;flex-direction:column;
 gap:clamp(.35rem,2cqi,1rem);
 padding:clamp(.65rem,4.5cqi,2rem) clamp(.75rem,5cqi,2.2rem)
}
.xp-scene{padding-bottom:calc(clamp(.65rem,4.5cqi,2rem) + clamp(.9rem,5cqi,1.8rem));opacity:0}
.xp-end{opacity:1;text-align:center}

.xp-art{position:relative;flex:1 1 auto;min-height:0}
.xp-art svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.xp-copy{flex:none;display:flex;flex-direction:column;gap:clamp(.15rem,1.2cqi,.5rem)}

.xp-badge{
 position:absolute;top:0;left:0;z-index:1;
 background:#fff;color:var(--teal-2);font-weight:700;
 font-size:clamp(1rem,4.2cqi,1.35rem);line-height:1.2;
 padding:.3em .8em;border-radius:var(--r-pill);box-shadow:var(--sh-1)
}
.xp-h{font-size:clamp(1.5rem,7.2cqi,2.3rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.xp-t{font-size:clamp(1.15rem,4.9cqi,1.55rem);line-height:1.35;text-wrap:pretty}
.xp-ph{font-weight:700;color:var(--teal-2)}
.xp-big{font-size:clamp(1.6rem,8.5cqi,2.6rem);font-weight:700;line-height:1.15;color:var(--teal-2)}
.xp-small{font-size:clamp(1.15rem,4.4cqi,1.4rem);line-height:1.3;color:var(--muted)}

/* SVG parts, authored in final frame */
.xp-draw{stroke-dasharray:1;stroke-dashoffset:0}
.xp-acc,.xp-letter,.xp-sun,.xp-steam{transform-box:fill-box;transform-origin:50% 50%}
.xp-steam{transform-origin:50% 100%}

/* Progress row (hidden in static end-card state) */
.xp-prog{
 position:absolute;left:clamp(.75rem,5cqi,2.2rem);right:clamp(.75rem,5cqi,2.2rem);
 bottom:clamp(.65rem,4.5cqi,2rem);display:grid;grid-template-columns:repeat(4,1fr);
 gap:clamp(.3rem,1.5cqi,.6rem);opacity:0
}
.xp-seg{display:block;height:clamp(8px,1.8cqi,14px);border-radius:var(--r-pill);background:#0d4f5426;overflow:hidden}
.xp-fill{display:block;height:100%;background:var(--teal);border-radius:inherit;transform-origin:0 50%;transform:scaleX(1)}

/* Shared timeline offsets */
.xp-s1{--d:0s}.xp-s2{--d:4s}.xp-s3{--d:8s}.xp-s4{--d:12s}.xp-end{--d:16s}
.xp-g1{--d:0s}.xp-g2{--d:4s}.xp-g3{--d:8s}.xp-g4{--d:12s}
.xp-stage{--o:.15s}
.xp-o1{--o:.3s}.xp-o2{--o:.5s}.xp-o3{--o:.7s}.xp-o4{--o:.9s}.xp-o5{--o:1.1s}
.xp-pp{--o:.35s}
.xp-cal{--o:.7s}

/* Controls: only with JS and motion allowed */
.xp-controls{display:none;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin:0 auto var(--s6)}
.xp-controls .btn{min-height:48px;min-width:8.5rem;justify-content:center}

/* ---------- Animation (only under .xp-play, motion allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
 html.js .xp-controls{display:flex}

 .xp-stage.xp-play::before{content:"";position:absolute;width:0;height:0;animation:xp-hold 20s linear 0s 1 both}

 .xp-play .xp-scene{animation:xp-scene 4.5s var(--ease-io) var(--d) 1 both}
 .xp-play .xp-end{animation:xp-fade .6s var(--ease-out) var(--d) 1 both}

 .xp-play .xp-rise{animation:xp-rise .6s var(--ease-out) calc(var(--d) + var(--o)) 1 both}
 .xp-play .xp-draw{animation:xp-draw .9s var(--ease-out) calc(var(--d) + var(--o)) 1 both}
 .xp-play .xp-acc{animation:xp-pop .5s var(--ease-out) calc(var(--d) + var(--o) + .75s) 1 both}
 .xp-play .xp-letter{animation:xp-letter .8s var(--ease-out) calc(var(--d) + .8s) 1 both}
 .xp-play .xp-steam{animation:xp-steam 1.2s var(--ease-io) calc(var(--d) + 1.6s) 2 alternate both}
 .xp-play .xp-sun{animation:xp-sun .9s var(--ease-out) calc(var(--d) + .4s) 1 both}

 .xp-play .xp-prog{animation:xp-progvis 16.5s linear 0s 1 both}
 .xp-play .xp-fill{animation:xp-fill 4s var(--ease-io) var(--d) 1 both}

 /* Pause: whole stage and every descendant */
 .xp-stage.xp-paused,.xp-stage.xp-paused::before,
 .xp-stage.xp-paused *{animation-play-state:paused!important}
}

@keyframes xp-hold{from{opacity:1}to{opacity:1}}
@keyframes xp-scene{0%{opacity:0}11%{opacity:1}89%{opacity:1}100%{opacity:0}}
@keyframes xp-fade{from{opacity:0}to{opacity:1}}
@keyframes xp-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes xp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes xp-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes xp-letter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes xp-steam{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes xp-sun{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes xp-progvis{0%{opacity:1}97%{opacity:1}100%{opacity:0}}
@keyframes xp-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Reduced motion: static end card, no controls */
@media (prefers-reduced-motion:reduce){
 .xp-stage *,.xp-stage::before{animation:none!important}
 .xp-scene,.xp-prog{opacity:0!important}
 .xp-end{opacity:1!important}
 .xp-draw{stroke-dashoffset:0!important}
 .xp-controls{display:none!important}
}

/* ---------- Text version ---------- */
.xp-list{list-style:none;padding:0;margin:var(--s4) 0 var(--s5);counter-reset:xp}
.xp-list li{counter-increment:xp;position:relative;padding-left:3.3rem;min-height:2.6rem;margin:0 0 var(--s4)}
.xp-list li::before{
 content:counter(xp);position:absolute;left:0;top:0;width:2.6rem;height:2.6rem;border-radius:50%;
 background:var(--teal);color:#fff;font-weight:700;display:grid;place-items:center;line-height:1
}
.xp-list strong{display:block;font-size:1.15rem;line-height:1.3;margin-bottom:.15rem}
.xp-line{display:block}
.xp-start strong{display:block}
.xp-more a{display:flex;align-items:center;min-height:48px;width:fit-content}

/* ---------- Render mode (540x540 video) ---------- */
html.xp-render,html.xp-render body{
 margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background:var(--sand)
}
html.xp-render body *{visibility:hidden}
html.xp-render .xp-stage,html.xp-render .xp-stage *{visibility:visible}
html.xp-render header.site,html.xp-render footer.site,html.xp-render nav.main,
html.xp-render .actionbar,html.xp-render .skip,html.xp-render dialog,
html.xp-render .xp-controls,html.xp-render .xp-list,
html.xp-render main .wrap>:not(.xp-stage){display:none!important}
html.xp-render main,html.xp-render main>.wrap{padding:0;margin:0;max-width:none}
html.xp-render .xp-stage{
 position:fixed;inset:0;width:100vw;height:100vh;max-width:none;aspect-ratio:auto;
 margin:0;border-radius:0;box-shadow:none;z-index:2147483000
}
html.xp-render .xp-h{font-size:clamp(1.5rem,7.6cqi,3rem)}
html.xp-render .xp-t{font-size:clamp(1.15rem,5.2cqi,2rem)}
html.xp-render .xp-big{font-size:clamp(1.6rem,9cqi,3.4rem)}
html.xp-render .xp-small{font-size:clamp(1.15rem,4.6cqi,1.8rem)}
html.xp-render .xp-badge{font-size:clamp(1rem,4.4cqi,1.7rem)}