.playground{display:grid;grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);gap:1rem;max-inline-size:100%;margin:0}.playground,.playground *,.playground__desktop-nav,.playground__example-list,.playground__mobile-nav,.playground__workspace,.playground__toolbar,.playground__sandbox,.playground__region,.playground__editor,.playground__console{min-inline-size:0}.playground *,.playground *:before,.playground *:after{box-sizing:border-box}.playground__desktop-nav{align-content:start;gap:.75rem;padding:1rem;border:1px solid var(--playground-border);border-radius:var(--playground-radius-lg);background:var(--playground-surface-raised);box-shadow:var(--playground-shadow)}.playground__desktop-nav h2,.playground__region h2{margin:0;color:var(--playground-text);font-size:.875rem;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}.playground__example-list{display:grid;gap:.5rem}.playground__example{inline-size:100%;padding:.75rem;border:1px solid transparent;border-radius:var(--playground-radius-md);color:var(--playground-text);background:transparent;font:inherit;text-align:start;cursor:pointer}.playground__example:is(:hover,[aria-pressed=true]){border-color:var(--playground-accent);background:var(--playground-accent-soft)}.playground__example-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-weight:700}.playground__selected-marker{display:inline-grid;flex:0 0 1.5rem;inline-size:1.5rem;block-size:1.5rem;place-items:center;border:1px solid var(--playground-accent);border-radius:999px;background:var(--playground-accent-soft);font-size:.875rem}.playground__example-description{display:block;margin-block-start:.35rem;color:var(--playground-muted);font-size:.875rem;line-height:1.5}.playground__mobile-nav{gap:.4rem}.playground__mobile-nav label{color:var(--playground-text);font-size:.875rem;font-weight:700}.playground__mobile-nav select{inline-size:100%;max-inline-size:100%;padding-inline:.75rem;border:1px solid var(--playground-border);border-radius:var(--playground-radius-md);color:var(--playground-text);background:var(--playground-surface-raised);font:inherit}.playground__workspace{overflow:hidden;border:1px solid var(--playground-border);border-radius:var(--playground-radius-lg);background:var(--playground-surface-raised);box-shadow:var(--playground-shadow)}.playground__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem 1rem;border-block-end:1px solid var(--playground-border);background:var(--playground-surface-raised)}.playground__toolbar button{padding-inline:1rem;border:1px solid var(--playground-border);border-radius:var(--playground-radius-md);color:var(--playground-text);background:var(--playground-surface);font:inherit;font-weight:700;cursor:pointer}.playground__toolbar button[aria-label="Run code"]{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-color:var(--playground-accent);background:var(--playground-accent-soft)}.playground__spinner{flex:0 0 auto;inline-size:.9rem;block-size:.9rem;border:2px solid currentColor;border-block-end-color:transparent;border-radius:999px;animation:playground-spin .7s linear infinite}@keyframes playground-spin{to{transform:rotate(1turn)}}.playground__toolbar button:disabled{cursor:not-allowed;opacity:.55}.playground__shortcut{margin-inline-start:auto;color:var(--playground-muted);font-size:.875rem}.playground__shortcut kbd{padding:.2rem .4rem;border:1px solid var(--playground-border);border-radius:.35rem;color:var(--playground-text);background:var(--playground-surface);font:inherit}.playground__status{display:inline-flex;align-items:center;gap:.45rem;min-block-size:2.75rem;color:var(--playground-text);font-size:.875rem;font-weight:700}.playground__status:before{content:"";inline-size:.55rem;block-size:.55rem;border:1px solid var(--playground-accent);border-radius:999px;background:var(--playground-accent-soft)}.playground__toolbar[aria-busy=true] .playground__status:before{background:var(--playground-accent)}.playground__sandbox,.playground__sandbox .sp-wrapper,.playground__sandbox .sp-layout,.playground__sandbox .sp-stack,.playground__region,.playground__editor,.playground__console,.playground__editor .sp-code-editor,.playground__editor .monaco-editor,.playground__editor .monaco-editor .overflow-guard,.playground__console .sp-console-list{min-inline-size:0;max-inline-size:100%}.playground__sandbox .sp-wrapper{display:grid}.playground__sandbox :is(.sp-wrapper,.sp-layout,.sp-stack){margin:0;border:0;border-radius:0;background:transparent}.playground__region{overflow:hidden;background:var(--playground-surface-raised)}.playground__region+.playground__region{border-block-start:1px solid var(--playground-border)}.playground__region h2{padding:.7rem 1rem;border-block-end:1px solid var(--playground-border)}.playground__editor{block-size:28rem;overflow:hidden}.playground__editor-fallback{block-size:100%;overflow:auto;background:var(--playground-surface-raised)}astro-island[ssr] .playground .sp-syntax-plain,astro-island[ssr] .playground .sp-syntax-punctuation{color:var(--playground-syntax-plain)}astro-island[ssr] .playground .sp-syntax-keyword{color:var(--playground-syntax-keyword)}astro-island[ssr] .playground .sp-syntax-definition,astro-island[ssr] .playground .sp-syntax-property{color:var(--playground-syntax-definition)}astro-island[ssr] .playground .sp-syntax-string{color:var(--playground-syntax-string)}astro-island[ssr] .playground .sp-syntax-comment{color:var(--playground-syntax-comment)}.playground__editor:focus-within{outline:3px solid color-mix(in srgb,var(--playground-accent) 72%,var(--playground-text));outline-offset:-3px}.playground__editor .monaco-editor,.playground__editor .monaco-editor .margin,.playground__editor .monaco-editor-background{background:var(--playground-surface-raised)}.playground__console{block-size:12rem;overflow:hidden}.playground__console-output{block-size:100%;overflow:auto;padding:.875rem 1rem;color:var(--playground-text);font-family:var(--playground-font-mono);font-size:.875rem;line-height:1.6;white-space:pre-wrap}.playground__console-empty{color:var(--playground-muted)}.playground__runtime-client,.playground__sandbox .playground__runtime-provider{display:none}.playground__editor>:is(.sp-stack,section),.playground__console>.sp-stack{block-size:100%}.playground__editor .sp-code-editor,.playground__console .sp-console-list{min-block-size:0;overflow:auto}.playground__console .sp-console-list{flex:1 1 auto}.playground :is(button,select){min-inline-size:2.75rem;min-block-size:2.75rem}.playground :is(button,select):focus-visible{outline:3px solid color-mix(in srgb,var(--playground-accent) 72%,var(--playground-text));outline-offset:2px}@media (max-width: 47.999rem){.playground{grid-template-columns:minmax(0,1fr)}.playground__desktop-nav{display:none}.playground__mobile-nav{display:grid}.playground__toolbar{flex-direction:column;align-items:stretch}.playground__toolbar button{inline-size:100%}.playground__shortcut{margin-inline-start:0;overflow-wrap:anywhere}.playground__editor{block-size:24rem}.playground__console{block-size:10rem}}@media (min-width: 48rem){.playground__desktop-nav{display:grid}.playground__mobile-nav{display:none}}@media (prefers-reduced-motion: reduce){.playground__spinner{animation:none}}:root{color-scheme:dark;--playground-accent: #8b7cf6;--playground-accent-soft: color-mix(in srgb, #8b7cf6 17%, transparent);--playground-surface: #111827;--playground-surface-raised: #1c2738;--playground-border: rgba(151, 163, 190, .22);--playground-muted: #aeb6ca;--playground-text: #f8fafc;--playground-syntax-plain: #d7dae0;--playground-syntax-keyword: #c792ea;--playground-syntax-definition: #82aaff;--playground-syntax-string: #c3e88d;--playground-syntax-comment: #9aa3b8;--playground-radius-md: .8rem;--playground-radius-lg: 1.15rem;--playground-shadow: 0 18px 45px rgba(2, 6, 23, .18);--playground-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root[data-theme=light]{color-scheme:light;--playground-accent: #6554d9;--playground-accent-soft: color-mix(in srgb, #6554d9 14%, transparent);--playground-surface: #f8f9fc;--playground-surface-raised: #ffffff;--playground-border: rgba(51, 65, 85, .18);--playground-muted: #596276;--playground-text: #111827;--playground-syntax-plain: #1f2937;--playground-syntax-keyword: #6d28d9;--playground-syntax-definition: #1d4ed8;--playground-syntax-string: #166534;--playground-syntax-comment: #596276;--playground-shadow: 0 18px 45px rgba(30, 41, 59, .09)}*,*:before,*:after{box-sizing:border-box}html{min-inline-size:20rem;background:var(--playground-surface)}body{min-block-size:100vh;min-block-size:100dvh;margin:0;color:var(--playground-text);background:var(--playground-surface)}.playground-shell__skip{position:fixed;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:20;padding:.75rem 1rem;border-radius:var(--playground-radius-md);color:var(--playground-text);background:var(--playground-surface-raised);transform:translateY(-150%)}.playground-shell__skip:focus{transform:none}.playground-shell__header{display:flex;min-block-size:4rem;align-items:center;gap:1rem;padding:.65rem clamp(1rem,3vw,2rem);border-block-end:1px solid var(--playground-border);background:color-mix(in srgb,var(--playground-surface) 92%,transparent)}.playground-shell__header h1{margin:0;font-size:1rem}.playground-shell__brand{color:var(--playground-text);font-weight:800;text-decoration:none}.playground-shell__header nav{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}.playground-shell__header :is(a,button){display:inline-grid;min-inline-size:2.75rem;min-block-size:2.75rem;place-items:center;padding-inline:.75rem;border:1px solid transparent;border-radius:var(--playground-radius-md);color:var(--playground-text);background:transparent;font:inherit;text-decoration:none}.playground-shell__header :is(a,button):is(:hover,:focus-visible){border-color:var(--playground-accent);background:var(--playground-accent-soft)}:where(a,button,select,[tabindex]):focus-visible{outline:3px solid var(--playground-accent);outline-offset:2px}#playground-main{inline-size:min(100%,96rem);margin-inline:auto;padding:clamp(.75rem,2vw,1.5rem)}@media (max-width: 32rem){.playground-shell__header{flex-wrap:wrap}.playground-shell__header nav{inline-size:100%;margin-inline-start:0}}