.hd{--hd-ease-out:cubic-bezier(.16, 1, .3, 1);--hd-ease-io:cubic-bezier(.65, 0, .25, 1);--hd-spring:cubic-bezier(.34, 1.45, .64, 1);position:relative}@supports (animation-timing-function:linear(0, 1)){.hd{--hd-spring:linear(0, .369 4.5%, .686 9.1%, .909 13.6%, 1.036 18.2%, 1.09 22.7%, 1.096 27.3%, 1.078 31.8%, 1.052 36.4%, 1.028 40.9%, 1.01 45.5%, .999 50%, .994 54.5%, .993 59.1%, .994 63.6%, .996 68.2%, .998 72.7%, .999 77.3%, 1 81.8%, 1 100%)}}.hd-frame{border:1px solid var(--border);background:var(--surface-alt);border-radius:1.25rem;padding:.75rem;container:hd/inline-size}.hd-stage{--pl:6;--pt:69;--pw:88;--ph:10;--rh:12;--tick:7.5;--cw:72;--ax:14cqw;--ay:0cqw;--st:9;--sh:54;--span:95;aspect-ratio:100/122;width:100%;position:relative;container:hd-stage/size}@container hd (min-width:26rem){.hd-stage{--pl:55;--pt:8;--pw:43;--ph:10.5;--rh:12.5;--tick:4.8;--cw:32;--ax:0cqw;--ay:-9cqw;--st:8;--sh:49;--span:53;aspect-ratio:100/61}}.hd-tag{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.75rem;font-weight:600;line-height:1;position:absolute;top:2.5cqw;left:3cqw}.hd-tag-after{left:calc(var(--pl) * 1cqw);top:calc((var(--pt) - 5.5) * 1cqw);color:var(--accent)}.hd-card{--dx:calc((var(--tx) - var(--cx)) * 1cqw);--dy:calc((var(--ty) - var(--cy)) * 1cqw);--tx:calc(var(--pl) + var(--tick));--ty:calc(var(--pt) + var(--ph) + var(--rh) * (var(--row) - .5));left:calc(var(--cx) * 1cqw);top:calc(var(--cy) * 1cqw);z-index:var(--z);width:calc(var(--cw) * 1cqw);translate:-50% -50%;transform:rotate(var(--r));position:absolute}.hd-card-in{--jx:.5cqw;--jy:.35cqw}.hd-card-face{border:1px solid var(--border);background:var(--surface);color:var(--foreground);box-shadow:0 2px 8px -2px color-mix(in srgb, var(--foreground) 18%, transparent);border-radius:.625rem;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.8125rem;font-weight:500;line-height:1.2;display:flex;position:relative}.hd-card-icon{color:var(--muted);flex:none}.hd-alert{border:1.5px solid var(--foreground);background:var(--surface);width:1.25rem;height:1.25rem;color:var(--foreground);border-radius:9999px;place-items:center;font-size:.75rem;font-weight:700;line-height:1;display:grid;position:absolute;top:-.5rem;right:-.375rem}.hd-c1{--cx:40;--cy:17;--r:-4deg;--row:1;--z:1}.hd-c2{--cx:48;--cy:29;--r:3.5deg;--row:2;--z:2}.hd-c3{--cx:58;--cy:41;--r:-2.5deg;--row:3;--z:3}.hd-c4{--cx:42;--cy:53;--r:-9deg;--row:3;--z:4}@container hd (min-width:26rem){.hd-c1{--cx:19;--cy:16}.hd-c2{--cx:28;--cy:27}.hd-c3{--cx:34;--cy:38}.hd-c4{--cx:22;--cy:48.5}}.hd-loop{z-index:5;border:1px solid var(--border);background:var(--surface);width:1.75rem;height:1.75rem;color:var(--muted);border-radius:9999px;place-items:center;display:grid;position:absolute;top:23cqw;left:93cqw;translate:-50% -50%}@container hd (min-width:26rem){.hd-loop{top:22cqw;left:47cqw}}.hd-sweep{left:0;top:calc(var(--st) * 1cqw);z-index:6;width:0;height:calc(var(--sh) * 1cqw);opacity:0;pointer-events:none;position:absolute}.hd-sweep-line{background:linear-gradient(to bottom, transparent, var(--accent) 12%, var(--accent) 88%, transparent);width:2px;height:100%;box-shadow:0 0 14px 1px color-mix(in srgb, var(--accent) 55%, transparent);border-radius:2px;position:absolute;left:-1px}.hd-sweep-trail{background:linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 22%, transparent));width:10cqw;height:100%;position:absolute;right:0}.hd-sweep-dot{background:var(--accent);width:.625rem;height:.625rem;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);border-radius:9999px;position:absolute;top:-.25rem;left:-.3125rem}.hd-panel{left:calc(var(--pl) * 1cqw);top:calc(var(--pt) * 1cqw);z-index:1;width:calc(var(--pw) * 1cqw);border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));background:var(--surface);box-shadow:0 6px 20px -8px color-mix(in srgb, var(--foreground) 22%, transparent);border-radius:.875rem;position:absolute}.hd-panel-glow{border-radius:inherit;box-shadow:0 0 0 2px var(--accent), 0 0 26px 2px color-mix(in srgb, var(--accent) 45%, transparent);opacity:0;pointer-events:none;position:absolute;inset:-1px}.hd-panel-head{height:calc(var(--ph) * 1cqw);border-bottom:1px solid var(--border);align-items:center;gap:.5rem;padding-inline:.75rem;font-size:.9375rem;font-weight:600;line-height:1;display:flex}.hd-panel-dot{background:var(--accent);border-radius:9999px;width:.5rem;height:.5rem}.hd-rows{padding:0 0 calc(var(--rh) * .2cqw);margin:0;list-style:none}.hd-row{height:calc(var(--rh) * 1cqw);align-items:center;gap:.625rem;padding-inline:.75rem;font-size:.8125rem;font-weight:500;line-height:1.2;display:flex;position:relative}.hd-row+.hd-row{border-top:1px solid var(--border)}.hd-row-glow{background:var(--accent-soft);opacity:0;pointer-events:none;position:absolute;inset:0}.hd-tick{flex:none;width:1.375rem;height:1.375rem;position:relative}.hd-tick-fill{transform-box:fill-box;transform-origin:50%}.hd-tick-path{stroke-dasharray:1;stroke-dashoffset:0}.hd-row-label{position:relative}.hd-foot{justify-content:space-between;align-items:center;gap:.75rem;margin-top:.25rem;display:flex}.hd-caption{text-align:center;min-height:1.5rem;color:var(--foreground);margin:.625rem 0 0;font-size:.875rem;font-weight:500;line-height:1.5rem}.hd-chip{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:9999px;margin:0;padding:.125rem .625rem;font-size:.75rem;font-weight:500;line-height:1.25rem}.hd-controls-slot{min-height:2.75rem}.hd-controls{gap:.25rem;display:none}.hd-btn{border:1px solid var(--muted);background:var(--surface);width:2.75rem;height:2.75rem;color:var(--foreground);border-radius:9999px;place-items:center;transition:color .2s,background-color .2s;display:inline-grid}.hd-btn:hover,.hd-btn:focus-visible{background:var(--accent-soft)}@media (prefers-reduced-motion:no-preference){.hd[data-hd=play] .hd-controls{display:flex}.hd[data-paused] *,.hd[data-idle] *{animation-play-state:paused!important}.hd[data-hd=play] .hd-card{animation:var(--hd-card) 8s linear infinite both}.hd[data-hd=play] .hd-c1{--hd-card:hd-card-1}.hd[data-hd=play] .hd-c2{--hd-card:hd-card-2}.hd[data-hd=play] .hd-c3{--hd-card:hd-card-3}.hd[data-hd=play] .hd-c4{--hd-card:hd-card-4}.hd[data-hd=play] .hd-card-in{animation:hd-jitter var(--jd,2.2s) ease-in-out var(--jl,0s) infinite alternate both}.hd[data-hd=play] .hd-c2 .hd-card-in{--jd:2.7s;--jl:-.9s}.hd[data-hd=play] .hd-c3 .hd-card-in{--jd:1.9s;--jl:-1.4s}.hd[data-hd=play] .hd-c4 .hd-card-in{--jd:3.1s;--jl:-.4s}.hd[data-hd=play] .hd-loop{animation:8s linear infinite both hd-badge}.hd[data-hd=play] .hd-loop-icon{animation:3.4s linear infinite hd-spin}.hd[data-hd=play] .hd-sweep{animation:8s linear infinite both hd-sweep}.hd[data-hd=play] .hd-panel-glow{animation:8s linear infinite both hd-panel-glow}.hd[data-hd=play] .hd-caption{animation:8s linear infinite both hd-caption}.hd[data-hd=play] .hd-r1{--hd-n:1}.hd[data-hd=play] .hd-r2{--hd-n:2}.hd[data-hd=play] .hd-r3{--hd-n:3}.hd[data-hd=play] .hd-r1 .hd-tick-fill{animation:8s linear infinite both hd-tick-1}.hd[data-hd=play] .hd-r2 .hd-tick-fill{animation:8s linear infinite both hd-tick-2}.hd[data-hd=play] .hd-r3 .hd-tick-fill{animation:8s linear infinite both hd-tick-3}.hd[data-hd=play] .hd-r1 .hd-tick-path{animation:8s linear infinite both hd-path-1}.hd[data-hd=play] .hd-r2 .hd-tick-path{animation:8s linear infinite both hd-path-2}.hd[data-hd=play] .hd-r3 .hd-tick-path{animation:8s linear infinite both hd-path-3}.hd[data-hd=play] .hd-r1 .hd-row-label{animation:8s linear infinite both hd-label-1}.hd[data-hd=play] .hd-r2 .hd-row-label{animation:8s linear infinite both hd-label-2}.hd[data-hd=play] .hd-r3 .hd-row-label{animation:8s linear infinite both hd-label-3}.hd[data-hd=play] .hd-r1 .hd-row-glow{animation:8s linear infinite both hd-glow-1}.hd[data-hd=play] .hd-r2 .hd-row-glow{animation:8s linear infinite both hd-glow-2}.hd[data-hd=play] .hd-r3 .hd-row-glow{animation:8s linear infinite both hd-glow-3}}@keyframes hd-jitter{0%{transform:translate(calc(var(--jx) * -1), calc(var(--jy) * -1)) rotate(-.7deg)}to{transform:translate(var(--jx), var(--jy)) rotate(.7deg)}}@keyframes hd-spin{to{transform:rotate(360deg)}}@keyframes hd-card-1{0%,15%{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1);animation-timing-function:var(--hd-ease-out)}16.875%{opacity:1;transform:translate(0, -.8cqw) rotate(calc(var(--r) * .3)) scale(1.05);animation-timing-function:var(--hd-ease-io)}18.75%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.5,1);transform:translateY(-1.1cqw)rotate(0)scale(1.03)}24.688%{opacity:1;transform:translate(calc(var(--dx) * .5 + var(--ax)), calc(var(--dy) * .5 + var(--ay))) rotate(0deg) scale(.6);animation-timing-function:cubic-bezier(.4,0,.8,.6)}29.375%{opacity:.9;transform:translate(calc(var(--dx) * .96), calc(var(--dy) * .96)) rotate(0deg) scale(.3)}30.625%{opacity:0;transform:translate(var(--dx), var(--dy)) rotate(0deg) scale(.2)}30.75%,87.5%{opacity:0;transform:translate(0, .8cqw) rotate(var(--r)) scale(.6);animation-timing-function:var(--hd-spring)}96.25%,to{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1)}}@keyframes hd-card-2{0%,19.375%{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1);animation-timing-function:var(--hd-ease-out)}21.25%{opacity:1;transform:translate(0, -.8cqw) rotate(calc(var(--r) * .3)) scale(1.05);animation-timing-function:var(--hd-ease-io)}23.125%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.5,1);transform:translateY(-1.1cqw)rotate(0)scale(1.03)}29.063%{opacity:1;transform:translate(calc(var(--dx) * .5 + var(--ax)), calc(var(--dy) * .5 + var(--ay))) rotate(0deg) scale(.6);animation-timing-function:cubic-bezier(.4,0,.8,.6)}33.75%{opacity:.9;transform:translate(calc(var(--dx) * .96), calc(var(--dy) * .96)) rotate(0deg) scale(.3)}35%{opacity:0;transform:translate(var(--dx), var(--dy)) rotate(0deg) scale(.2)}35.125%,88.75%{opacity:0;transform:translate(0, .8cqw) rotate(var(--r)) scale(.6);animation-timing-function:var(--hd-spring)}97.5%,to{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1)}}@keyframes hd-card-3{0%,23.75%{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1);animation-timing-function:var(--hd-ease-out)}25.625%{opacity:1;transform:translate(0, -.8cqw) rotate(calc(var(--r) * .3)) scale(1.05);animation-timing-function:var(--hd-ease-io)}27.5%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.5,1);transform:translateY(-1.1cqw)rotate(0)scale(1.03)}33.438%{opacity:1;transform:translate(calc(var(--dx) * .5 + var(--ax)), calc(var(--dy) * .5 + var(--ay))) rotate(0deg) scale(.6);animation-timing-function:cubic-bezier(.4,0,.8,.6)}38.125%{opacity:.9;transform:translate(calc(var(--dx) * .96), calc(var(--dy) * .96)) rotate(0deg) scale(.3)}39.375%{opacity:0;transform:translate(var(--dx), var(--dy)) rotate(0deg) scale(.2)}39.5%,90%{opacity:0;transform:translate(0, .8cqw) rotate(var(--r)) scale(.6);animation-timing-function:var(--hd-spring)}98.75%,to{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1)}}@keyframes hd-card-4{0%,18.125%{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1);animation-timing-function:var(--hd-ease-out)}18.125%{opacity:1;transform:translate(0, 0) rotate(calc(var(--r) - 5deg)) scale(1);animation-timing-function:ease-in-out}19.625%{opacity:1;transform:translate(.7cqw, 0) rotate(calc(var(--r) + 4deg)) scale(1);animation-timing-function:ease-in-out}21.125%{opacity:1;transform:translate(-.6cqw, 0) rotate(calc(var(--r) - 3.5deg)) scale(1);animation-timing-function:ease-in-out}22.625%{opacity:1;transform:translate(.3cqw, 0) rotate(calc(var(--r) + 1.5deg)) scale(1);animation-timing-function:ease-in-out}24.375%{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1);animation-timing-function:ease-in-out}28.75%{opacity:1;transform:translate(0, 0) rotate(calc(var(--r) - 5deg)) scale(1);animation-timing-function:ease-in-out}30.25%{opacity:1;transform:translate(.7cqw, 0) rotate(calc(var(--r) + 4deg)) scale(1);animation-timing-function:ease-in-out}31.75%{opacity:1;transform:translate(-.6cqw, 0) rotate(calc(var(--r) - 3.5deg)) scale(1);animation-timing-function:ease-in-out}33.25%{opacity:1;transform:translate(.3cqw, 0) rotate(calc(var(--r) + 1.5deg)) scale(1);animation-timing-function:ease-in-out}35%{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1);animation-timing-function:ease-in-out}35%,41.875%{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1);animation-timing-function:var(--hd-ease-out)}43.75%{opacity:1;transform:translate(0, -.8cqw) rotate(calc(var(--r) * .3)) scale(1.05);animation-timing-function:var(--hd-ease-io)}45.625%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.5,1);transform:translateY(-1.1cqw)rotate(0)scale(1.03)}51.563%{opacity:1;transform:translate(calc(var(--dx) * .5 + var(--ax)), calc(var(--dy) * .5 + var(--ay))) rotate(0deg) scale(.6);animation-timing-function:cubic-bezier(.4,0,.8,.6)}56.25%{opacity:.9;transform:translate(calc(var(--dx) * .96), calc(var(--dy) * .96)) rotate(0deg) scale(.3)}57.5%{opacity:0;transform:translate(var(--dx), var(--dy)) rotate(0deg) scale(.2)}57.625%,91.25%{opacity:0;transform:translate(0, .8cqw) rotate(var(--r)) scale(.6);animation-timing-function:var(--hd-spring)}to,to{opacity:1;transform:translate(0, 0) rotate(var(--r)) scale(1)}}@keyframes hd-tick-1{0%,29.125%{animation-timing-function:var(--hd-spring);transform:translateY(0)scale(0)}30.625%{animation-timing-function:ease-in-out;transform:translateY(-3px)scale(1.18)}33.375%{transform:translateY(0)scale(1)}86.25%{animation-timing-function:ease-in;transform:translateY(0)scale(1)}92.5%,to{transform:translateY(0)scale(0)}}@keyframes hd-path-1{0%,30.375%{stroke-dashoffset:1px;animation-timing-function:var(--hd-ease-io)}34.125%{stroke-dashoffset:0}86.25%{stroke-dashoffset:0}91.25%,to{stroke-dashoffset:1px}}@keyframes hd-label-1{0%,29.375%{opacity:.4;animation-timing-function:var(--hd-ease-out)}34.375%{opacity:1}86.25%{opacity:1;animation-timing-function:ease-in}92.5%,to{opacity:.4}}@keyframes hd-glow-1{0%,30%{opacity:0;animation-timing-function:var(--hd-ease-out)}32.125%{opacity:1;animation-timing-function:ease-out}39.375%{opacity:0}39.375%,to{opacity:0}}@keyframes hd-tick-2{0%,33.5%{animation-timing-function:var(--hd-spring);transform:translateY(0)scale(0)}35%{animation-timing-function:ease-in-out;transform:translateY(-3px)scale(1.18)}37.75%{transform:translateY(0)scale(1)}87.5%{animation-timing-function:ease-in;transform:translateY(0)scale(1)}93.75%,to{transform:translateY(0)scale(0)}}@keyframes hd-path-2{0%,34.75%{stroke-dashoffset:1px;animation-timing-function:var(--hd-ease-io)}38.5%{stroke-dashoffset:0}87.5%{stroke-dashoffset:0}92.5%,to{stroke-dashoffset:1px}}@keyframes hd-label-2{0%,33.75%{opacity:.4;animation-timing-function:var(--hd-ease-out)}38.75%{opacity:1}87.5%{opacity:1;animation-timing-function:ease-in}93.75%,to{opacity:.4}}@keyframes hd-glow-2{0%,34.375%{opacity:0;animation-timing-function:var(--hd-ease-out)}36.5%{opacity:1;animation-timing-function:ease-out}43.75%{opacity:0}43.75%,to{opacity:0}}@keyframes hd-tick-3{0%,37.875%{animation-timing-function:var(--hd-spring);transform:translateY(0)scale(0)}39.375%{animation-timing-function:ease-in-out;transform:translateY(-3px)scale(1.18)}42.125%{transform:translateY(0)scale(1)}57.25%{animation-timing-function:var(--hd-ease-out);transform:translateY(0)scale(1)}59.25%{animation-timing-function:ease-in;transform:translateY(-4px)scale(1.22)}61.75%{transform:translateY(0)scale(1)}88.75%{animation-timing-function:ease-in;transform:translateY(0)scale(1)}95%,to{transform:translateY(0)scale(0)}}@keyframes hd-path-3{0%,39.125%{stroke-dashoffset:1px;animation-timing-function:var(--hd-ease-io)}42.875%{stroke-dashoffset:0}88.75%{stroke-dashoffset:0}93.75%,to{stroke-dashoffset:1px}}@keyframes hd-label-3{0%,38.125%{opacity:.4;animation-timing-function:var(--hd-ease-out)}43.125%{opacity:1}88.75%{opacity:1;animation-timing-function:ease-in}95%,to{opacity:.4}}@keyframes hd-glow-3{0%,38.75%{opacity:0;animation-timing-function:var(--hd-ease-out)}40.875%{opacity:1;animation-timing-function:ease-out}48.125%{opacity:0}56.875%{opacity:0;animation-timing-function:var(--hd-ease-out)}59%{opacity:1;animation-timing-function:ease-out}66.25%,to{opacity:0}}@keyframes hd-sweep{0%,12.5%{opacity:0;animation-timing-function:var(--hd-ease-out);transform:translate(0)}14.375%{opacity:1;animation-timing-function:var(--hd-ease-io);transform:translate(0)}35%{opacity:1;transform:translateX(calc(var(--span) * 1cqw));animation-timing-function:ease-in}38.75%,to{opacity:0;transform:translateX(calc(var(--span) * 1cqw))}}@keyframes hd-panel-glow{0%,56.875%{opacity:0;animation-timing-function:var(--hd-ease-out)}60.625%{opacity:1;animation-timing-function:ease-in-out}73.75%,to{opacity:0}}@keyframes hd-caption{0%,60.625%{opacity:0;animation-timing-function:var(--hd-ease-out);transform:translateY(6px)}67.5%{opacity:1;transform:none}86.25%{opacity:1;animation-timing-function:ease-in;transform:none}92.5%,to{opacity:0;transform:translateY(-4px)}}@keyframes hd-badge{0%,16.25%{opacity:1;animation-timing-function:ease-in;transform:scale(1)}22.5%,91.25%{opacity:0;animation-timing-function:var(--hd-spring);transform:scale(.5)}98.75%,to{opacity:1;transform:scale(1)}}
