.playground{--playground-editor-font-size:var(--font-size-small);height:100dvh;font-size:var(--font-size-small);flex-direction:column;display:flex}.playground :where(button,textarea){font:inherit}.playground button:focus-visible,.playground a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.playground-header{width:100%;min-height:var(--header-height);font-size:var(--font-size-body);flex-shrink:0;align-items:center;gap:20px;margin-inline:auto;padding:0 24px;display:flex;position:relative}.playground-header .playground-brand{flex-shrink:0;align-items:center;gap:6px;display:flex}.playground-header h1{font-size:inherit;font-weight:300;font-size:var(--font-size-heading);margin:0}.playground-header .playground-actions{align-items:center;margin-left:auto;display:flex;position:relative}.playground-header #playground-settings[aria-expanded=true]{color:#f2f0e5}.playground-header-slot{flex-shrink:0}#playground-settings-menu{z-index:20;min-width:180px;right:0}.playground-divider{color:var(--faint)}.playground-tabs{display:none}.playground[data-initializing] .playground-editor,.playground[data-initializing] .playground-status{visibility:hidden}.playground-columns{grid-template-columns:var(--playground-tracks,minmax(180px, 1fr) 1px minmax(180px, 1fr));flex:1;gap:2px;min-height:0;padding:0 8px 8px;display:grid}.playground-panel{background:var(--panel);border-radius:var(--radius-panel);flex-direction:column;min-width:0;min-height:0;display:flex;position:relative;container-type:inline-size}.playground-resizer{z-index:1;cursor:col-resize;touch-action:none;user-select:none;outline:none;width:9px;margin-inline:-4px;position:relative}.playground-columns.is-resizing{cursor:col-resize;user-select:none}.playground-columns.is-resizing textarea{pointer-events:none}.playground-panel-header{border-bottom:1px solid var(--line);flex-shrink:0;align-items:center;gap:8px;height:54px;padding:0 12px 0 20px;display:flex}.playground-panel-header h2{font-size:inherit;margin:0;font-weight:400}.playground-language{color:var(--muted)}@container (width<=240px){.playground-panel-header{gap:8px;padding-inline:12px}.playground-language{display:none}}.playground-copy{flex-shrink:0}.playground-language+.playground-copy{margin-left:auto}.playground-output-views{margin-right:auto}.playground-panel-header:has(.playground-output-views){gap:8px}@container (width<=520px){.playground-panel-header:has(.playground-output-views) h2{display:none}}@container (width<=400px){.playground-panel-header:has(.playground-output-views){gap:6px;padding-inline:12px}.playground-output-views{font-size:var(--font-size-menu)}.playground-output-views>button{padding-inline:6px}}#output-panel:not([data-view=svg])>.playground-editor,#output-panel:not([data-view=svg]) .playground-copy,#output-panel[data-view=svg] .playground-preview,#output-panel[data-view=pele] .playground-diagram[data-renderer=mermaid],#output-panel[data-view=mermaid] .playground-diagram[data-renderer=pele],#output-panel:not([data-view=compare]) .playground-diagram figcaption{display:none}.playground-preview{min-height:0;color:var(--pele-fg);flex:1;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);display:grid;overflow:hidden}.playground-preview[data-pele-theme]{--pele-bg:var(--panel);--pele-surface:var(--line);--pele-surface-alt:var(--line-hover);--pele-border:var(--line-active)}.playground-diagram{flex-direction:column;min-width:0;min-height:0;margin:0;display:flex}.playground-diagram figcaption{color:var(--pele-muted);font-size:var(--font-size-xs);justify-content:space-between;gap:12px;padding:10px 14px 0;display:flex}.playground-diagram+.playground-diagram{border-top:1px solid var(--pele-surface-alt)}.playground-diagram-canvas{flex:1;min-height:0;padding:24px;display:flex;overflow:auto}.playground-diagram-canvas>svg{flex:none;margin:auto;transition:opacity .15s}.playground-diagram-canvas[data-stale]>svg{opacity:.35}.playground-diagram-empty{max-width:44ch;color:var(--pele-muted);overflow-wrap:anywhere;text-align:center;white-space:pre-wrap;margin:auto}@container (width>=600px){#output-panel[data-view=compare] .playground-preview{grid-template-columns:repeat(2,minmax(0,1fr))}#output-panel[data-view=compare] .playground-diagram+.playground-diagram{border-top:0;border-left:1px solid var(--pele-surface-alt)}}.playground-copy:disabled{opacity:.45;cursor:default}.playground-editor{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.playground-editor textarea{width:100%;height:100%;min-height:0;padding:20px 16px 40px calc(var(--code-gutter-width) + 8px);resize:none;color:var(--paper);font-family:var(--font-mono);font-size:var(--playground-editor-font-size);line-height:var(--code-line-height);tab-size:2;white-space:pre;background:0 0;border:0;border-radius:0;outline:none;margin:0}.playground-editor .cm-editor{min-height:0;color:var(--paper);font-size:var(--playground-editor-font-size);flex:1}.playground-editor .cm-editor.cm-focused{outline:none}.playground-editor .cm-editor .cm-scroller{min-height:0;font-family:var(--font-mono);line-height:var(--code-line-height);flex:1;overflow:auto}.playground-editor .cm-editor .cm-content{caret-color:var(--paper);padding:20px 0 40px}.playground-editor .cm-editor .cm-content::selection,.playground-editor .cm-editor .cm-content ::selection{color:currentColor;background:0 0}.playground-editor .cm-editor .cm-line{padding:0 16px 0 8px}.playground-editor .cm-editor .cm-line span{font-weight:inherit}.playground-editor .cm-editor .cm-gutters{background:var(--panel);color:var(--faint);border:0}.playground-editor .cm-editor .cm-gutters,.playground-editor .cm-editor .cm-gutters *{-webkit-user-select:none;user-select:none}.playground-editor .cm-editor .cm-lineNumbers .cm-gutterElement{min-width:var(--code-gutter-width);padding:0 8px 0 0}.playground-editor .cm-editor .cm-cursor{border-left-color:var(--paper)}.playground-editor .cm-editor .cm-selectionBackground,.playground-editor .cm-editor.cm-focused>.cm-scroller>.cm-selectionLayer .cm-selectionBackground{background:var(--selection-background)}.playground-editor .cm-editor .cm-tooltip{border-radius:var(--radius-panel);background:var(--line);color:var(--paper);font-family:var(--font-mono);font-size:var(--font-size-menu);border:0;padding:4px;overflow:hidden;box-shadow:0 4px 16px #0003}.playground-editor .cm-editor .cm-tooltip-autocomplete{padding:0}.playground-editor .cm-editor .cm-tooltip-autocomplete>ul{padding:4px;scroll-padding-block:4px}.playground-editor .cm-editor .cm-tooltip-autocomplete>ul>li{align-items:baseline;gap:16px;padding:4px 8px;display:flex}.playground-editor .cm-editor .cm-tooltip-autocomplete>ul>li[aria-selected]{border-radius:var(--radius-small);background:var(--line-hover);color:var(--paper)}.playground-editor .cm-editor .playground-completion-variable .cm-completionLabel{color:var(--syntax-blue)}.playground-editor .cm-editor .playground-completion-keyword .cm-completionLabel{color:var(--syntax-green)}.playground-editor .cm-editor .playground-completion-property .cm-completionLabel{color:var(--syntax-orange)}.playground-editor .cm-editor .playground-completion-enum .cm-completionLabel{color:var(--syntax-cyan)}.playground-editor .cm-editor .cm-completionDetail{text-align:right;color:var(--muted);margin-left:auto;font-style:normal}.playground-columns.is-resizing .cm-editor{pointer-events:none}.playground-status{min-height:44px;max-height:30%;font-size:var(--font-size-xs);color:var(--paper);overflow-wrap:anywhere;flex:none;padding:12px 20px;overflow:auto}.playground-status-message{align-items:flex-start;gap:6px;display:flex}.playground-status-icon{flex-shrink:0;margin-top:.1em}.playground-status-icon-success{color:var(--syntax-green)}.playground-status-icon-error{color:var(--syntax-red)}.playground-status-icon-warning{color:var(--syntax-yellow)}.playground-status-icon-loading{color:var(--faint);animation:1s linear infinite playground-status-spin}@keyframes playground-status-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.playground-status-icon-loading{animation:none}}#output-status{text-align:right}#output-status[data-state=""]{color:var(--muted)}#output-status .playground-status-message{justify-content:flex-end}.playground-diagnostic{width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;padding:4px 0;display:block}@media (hover:hover){.playground-diagnostic:is(button):hover{text-decoration:underline}}.playground-diagnostic:not(button){cursor:default}.playground-diagnostic-detail{color:var(--muted);font-family:var(--font-mono);line-height:var(--code-line-height);margin:4px 0 0 22px;overflow-x:auto}#playground-samples-menu{overscroll-behavior:contain;width:260px;max-height:min(60vh,440px);overflow-y:auto}#playground-samples-menu .menu-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (width<=760px){.playground-header{width:min(var(--page-width), var(--reading));padding:calc(16px + env(safe-area-inset-top,0px)) 0 12px;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;transition:opacity .24s;display:grid}.playground-header .playground-brand{grid-area:1/1;min-width:0}.playground-header .playground-brand h1{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.playground-header .playground-actions{grid-area:1/2;margin-left:0}.playground-header>.filter-search-trigger{grid-area:1/3}.playground-header>.mobile-docs-trigger{grid-area:1/4;justify-self:end}.playground-tabs{flex-shrink:0;margin:0 8px 8px;display:grid}.playground-tabs>button{min-height:40px}#playground-settings>span{display:none}.playground-header .playground-actions{position:static}#playground-settings-menu{width:min(300px,100%)}#playground-samples-menu{width:auto;max-height:38vh}.playground #playground-settings:focus-visible,.playground .menu button:focus-visible{outline:0}.playground-columns{grid-template-columns:minmax(0,1fr)}.playground-resizer,.playground:not([data-active-panel=input]) #input-panel,.playground:not([data-active-panel=output]) #output-panel{display:none}}@media (forced-colors:active){.playground-editor textarea{color:canvastext;caret-color:canvastext}.playground-editor textarea::selection{color:highlighttext;background:highlight}}