@layer lab-base{:root{--play-state:running;--sb-track-color:var(--accent-soft);--sb-thumb-color:var(--accent);--sb-size:8px}code,.vega-chip{overflow-wrap:anywhere}.vega-lab .vega-stage{min-height:120px}.vega-lab .vega-controls{flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;display:flex}mark{background:var(--hi);color:var(--ink);border-radius:4px;padding:0 3px}dl{margin:16px 0}dl dt{font-family:var(--mono);color:var(--accent-deep);background:var(--accent-soft);border:1px solid var(--accent-pale);border-radius:8px;margin:14px 0 6px;padding:4px 10px;font-size:13.5px;font-weight:600;display:inline-block}dl dd{color:var(--ink-soft);margin:4px 0 4px 14px;padding-left:14px;font-size:13.5px;line-height:1.7;position:relative}dl dd:before{content:"·";color:var(--accent);font-weight:600;position:absolute;left:0}dl dd a{word-break:break-word}pre{white-space:pre-wrap;background:var(--ink);color:#e8e2f5;font-family:var(--mono);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.7;overflow-x:auto}pre code{color:inherit;background:0 0;border:none;padding:0}.vega-codepanel pre.vega-code{background:0 0;padding:12px 16px;line-height:1.7}.vega-lab .caption{color:var(--muted);text-align:center;font-size:11px;font-family:var(--mono);margin-top:6px}.playbar{align-items:center;gap:10px;margin:4px 0 14px;display:flex}.playbar .hint{color:var(--muted);font-size:12px}.demo-row{flex-wrap:wrap;align-items:flex-end;gap:18px;display:flex}.demo-cell{text-align:center;color:var(--muted);font-size:11px;font-family:var(--mono)}.demo-cell>:first-child{margin:0 auto 6px}.step-twitter-love{vertical-align:middle;width:48px;height:48px;animation:1s steps(29,jump-none) .5s infinite heart_love;animation-play-state:var(--play-state);background:url(./web_heart_animation-DXoxGEm8.png) 0 0/2900% no-repeat;display:inline-block}@keyframes heart_love{to{background-position:right 0}}.timing-function{vertical-align:middle;background-color:var(--accent);width:16px;height:16px;animation:2.4s infinite alternate try-timing-function;animation-play-state:var(--play-state);display:inline-block}@keyframes try-timing-function{0%{animation-timing-function:linear;transform:translate(0)}25%{animation-timing-function:ease;transform:translate(100px)}50%{animation-timing-function:ease-in;transform:translate(200px)}75%{animation-timing-function:ease-out;transform:translate(300px)}to{transform:translate(400px)}}.steps{vertical-align:middle;width:48px;height:48px;animation:1.5s steps(3,jump-none) infinite both steps-sprite;animation-play-state:var(--play-state);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAAwCAIAAABxOGQBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkxMjI1RTVBRTQzQTExRTU4NTQyRUYyQ0REOEVDMTIzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkxMjI1RTVCRTQzQTExRTU4NTQyRUYyQ0REOEVDMTIzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTEyMjVFNThFNDNBMTFFNTg1NDJFRjJDREQ4RUMxMjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTEyMjVFNTlFNDNBMTFFNTg1NDJFRjJDREQ4RUMxMjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ikpXhAAAFNUlEQVR42uxcWyjzbxx32svMIeY0p1w45Dwxh9KSIrULRMmNKBspK4StXLhQ5kIuWM0uRLkhF9QImySR01AO5VzYnJUwZOz/ff1K7/v3bmaz7bd5PhdPT78f22fP5/l+n8/3+xvWKpXKCsF8YIOWAAmGgARDQIIhwRCQYAhIMCSYlVKp7OnpqaiokEqlePhIls1HX8Hu7+/b2tpmZ2dfXl7W1tZMvjoWz8dOn18+PT3t6Oi4uLjASbowRz6vr68ymczf39/a2tqwEba5udnS0gJs4J1CQ0NNvjpmykcsFjc1NQkEAoVCYagIU6lUo6OjQ0NDMCESiUwm8+bmZnt721RLY9Z8PDw8QNHV1VW5XF5dXe3m5vbNEXZ3d8fn8wcHB4ENhULhcrmRkZEm3Mjmzic+Pp7NZpNIpPPz89bW1tvbWx0j7PQN/7t4fX09MjKCvWhCQkJRUZG9vb3RzgNL5RMREVFXVwfeBPKnUCisqqqysbH5smDNzc2Pj4//vAUk8vPz6XS6MXeuZfPx8fGprKzk8XiQOSUSSWZm5pcFw9jY2dkRCIT3i7a2trAdsrOzIfMaOdXoyefq6mpsbAwWEfwYPvnApKCgoLe3VyQSJSUlubq66mI6IKs6ODho+Rmenp4MLZvOfJaWlqampmZmZlgsVmxs7Ls70NJMG4dPamoqVGz7+/uTk5M5OTm6mA7t2QCgNjS0YDrzodFofn5+SqUSDomDgwPsop5qGYIPg8GACWipbjF/Si/R3d2dw+GEhITAGnV3d8P4HmS44gOWEtIp1GRbW1s/WjDAr1+/IP84OjqCu1tcXPyuIPt2PlQqFSYbGxs/XTCAi4tLRkYGTObm5nDLB8IOxsPDQyTYb4ABg3F3d9cIJ65ufAICAmA8OTlBgv0GmUwmkUhwZkCRi08+Tk5OMD48PCDB/rJ26spek/PBmiPvNsQggkHB+D7iAZr5YEvzJUduTD5YuQYluS6Fs5aIiYlJS0vD0jEeoIHP1dXV/f09LAfkInzywVqR4B4NKBiRSCwsLMRP0tPAZ35+Hsbg4GANDVbT8jk+PrZ66y6iM8zq5uZGLBbDJCUlBbd8dnZ2YAwMDPzpgsFR0dnZqVAoKBQKjUbDJx+VSrWysgKTqKgoA6ZE/OPy8pLP58vlcjgtiouLTe6P1PFZX1+HUw2MvrpvFXwSYVp+0cBo0JnP1NQUrA6BQGCxWEFBQfjkA+E1PDwMEzqdrm5LfRJhtbW1fz7vsXrrgCUnJzMYjD+fpUJ0Qy5OTEz09vY2qGA68wGHBu4rMzPT19cXt3ymp6cPDg7A36enp6utEBobG/95QyKRQO32+vqq/BtQJezt7S0vL4eEhLi4uGA/LJVK+/r64C74VwNJpScfuEWlUp2dnXHL5+joSCgUwgvm5uaGh4ere1+1EcbhcM7Ozj5ehy0wPj4Ot3g8XmlpKdZaxvpg6orzb4Fl85HJZO3t7c/Pz2FhYRrCS5NglDd8vA4MIiMjYS9ARAsEgry8PKzfbGhYMB8wGl1dXVA+e3p6MplMzQWiLrYeDAyXy4XKDg7JgYGB/v5+0zoRs+azsLAAsQVqeXl51dTUfJq0dazDyGRyfX099uRmYmJCJBKZdo3Mlw/4exjj4uJA40+/RapX4ezo6Mhms7FTFEoHkzt+M+WTlZXV0NBQXl6urnn4nZ0OsLBlZWXgVnFSpZkjHzixsCeWWkLf1hQU6iUlJVDowSQ6Otrka2TxfKzRP1YxL6A/mUWCISDBEJBgSDAEJBjCR/wnwAAbQvfvqBwWRwAAAABJRU5ErkJggg==) no-repeat;display:inline-block}@keyframes steps-sprite{to{background-position:100% 0}}.play-state{cursor:pointer;width:50px;height:72px;animation:1s steps(10,end) infinite play-state-sprite;animation-play-state:var(--play-state);background:url(./sprite-steps-DNMViJrI.png) no-repeat}@keyframes play-state-sprite{to{background-position:-500px 0}}.queen-grid{text-align:center;color:var(--muted);font-size:11px;font-family:var(--mono);grid-template-columns:repeat(3,1fr);gap:8px 22px;display:inline-grid}.queen-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.queen{width:80px;position:relative}.queen:before{content:"";padding-top:87%;display:block}.queen-background{animation:1s steps(7,jump-none) 1ms infinite queen-background;animation-play-state:var(--play-state);background:url(./sprite_running-alice-queen-D2DPG2_q.png) 0 0/100% 700% no-repeat}.queen img{width:100%;position:absolute;top:0;left:0}.queen-translate{overflow:hidden}.queen-translate img{animation:1s steps(7,end) 1ms infinite backwards queen-translate;animation-play-state:var(--play-state)}.queen-clip img{--from:calc(var(--nth-child) / 7 * 100%);--to:calc((7 - var(--nth-child) - 1) / 7 * 100%);object-view-box:inset(var(--from) 0 var(--to) 0);animation:1s steps(7,jump-none) 1ms infinite queen-clip;animation-play-state:var(--play-state)}@property --nth-child{syntax:"<integer>";inherits:true;initial-value:0}@keyframes queen-background{to{background-position:0 100%}}@keyframes queen-translate{to{translate:0 -100%}}@keyframes queen-clip{to{--nth-child:6}}.ovb-lab{flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;display:flex}.ovb-col{flex-direction:column;align-items:center;gap:6px;display:flex}.ovb-arrow{color:var(--accent);font-size:26px;font-weight:600}.ovb-src{border:1px solid var(--line-strong);border-radius:10px;width:150px;height:150px;position:relative;overflow:hidden}.ovb-src img{width:100%;height:100%;display:block}.ovb-src .ovb-sel{left:var(--ovb-x,0%);top:var(--ovb-y,0%);width:var(--ovb-w,100%);height:var(--ovb-h,100%);border:1px solid var(--accent);border-radius:2px;position:absolute;box-shadow:0 0 0 9999px #5a158573}.ovb-view{border:1px solid var(--accent-line);background:var(--panel);border-radius:10px;width:150px;height:150px;overflow:hidden}.ovb-view img{object-fit:fill;object-view-box:var(--ovb-inset,inset(0%));width:100%;height:100%;display:block}@supports not (object-view-box:inset(0%)){.ovb-view{justify-content:center;align-items:center;display:flex}.ovb-view img{display:none}.ovb-view:after{content:"你的浏览器暂不支持 object-view-box";font-family:var(--mono);color:var(--muted);text-align:center;padding:10px;font-size:11px}}.composition{aspect-ratio:1;width:50px;animation:1.2s infinite composition;animation-play-state:var(--play-state);background:url(./web_heart_animation-DXoxGEm8.png) 100% 0/2900% no-repeat;transform:translate(-50px)scale(.5)}.composition-replace{animation-composition:replace}.composition-accumulate{animation-composition:accumulate}.composition-add{animation-composition:add}@keyframes composition{to{transform:translate(50px)scale(2)}}.starting-style{opacity:0;border-radius:8px;width:56px;height:56px;display:none}.transition-starting-style{transition-behavior:allow-discrete;background-color:#879ef7;transition:all 1.5s linear}.transition-starting-style.starting-style-active{opacity:1;display:block}@starting-style{.transition-starting-style.starting-style-active{opacity:0}}.animation-starting-style{background-color:#f679d7}.animation-starting-style.starting-style-active{animation:1.5s linear forwards animation-starting-style;display:block}@keyframes animation-starting-style{0%{opacity:0}to{opacity:1}}.scroller::-webkit-scrollbar{width:var(--sb-size);height:var(--sb-size)}.scroller::-webkit-scrollbar-track{background:var(--sb-track-color);border-radius:4px}.scroller::-webkit-scrollbar-thumb{background:var(--sb-thumb-color);border-radius:4px}@supports not selector(::-webkit-scrollbar){body{scrollbar-color:var(--sb-thumb-color) var(--sb-track-color)}}.scroller-wrap{width:100%;max-width:600px;margin:8px 0}.scroller{scroll-behavior:smooth;overscroll-behavior:contain;border:2px dashed var(--accent-line);background-position:50%;background-repeat:no-repeat;background-size:contain;background-attachment:scroll;border-radius:10px;height:100px;margin:2px 0;position:relative;overflow:auto}.scroller:after{content:"";height:1000px;display:block}.use-scroll-timeline-name{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='150' y='50' alignment-baseline='middle' text-anchor='middle'%3E scroll-timeline-name: --scroll;%3C/text%3E%3C/svg%3E")}.use-scroll-fn{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='150' y='50' alignment-baseline='middle' text-anchor='middle'%3E animation-timeline: scroll();%3C/text%3E%3C/svg%3E")}.use-timeline-scope{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='150' y='50' alignment-baseline='middle' text-anchor='middle'%3E%3Ctspan dx='0' dy='0em'%3E timeline-scope: --scroll %3C/tspan%3E%3Ctspan x='150' dy='1.2em'%3Eanimation-timeline: --scroll%3C/tspan%3E%3C/text%3E%3C/svg%3E")}.scroll-ani-element{background-color:var(--accent);height:6px;animation:2s linear both sa-grow;animation-play-state:var(--play-state);border-radius:3px}.scroll-ani-element-inner{position:sticky;top:0}.scroll-ani-element-self{background-color:var(--accent-soft);animation:1s sa-self;animation-play-state:var(--play-state);z-index:3;border:2px dashed var(--accent-line);interpolate-size:allow-keywords;border-radius:10px;margin-bottom:0;padding:6px 10px;font-size:14px;line-height:1.6;transition:height 1.5s;animation-timeline:scroll(self);overflow:hidden}.scroll-ani-element-self-trigger{height:fit-content;height:calc-size(fit-content, size)}.scroll-ani-element-self:after{display:none}.scroll-ani-element-help{z-index:2;background-color:var(--accent-pale);width:100%;height:28px;color:var(--accent-deep);text-align:center;cursor:pointer;border-radius:0 0 8px 8px;font-size:12px;font-weight:600;line-height:28px;position:relative;translate:0 -100%}.scroll-ani-element-help-default{display:block}.scroll-ani-element-help-toggle{display:none}.scroll-ani-element-self-trigger+.scroll-ani-element-help{translate:0}.scroll-ani-element-self-trigger+.scroll-ani-element-help .scroll-ani-element-help-default{display:none}.scroll-ani-element-self-trigger+.scroll-ani-element-help .scroll-ani-element-help-toggle{display:block}@keyframes sa-self{0%,to{z-index:1}}@keyframes sa-grow{0%{width:0%}to{width:100%}}.scope-section{timeline-scope:--scroll-scope}@property --percentage{syntax:"<integer>";inherits:true;initial-value:0}.view-section{timeline-scope:--view}.view-host{view-timeline:--view;--percentage:0}.view-scope{height:4px;animation:linear display-percentage;animation-play-state:var(--play-state);background-color:var(--good);width:calc(1% * var(--percentage));border-radius:2px;animation-timeline:--view;position:relative}.view-scope:after{font-size:.98em;font-family:var(--mono);color:var(--good);counter-reset:percentage var(--percentage);counter-set:percentage var(--percentage);content:counter(percentage) "%";position:absolute;top:0;right:-4px;translate:100% -50%}@keyframes display-percentage{to{--percentage:100}}.mul-d0,.mul-d1,.mul-other,.mul-indiv{will-change:left, top, transform;background:#d14775;border-radius:50%;width:20px;height:20px;display:inline-block;position:relative;top:0;left:0}.mul-d0{animation:1.5s linear infinite alternate both vh;animation-play-state:var(--play-state)}.mul-d1{animation:1.5s infinite alternate both v,1.5s linear infinite alternate both h;animation-play-state:var(--play-state)}.mul-other{animation:1.5s linear infinite alternate both ht;animation-play-state:var(--play-state);background-color:#0000}.mul-other:after{content:"";width:100%;height:100%;animation:1.5s infinite alternate both vt;animation-play-state:var(--play-state);background:#8c47d1;border-radius:50%;display:block}.mul-indiv{will-change:transform, translate;animation:1.5s linear infinite alternate both ix,1.5s infinite alternate both iy;animation-play-state:var(--play-state);background:#34b273}@keyframes v{to{top:160px}}@keyframes h{to{left:160px}}@keyframes vt{to{transform:translateY(160px)}}@keyframes ht{to{transform:translate(160px)}}@keyframes vh{to{transform:translate(160px,160px)}}@keyframes ix{to{transform:translate(160px)}}@keyframes iy{to{translate:0 160px}}.motion-box{aspect-ratio:502/202;border:1px solid var(--line-strong);z-index:1;background-color:#faf7f7;border-radius:12px;width:100%;max-width:502px;position:relative}.motion-box svg{width:100%;height:100%;display:block}.offset-item{width:12px;height:12px;animation:4s infinite offset-move;animation-play-state:var(--play-state);border-radius:0;position:absolute;top:0}.offset-item-box{offset-path:border-box;background-color:#d93025}.offset-item-path{offset-anchor:50%;offset-path:path("M1,1 C1,1 185.123623,304.688377 263.645528,163.624677 C342.167432,22.5609775 428.948967,25.6679009 501,132.967244");background-color:#188038}.offset-item-ray{offset-path:ray(0deg farthest-corner contain at bottom 0 right 25%);background-color:#6cb6ff}.offset-item-rect{offset-path:rect(50px calc(100% - 50px) calc(100% - 50px) 50px round 4px);background-color:#a435f0}.offset-item-inset{offset-path:inset(80px round 4px);background-color:#559b24}.offset-item-circle{offset-path:circle(80px);offset-position:right -80px top 50%;background-color:#f0744b}.offset-item-xywh{offset-path:xywh(10px 10px 50% 50%);background-color:#f801ba}@keyframes offset-move{0%{offset-rotate:reverse;offset-distance:0%}to{offset-rotate:reverse;offset-distance:100%}}.pf-box{aspect-ratio:480/220;border:1px solid var(--line-strong);background-color:#faf7f7;border-radius:12px;width:100%;max-width:480px;position:relative}.pf-box svg{width:100%;height:100%;display:block}.pf-layer{pointer-events:none;position:absolute;inset:0}.pf-bead{will-change:left, top, transform;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.pf-bead.dot{background-color:var(--accent);border-radius:50%;width:13px;height:13px}.pf-bead.arrow{color:var(--accent);font-size:18px;font-weight:600;line-height:1}.pf-bead.char{color:var(--accent-deep);font-size:15px;font-weight:600;font-family:var(--mono);line-height:1}.waapi-box{background-color:var(--accent-2);border-radius:8px;width:56px;height:56px;margin:14px 0}@keyframes waapi-slide{to{translate:220px}}.waapi-box.enable{animation:1.5s infinite alternate forwards waapi-slide;animation-play-state:var(--play-state)}.logpanel{font-family:var(--mono);background:var(--ink);color:#d9d2e6;border-radius:12px;max-height:180px;margin-top:12px;padding:10px 12px;font-size:12px;line-height:1.7;overflow:auto}.logpanel .row{white-space:pre-wrap}.logpanel .row .k{color:var(--accent-2);font-weight:600}.logpanel .row .t{color:var(--muted)}.logpanel .row.start .k{color:#5fe6a0}.logpanel .row.end .k{color:#ff8f9c}.morph-stage{min-height:1.24em;font-family:var(--display);font-weight:600;font-size:var(--morph-size,46px);letter-spacing:-.01em;color:var(--ink);white-space:pre;-webkit-user-select:none;user-select:none;line-height:1.24;display:block;position:relative}.morph-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.morph-char{transform:translateX(var(--x,0px));opacity:var(--o,1);will-change:transform, opacity;transition:transform var(--dur,.62s) var(--ease,ease) var(--d,0s), opacity var(--fade,.34s) linear var(--d,0s);position:absolute;top:0;left:50%}.morph-scrub .morph-char{animation:morph-x var(--dur,.62s) var(--ease,ease) both paused, morph-o var(--fade,.34s) linear both paused;animation-delay:calc(var(--d,0s) - var(--t,0s)), calc(var(--d,0s) - var(--t,0s));transition:none}@keyframes morph-x{0%{transform:translateX(var(--x0))}to{transform:translateX(var(--x1))}}@keyframes morph-o{0%{opacity:var(--o0)}to{opacity:var(--o1)}}.morph-stage.tint .morph-char[data-role=out]{color:var(--bad)}.morph-stage.tint .morph-char[data-role=in]{color:var(--accent)}@media (prefers-reduced-motion:reduce){.morph-char{transition-duration:1ms,1ms}}.seg{font:600 12px var(--mono);color:var(--muted);align-items:center;gap:6px;display:inline-flex}.seg select{font:600 12px var(--mono);border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:8px;padding:3px 6px}.word-in{font:600 13px var(--mono);border:1px solid var(--line-strong);background:var(--panel);width:128px;color:var(--ink);border-radius:8px;padding:4px 8px}}