@layer ui{:where(native-codemirror){display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%;min-height:0;border-radius:var(--n-radius, .5rem)}:where(native-codemirror) :where(.cm-editor){height:100%}:where(native-codemirror)[aria-disabled=true]{opacity:.5;pointer-events:none}:where(.cm-editor){--n-code-bg: var(--n-color-neutral-base, #282c34);--n-code-bg-raised: var(--n-color-neutral-higher, #21252b);--n-code-bg-deeper: var(--n-color-neutral-lower, #1e2127);--n-code-bg-inline: var(--n-card, #333843);--n-code-text: var(--n-ink, #abb2bf);--n-code-text-muted: var(--n-ink-muted, #7d8799);--n-code-cursor: var(--n-surface-accent, #528bff);--n-code-selection: var(--n-color-neutral-300, #3E4451);--n-code-line-active: var(--n-color-neutral-200-scrim, #2c313a) !important;--n-code-bracket: var(--n-color-neutral-600, #515a6b);--n-code-accent: var(--n-surface-accent, #61afef);--n-code-border: var(--n-border, #3E4451);--n-code-button: var(--n-color-neutral-100-scrim, #3E4451);--n-code-scrollbar: var(--n-color-neutral-200-scrim, #484c52);--n-code-scrollbar-hover: var(--n-color-neutral-300-scrim, #5e6167);--n-code-match: var(--n-color-accent-050-scrim, #314050);--n-code-shadow: 0 4px 16px rgba(0, 0, 0, .3);--n-code-search: rgba(229, 192, 123, .25);--n-code-search-outline: rgba(229, 192, 123, .4);--n-code-search-active: rgba(97, 175, 239, .3);--n-code-keyword: #c678dd;--n-code-string: #98c379;--n-code-function: #61afef;--n-code-variable: #e06c75;--n-code-type: #e5c07b;--n-code-operator: #56b6c2;--n-code-number: #d19a66;--n-code-invalid: #ffffff;overflow:hidden;font-variant-ligatures:contextual;line-height:1.6}:where(.cm-content):focus-visible,:where(.cm-editor.cm-focused){outline:none}:where(.cm-scroller){display:flex!important;align-items:flex-start!important;overflow:auto;font-family:JetBrains Mono,Fira Code,Cascadia Code,ui-monospace,SFMono-Regular,Menlo,monospace}:where(.cm-gutters){border-right:none;user-select:none}:where(.cm-gutter){min-width:2ch}:where(.cm-scroller){scrollbar-width:thin;scrollbar-color:var(--n-code-scrollbar) transparent}:where(.cm-scroller)::-webkit-scrollbar{width:8px;height:8px}:where(.cm-scroller)::-webkit-scrollbar-track{background:transparent}:where(.cm-scroller)::-webkit-scrollbar-thumb{background:var(--n-code-scrollbar);border-radius:4px}:where(.cm-scroller)::-webkit-scrollbar-thumb:hover{background:var(--n-code-scrollbar-hover)}:where(.cm-scroller)::-webkit-scrollbar-corner{background:transparent}:where(.cm-panels){border-radius:0}:where(.cm-search){padding:8px 12px;gap:4px}:where(.cm-search) :where(label){display:inline-flex;align-items:center;gap:4px}:where(.cm-tooltip){border-radius:6px;overflow:hidden}:where(.cm-tooltip-autocomplete){border-radius:6px}:where(.cm-tooltip-autocomplete) :where(ul){padding:4px 0}:where(.cm-completionIcon){padding-right:4px;opacity:.6}:where(.cm-foldPlaceholder){padding:0 4px;border-radius:3px}:where(.cm-content){padding:8px 0;color:inherit;flex-grow:2;flex-shrink:0;white-space:pre;word-wrap:normal;min-height:100%}:where(.cm-line){padding:0 12px 0 4px}:where(.cm-selectionMatch){background-color:var(--n-code-match);border-radius:2px}}@layer ui{:where(native-playground){--n-pg-min-height: 400px;--n-pg-radius: var(--n-radius-lg, .75rem);--n-pg-console-max-height: 200px;--n-pg-chrome: var(--n-panel-neutral, #21252b);--n-pg-editor-bg: var(--n-control-neutral, #282c34);--n-pg-console-bg: var(--n-body-neutral, #1e2127);--n-pg-border-color: var(--n-border-muted-neutral, #3e4451);--n-pg-border: 1px solid var(--n-pg-border-color);--n-pg-preview-bg: var(--n-body-neutral, #ffffff);--n-pg-text: var(--n-ink-neutral, #abb2bf);--n-pg-text-muted: var(--n-ink-muted-neutral, #7d8799);--n-pg-text-strong: var(--n-ink-strong-neutral, #e5e7eb);--n-pg-accent: var(--n-ink-accent, #61afef);--n-pg-run: var(--n-ink-success, #98c379);--n-pg-run-hover: var(--n-ink-hover-success, #b5e890);--n-pg-run-hover-bg: var(--n-control-success, #333d37);--n-pg-warn: var(--n-ink-warning, #e5c07b);--n-pg-error: var(--n-ink-danger, #e06c75);display:grid;grid-template-rows:auto 1fr;min-height:var(--n-pg-min-height);border-radius:var(--n-pg-radius);border:var(--n-pg-border);overflow:hidden;contain:layout;container-type:inline-size}:where(native-playground)[presented]{width:100%;height:100%;justify-self:stretch;align-self:stretch;border:none;border-radius:0}:where(native-playground)>:where(n-header) :where(n-button):hover,:where(native-playground)>:where(n-header) :where(n-button)[force-hover]{background:var(--n-pg-editor-bg)}:where(native-playground) :where(.pg-btn-run){--n-color: var(--n-pg-run);--n-color-hover: var(--n-pg-run-hover)}:where(native-playground) :where(.pg-btn-run):hover,:where(native-playground) :where(.pg-btn-run)[force-hover]{background:var(--n-pg-run-hover-bg)}:where(native-playground)>:where(.pg-split){display:flex;min-height:0;overflow:hidden}:where(native-playground[orientation=vertical])>:where(.pg-split){flex-direction:column}@container (max-width: 600px){:where(native-playground[orientation=auto])>:where(.pg-split),:where(native-playground:not([orientation]))>:where(.pg-split){flex-direction:column}}:where(native-playground) :where(.pg-resize-handle){position:absolute;top:0;right:0;bottom:0;width:6px;cursor:col-resize;background:transparent;transition:background .15s;z-index:1}:where(native-playground) :where(.pg-resize-handle):hover,:where(native-playground) :where(.pg-editor[resizing]) :where(.pg-resize-handle){background:var(--n-pg-accent)}:where(native-playground[orientation=vertical]) :where(.pg-resize-handle){inset:auto 0 0;width:auto;height:6px;cursor:row-resize}@container (max-width: 600px){:where(native-playground[orientation=auto]) :where(.pg-resize-handle),:where(native-playground:not([orientation])) :where(.pg-resize-handle){inset:auto 0 0;width:auto;height:6px;cursor:row-resize}}:where(native-playground) :where(.pg-editor){position:relative;display:grid;grid-template-rows:auto 1fr auto;flex:1 1 50%;min-width:200px;min-height:0;overflow:hidden;background:var(--n-pg-editor-bg)}:where(native-playground) :where(.pg-editor[style*=width]){flex:none}:where(native-playground[orientation=vertical]) :where(.pg-editor){min-width:0;min-height:100px}:where(native-playground[orientation=vertical]) :where(.pg-editor[style*=height]){flex:none}:where(native-playground) :where(n-header){background:var(--n-pg-chrome);border-bottom:var(--n-pg-border);padding:0;--n-ink: var(--n-pg-text-muted);--n-ink-hover: var(--n-pg-text);--n-ink-strong: var(--n-pg-text-strong);--n-border-muted: transparent;--n-surface: var(--n-pg-accent);--n-surface-ink: var(--n-pg-text-strong)}:where(native-playground) :where(.pg-code-panel){min-height:0;overflow:auto}:where(native-playground) :where(.pg-code-panel[hidden]){display:none}:where(native-playground) :where(native-codemirror){height:100%;border-radius:0}:where(native-playground) :where(.cm-editor){font-size:.8125rem;color-scheme:dark}:where(native-playground) :where(.cm-scroller){overflow:auto}:where(native-playground) :where(.cm-gutters){border-right:none}:where(native-playground) :where(.pg-console){max-height:var(--n-pg-console-max-height);overflow-y:auto;border-top:var(--n-pg-border);background:var(--n-pg-console-bg);font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-size:.75rem;padding:.375rem .5rem;color:var(--n-pg-text)}:where(native-playground) :where(.pg-console[hidden]){display:none}:where(native-playground) :where(.pg-console-line){padding:.125rem 0;white-space:pre-wrap;word-break:break-all}:where(native-playground) :where(.pg-console-warn){color:var(--n-pg-warn)}:where(native-playground) :where(.pg-console-error){color:var(--n-pg-error)}:where(native-playground) :where(.pg-preview){flex:1 1 50%;min-width:200px;min-height:0;overflow:hidden;background:var(--n-pg-preview-bg);border-left:var(--n-pg-border)}:where(native-playground[orientation=vertical]) :where(.pg-preview){min-width:0;min-height:100px;border-left:none;border-top:var(--n-pg-border)}@container (max-width: 600px){:where(native-playground[orientation=auto]) :where(.pg-preview),:where(native-playground:not([orientation])) :where(.pg-preview){border-left:none;border-top:var(--n-pg-border)}}:where(native-playground) :where(.pg-preview)>:where(iframe){display:block;width:100%;height:100%;border:none}}.playground-wrap{margin-bottom:1rem}