/* SEQ1 SESSIONS figures, v6. Hairlines and type follow the render size (--sw, --fs are set by measure()); every label is centred on its mark's line. */
.sk.ill{max-width:none;margin:0;width:100%;padding:clamp(12px,1.4vw,18px);background:rgba(var(--bg-rgb),.78);border-radius:4px;position:relative}
.sk.ill:before,.sk.ill:after{content:"";position:absolute;width:14px;height:14px;border:1px solid rgba(var(--fg-rgb),.32)}
.sk.ill:before{left:0;top:0;border-right:0;border-bottom:0}.sk.ill:after{right:0;bottom:0;border-left:0;border-top:0}
.sk[data-fig][data-opt]{display:none}
html[data-hero="a"] .sk[data-fig="hero"][data-opt="a"],html[data-hero="b"] .sk[data-fig="hero"][data-opt="b"],html[data-hero="c"] .sk[data-fig="hero"][data-opt="c"],html[data-signin="a"] .sk[data-fig="signin"][data-opt="a"],html[data-signin="b"] .sk[data-fig="signin"][data-opt="b"],html[data-signin="c"] .sk[data-fig="signin"][data-opt="c"]{display:block}
.sk[data-v="n"] svg.vw,.sk:not([data-v="n"]) svg.vn{display:none}
.ill svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:var(--sw,1);stroke-linecap:round;stroke-linejoin:round}
.ill .w0{stroke-width:calc(var(--sw,1) * .65)}
.ill .w2{stroke-width:calc(var(--sw,1) * 1.7)}
.ill svg text{font-family:var(--mono);fill:rgba(var(--fg-rgb),.74);stroke:none;dominant-baseline:central;font-size:calc(var(--fs,8) * 1px);letter-spacing:.04em}
.ill svg text.k{fill:var(--fg)}
.ill svg text.tb{font-family:var(--sans);font-weight:600;font-style:italic;letter-spacing:0;fill:var(--fg);font-size:calc(var(--fs,8) * 1.5px)}
.ill svg text.tu{font-family:var(--sans);font-weight:600;letter-spacing:0;fill:var(--fg);font-size:calc(var(--fs,8) * 1.2px)}
.ill svg text.dg{font-family:var(--mono);font-weight:700;letter-spacing:0;fill:var(--fg);font-size:calc(var(--fs,8) * 1.5px)}
.ill.tiny .sm{display:none}
.sk figcaption{font-family:var(--mono);font-size:.6875rem;color:var(--grey);margin-top:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.lv-dot{color:var(--live)}
.sk .lv{color:var(--live)}
.roll,.key,.kn,.sup,.press,.rl1,.rl2,.rl3,.rl4,.slide{transform-box:view-box}
.lvl,.td{transform-box:fill-box;transform-origin:50% 50%}
/* every loop is 9 s and every moving part is offset with --d (seconds). Each loop ends on the picture it began with; nothing resets to empty. */
.sk.live .roll{animation:roll 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes roll{0%,14%{transform:translateY(0)}24%,39%{transform:translateY(calc(var(--p) * -1))}49%,64%{transform:translateY(calc(var(--p) * -2))}74%,89%{transform:translateY(calc(var(--p) * -3))}99%,100%{transform:translateY(calc(var(--p) * -4))}}
.sk.live .rl2{animation:rl2 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes rl2{0%,28%{transform:translateY(0)}40%,62%{transform:translateY(calc(var(--p) * -1))}74%,100%{transform:translateY(calc(var(--p) * -2))}}
.sk.live .rl3{animation:rl3 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes rl3{0%,20%{transform:translateY(0)}27%,45%{transform:translateY(calc(var(--p) * -1))}52%,70%{transform:translateY(calc(var(--p) * -2))}77%,100%{transform:translateY(calc(var(--p) * -3))}}
.sk.live .rl4{animation:rl4 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes rl4{0%,14%{transform:translateY(0)}24%,39%{transform:translateY(calc(var(--p) * -1))}49%,64%{transform:translateY(calc(var(--p) * -2))}74%,89%{transform:translateY(calc(var(--p) * -3))}99%,100%{transform:translateY(calc(var(--p) * -4))}}
.sk.live .key{animation:keyp 9s ease-in-out infinite}
@keyframes keyp{0%,6%{transform:translateX(0)}9%,12%{transform:translateX(2.4px)}15%,31%{transform:translateX(0)}34%,37%{transform:translateX(2.4px)}40%,56%{transform:translateX(0)}59%,62%{transform:translateX(2.4px)}65%,81%{transform:translateX(0)}84%,87%{transform:translateX(2.4px)}90%,100%{transform:translateX(0)}}
.sk.live .lvl{animation:lvl 9s ease-in-out infinite}
@keyframes lvl{0%,6%{transform:scaleY(1)}9%{transform:scaleY(1.7)}12%{transform:scaleY(.6)}15%,31%{transform:scaleY(1)}34%{transform:scaleY(1.7)}37%{transform:scaleY(.6)}40%,56%{transform:scaleY(1)}59%{transform:scaleY(1.7)}62%{transform:scaleY(.6)}65%,81%{transform:scaleY(1)}84%{transform:scaleY(1.7)}87%{transform:scaleY(.6)}90%,100%{transform:scaleY(1)}}
.sk.in .caret{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sk.live .td{animation:td 1.5s ease-in-out infinite}
@keyframes td{0%,55%,100%{transform:translateY(0)}28%{transform:translateY(-3px)}}
.sk.live .kn{animation:kn 9s ease-in-out infinite}
@keyframes kn{0%,30%{transform:translateX(0)}38%,58%{transform:translateX(-12px)}66%,100%{transform:translateX(0)}}
.sk.live .press{animation:press 9s ease-in-out infinite}
@keyframes press{0%,14%{transform:translateY(0)}17%,20%{transform:translateY(1.8px)}24%,100%{transform:translateY(0)}}
/* an app or card that rises over a screen, holds, and drops back */
.sup{transform:translateY(var(--h,300px))}
.sk.live .sup{animation:sup 9s cubic-bezier(.3,.8,.3,1) infinite}
@keyframes sup{0%,22%{transform:translateY(var(--h,300px))}36%,66%{transform:translateY(0)}80%,100%{transform:translateY(var(--h,300px))}}
.dsh{stroke-dasharray:.07 .93;stroke-dashoffset:1;stroke-width:calc(var(--sw,1) * 2);opacity:0}
.sk.live .dsh{animation:dsh 9s linear infinite}
@keyframes dsh{0%,16%{stroke-dashoffset:1;opacity:0}17%{stroke-dashoffset:1;opacity:1}29%{stroke-dashoffset:0;opacity:1}30%,100%{stroke-dashoffset:0;opacity:0}}
.sk .dash{stroke-dasharray:3 4}
.sk.live .slide{animation:slide 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes slide{0%,20%{transform:translateX(0)}32%,62%{transform:translateX(var(--w,40px))}74%,100%{transform:translateX(0)}}
/* --d is a lag in seconds: a part holds the picture it began with until its lag has passed, then loops. Last, so the shorthands above cannot reset it. */
.sk.live [class^="rl"],.sk.live [class^="rx"],.sk.live .roll,.sk.live .key,.sk.live .lvl,.sk.live .td,.sk.live .kn,.sk.live .sup,.sk.live .press,.sk.live .dsh,.sk.live .slide,.sk.live .tabhl{animation-delay:calc(var(--d,0) * 1s)}
@media(prefers-reduced-motion:reduce){.sk.live *{animation:none!important}}
.rx3,.rx4{transform-box:view-box}
.sk.live .rx3{animation:rx3 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes rx3{0%,20%{transform:translateX(0)}27%,45%{transform:translateX(calc(var(--p) * -1))}52%,70%{transform:translateX(calc(var(--p) * -2))}77%,100%{transform:translateX(calc(var(--p) * -3))}}
.tabhl{transform-box:view-box}
.sk.live .tabhl{animation:tabhl 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes tabhl{0%,14%{transform:translateX(0)}24%,39%{transform:translateX(var(--p))}49%,64%{transform:translateX(calc(var(--p) * 2))}74%,89%{transform:translateX(calc(var(--p) * 3))}99%,100%{transform:translateX(0)}}