.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) 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-copy:disabled{opacity:.45;cursor:default}.playground-drop-hint{z-index:2;border:2px solid var(--line);border-radius:var(--radius-panel);background:var(--line);color:var(--paper);text-align:center;pointer-events:none;place-items:center;padding:16px;display:grid;position:absolute;inset:52px 0 0}.playground-file-status{border-bottom:1px solid var(--line);color:var(--paper);font-size:var(--font-size-xs);overflow-wrap:anywhere;flex-shrink:0;padding:10px 20px}.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-filter .cm-completionLabel{color:var(--syntax-orange)}.playground-editor .cm-editor .playground-completion-parameter .cm-completionLabel{color:var(--syntax-cyan)}.playground-editor .cm-editor .cm-completionDetail{text-align:right;color:var(--muted);margin-left:auto}.playground-editor .cm-editor .cm-completionInfo{padding:8px 12px;font-family:inherit}.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:hover{text-decoration:underline}}@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 #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=template]) #template-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}}