@layer components{.hs-col{--u:calc(var(--part) / var(--od))}.hs{position:relative;color:var(--color-fog-500)}.hs,.hs-window{inline-size:calc(var(--u) * var(--fw));block-size:calc(var(--u) * var(--fh))}.hs-window{--u:calc(var(--part) / var(--od) * min(var(--fw), var(--fh)) / var(--fit-mm, var(--fh)));inset-inline-start:calc(50% - var(--u) * (var(--ox) + var(--pm-x, 0)));inset-block-start:calc(var(--stage-center, 46.5%) - var(--u) * (var(--oy) - var(--pm-y, 0)))}.hs-cos,.hs-cos-in,.hs-end,.hs-grid,.hs-host,.hs-key,.hs-still,.hs-svg,.hs-window{position:absolute}.hs-cos,.hs-cos-in,.hs-grid,.hs-host,.hs-still,.hs-svg{inset:0}.hs-still img,.hs-svg{display:block;inline-size:100%;block-size:100%;overflow:visible}.hs-cos,.hs-end,.hs-grid,.hs-key,.hs-svg{pointer-events:none}.hs-key{inset-inline-start:calc(var(--u) * var(--ox));inset-block-start:calc(var(--u) * var(--oy));inline-size:calc(var(--part) * 1.2);aspect-ratio:1;transform:translate(-50%,-50%);background:var(--key-light)}.hs-grid{display:none;opacity:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0.5 0V40M0 0.5H40' stroke='%23ffffff' fill='none'/%3E%3C/svg%3E");background-size:40px 40px}.hs-host{visibility:hidden;pointer-events:none}.hs-front-hub{stroke:var(--color-fog-500);stroke-width:.5}.hs-drawing path,.hs-front-hub{vector-effect:non-scaling-stroke}.hs-drawing path{fill:none;stroke:var(--color-fog-300);stroke-width:1.25;stroke-linecap:round}.hs-drawing .ln-c{stroke:var(--color-fog-500);stroke-width:.75;stroke-dasharray:10 3 2 3}.hs-drawing .ln-v,.hs-ext .ld,.hs-tool .tp{--dl:calc(var(--len, 0) * var(--u))}.hs-tool .tp{stroke:var(--color-signal);stroke-width:2;stroke-linecap:round;stroke-dasharray:var(--dl) calc(var(--dl) + 4px);stroke-dashoffset:var(--dl)}.hs-tool .td,.hs-tool .tp{fill:none;vector-effect:non-scaling-stroke}.hs-tool .td{stroke:var(--color-signal);stroke-width:6;stroke-linecap:round;opacity:0;offset-path:var(--tp);offset-rotate:0deg}.co-lead path,.hs-ext path{fill:none;stroke:currentColor;stroke-width:.75;vector-effect:non-scaling-stroke}.co,.co-label{position:absolute}.co-label{color:var(--color-fog-400);font-size:13px;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}.co-at .co-label{inset-inline-end:0;transform:translateY(-50%)}.co-lead svg{position:absolute;inset:0 auto auto 0;inline-size:1px;block-size:1px;max-inline-size:none;overflow:visible}.co-lead .co-label{inset-inline-end:46px;inset-block-start:-30px;transform:translateY(-50%)}.co-dim{display:flex;align-items:center;block-size:9px;margin-block-start:-4.5px}.co-dim .m-tick{flex:none;inline-size:1px;block-size:9px;background:currentColor}.co-dim .m-rule{flex:1 1 auto;block-size:1px;background:currentColor;transform-origin:left center}.co-dim .co-label{inset-inline-start:50%;inset-block-start:14px;transform:translateX(-50%)}.hs-end .co-label{color:var(--color-fog-300)}.hs-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;min-block-size:44px;color:var(--color-fog-400)}.hs-foot p{margin:0}.hs-pause{visibility:hidden;min-block-size:44px;padding-inline:8px;margin-inline-end:-8px;border:0;background:none;color:var(--color-fog-300);cursor:pointer;pointer-events:auto;transition:color var(--dur-hover) var(--ease-out)}.hs-col[data-idle] .hs-pause{visibility:visible}@media (hover:hover) and (pointer:fine){.hs-pause:hover{color:var(--color-white)}}.hs-cos,.hs-drawing,.hs-front,.hs-tool{display:none}.hs-col:not([data-stage-state=still]) :is(.hs-drawing,.hs-tool,.hs-front,.hs-cos,.hs-grid){display:block}.hs-col:not([data-stage-state=still]) :where(.hs-still,.hs-front,.hs-key,.hs-host,.hs-end,.hs-drawing .ln-c,.hs-ext path:not(.ld),.co-dim .m-tick,.hs-cos .co-label){opacity:0}.hs-col:not([data-stage-state=still]) :is(.hs-drawing .ln-v,.hs-ext .ld){stroke-dasharray:var(--dl) calc(var(--dl) + 4px);stroke-dashoffset:var(--dl)}.hs-col:not([data-stage-state=still]) .co-dim .m-rule{transform:scaleX(0)}.hs-col[data-stage-state=pending] :is(.hs-still,.hs-key,.hs-end){animation:hs-in var(--dur-crossfade) var(--ease-in-out) calc(var(--t-end) + var(--dur-crossfade)) forwards}.hs-col[data-stage-state=play] .hs-grid{animation:hs-grid var(--dur-fade) var(--ease-out) both,hs-out var(--dur-crossfade) var(--ease-in-out) var(--t-fade) forwards}.hs-col[data-stage-state=play] .hs-drawing .ln-c{animation:hs-in var(--dur-fade) var(--ease-out) both}.hs-col[data-stage-state=play] .hs-drawing .ln-v{animation:hs-draw var(--dur-stroke) var(--ease-in-out) calc(var(--t-stroke) + var(--i, 0) * var(--stagger-draw)) both}.hs-col[data-stage-state=play] .hs-drawing{animation:hs-out var(--dur-crossfade) var(--ease-in-out) var(--t-fade) forwards}.hs-col[data-stage-state=play] :is(.hs-ext path:not(.ld),.co-dim .m-tick){animation:hs-in var(--dur-hover) var(--ease-out) var(--t-callout) both}.hs-col[data-stage-state=play] .co-dim .m-rule{animation:hs-x var(--dm,var(--dur-measure-max)) var(--ease-out) calc(var(--t-callout) + var(--dur-hover)) both}.hs-col[data-stage-state=play] .hs-ext .ld{animation:hs-draw var(--dm,var(--dur-measure-min)) var(--ease-out) calc(var(--t-callout) + var(--dur-hover)) both}.hs-col[data-stage-state=play] .hs-cos .co-label{animation:hs-in var(--dur-hover) var(--ease-out) calc(var(--t-callout) + var(--dur-hover) + var(--dm, var(--dur-measure-min)) + var(--offset-label)) both}.hs-col[data-stage-state=play] .hs-tool .tp{animation:hs-draw var(--dur-trace) var(--ease-in-out) var(--t-trace) both}.hs-col[data-stage-state=play] .hs-tool .td{animation:hs-in var(--dur-press) var(--ease-out) var(--t-trace) both,hs-run var(--dur-trace) var(--ease-in-out) var(--t-trace) both}.hs-col[data-stage-state=play] .hs-tool{animation:hs-out var(--dur-frame) var(--ease-in) var(--t-fade) forwards}.hs-col[data-stage-state=play] :is(.hs-front,.hs-key,.hs-host){animation:hs-in var(--dur-crossfade) var(--ease-in-out) var(--t-fade) forwards}.hs-col[data-stage-state=play][data-still-ready] .hs-front{animation:hs-in var(--dur-crossfade) var(--ease-in-out) var(--t-fade) forwards,hs-out .16s linear calc(var(--still-end, var(--t-end)) - .16s) forwards}.hs-col[data-stage-state=play][data-still-ready] .hs-still{animation:hs-in .16s linear calc(var(--still-end, var(--t-end)) - .16s) both}.hs-col[data-stage-state=play] .hs-cos{animation:hs-out var(--dur-crossfade) var(--ease-in-out) var(--t-fade) forwards}.hs-col[data-stage-state=play][data-still-ready] .hs-end{animation:hs-in var(--dur-fade) var(--ease-out) var(--still-end,var(--t-end)) both}.hs-col[data-stage-state=play][data-render=canvas] .hs-end{animation:hs-in var(--dur-fade) var(--ease-out) var(--turn-end,var(--t-end)) both}.hs-col[data-stage-state=play][data-swap] .hs-front{visibility:visible;animation:hs-in var(--dur-crossfade) var(--ease-in-out) var(--t-fade) forwards,hs-out 0s linear calc(var(--swap-at) + var(--dur-crossfade)) forwards}.hs-col[data-stage-state=play][data-swap] .hs-host{animation:hs-in var(--dur-crossfade) var(--ease-in-out) var(--swap-at) both}.hs-col:is([data-render=canvas],[data-late]) .hs-host{visibility:visible}.hs-col:is([data-render=canvas],[data-late]) :is(.hs-still,.hs-front){visibility:hidden}html[data-motion=reduce] .hs-col :is(.hs-drawing,.hs-tool,.hs-front,.hs-cos,.hs-grid,.hs-host,.hs-pause){display:none!important}html[data-motion=reduce] .hs-col :is(.hs-still,.hs-key,.hs-end,.hs-end-in){animation:none!important;visibility:visible!important;opacity:1!important}}@media (prefers-reduced-motion:reduce){.hs-col :is(.hs-drawing,.hs-tool,.hs-front,.hs-cos,.hs-grid,.hs-host,.hs-pause){display:none!important}.hs-col :is(.hs-still,.hs-key,.hs-end,.hs-end-in){animation:none!important;visibility:visible!important;opacity:1!important}}@keyframes hs-in{0%{opacity:0}to{opacity:1}}@keyframes hs-out{to{opacity:0}}@keyframes hs-grid{0%{opacity:0}to{opacity:.06}}@keyframes hs-draw{0%{stroke-dashoffset:var(--dl)}to{stroke-dashoffset:0}}@keyframes hs-x{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes hs-run{0%{offset-distance:0}to{offset-distance:100%}}