@layer playground{.playground{border:var(--pg-border,1px solid #ccc);font:14px/1.4 var(--pg-font,system-ui, sans-serif);min-height:var(--pg-min-height,480px);background:var(--pg-editor-bg,#fff);grid-template-rows:auto minmax(0,1fr) auto;display:grid}.playground-full{box-sizing:border-box;height:100%;min-height:0}.playground-toolbar{border-bottom:1px solid var(--pg-chrome-line,#ccc);background:var(--pg-chrome-bg,#f6f6f6);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:0 8px;display:flex}.playground-tabs,.playground-actions{gap:2px;display:flex;overflow-x:auto}.playground-tab,.playground-action{border-radius:var(--pg-radius,0);min-height:36px;font:600 12px / 1 var(--pg-font-code,ui-monospace, monospace);color:var(--pg-chrome-muted,#555);cursor:pointer;white-space:nowrap;background:0 0;border:0;padding:10px 12px}.playground-tab:hover,.playground-action:hover{color:var(--pg-chrome-ink,#111)}.playground-tab[aria-selected=true]{color:var(--pg-chrome-ink,#111);background:var(--pg-tab-active-bg,#fff);box-shadow:inset 0 -2px 0 var(--pg-accent,#333)}.playground-main{grid-template-columns:minmax(0, var(--pg-split-editor,1fr)) 7px minmax(0, var(--pg-split-output,1fr));min-height:0;display:grid}.playground-splitter{cursor:col-resize;touch-action:none;background:linear-gradient(90deg, var(--pg-editor-bg,#fff) 50%, var(--pg-output-bg,#fff) 50%);position:relative}.playground-splitter:before{content:"";background:var(--pg-chrome-line,#ccc);transition:inset .1s,background .1s;position:absolute;inset:0 3px}.playground-splitter:after{content:"";background:var(--pg-chrome-muted,#555);border-radius:3px;width:5px;height:32px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.playground-splitter:hover:before,.playground-splitter:focus-visible:before,.playground-resizing .playground-splitter:before,.playground-splitter:hover:after,.playground-splitter:focus-visible:after,.playground-resizing .playground-splitter:after{background:var(--pg-accent,#333)}.playground-splitter:hover:before,.playground-splitter:focus-visible:before,.playground-resizing .playground-splitter:before{inset:0 2px}.playground-splitter:focus-visible{outline:none}.playground-resizing{cursor:col-resize;user-select:none}.playground-resizing iframe{pointer-events:none}@media (width<=720px){.playground-main{grid-template-columns:1fr}.playground-splitter{display:none}.playground-editor{border-right:0;border-bottom:1px solid var(--pg-chrome-line,#ccc)}}.playground-editor{background:var(--pg-editor-bg,#fff);min-height:240px;overflow:auto}.playground-output{background:var(--pg-output-bg,#fff);display:flex}.playground-preview{background:0 0;border:0;flex:1;min-height:320px}.playground-full .playground-preview{min-height:0}.playground-panel ul{font:12px/1.5 var(--pg-font-code,ui-monospace, monospace);margin:0;padding:0;list-style:none}.playground-panel li{border-top:1px solid var(--pg-panel-line,#eee);color:var(--pg-panel-ink,inherit);white-space:pre-wrap;padding:4px 8px}.playground-error,.playground-log-error{color:var(--pg-error,#b00020);background:var(--pg-error-bg,#fff0f0)}.playground-log-warn{background:var(--pg-warn-bg,#fffbe6)}.playground .tok-keyword,.playground .tok-operator,.playground .tok-modifier{color:var(--pg-tok-keyword,#7a3e9d)}.playground .tok-string,.playground .tok-string2{color:var(--pg-tok-string,#1a7f37)}.playground .tok-number,.playground .tok-bool,.playground .tok-atom{color:var(--pg-tok-number,#0550ae)}.playground .tok-function,.playground .tok-variableName.tok-function{color:var(--pg-tok-function,inherit)}.playground .tok-variableName.tok-definition,.playground .tok-propertyName.tok-definition{color:var(--pg-tok-definition,#953800)}.playground .tok-propertyName{color:var(--pg-tok-property,inherit)}.playground .tok-typeName,.playground .tok-className{color:var(--pg-tok-type,#0a3069)}.playground .tok-tagName{color:var(--pg-tok-tag,#116329)}.playground .tok-attributeName{color:var(--pg-tok-attribute,#0550ae)}.playground .tok-comment{color:var(--pg-tok-comment,#6e7781);font-style:italic}.playground .tok-punctuation{color:var(--pg-tok-punctuation,inherit)}}
