.playground-shell{--playground-border: #d9dee9;--playground-muted: #667085;--playground-panel: #ffffff;--playground-editor: #f8fafc;--playground-text: #101828;position:relative;padding:2.5rem 0 4rem}.playground-initial-loading{display:grid;min-height:42rem;color:var(--playground-muted);font-size:.9rem;font-weight:650;gap:.65rem;place-content:center}.playground-initial-loading svg{width:1.4rem;height:1.4rem;margin-inline:auto}.playground-workspace{overflow:hidden;border:1px solid var(--playground-border);border-radius:1rem;background:var(--playground-panel);box-shadow:0 18px 45px #0f172a14}.playground-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--playground-border);padding:1rem;background:linear-gradient(180deg,#fff,#fbfcff)}.playground-runtime-label{display:flex;align-items:center;min-width:0;gap:.7rem}.playground-explorer-toggle svg{width:1.9rem;height:1.9rem;flex:0 0 auto;color:#33f}.playground-explorer-toggle{display:grid;width:2.65rem;height:2.65rem;flex:0 0 auto;border:0;border-radius:.55rem;padding:0;background:transparent;cursor:pointer;place-items:center;transition:background-color .16s ease}.playground-explorer-toggle:hover{background:#f0f1ff}.playground-explorer-toggle:focus-visible{outline:2px solid #3333ff;outline-offset:2px}.playground-runtime-label>div{display:grid;min-width:0;gap:.1rem}.playground-runtime-label strong{color:#101828;font-size:.75rem;font-weight:700;letter-spacing:.05em}.playground-runtime-label span{overflow:hidden;color:var(--playground-muted);font-family:Fira Code,SFMono-Regular,Consolas,monospace;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.playground-main{display:grid;grid-template-columns:15rem minmax(0,1fr);min-height:36rem}.playground-main.is-explorer-collapsed{grid-template-columns:minmax(0,1fr)}.playground-main.is-explorer-collapsed .playground-explorer{display:none}.playground-explorer{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--playground-border);background:#fbfcff}.playground-explorer-header{display:flex;align-items:center;justify-content:space-between;min-height:2.75rem;border-bottom:1px solid var(--playground-border);padding:0 .65rem 0 .85rem;color:#475467;font-size:.7rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.playground-explorer-actions{display:flex;gap:.15rem}.playground-explorer-actions button{display:grid;width:1.8rem;height:1.8rem;border:0;border-radius:.35rem;padding:0;background:transparent;color:#667085;cursor:pointer;place-items:center}.playground-explorer-actions button:hover{background:#eef1f7;color:#101828}.playground-explorer-actions button:disabled{cursor:not-allowed;opacity:.45}.playground-explorer-actions button:focus-visible,.playground-tree-item:focus-visible{outline:2px solid #3333ff;outline-offset:-2px}.playground-explorer-actions svg{width:1rem;height:1rem}.playground-tree{flex:1;min-height:0;overflow:auto;padding:.45rem 0}.playground-tree-item{display:flex;align-items:center;width:100%;min-width:0;height:2rem;gap:.35rem;border:0;padding:0 .65rem;background:transparent;color:#344054;font:inherit;font-size:.78rem;text-align:left;cursor:pointer}.playground-tree-new-entry{display:flex;align-items:center;height:2rem;gap:.35rem;padding:0 .65rem 0 .45rem;color:#344054}.playground-tree-new-entry>svg{width:.95rem;height:.95rem;flex:0 0 auto;color:#667085}.playground-tree-new-input{width:100%;min-width:0;height:1.65rem;border:1px solid #3333ff;border-radius:.2rem;padding:0 .3rem;background:#fff;color:#101828;font:inherit;font-size:.78rem;outline:1px solid #3333ff;outline-offset:-1px}.playground-tree-item:hover{background:#f0f2f7}.playground-tree-item.is-renaming{display:none}.playground-tree-item.is-context-target,.playground-tree-item.is-active{background:#e8eaff;color:#17177a;font-weight:650}.playground-tree-item>svg,.playground-tree-chevron svg{width:.95rem;height:.95rem;flex:0 0 auto}.playground-tree-item>svg{color:#667085}.playground-tree-item.is-active>svg{color:#33f}.playground-tree-chevron{display:grid;width:.8rem;height:1rem;flex:0 0 auto;place-items:center}.playground-tree-context-menu{position:fixed;z-index:100;display:grid;width:10rem;border:1px solid var(--playground-border);border-radius:.45rem;padding:.3rem;background:var(--playground-panel);box-shadow:0 10px 30px #0f172a2e}.playground-tree-context-menu button{border:0;border-radius:.3rem;padding:.45rem .6rem;background:transparent;color:#344054;font:inherit;font-size:.78rem;text-align:left;cursor:pointer}.playground-tree-context-menu button:hover,.playground-tree-context-menu button:focus-visible{background:#eef1f7;outline:none}.playground-tree-context-menu button.is-danger{color:#b42318}.playground-tree-context-separator{height:1px;border:0;margin:.3rem .2rem;background:var(--playground-border)}.playground-tree-item>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playground-actions{display:flex;flex:0 0 auto;gap:.65rem}.playground-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:.55rem;font:inherit;font-size:.83rem;font-weight:700;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.playground-button{min-height:2.65rem;border:1px solid transparent;padding:0 1rem}.playground-button svg{width:1rem;height:1rem}.playground-button:focus-visible{outline:2px solid #3333ff;outline-offset:2px}.playground-button-primary{background:#006;color:#fff}.playground-button-primary:not(:disabled):hover{background:#009}.playground-button-shortcut{color:#ffffff9e;font-size:.72rem;font-weight:600;white-space:nowrap}.playground-button:disabled{cursor:not-allowed;opacity:.55}.playground-editor-card{min-width:0;background:var(--playground-panel)}.playground-editor{position:relative;width:100%;height:36rem;background:var(--playground-editor)}.playground-editor.is-loading{overflow:hidden}.playground-monaco-editor{width:100%;height:100%}.playground-editor-fallback{position:absolute;inset:0;z-index:1;width:100%;height:100%;resize:none;border:0;padding:1rem 4rem 1rem 1rem;outline:0;background:var(--playground-editor);color:var(--playground-text);font-family:Fira Code,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.875rem;line-height:1.5;tab-size:2}.playground-editor-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.55rem;color:var(--playground-muted);font-size:.85rem;font-weight:650}.playground-editor-error{max-width:36rem;padding:1rem;color:#b42318}.playground-editor-error svg{width:1.1rem;height:1.1rem;flex:0 0 auto}.playground-results{border-top:1px solid var(--playground-border);padding:1rem}.playground-status{display:flex;align-items:center;gap:.6rem;color:#166534;font-size:.85rem;font-weight:650}.playground-status[data-state=loading],.playground-status[data-state=linting],.playground-status[data-state=formatting]{color:#1d4ed8}.playground-status[data-state=error],.playground-status[data-has-diagnostics=true]{color:#b42318}.playground-status svg{width:1.05rem;height:1.05rem;flex:0 0 auto}.playground-spinner{animation:playground-spin .8s linear infinite}.playground-diagnostics{display:grid;gap:.65rem;margin-top:.9rem}.playground-diagnostics>button{width:100%;border:1px solid #fecaca;border-radius:.55rem;padding:.75rem .85rem;background:#fff7f7;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .16s ease,background-color .16s ease}.playground-diagnostics>button:hover{border-color:#ef4444;background:#fff1f1}.playground-diagnostics>button[data-level=warning]{border-color:#fed7aa;background:#fffaf5}.playground-diagnostic-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:.35rem;color:#667085;font-size:.68rem;font-weight:700;text-transform:uppercase}.playground-diagnostic-meta>span:first-child{color:#b42318}.playground-diagnostic-location{text-transform:none}.playground-diagnostic-meta code{border-radius:.25rem;padding:.1rem .35rem;background:#fee2e2;color:#991b1b;font-size:.68rem;text-transform:none}.playground-diagnostics>button p{margin:0;color:#344054;font-family:Fira Code,SFMono-Regular,Consolas,monospace;font-size:.8rem;line-height:1.55}@keyframes playground-spin{to{transform:rotate(360deg)}}:root.dark .playground-shell{--playground-border: #3c485b;--playground-muted: #98a2b3;--playground-panel: #202b3a;--playground-editor: #182230;--playground-text: #f2f4f7}:root.dark .playground-workspace{box-shadow:0 18px 45px #00000038}:root.dark .playground-toolbar{background:linear-gradient(180deg,#202b3a,#1d2735)}:root.dark .playground-runtime-label strong{color:#f2f4f7}:root.dark .playground-explorer-toggle:hover{background:#303650}:root.dark .playground-explorer{background:#1d2735}:root.dark .playground-explorer-header{color:#d0d5dd}:root.dark .playground-explorer-actions button,:root.dark .playground-tree-item,:root.dark .playground-tree-new-entry{color:#d0d5dd}:root.dark .playground-tree-new-entry>svg{color:#98a2b3}:root.dark .playground-tree-new-input{background:#182230;color:#f2f4f7}:root.dark .playground-explorer-actions button:hover,:root.dark .playground-tree-item:hover{background:#293548;color:#f2f4f7}:root.dark .playground-tree-item.is-context-target,:root.dark .playground-tree-item.is-active{background:#30306e;color:#fff}:root.dark .playground-tree-item>svg{color:#98a2b3}:root.dark .playground-tree-item.is-context-target>svg,:root.dark .playground-tree-item.is-active>svg{color:#b3b3ff}:root.dark .playground-tree-context-menu button{color:#d0d5dd}:root.dark .playground-tree-context-menu button:hover,:root.dark .playground-tree-context-menu button:focus-visible{background:#293548}:root.dark .playground-tree-context-menu button.is-danger{color:#f97066}:root.dark .playground-editor-error{color:#fda29b}:root.dark .playground-status{color:#6ce9a6}:root.dark .playground-status[data-state=loading],:root.dark .playground-status[data-state=linting],:root.dark .playground-status[data-state=formatting]{color:#84adff}:root.dark .playground-status[data-state=error],:root.dark .playground-status[data-has-diagnostics=true]{color:#f97066}:root.dark .playground-diagnostics>button{border-color:#633b43;background:#f044380f}:root.dark .playground-diagnostics>button:hover{border-color:#b5474f;background:#f044381a}:root.dark .playground-diagnostics>button[data-level=warning]{border-color:#694d2c;background:#f790090f}:root.dark .playground-diagnostics>button[data-level=warning]:hover{border-color:#b77a24;background:#f790091a}:root.dark .playground-diagnostic-meta{color:#98a2b3}:root.dark .playground-diagnostic-meta>span:first-child{color:#f97066}:root.dark .playground-diagnostic-meta code{background:#f0443829;color:#fda29b}:root.dark .playground-diagnostics>button[data-level=warning] .playground-diagnostic-meta>span:first-child{color:#fdb022}:root.dark .playground-diagnostics>button[data-level=warning] .playground-diagnostic-meta code{background:#f7900929;color:#fec84b}:root.dark .playground-diagnostics>button p{color:#f2f4f7}@media(max-width:900px){.playground-main{grid-template-columns:12rem minmax(0,1fr)}.playground-editor{height:30rem}}@media(max-width:640px){.playground-toolbar{align-items:center}.playground-button-shortcut{display:none}.playground-main{grid-template-columns:1fr}.playground-explorer{max-height:12rem;border-right:0;border-bottom:1px solid var(--playground-border)}.playground-editor{height:26rem}}