html[data-theme=light]{--cp-surface1: var(--background);--cp-surface2: color-mix(in srgb, var(--muted) 30%, var(--background));--cp-surface3: color-mix(in srgb, var(--muted) 60%, var(--background));--cp-base: var(--foreground);--cp-clickable: color-mix(in srgb, var(--foreground) 70%, transparent);--cp-disabled: color-mix(in srgb, var(--foreground) 40%, transparent);--cp-hover: var(--accent);--cp-accent: var(--accent);--cp-error: #d1242f;--cp-error-surface: color-mix(in srgb, #d1242f 12%, var(--background));--cp-warning: #9a6700;--cp-warning-surface: color-mix(in srgb, #9a6700 12%, var(--background));--cp-syntax-plain: var(--foreground);--cp-syntax-comment: #6e7781;--cp-syntax-keyword: #cf222e;--cp-syntax-tag: #116329;--cp-syntax-punctuation: #24292f;--cp-syntax-definition: #8250df;--cp-syntax-property: #0550ae;--cp-syntax-static: #0550ae;--cp-syntax-string: #0a3069}html[data-theme=dark]{--cp-surface1: var(--background);--cp-surface2: color-mix(in srgb, var(--muted) 30%, var(--background));--cp-surface3: color-mix(in srgb, var(--muted) 60%, var(--background));--cp-base: var(--foreground);--cp-clickable: color-mix(in srgb, var(--foreground) 70%, transparent);--cp-disabled: color-mix(in srgb, var(--foreground) 40%, transparent);--cp-hover: var(--accent);--cp-accent: var(--accent);--cp-error: #ff7b72;--cp-error-surface: color-mix(in srgb, #ff7b72 18%, var(--background));--cp-warning: #d29922;--cp-warning-surface: color-mix(in srgb, #d29922 18%, var(--background));--cp-syntax-plain: var(--foreground);--cp-syntax-comment: #637777;--cp-syntax-keyword: #c792ea;--cp-syntax-tag: #7fdbca;--cp-syntax-punctuation: #c792ea;--cp-syntax-definition: #82aaff;--cp-syntax-property: #addb67;--cp-syntax-static: #f78c6c;--cp-syntax-string: #ecc48d}.code-playground{--cp-font-body: inherit;--cp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;--cp-font-size: .8125rem;--cp-font-line-height: 1.5;margin:1.75rem 0;color:var(--foreground)}.prose .code-playground{max-width:none}.code-playground-shell{overflow:hidden;border:1px solid var(--border);border-radius:.5rem;background:var(--background);padding-inline:0}.code-playground-header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.75rem;border-bottom:1px solid var(--border);padding:.25rem .75rem;background:color-mix(in srgb,var(--muted) 45%,var(--background));color:var(--foreground)}.code-playground-title{display:inline-flex;min-width:0;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:700;line-height:1.2;letter-spacing:.01em}.code-playground-title span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-playground-dot{width:.5rem;height:.5rem;flex:0 0 auto;border-radius:999px;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}.code-playground-switcher{display:none;border:1px solid var(--border);border-radius:.375rem;background:var(--background);padding:2px}.code-playground-switcher button{min-height:1.75rem;border:1px solid transparent;border-radius:.3125rem;padding:.25rem .625rem;background:transparent;color:var(--foreground);font:inherit;font-size:.75rem;font-weight:700;line-height:1.2;transition:color .15s ease,background-color .15s ease,border-color .15s ease}.code-playground-switcher button:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}.code-playground-switcher button.is-active{border-color:var(--border);background:var(--background)}.code-playground-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:.25rem}.code-playground-icon-button{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;border:1px solid transparent;border-radius:.375rem;background:transparent;color:color-mix(in srgb,var(--foreground) 70%,transparent);cursor:pointer;transition:color .15s ease,background-color .15s ease,border-color .15s ease}.code-playground-icon-button:hover{background:color-mix(in srgb,var(--muted) 60%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}.code-playground-icon-button svg{display:block;width:1rem;height:1rem}.code-playground-icon-button--sm{width:1.5rem;height:1.5rem;margin-left:auto}.code-playground-icon-button--sm svg{width:.875rem;height:.875rem}.code-playground-body{display:grid}.code-playground-shell--row .code-playground-body{grid-template-columns:minmax(0,1fr) minmax(18rem,.88fr);grid-template-rows:minmax(20rem,26rem)}.code-playground-shell--row .code-playground-editor{border-right:1px solid var(--border)}.code-playground-shell--col .code-playground-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(11rem,15rem) minmax(13rem,17rem)}.code-playground-shell--col .code-playground-editor{border-bottom:1px solid var(--border)}.code-playground-shell--preview .code-playground-body{display:block;min-height:16rem;max-height:22rem}.code-playground-editor,.code-playground-preview{min-width:0;min-height:0;overflow:hidden}.code-playground-shell--row .code-playground-editor,.code-playground-shell--row .code-playground-preview{min-height:24rem}.code-playground-shell--preview .code-playground-preview{min-height:18rem}.code-playground-preview{display:flex;flex-direction:column;background:var(--background)}.code-playground-preview-tabs{display:flex;flex:0 0 auto;align-items:center;gap:.25rem;padding:.375rem .5rem;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--muted) 30%,var(--background))}.code-playground-preview-tablist{display:inline-flex;align-items:center;gap:.25rem}.code-playground-preview-tab{min-height:1.5rem;border:1px solid transparent;border-radius:.3125rem;padding:.125rem .5rem;background:transparent;color:color-mix(in srgb,var(--foreground) 70%,transparent);font:inherit;font-size:.6875rem;font-weight:700;line-height:1.2;cursor:pointer;transition:color .15s ease,background-color .15s ease,border-color .15s ease}.code-playground-preview-tab:hover{color:var(--accent)}.code-playground-preview-tab.is-active{border-color:var(--border);background:var(--background);color:var(--foreground)}.code-playground-preview-panes{position:relative;flex:1 1 auto;min-height:0}.code-playground-preview-pane{position:absolute;inset:0;overflow:auto}.code-playground-preview-pane[data-active=false]{visibility:hidden;pointer-events:none}.code-playground-preview-pane--result,.code-playground-preview-pane--console{background:var(--background)}.code-playground .sp-wrapper,.code-playground .sp-layout,.code-playground .sp-stack,.code-playground .sp-preview,.code-playground .sp-editor,.code-playground .sp-console{height:100%;min-height:inherit;border:0;border-radius:0;background:transparent}.code-playground-preview-pane--console .sp-console{font-family:inherit;font-size:.75rem}.code-playground .sp-preview-container,.code-playground .sp-preview-iframe{min-height:inherit}.code-playground .sp-tabs{border-bottom-color:var(--border);background:color-mix(in srgb,var(--muted) 30%,var(--background));height:37px}.code-playground .sp-tabs-scrollable-container{height:37px;min-height:30px}.code-playground .sp-tab-container{height:32px}.code-playground .sp-tab-button{font-family:inherit;font-size:.75rem;font-weight:700;height:32px}.code-playground .sp-cm{flex:1 1 0;min-height:0;overflow:hidden}.code-playground .cm-editor{height:100%;max-height:100%}.code-playground .cm-scroller{overflow:auto;overscroll-behavior:contain}.prose .code-playground pre,.prose .code-playground code{margin:0;border:0;background:transparent;color:inherit;padding:0}@media(max-width:768px){.code-playground-header{grid-template-columns:minmax(0,1fr) auto}.code-playground-switcher{display:inline-flex;grid-column:1 / -1;width:100%}.code-playground-switcher button{flex:1 1 0}.code-playground-shell--row .code-playground-body,.code-playground-shell--col .code-playground-body,.code-playground-body{display:block;min-height:18rem;max-height:24rem;grid-template-columns:none;grid-template-rows:none}.code-playground-editor,.code-playground-preview{display:none;min-height:18rem;max-height:24rem}.code-playground-editor.is-active{display:block}.code-playground-preview.is-active,.code-playground-shell--preview .code-playground-preview{display:flex}.code-playground-shell--row .code-playground-editor,.code-playground-shell--col .code-playground-editor{border-right:0;border-bottom:0}}