.demo:where(.astro-24ykw2xh){margin:2rem 0 2.5rem;max-width:46rem}.stage:where(.astro-24ykw2xh){aspect-ratio:16 / 11;border:1px solid var(--border-subtle);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;position:relative;background:#f4f4f6;container-type:inline-size}.win:where(.astro-24ykw2xh){position:absolute;inset:0;font-size:clamp(7px,1.55cqw,14px);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#1d1d1f;display:grid;grid-template-rows:auto auto auto 1fr;background:#fff}.demo:where(.astro-24ykw2xh) :where(.astro-24ykw2xh):where(i,b){font-style:normal}.titlebar:where(.astro-24ykw2xh){display:flex;align-items:center;padding:.7em .9em;background:#f6f6f8;border-bottom:1px solid #e6e6e9}.lights:where(.astro-24ykw2xh){display:flex;gap:.45em}.lights:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh){width:.72em;height:.72em;border-radius:50%;background:#ddd}.lights:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):nth-child(1){background:#ff5f57}.lights:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):nth-child(2){background:#febc2e}.lights:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):nth-child(3){background:#28c840}.tabs:where(.astro-24ykw2xh){margin:0 auto;display:flex;gap:.15em;background:#e9e9ec;border-radius:999px;padding:.18em;font-size:.95em;color:#6e6e73}.tabs:where(.astro-24ykw2xh) span:where(.astro-24ykw2xh){padding:.22em .85em;border-radius:999px}.tabs:where(.astro-24ykw2xh) .on:where(.astro-24ykw2xh){background:#fff;color:#1d1d1f;font-weight:500;box-shadow:0 1px 2px #0000001f}.toolbar:where(.astro-24ykw2xh){display:grid;grid-template-columns:1fr minmax(0,1.5fr) 1fr;align-items:center;gap:.8em;padding:.75em .9em}.heading:where(.astro-24ykw2xh){display:flex;flex-direction:column;gap:.15em;min-width:0}.heading:where(.astro-24ykw2xh) strong:where(.astro-24ykw2xh){font-size:1.35em;font-weight:700;letter-spacing:-.01em}.count:where(.astro-24ykw2xh){font-size:.85em;color:#6e6e73;white-space:nowrap}.swap:where(.astro-24ykw2xh){display:inline-grid;vertical-align:baseline}.count-all:where(.astro-24ykw2xh),.count-one:where(.astro-24ykw2xh){grid-area:1 / 1}.search:where(.astro-24ykw2xh){display:flex;align-items:center;gap:.45em;background:#f1f1f4;border:1px solid #e2e2e5;border-radius:.6em;padding:.42em .6em;min-width:0}.glyph:where(.astro-24ykw2xh){width:1em;height:1em;flex:none;fill:none;stroke:#86868b;stroke-width:1.6;stroke-linecap:round}.field:where(.astro-24ykw2xh){position:relative;display:flex;align-items:center;flex:1;min-width:0;height:1.25em;font-size:.95em}.ph:where(.astro-24ykw2xh){position:absolute;inset:0;color:#a1a1a6;white-space:nowrap;overflow:hidden;display:flex;align-items:center}.typed:where(.astro-24ykw2xh){max-width:0;overflow:hidden;white-space:nowrap;color:#1d1d1f}.caret:where(.astro-24ykw2xh){width:1px;height:1.05em;background:#1d1d1f;opacity:0;margin-left:.5px}.clear:where(.astro-24ykw2xh){font-size:.7em;color:#fff;background:#c7c7cc;border-radius:50%;width:1.5em;height:1.5em;display:grid;place-items:center;opacity:0;flex:none}.tools:where(.astro-24ykw2xh){display:flex;align-items:center;justify-content:flex-end;gap:.7em;font-size:.9em;color:#1d1d1f;white-space:nowrap}.views:where(.astro-24ykw2xh){display:flex;gap:.25em}.views:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh){width:1.5em;height:1.3em;border-radius:.28em;background:#ececef}.views:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh).on{background:#007aff}.filters:where(.astro-24ykw2xh){display:flex;align-items:center;gap:.6em;padding:0 .9em;height:0;opacity:0;overflow:hidden;font-size:.9em;border-bottom:1px solid transparent}.flabel:where(.astro-24ykw2xh){color:#6e6e73}.chip:where(.astro-24ykw2xh){background:#e6f0ff;color:#0a63c9;border-radius:999px;padding:.15em .6em;font-size:.95em}.chip:where(.astro-24ykw2xh) b:where(.astro-24ykw2xh){opacity:.55;margin-left:.2em}.clear-all:where(.astro-24ykw2xh){margin-left:auto;color:#007aff;font-weight:500}.grid:where(.astro-24ykw2xh){position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-content:start;gap:.9em;padding:.9em;overflow:hidden;background:#f4f4f6;background-image:radial-gradient(rgba(0,0,0,.045) .5px,transparent .5px);background-size:.9em .9em}.card:where(.astro-24ykw2xh){position:relative;display:flex;flex-direction:column;gap:.28em;background:#fff;border:1px solid #e4e4e7;border-radius:.5em;padding:.45em;min-width:0}.thumb:where(.astro-24ykw2xh){aspect-ratio:4 / 3;border-radius:.28em;overflow:hidden;background:#fbfbfd;border:1px solid #ededf0;display:flex;flex-direction:column}.thumb:where(.astro-24ykw2xh) .chrome:where(.astro-24ykw2xh){display:flex;gap:.2em;padding:.25em .3em;background:#f0f0f3;border-bottom:1px solid #e8e8ec}.thumb:where(.astro-24ykw2xh) .chrome:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh){width:.28em;height:.28em;border-radius:50%;background:#d3d3d8}.thumb:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh){flex:1;display:flex;flex-direction:column;justify-content:center;gap:.28em;padding:.35em}.thumb:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh){height:.24em;border-radius:.12em;background:#dcdce1}.k-sheet:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):nth-child(odd){background:#e3e8ef}.k-browser:where(.astro-24ykw2xh) .chrome:where(.astro-24ykw2xh){background:#eaeaee}.k-browser:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):first-child{background:#cfd8e3}.k-settings:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh){display:grid;grid-template-columns:1fr 2.2fr;align-content:center;gap:.28em .4em}.k-settings:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):nth-child(-n+2){background:#d6dae2}.k-bug:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):first-child{background:#f0cdcd}.k-doc:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):first-child,.k-docs:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):first-child{background:#cdd3dc;width:60%!important}.k-term:where(.astro-24ykw2xh) .thumb:where(.astro-24ykw2xh),.k-log:where(.astro-24ykw2xh) .thumb:where(.astro-24ykw2xh){background:#1e1f22;border-color:#2a2b2f}.k-term:where(.astro-24ykw2xh) .chrome:where(.astro-24ykw2xh),.k-log:where(.astro-24ykw2xh) .chrome:where(.astro-24ykw2xh){background:#2a2b2f;border-bottom-color:#35363b}.k-term:where(.astro-24ykw2xh) .chrome:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh),.k-log:where(.astro-24ykw2xh) .chrome:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh){background:#4a4b51}.k-term:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh),.k-log:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh){background:#43454b}.k-term:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):first-child{background:#5a8f63}.k-term:where(.astro-24ykw2xh) .body:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh):nth-child(4){background:#a3595c}.name:where(.astro-24ykw2xh){font-size:.82em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date:where(.astro-24ykw2xh){font-size:.75em;color:#86868b}.snippet:where(.astro-24ykw2xh){display:none;font-size:.75em;font-style:italic;color:#6e6e73;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.snippet:where(.astro-24ykw2xh) b:where(.astro-24ykw2xh){font-weight:700;color:#1d1d1f;font-style:italic}.badge:where(.astro-24ykw2xh){position:absolute;top:.15em;right:.15em;width:1.25em;height:1.25em;border-radius:50%;background:#007aff;color:#fff;font-size:.75em;display:grid;place-items:center;opacity:0;box-shadow:0 0 0 .15em #fff}.preview:where(.astro-24ykw2xh){position:absolute;left:50%;top:54%;width:66%;transform:translate(-50%,-50%) scale(.9);opacity:0;background:#1e1f22;border-radius:.6em;overflow:hidden;box-shadow:0 1.5em 3em #00000059}.pv-bar:where(.astro-24ykw2xh){display:flex;align-items:center;gap:.6em;padding:.45em .6em;background:#2a2b2f}.pv-bar:where(.astro-24ykw2xh) .lights:where(.astro-24ykw2xh) i:where(.astro-24ykw2xh){width:.6em;height:.6em}.pv-title:where(.astro-24ykw2xh){color:#b8b9be;font-size:.78em}.pv-body:where(.astro-24ykw2xh){margin:0;padding:.8em .9em 1em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72em;line-height:1.65;color:#c8c9ce;white-space:pre-wrap;word-break:break-word}.pv-body:where(.astro-24ykw2xh) .p:where(.astro-24ykw2xh){color:#7fb884}.pv-body:where(.astro-24ykw2xh) .d:where(.astro-24ykw2xh){color:#8b8d94}.pv-body:where(.astro-24ykw2xh) .e:where(.astro-24ykw2xh){color:#e6a3a3}.hit:where(.astro-24ykw2xh){color:#1d1d1f;background-image:linear-gradient(#ffe066,#ffe066);background-repeat:no-repeat;background-size:0% 100%;border-radius:.15em;padding:0 .1em}.chip-time:where(.astro-24ykw2xh),.closing:where(.astro-24ykw2xh){position:absolute;margin:0;opacity:0}.chip-time:where(.astro-24ykw2xh){left:1.1em;bottom:1.1em;background:#1d1d1fdb;color:#fff;font-size:.85em;padding:.4em .8em;border-radius:999px}.closing:where(.astro-24ykw2xh){left:8%;right:8%;bottom:1.1em;text-align:center;background:#fffffff0;border:1px solid #e4e4e7;box-shadow:0 .5em 1.5em #0000001f;border-radius:.5em;padding:.55em .9em;font-size:.95em;font-weight:500}.cursor:where(.astro-24ykw2xh){position:absolute;left:50%;top:3.6em;width:.85em;opacity:0;transform:translate(-7em,9em)}.cursor:where(.astro-24ykw2xh) svg:where(.astro-24ykw2xh){display:block;width:100%}.cursor:where(.astro-24ykw2xh) path:where(.astro-24ykw2xh){fill:#fff;stroke:#1d1d1f;stroke-width:1.1;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}.stage:where(.astro-24ykw2xh).is-paused :where(.astro-24ykw2xh){animation-play-state:paused!important}.chip-time:where(.astro-24ykw2xh){animation:chip-time 9s linear infinite}@keyframes chip-time{0%,3%{opacity:0;transform:translateY(.4em)}8%,20%{opacity:1;transform:none}26%,to{opacity:0;transform:none}}.cursor:where(.astro-24ykw2xh){animation:cursor 9s cubic-bezier(.32,.72,.3,1) infinite}@keyframes cursor{0%,11%{opacity:0;transform:translate(-7em,9em)}14%{opacity:1}24%{opacity:1;transform:translate(.3em,.5em)}28%,to{opacity:0;transform:translate(.3em,.5em)}}.search:where(.astro-24ykw2xh){animation:search-focus 9s linear infinite}@keyframes search-focus{0%,20%{border-color:#e2e2e5;background:#f1f1f4;box-shadow:none}24%,88%{border-color:#7fb0ff;background:#fff;box-shadow:0 0 0 .2em #007aff29}96%,to{border-color:#e2e2e5;background:#f1f1f4;box-shadow:none}}.ph:where(.astro-24ykw2xh){animation:ph 9s linear infinite}@keyframes ph{0%,23%{opacity:1}25%,92%{opacity:0}97%,to{opacity:1}}.typed:where(.astro-24ykw2xh){animation:typed 9s steps(18) infinite}@keyframes typed{0%,24%{max-width:0}40%,93%{max-width:9.5em}94%,to{max-width:0}}.caret:where(.astro-24ykw2xh){animation:blink .9s steps(2,jump-none) infinite,caret-show 9s linear infinite}@keyframes blink{to{opacity:.15}}@keyframes caret-show{0%,21%{opacity:0}22%,43%{opacity:1}45%,to{opacity:0}}.clear:where(.astro-24ykw2xh){animation:clear-btn 9s linear infinite}@keyframes clear-btn{0%,38%{opacity:0}42%,92%{opacity:1}96%,to{opacity:0}}.filters:where(.astro-24ykw2xh){animation:filters 9s ease infinite}@keyframes filters{0%,29%{height:0;opacity:0;border-bottom-color:transparent}35%,92%{height:2.2em;opacity:1;border-bottom-color:#e6e6e9}97%,to{height:0;opacity:0;border-bottom-color:transparent}}.count-all:where(.astro-24ykw2xh){animation:count-all 9s linear infinite}@keyframes count-all{0%,40%{opacity:1}45%,92%{opacity:0}96%,to{opacity:1}}.count-one:where(.astro-24ykw2xh){opacity:0;animation:count-one 9s linear infinite}@keyframes count-one{0%,41%{opacity:0}46%,92%{opacity:1}96%,to{opacity:0}}.card:where(.astro-24ykw2xh):not(.is-match){animation:filter-out 9s ease infinite;animation-delay:calc(var(--i) * .04s)}@keyframes filter-out{0%,33%{opacity:1;transform:scale(1);filter:blur(0)}46%,91%{opacity:0;transform:scale(.97);filter:blur(2px)}97%,to{opacity:1;transform:scale(1);filter:blur(0)}}.is-match:where(.astro-24ykw2xh){--rows-up: 1;--cols-left: 0;animation:match-move 9s cubic-bezier(.32,.72,.3,1) infinite;z-index:2}@keyframes match-move{0%,44%{transform:none;border-color:#e4e4e7;background:#fff}52%,91%{transform:translate(calc((-100% - .9em) * var(--cols-left)),calc((-100% - .9em) * var(--rows-up)));border-color:#007aff;background:#f2f8ff;box-shadow:0 0 0 1px #007aff}97%,to{transform:none;border-color:#e4e4e7;background:#fff;box-shadow:none}}.is-match:where(.astro-24ykw2xh) .badge:where(.astro-24ykw2xh){animation:badge 9s ease infinite}@keyframes badge{0%,47%{opacity:0;transform:scale(.6)}53%,91%{opacity:1;transform:scale(1)}96%,to{opacity:0;transform:scale(.6)}}.is-match:where(.astro-24ykw2xh) .snippet:where(.astro-24ykw2xh){display:block;animation:snippet 9s ease infinite}@keyframes snippet{0%,48%{opacity:0}55%,91%{opacity:1}96%,to{opacity:0}}.grid:where(.astro-24ykw2xh){animation:grid-dim 9s ease infinite}@keyframes grid-dim{0%,57%{filter:none}66%,92%{filter:blur(1.5px) saturate(.9);opacity:.55}97%,to{filter:none;opacity:1}}.preview:where(.astro-24ykw2xh){animation:preview 9s cubic-bezier(.32,.72,.3,1) infinite}@keyframes preview{0%,57%{opacity:0;transform:translate(-50%,-46%) scale(.9)}65%,92%{opacity:1;transform:translate(-50%,-50%) scale(1)}96%,to{opacity:0;transform:translate(-50%,-50%) scale(.97)}}.hit:where(.astro-24ykw2xh){animation:hit 9s ease infinite}@keyframes hit{0%,66%{background-size:0% 100%;color:inherit}72%,92%{background-size:100% 100%;color:#1d1d1f}96%,to{background-size:0% 100%;color:inherit}}.closing:where(.astro-24ykw2xh){animation:closing 9s ease infinite}@keyframes closing{0%,79%{opacity:0;transform:translateY(.5em)}85%,93%{opacity:1;transform:none}97%,to{opacity:0;transform:translateY(.5em)}}.demo:where(.astro-24ykw2xh) figcaption:where(.astro-24ykw2xh){margin-top:.9rem;color:var(--slate-600);font-size:.9rem;line-height:1.55}.demo:where(.astro-24ykw2xh) figcaption:where(.astro-24ykw2xh) b:where(.astro-24ykw2xh){color:var(--navy-900);font-weight:600}@container (max-width: 31rem){.grid:where(.astro-24ykw2xh){grid-template-columns:repeat(2,1fr)}.card:where(.astro-24ykw2xh):nth-child(4),.card:where(.astro-24ykw2xh):nth-child(n+6){display:none}.is-match:where(.astro-24ykw2xh){--rows-up: 1;--cols-left: 1}.preview:where(.astro-24ykw2xh){width:84%}.tools:where(.astro-24ykw2xh) .sort:where(.astro-24ykw2xh){display:none}.heading:where(.astro-24ykw2xh) strong:where(.astro-24ykw2xh){font-size:1.2em}}@media(max-width:34rem){.stage:where(.astro-24ykw2xh){aspect-ratio:4 / 5}}@media(prefers-reduced-motion:reduce){.demo:where(.astro-24ykw2xh) :where(.astro-24ykw2xh){animation:none!important;transition:none!important}.ph:where(.astro-24ykw2xh),.caret:where(.astro-24ykw2xh),.chip-time:where(.astro-24ykw2xh),.cursor:where(.astro-24ykw2xh){opacity:0}.typed:where(.astro-24ykw2xh){max-width:none}.clear:where(.astro-24ykw2xh){opacity:1}.search:where(.astro-24ykw2xh){border-color:#7fb0ff;background:#fff}.filters:where(.astro-24ykw2xh){height:2.2em;opacity:1;border-bottom-color:#e6e6e9}.count-all:where(.astro-24ykw2xh){opacity:0}.count-one:where(.astro-24ykw2xh){opacity:1}.card:where(.astro-24ykw2xh):not(.is-match){opacity:0}.is-match:where(.astro-24ykw2xh){transform:translate(calc((-100% - .9em) * var(--cols-left)),calc((-100% - .9em) * var(--rows-up)));border-color:#007aff;background:#f2f8ff;box-shadow:0 0 0 1px #007aff}.is-match:where(.astro-24ykw2xh) .badge:where(.astro-24ykw2xh),.is-match:where(.astro-24ykw2xh) .snippet:where(.astro-24ykw2xh){opacity:1}.grid:where(.astro-24ykw2xh){filter:blur(1.5px) saturate(.9);opacity:.55}.preview:where(.astro-24ykw2xh){opacity:1;transform:translate(-50%,-50%) scale(1)}.hit:where(.astro-24ykw2xh){background-size:100% 100%;color:#1d1d1f}.closing:where(.astro-24ykw2xh){opacity:1;transform:none}}.guide-back:where(.astro-oolc5s6i){color:inherit;text-decoration:none}.guide-back:where(.astro-oolc5s6i):hover,.guide-back:where(.astro-oolc5s6i):focus-visible{text-decoration:underline}.prose:where(.astro-oolc5s6i){margin-top:1.5rem}.guide-hook:where(.astro-oolc5s6i){margin-top:1.5rem}.prose:where(.astro-oolc5s6i) p:last-child em{color:var(--slate-400)}