.anim{--an-stage:var(--surface-panel);--an-card:var(--bg);--an-ink:var(--fg);--an-ink-2:var(--muted);--an-ink-3:color-mix(in srgb, var(--muted) 70%, var(--bg));--an-line:var(--rule-strong);--an-fill:var(--code-bg);--an-fill-2:color-mix(in srgb, var(--fg) 16%, var(--bg));--an-accent:var(--accent);--an-accent-soft:color-mix(in srgb, var(--accent) 13%, transparent);--an-s2:color-mix(in srgb, var(--fg) 55%, transparent);--an-s3:color-mix(in srgb, var(--fg) 20%, transparent);--an-shadow:0 1px 2px color-mix(in srgb, var(--fg) 5%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--fg) 16%, transparent)}.anim-frame{aspect-ratio:720/480;border:1px solid var(--rule);background-color:var(--an-stage);border-block-end:0;border-radius:4px 4px 0 0;width:100%;position:relative;overflow:hidden}.anim-stage{transform-origin:0 0;width:720px;height:480px;font:400 15px/1.35 var(--font-sans);color:var(--an-ink);position:absolute;inset-block-start:0;inset-inline-start:0}.anim-controls{border:1px solid var(--rule);background-color:var(--an-stage);border-block-start:0;border-radius:0 0 4px 4px;align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.anim-play{border:1px solid var(--rule-strong);background-color:var(--bg);width:2.75rem;height:2.75rem;color:var(--fg);cursor:pointer;border-radius:4px;flex:none;place-items:center;display:grid}@media (min-width:40rem){.anim-play{width:2rem;height:2rem}}.anim-play:hover{border-color:var(--an-s3)}.anim-scrub{--progress:100%;cursor:pointer;appearance:none;background:0 0;flex:1;min-width:0;height:1.25rem;margin:0}.anim-scrub::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--progress), color-mix(in srgb, var(--accent) 22%, transparent) var(--progress));border-radius:2px;height:4px}.anim-scrub::-webkit-slider-thumb{background:var(--accent);appearance:none;border:0;border-radius:50%;width:12px;height:12px;margin-top:-4px}.anim-scrub::-moz-range-track{background:color-mix(in srgb, var(--accent) 22%, transparent);border-radius:2px;height:4px}.anim-scrub::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}.anim-scrub::-moz-range-thumb{background:var(--accent);border:0;border-radius:50%;width:12px;height:12px}.anim-clock{text-align:end;min-width:4.75rem;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted);flex:none;font-size:.75rem}.anim-stage .a{position:absolute}.anim-stage .ey{font:600 12.5px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--an-ink-2);white-space:nowrap}.anim-stage .ey.acc{color:var(--an-accent)}.anim-stage .card{background:var(--an-card);border:1px solid var(--an-line);box-shadow:var(--an-shadow);border-radius:8px}.anim-stage .title{letter-spacing:-.01em;font-weight:500}.anim-stage .t17{font-size:17px;line-height:1.25}.anim-stage .t18{font-size:18px;line-height:1.25}.anim-stage .t19{font-size:19px;line-height:1.25}.anim-stage .t20{font-size:20px;line-height:1.2}.anim-stage .t21{font-size:21px;line-height:1.25}.anim-stage .t22{font-size:22px;line-height:1.2}.anim-stage .body15{font:400 15px/1.4 var(--font-sans)}.anim-stage .mutedc{color:var(--an-ink-2)}.anim-stage .muted{font:400 14px/1.3 var(--font-sans);color:var(--an-ink-2);white-space:nowrap}.anim-stage .sm{font-size:13px}.anim-stage .rl{font:500 14px/1.2 var(--font-sans);white-space:nowrap}.anim-stage .rl15{font:500 15px/1.2 var(--font-sans);white-space:nowrap}.anim-stage .rl15b{font:600 15px/1.2 var(--font-sans);white-space:nowrap}.anim-stage .num{font:600 14px/1 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}.anim-stage .rule{background:var(--an-line);height:1px}.anim-stage .chips{flex-wrap:wrap;gap:6px;display:flex}.anim-stage .chip{background:var(--an-fill);height:28px;font:500 14px/1 var(--font-sans);white-space:nowrap;color:var(--an-ink);border-radius:999px;align-items:center;gap:6px;padding:0 11px;display:inline-flex}.anim-stage .chip.sm{height:25px;padding:0 9px;font-size:13px}.anim-stage .chip.dash{border:1.5px dashed var(--an-fill-2);color:var(--an-ink-2);background:0 0}.anim-stage .chip.on{background:var(--an-accent-soft);box-shadow:inset 0 0 0 1.5px var(--an-accent)}.anim-stage .chip b{font:700 10px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--an-accent)}.anim-stage .props{gap:8px;display:flex}.anim-stage .prop{border:1px solid var(--an-line);background:var(--an-stage);height:26px;font:500 13.5px/1 var(--font-sans);white-space:nowrap;border-radius:6px;align-items:center;gap:6px;padding:0 10px;display:inline-flex}.anim-stage .prop svg{flex:none;width:14px;height:14px}.anim-stage .doc{border:1px solid var(--an-line);background:linear-gradient(var(--an-fill-2), var(--an-fill-2)) 4px 6px / 12px 2px no-repeat, linear-gradient(var(--an-fill-2), var(--an-fill-2)) 4px 11px / 9px 2px no-repeat, linear-gradient(var(--an-fill-2), var(--an-fill-2)) 4px 16px / 11px 2px no-repeat, var(--an-card);border-radius:3px;width:22px;height:28px}.anim-stage .dot{background:var(--an-accent);border-radius:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px}.anim-stage .layer{pointer-events:none;width:720px;height:480px;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:visible}.anim-stage .ln{fill:none;stroke:var(--an-fill-2);stroke-width:1.5px;stroke-linecap:round}.anim-stage .ln.acc{stroke:var(--an-accent)}.anim-stage .ln.thick{stroke-width:2.5px;stroke-linejoin:round}.anim-stage .cap{font:500 15px/1.2 var(--font-sans);color:var(--an-ink);white-space:nowrap;align-items:center;gap:10px;display:flex}.anim-stage .cap:before{content:"";background:var(--an-accent);border-radius:50%;flex:none;width:8px;height:8px}.anim-stage .cursor{z-index:20}.anim-stage .ripple{border:2px solid var(--an-accent);z-index:19;border-radius:50%;width:34px;height:34px;margin:-17px 0 0 -17px}.anim-stage .s0{background:var(--an-accent)}.anim-stage .s1{background:var(--an-s2)}.anim-stage .s2{background:var(--an-s3)}.anim-stage .legend{align-items:center;gap:16px;display:flex}.anim-stage .lg{font:500 13px/1 var(--font-sans);color:var(--an-ink-2);white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.anim-stage .sw{border-radius:3px;width:10px;height:10px;display:inline-block}.anim-stage .quote{border-left:3px solid var(--an-accent);padding:13px 16px}.anim-stage .qt{font:400 16px/1.4 var(--font-sans);margin-bottom:6px}.anim-stage .boxp{width:300px;height:82px;padding:12px 14px}.anim-stage .boxp .q{font:400 13px/1.45 var(--font-mono);margin-top:8px}.anim-stage .meter{background:var(--an-fill);border-radius:4px;width:300px;height:8px}.anim-stage .meter-f{background:var(--an-s2);border-radius:4px 0 0 4px;width:0;height:8px}.anim-stage .meter-f.acc{background:var(--an-accent);border-radius:0 4px 4px 0}.anim-stage .tick{background:var(--an-ink);border-radius:1px;width:2px;height:18px}.anim-stage .fuzzy{background:linear-gradient(90deg, var(--an-s2) 50%, transparent);border-radius:6px;width:0;height:12px}.anim-stage .coder{width:108px;height:50px;padding:9px 12px}.anim-stage .coder .muted{margin-top:6px}.anim-stage .trk{background:var(--an-fill);border-radius:7px;width:230px;height:14px}.anim-stage .bar{background:var(--an-ink);border-radius:7px;width:0;height:14px}.anim-stage .qhl{background:var(--an-accent-soft);border-radius:6px}.anim-stage .qnum{font:400 13px/1.45 var(--font-mono);color:var(--an-accent)}.anim-stage .qtick svg{display:block}.anim-stage .hdr2{color:var(--an-ink-3)}.anim-stage .arr{color:var(--an-ink-3);font:500 14px/25px var(--font-sans);display:inline-block}.anim-stage .tp{flex-direction:column;gap:8px;display:flex}.anim-stage .tp-h{justify-content:space-between;align-items:center;height:26px;margin-bottom:2px;display:flex}.anim-stage .pill-ok{font:500 12.5px/1 var(--font-sans);color:var(--an-ink-2);background:var(--an-fill);border-radius:999px;align-items:center;gap:5px;padding:6px 9px;display:inline-flex}.anim-stage .pill-ok svg{width:12px;height:12px}.anim-stage .msg{display:flex;position:relative}.anim-stage .msg.m{justify-content:flex-start}.anim-stage .msg.p{justify-content:flex-end}.anim-stage .b{max-width:250px;font:400 15px/1.4 var(--font-sans);border-radius:12px;padding:8px 12px}.anim-stage .m .b{background:var(--an-fill);border-top-left-radius:4px}.anim-stage .p .b{background:var(--an-card);border:1px solid var(--an-line);box-shadow:var(--an-shadow);border-top-right-radius:4px}.anim-stage .no{font:400 12px/1 var(--font-mono);color:var(--an-ink-3);position:absolute;top:11px;left:6px}.anim-stage .slc{background:var(--an-accent);opacity:0;width:3px;position:absolute;top:-4px;bottom:-4px;left:-14px}.anim-stage .hl{background-image:linear-gradient(var(--an-accent-soft), var(--an-accent-soft));-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-size:0% 100%;border-radius:3px}.anim-stage .lanes{flex-direction:column;gap:12px;display:flex}.anim-stage .lane{flex-direction:column;gap:8px;padding:14px 16px;display:flex;position:relative}.anim-stage .ln-h{justify-content:space-between;align-items:center;display:flex}.anim-stage .done{display:inline-flex}.anim-stage .crows{flex-direction:column;display:flex}.anim-stage .crow{font:500 14px/1 var(--font-sans);border-top:1px solid var(--an-line);justify-content:space-between;align-items:center;padding:7px 0;display:flex}.anim-stage .mref{font:400 12.5px/1 var(--font-mono);color:var(--an-ink-2)}.anim-stage .bpill{height:56px;padding:9px 36px 9px 14px}.anim-stage .bpill svg{color:var(--an-ink-2);position:absolute;top:21px;right:14px}.anim-stage .bv{font:500 15px/1.2 var(--font-sans);white-space:nowrap;margin-top:6px}.anim-stage .gbar{border-radius:4px;width:0}.anim-stage .inkover{border-radius:inherit;background:var(--an-ink);width:100%;height:100%}.anim-stage .ann{font:500 14px/1.35 var(--font-sans);color:var(--an-ink);padding-left:14px}.anim-stage .ann:before{content:"";background:var(--an-accent);border-radius:50%;width:7px;height:7px;position:absolute;top:6px;left:0}.anim-stage .ftrack{background:var(--an-fill);border-radius:3px;height:6px}.anim-stage .ffill{background:var(--an-ink);border-radius:3px;width:0;height:6px}.anim-stage .badge{background:var(--an-card);border:1px solid var(--an-line);height:30px;font:600 13px/1 var(--font-sans);box-shadow:var(--an-shadow);white-space:nowrap;border-radius:999px;align-items:center;gap:8px;padding:0 12px;display:flex}.anim-stage .badge i{background:var(--an-accent);border-radius:50%;width:8px;height:8px}.anim-stage .tc{flex-direction:column;gap:8px;width:210px;height:142px;padding:12px 14px;display:flex}.anim-stage .tc-n{padding-right:36px;font-size:17px;line-height:1.25}.anim-stage .tc-c{font:400 13px/1 var(--font-sans);color:var(--an-ink-2);position:absolute;bottom:12px;left:14px}.anim-stage .tc-c .cnt{color:var(--an-ink);font-variant-numeric:tabular-nums;font-weight:600}.anim-stage .tag-n,.anim-stage .tag-h{font:700 10.5px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;border-radius:4px;padding:4px 6px;position:absolute;top:12px;right:12px}.anim-stage .tag-n{color:var(--an-accent);background:var(--an-accent-soft)}.anim-stage .tag-h{color:var(--an-ink-2);background:var(--an-fill)}.anim-stage .bf{background:var(--an-fill);border-radius:2px;height:3px;position:absolute;bottom:34px;left:14px;right:14px}.anim-stage .bf i{background:var(--an-accent);border-radius:2px;width:0;height:100%;display:block}.anim-stage .mpill{background:var(--an-ink);width:150px;height:30px;color:var(--an-card);font:600 13px/30px var(--font-sans);text-align:center;box-shadow:var(--an-shadow);z-index:5;border-radius:999px}.anim-stage .swc{pointer-events:none;border-radius:8px;overflow:hidden}.anim-stage .swc i{background:linear-gradient(90deg, transparent, var(--an-accent-soft), transparent);width:140px;height:100%;position:absolute;top:0;left:0}.anim-stage .ubub{background:var(--an-ink);color:var(--an-card);font:400 16px/1.4 var(--font-sans);border-radius:16px 16px 4px;padding:12px 16px}.anim-stage .ghost{opacity:0}.anim-stage .step{font:500 14px/1 var(--font-sans);color:var(--an-ink-2);white-space:nowrap;align-items:center;gap:8px;display:flex}.anim-stage .ico{flex:none;width:14px;height:14px;position:relative}.anim-stage .spin{border:2px solid var(--an-fill-2);border-top-color:var(--an-accent);border-radius:50%;position:absolute;inset:0}.anim-stage .chk{position:absolute;inset:0}.anim-stage .chk svg{width:14px;height:14px;display:block}.anim-stage .query{flex-direction:column;gap:6px;padding:12px 16px;display:flex}.anim-stage .qs{font:400 15px/1.4 var(--font-sans);align-items:baseline;gap:14px;display:flex}.anim-stage .qk{width:52px;font:600 11.5px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--an-accent);flex:none}.anim-stage .sc{flex-direction:column;align-items:flex-start;gap:6px;width:210px;height:100px;padding:12px 14px;display:flex}.anim-stage .shared{box-shadow:0 0 0 1.5px var(--an-accent), var(--an-shadow);flex-direction:column;gap:4px;padding:12px 16px;display:flex}.anim-stage .pt{background:var(--an-accent);width:12px;height:12px;box-shadow:0 0 0 3px var(--an-stage);border-radius:50%;margin:-6px 0 0 -6px}