/* Keyspur scenes — animated SVG/HTML illustrations that replace photos and videos.
   Each page themes them with: --sc-bg --sc-ink --sc-soft --sc-line --sc-accent --sc-good --sc-warm --sc-night --sc-font */
.scene{container-type:inline-size;position:relative;overflow:hidden;background:var(--sc-bg);color:var(--sc-ink);font-family:var(--sc-font,inherit);border-radius:var(--sc-radius,0);isolation:isolate}
.scene svg{display:block;width:100%;height:100%}
.scene .sc-fill{position:absolute;inset:0}
.scene *{animation-play-state:paused}
.scene.play *{animation-play-state:running}
@media (prefers-reduced-motion: reduce){.scene *{animation:none!important;transition:none!important}}

/* ---------- live call (16:9) ---------- */
.sc-call{display:grid;grid-template-columns:36% 1fr;align-items:center;gap:4%;padding:4% 6%}
.sc-call .phone{height:88%;justify-self:center;aspect-ratio:300/560;max-width:100%}
.sc-call .ring path{fill:none;stroke:var(--sc-accent);stroke-width:5;stroke-linecap:round;opacity:0}
.sc-call.ringing .ring path{animation:sc-ring 1.2s ease-out infinite}
.sc-call.ringing .ring path:nth-child(2){animation-delay:.2s}.sc-call.ringing .ring path:nth-child(3){animation-delay:.4s}
@keyframes sc-ring{0%{opacity:0;transform:scale(.8)}30%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.sc-call .ring{transform-box:fill-box;transform-origin:center}
.sc-call .bars rect{fill:var(--sc-soft);transform-box:fill-box;transform-origin:center;transition:fill .3s}
.sc-call.talk-ai .bars rect{fill:var(--sc-accent)}.sc-call.talk-c .bars rect{fill:var(--sc-ink)}
.sc-call.talk-ai .bars rect,.sc-call.talk-c .bars rect{animation:sc-bar .5s ease-in-out infinite alternate}
@keyframes sc-bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.sc-call .lines{display:flex;flex-direction:column;justify-content:flex-end;gap:1.4cqw;height:88%;font-size:clamp(10px,2.05cqw,18px);line-height:1.35}
.sc-call .b{max-width:92%;padding:.6em .9em;border-radius:14px;background:var(--sc-soft);color:var(--sc-ink);animation:sc-in .35s ease-out both}
.sc-call .b.ai{align-self:flex-end;background:var(--sc-accent);color:var(--sc-on-accent,#fff)}
.sc-call .b small{display:block;opacity:.7;font-size:.78em;margin-bottom:1px}
.sc-call .done{align-self:flex-start;padding:.6em .9em;border-radius:12px;border:2px solid var(--sc-good);color:var(--sc-ink);font-weight:600;animation:sc-in .35s ease-out both}
@keyframes sc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- owner's morning (16:9) ---------- */
.sc-owner{display:grid;grid-template-columns:30% 1fr;gap:5%;align-items:center;padding:5% 6%;font-size:clamp(8px,1.75cqw,15px)}
.sc-owner .lock{aspect-ratio:9/17;height:90%;justify-self:center;border-radius:28px;border:3px solid var(--sc-ink);background:var(--sc-night);position:relative;overflow:hidden;color:#fff}
.sc-owner .lock .t{position:absolute;top:12%;width:100%;text-align:center;font-size:2.6em;font-weight:300;letter-spacing:-.02em}
.sc-owner .note{position:absolute;left:6%;right:6%;top:36%;background:rgba(255,255,255,.94);color:#111;border-radius:12px;padding:.7em .8em;font-size:.86em;line-height:1.3;opacity:0;transform:translateY(-30px)}
.sc-owner .note b{display:block}
.sc-owner.s1 .note{opacity:1;transform:none;transition:all .5s cubic-bezier(.2,.8,.2,1)}
.sc-owner .cal{display:grid;grid-template-columns:3.2em repeat(5,1fr);grid-auto-rows:2.4em;border:2px solid var(--sc-line);border-radius:10px;overflow:hidden;position:relative;background:var(--sc-bg)}
.sc-owner .cal div{border-right:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line);padding:.3em .4em;font-size:.82em;color:var(--sc-muted,var(--sc-ink))}
.sc-owner .cal .h{font-weight:600;color:var(--sc-ink)}
.sc-owner .ev{position:absolute;border-radius:6px;padding:.3em .45em;font-size:.78em;line-height:1.2;background:var(--sc-soft);color:var(--sc-ink)}
.sc-owner .ev.new{background:var(--sc-accent);color:var(--sc-on-accent,#fff);font-weight:600;opacity:0;transform:translateY(-40px) scale(.95)}
.sc-owner.s2 .ev.new{opacity:1;transform:none;transition:all .55s cubic-bezier(.3,1.4,.5,1)}
.sc-owner .after{display:flex;align-items:center;gap:1em;margin-top:1.2em}
.sc-owner .btn-done{white-space:nowrap;border:2px solid var(--sc-ink);border-radius:999px;padding:.45em 1em;font-weight:600;transition:background .2s,color .2s}
.sc-owner.s3 .btn-done{background:var(--sc-ink);color:var(--sc-bg)}
.sc-owner .stars svg{width:1.5em;height:1.5em;display:inline-block;margin-right:.15em}
.sc-owner .stars path{fill:none;stroke:var(--sc-ink);stroke-width:1.6}
.sc-owner.s4 .stars svg path{fill:var(--sc-star,#F5A623);stroke:var(--sc-star,#F5A623);transition:fill .2s}
.sc-owner.s4 .stars svg:nth-child(2) path{transition-delay:.12s}.sc-owner.s4 .stars svg:nth-child(3) path{transition-delay:.24s}.sc-owner.s4 .stars svg:nth-child(4) path{transition-delay:.36s}.sc-owner.s4 .stars svg:nth-child(5) path{transition-delay:.48s}
.sc-owner .cap{font-size:.85em;opacity:.75}

/* ---------- illustrations (square viewBox, centred) ---------- */
.sc-art svg .ink{stroke:var(--sc-ink);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sc-art svg .thin{stroke:var(--sc-ink);stroke-width:3;fill:none;stroke-linecap:round}
.sc-art svg .soft{fill:var(--sc-soft)}
.sc-art svg .accent{fill:var(--sc-accent)}
.sc-art svg .accent-s{stroke:var(--sc-accent);stroke-width:5;fill:none;stroke-linecap:round}
.sc-art svg .warm{fill:var(--sc-warm)}
.sc-art svg .bgfill{fill:var(--sc-bg)}
.sc-art svg .spin{transform-box:fill-box;transform-origin:center;animation:sc-spin 1.1s linear infinite}
@keyframes sc-spin{to{transform:rotate(360deg)}}
.sc-art svg .hammer{transform-box:view-box;animation:sc-hammer .7s ease-in-out infinite alternate}
@keyframes sc-hammer{from{transform:rotate(-26deg)}to{transform:rotate(14deg)}}
.sc-art svg .wrench{transform-box:view-box;animation:sc-wrench 1.4s ease-in-out infinite alternate}
@keyframes sc-wrench{from{transform:rotate(-18deg)}to{transform:rotate(22deg)}}
.sc-art svg .shingle{opacity:0;animation:sc-shingle 7s linear infinite}
@keyframes sc-shingle{0%{opacity:0}4%{opacity:1}92%{opacity:1}100%{opacity:0}}
.sc-art svg .buzz{transform-box:fill-box;transform-origin:center;animation:sc-buzz .12s linear infinite alternate}
@keyframes sc-buzz{from{transform:translateX(-2px) rotate(-3deg)}to{transform:translateX(2px) rotate(3deg)}}
.sc-art svg .arcs path{stroke:var(--sc-accent);stroke-width:4;fill:none;stroke-linecap:round;opacity:0;animation:sc-arc 1.4s ease-out infinite}
.sc-art svg .arcs path:nth-child(2){animation-delay:.25s}.sc-art svg .arcs path:nth-child(3){animation-delay:.5s}
@keyframes sc-arc{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.sc-art svg .rain line{stroke:var(--sc-night-ink);opacity:.5;stroke-width:3;stroke-linecap:round;animation:sc-rain .9s linear infinite}
@keyframes sc-rain{from{transform:translateY(-60px)}to{transform:translateY(60px)}}
.sc-art svg .drip{animation:sc-drip 1.8s ease-in infinite}
@keyframes sc-drip{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{transform:translateY(70px);opacity:1}100%{transform:translateY(80px);opacity:0}}
.sc-art svg .flicker{animation:sc-flicker 2.4s steps(1) infinite}
@keyframes sc-flicker{0%,40%,44%,70%,74%,100%{opacity:1}42%,72%{opacity:.25}}
.sc-art svg .blink{animation:sc-blink 1s steps(1) infinite}
@keyframes sc-blink{50%{opacity:.15}}
.sc-art svg .rise{transform-box:fill-box;transform-origin:bottom;animation:sc-rise 3s ease-in-out infinite alternate}
@keyframes sc-rise{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.sc-art svg .toggle{transform-box:fill-box;transform-origin:center;animation:sc-toggle 2s steps(1) infinite}
@keyframes sc-toggle{50%{transform:translateY(14px)}}
.sc-art svg .pulse{transform-box:fill-box;transform-origin:center;animation:sc-pulse 1.6s ease-in-out infinite}
@keyframes sc-pulse{50%{transform:scale(1.12);opacity:.6}}

/* ---------- booked (agenda) ---------- */
.sc-booked{display:grid;place-items:center;padding:8%}
.sc-booked .agenda{width:min(100%,440px);background:var(--sc-card,var(--sc-bg));border:2px solid var(--sc-line);border-radius:18px;padding:1.1em 1.1em 1.3em;font-size:clamp(10px,4.2cqw,17px)}
.sc-booked .day{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.8em;font-weight:600}
.sc-booked .day span{font-weight:400;opacity:.65;font-size:.9em}
.sc-booked .it{display:grid;grid-template-columns:3.6em 1fr;gap:.6em;padding:.55em 0;border-top:1px solid var(--sc-line);opacity:.55}
.sc-booked .it.new{opacity:1;position:relative;padding-right:2.2em;border-left:4px solid var(--sc-accent);padding-left:.6em;margin-left:-.6em;max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .5s ease,padding .5s ease}
.sc-booked.s1 .it.new{max-height:5em;padding-top:.55em;padding-bottom:.55em}
.sc-booked .it b{display:block;font-weight:600}
.sc-booked .check{position:absolute;right:0;top:50%;width:1.6em;height:1.6em;transform:translateY(-50%)}
.sc-booked .check circle{fill:var(--sc-good)}.sc-booked .check path{stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:20;stroke-dashoffset:20}
.sc-booked.s2 .check path{stroke-dashoffset:0;transition:stroke-dashoffset .4s ease .1s}
.sc-booked .check{opacity:0}.sc-booked.s2 .check{opacity:1;transition:opacity .2s}

/* tree service: the crown sways, wind streaks blow across the night scene */
.sc-art svg .sway{transform-box:fill-box;transform-origin:50% 100%;animation:sc-sway 3.2s ease-in-out infinite alternate}
@keyframes sc-sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.sc-art svg .wind path{stroke:var(--sc-night-ink);stroke-width:4;stroke-linecap:round;fill:none;opacity:0;animation:sc-wind 2.4s linear infinite}
@keyframes sc-wind{0%{opacity:0;transform:translateX(-50px)}25%{opacity:.7}100%{opacity:0;transform:translateX(90px)}}

/* more trades: pickets going up, waves, smoke, bubbles, a garage door, a crack drawing itself */
.sc-art svg .pk{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:sc-pk 7s ease-out infinite}
@keyframes sc-pk{0%{opacity:0;transform:scaleY(.12)}7%{opacity:1;transform:none}91%{opacity:1}100%{opacity:0}}
.sc-art svg .wave{animation:sc-wave 3.2s linear infinite}
@keyframes sc-wave{to{transform:translateX(-70px)}}
.sc-art svg .puff{transform-box:fill-box;transform-origin:center;opacity:0;animation:sc-puff 3.6s ease-out infinite}
@keyframes sc-puff{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.85}100%{opacity:0;transform:translate(14px,-92px) scale(1.8)}}
.sc-art svg .bub{transform-box:fill-box;transform-origin:center;opacity:0;animation:sc-bub 2.6s ease-in infinite}
@keyframes sc-bub{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:.9}100%{opacity:0;transform:translateY(-46px) scale(1.1)}}
.sc-art svg .flow{stroke-dasharray:14 12;animation:sc-flow 1s linear infinite}
@keyframes sc-flow{to{stroke-dashoffset:-26}}
.sc-art svg .door{animation:sc-door 5s ease-in-out infinite alternate}
@keyframes sc-door{from{transform:translateY(0)}to{transform:translateY(-190px)}}
.sc-art svg .bob{animation:sc-bob 1.3s ease-in-out infinite alternate}
@keyframes sc-bob{from{transform:translateY(0)}to{transform:translateY(-34px)}}
.sc-art svg .crack{stroke-dasharray:240;stroke-dashoffset:240;animation:sc-crack 6s ease-in-out infinite}
@keyframes sc-crack{0%{stroke-dashoffset:240}35%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:240}}
.sc-art svg .level{animation:sc-level 2.4s ease-in-out infinite alternate}
@keyframes sc-level{from{transform:translateX(-16px)}to{transform:translateX(16px)}}
.sc-art svg .lid{animation:sc-lid 2.2s ease-in-out infinite alternate}
@keyframes sc-lid{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.sc-art svg .skim{transform-box:view-box;animation:sc-skim 3.4s ease-in-out infinite alternate}
@keyframes sc-skim{from{transform:rotate(-5deg)}to{transform:rotate(4deg)}}
.sc-art svg .drift{animation:sc-drift 6s ease-in-out infinite alternate}
@keyframes sc-drift{from{transform:translateX(-30px)}to{transform:translateX(34px)}}

/* ---------- small animated trade icons ---------- */
.gl{display:inline-block;width:56px;height:56px;color:var(--gl-ink,currentColor);flex:none}
.gl svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gl svg .a{stroke:var(--gl-accent,var(--sc-accent,currentColor))}
.gl svg .af{fill:var(--gl-accent,var(--sc-accent,currentColor));stroke:none}
.gl svg .gl-dark{fill:var(--gl-accent,var(--sc-accent,currentColor));fill-opacity:.12;stroke:currentColor}
.gl *{animation-play-state:paused}.gl.on *{animation-play-state:running}
.gl svg .gl-fall{animation:gl-fall 1.9s ease-in infinite}
@keyframes gl-fall{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{transform:translateY(24px);opacity:1}100%{transform:translateY(26px);opacity:0}}
.gl svg .gl-spin{transform-box:fill-box;transform-origin:center;animation:gl-spin 1.6s linear infinite}
@keyframes gl-spin{to{transform:rotate(360deg)}}
.gl svg .gl-sway{transform-box:fill-box;transform-origin:50% 100%;animation:gl-sway 3s ease-in-out infinite alternate}
@keyframes gl-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.gl svg .gl-pk{transform-box:fill-box;transform-origin:50% 100%;animation:gl-pk 3.6s ease-out infinite}
@keyframes gl-pk{0%{opacity:0;transform:scaleY(.1)}14%,86%{opacity:1;transform:none}100%{opacity:0}}
.gl svg .gl-pulse{transform-box:fill-box;transform-origin:center;animation:sc-pulse 1.6s ease-in-out infinite}
.gl svg .gl-ripple{transform-box:fill-box;transform-origin:center;animation:gl-ripple 1.8s ease-out infinite}
@keyframes gl-ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.3)}}
.gl svg .gl-bub{transform-box:fill-box;transform-origin:center;opacity:0;animation:gl-bub 2.2s ease-in infinite}
@keyframes gl-bub{0%{opacity:0;transform:translateY(0)}25%{opacity:.95}100%{opacity:0;transform:translateY(-12px)}}
.gl svg .gl-lid{animation:gl-lid 1.8s ease-in-out infinite alternate}
@keyframes gl-lid{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.gl svg .gl-wave{animation:gl-wave 2.4s linear infinite}
@keyframes gl-wave{to{transform:translateX(-16px)}}
.gl svg .gl-puff{transform-box:fill-box;transform-origin:center;opacity:0;animation:gl-puff 2.8s ease-out infinite}
@keyframes gl-puff{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:.9}100%{opacity:0;transform:translate(6px,-16px) scale(1.5)}}
.gl svg .gl-door{animation:gl-door 3.4s ease-in-out infinite alternate}
@keyframes gl-door{from{transform:translateY(0)}to{transform:translateY(-22px)}}
.gl svg .gl-crack{stroke-dasharray:30;stroke-dashoffset:30;animation:gl-crack 3.2s ease-in-out infinite}
@keyframes gl-crack{0%{stroke-dashoffset:30}40%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
.gl svg .gl-wrench{transform-box:fill-box;transform-origin:center;animation:gl-wrench 1.6s ease-in-out infinite alternate}
@keyframes gl-wrench{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@media (prefers-reduced-motion: reduce){.gl *{animation:none!important}.gl svg .gl-pk,.gl svg .gl-crack{opacity:1;stroke-dashoffset:0}}

/* ---------- "whoever answers first": the race ---------- */
.sc-race{display:grid;place-items:center;padding:2% 3%}
.sc-race svg{width:100%;height:100%}
.sc-race text{font-family:var(--sc-font,inherit);fill:var(--sc-ink)}
.sc-race text.muted{opacity:.66}.sc-race .muted-f{fill:var(--sc-ink);opacity:.35}
.sc-race .box{fill:var(--sc-card,var(--sc-bg));stroke:var(--sc-line);stroke-width:2}
.sc-race .you .box{stroke:var(--sc-accent);stroke-width:3}
.sc-race .ph{fill:var(--sc-card,var(--sc-bg));stroke:var(--sc-ink);stroke-width:4}
.sc-race .scr{fill:var(--sc-accent);opacity:.9}
.sc-race .ln{fill:none;stroke:var(--sc-line);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.sc-race .ln.you{stroke:var(--sc-accent)}
.sc-race .arcs path{fill:none;stroke:var(--sc-accent);stroke-width:4;stroke-linecap:round}
.sc-race .arcs{opacity:0}
.sc-race .bars rect{fill:var(--sc-accent);transform-box:fill-box;transform-origin:center}
.sc-race .chipbg{fill:var(--sc-good)}.sc-race text.chiptx{fill:#fff}
.sc-race .rc-x .dim{opacity:.5}.sc-race .rc-x .st1{opacity:0}.sc-race .you .st1{opacity:0}
.sc-race .rc-x .st2{opacity:1}.sc-race .you .st2{opacity:0}
.sc-race .l1,.sc-race .l3{opacity:.7}
.sc-race .ln.l1{animation:rc-line 8s ease-out infinite}.sc-race .ln.l3{animation:rc-line 8s ease-out .55s infinite}.sc-race .ln.l2{animation:rc-line2 8s ease-out infinite}
@keyframes rc-line{0%{stroke-dashoffset:1}9%,90%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes rc-line2{0%{stroke-dashoffset:1}6%,90%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
.sc-race .cr{animation:rc-cr 8s linear infinite}
@keyframes rc-cr{0%{opacity:0}4%{opacity:1}12%{opacity:.25}18%{opacity:1}24%,100%{opacity:0}}
.sc-race .rc-x .ra{animation:rc-ra 8s linear infinite}
@keyframes rc-ra{0%,8%{opacity:0}10%{opacity:1}16%{opacity:.2}20%{opacity:1}26%{opacity:.2}30%{opacity:1}36%{opacity:.2}40%,100%{opacity:0}}
.sc-race .rc-x .dim{animation:rc-dim 8s linear infinite}
@keyframes rc-dim{0%,38%{opacity:1}46%,90%{opacity:.5}98%,100%{opacity:1}}
.sc-race .rc-x .st1{animation:rc-st1 8s linear infinite}
@keyframes rc-st1{0%,6%{opacity:0}10%,38%{opacity:1}42%,100%{opacity:0}}
.sc-race .rc-x .st2{animation:rc-st2 8s linear infinite}
@keyframes rc-st2{0%,40%{opacity:0}46%,92%{opacity:1}98%,100%{opacity:0}}
.sc-race .you .yr{animation:rc-yr 8s linear infinite}
@keyframes rc-yr{0%,4%{opacity:0}6%{opacity:1}10%{opacity:.2}13%{opacity:1}16%{opacity:.2}18%,100%{opacity:0}}
.sc-race .you .st1{animation:rc-ystate 8s linear infinite}
@keyframes rc-ystate{0%,4%{opacity:0}6%,16%{opacity:1}18%,100%{opacity:0}}
.sc-race .you .st2{animation:rc-yst2 8s linear infinite}
@keyframes rc-yst2{0%,16%{opacity:0}20%,36%{opacity:1}40%,100%{opacity:0}}
.sc-race .you .bars{animation:rc-bars 8s linear infinite}
@keyframes rc-bars{0%,18%{opacity:0}22%,88%{opacity:1}96%,100%{opacity:0}}
.sc-race .you .bars rect{animation:sc-bar .5s ease-in-out infinite alternate}
.sc-race .you .chip{animation:rc-chip 8s ease-out infinite}
@keyframes rc-chip{0%,38%{opacity:0;transform:translateY(8px)}44%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(8px)}}

/* ---------- step icons ---------- */
.scene.mini{background:transparent;container-type:normal;overflow:visible;color:var(--sc-ink)}
.mini svg{width:100%;height:100%;overflow:visible}
.mini svg text{font-family:var(--sc-font,inherit);fill:var(--sc-ink)}.mini .lab{opacity:.72}
.mini .trk{fill:none;stroke:var(--sc-line);stroke-width:5}
.mini .prog{fill:none;stroke:var(--sc-accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;animation:mn-prog 6s ease-in-out infinite}
@keyframes mn-prog{0%{stroke-dashoffset:100}70%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
.mini .hand{stroke:var(--sc-ink);stroke-width:4;stroke-linecap:round;fill:none}
.mini .hand.h2{transform-box:view-box;transform-origin:60px 44px;animation:sc-spin 6s linear infinite}
.mini .tg .trk{fill:var(--sc-line);stroke:none;animation:mn-trk 4.2s ease-in-out infinite}
.mini .tg .kn{fill:var(--sc-card,#fff);stroke:var(--sc-ink);stroke-width:2;animation:mn-kn 4.2s ease-in-out infinite}
@keyframes mn-trk{0%,8%{fill:var(--sc-line)}20%,86%{fill:var(--sc-accent)}100%{fill:var(--sc-line)}}
@keyframes mn-kn{0%,8%{transform:translateX(0)}20%,86%{transform:translateX(16px)}100%{transform:translateX(0)}}
.mini .ph{fill:var(--sc-card,transparent);stroke:var(--sc-ink);stroke-width:4}
.mini .scr{fill:var(--sc-accent);opacity:.9}
.mini .wv rect{fill:var(--sc-accent);transform-box:fill-box;transform-origin:center;animation:sc-bar .5s ease-in-out infinite alternate}
.mini .ok{fill:var(--sc-good);transform-box:fill-box;transform-origin:center;animation:mn-ok 6s ease-out infinite}
.mini .okp{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;animation:mn-okp 6s ease-out infinite}
@keyframes mn-ok{0%,38%{opacity:0;transform:scale(.4)}48%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mn-okp{0%,46%{stroke-dashoffset:22}58%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:22}}
.mini .arr{fill:none;stroke:var(--sc-line);stroke-width:4;stroke-linecap:round;stroke-dasharray:5 6}
.mini .arh{fill:none;stroke:var(--sc-accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.mini .dt{fill:var(--sc-accent);animation:mn-dt 1.6s linear infinite}.mini .dt.d2{animation-delay:.8s}
@keyframes mn-dt{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(30px);opacity:0}}
.mini .chp{fill:var(--sc-accent)}.mini text.chpt{fill:var(--sc-on-accent,#fff)}

/* ---------- the pilot as time ---------- */
.sc-pilot{display:grid;place-items:center}
.sc-pilot svg{width:100%;height:100%}
.sc-pilot text{font-family:var(--sc-font,inherit);fill:var(--sc-ink)}.sc-pilot text.muted{opacity:.66}.sc-pilot text.big{fill:var(--sc-accent)}
.sc-pilot .rail{fill:none;stroke:var(--sc-line);stroke-width:4;stroke-linecap:round}.sc-pilot .rail.dash{stroke-dasharray:3 9}
.sc-pilot .dt{fill:var(--sc-accent);animation:pl-dot 9s ease-out infinite}
@keyframes pl-dot{0%{opacity:.18;transform:scale(.6)}2%{opacity:1;transform:scale(1.25)}4%,86%{opacity:1;transform:none}96%,100%{opacity:.18;transform:scale(.6)}}
.sc-pilot .dt{transform-box:fill-box;transform-origin:center}
.sc-pilot .ptr{fill:none;stroke:var(--sc-ink);stroke-width:3;animation:pl-ptr 9s linear infinite}
@keyframes pl-ptr{0%{transform:translateX(0);opacity:1}58%,86%{transform:translateX(322px);opacity:1}96%,100%{transform:translateX(322px);opacity:0}}
.sc-pilot .node circle{fill:var(--sc-card,var(--sc-bg));stroke:var(--sc-accent);stroke-width:4;transform-box:fill-box;transform-origin:center;animation:pl-node 9s ease-out infinite}
@keyframes pl-node{0%,55%{transform:scale(1)}62%{transform:scale(1.25)}70%,100%{transform:scale(1)}}
.sc-pilot .then{animation:pl-then 9s ease-out infinite}
@keyframes pl-then{0%,60%{opacity:0;transform:translateX(-10px)}70%,88%{opacity:1;transform:none}97%,100%{opacity:0}}
.sc-pilot .arrowh{fill:none;stroke:var(--sc-accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.sc-pilot .brk{fill:none;stroke:var(--sc-line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion: reduce){.sc-race .rc-x .dim{opacity:.5}.sc-race .ln{stroke-dashoffset:0}}

/* things that animate only while on screen, and blocks that fade in as they arrive */
[data-anim] *{animation-play-state:paused}[data-anim].on *{animation-play-state:running}
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease var(--rv-d,0ms),transform .55s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}[data-anim] *{animation:none!important}}
.mini .ev{fill:var(--sc-line);transform-box:fill-box;transform-origin:left;animation:mn-ev 6s ease-out infinite}.mini .ev.e2{animation-delay:.5s}.mini .ev.e3{fill:var(--sc-accent);animation-delay:1.3s}
@keyframes mn-ev{0%{opacity:0;transform:translateX(-14px) scaleX(.6)}12%,88%{opacity:1;transform:none}100%{opacity:0}}