@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap";.playground{--mint:#00d68f;--mint-dim:#00d68f1a;--mint-glow:#00d68f33;--mint-border:#00d68f59;--error:#ff6b6b;--error-dim:#ff6b6b1a;--warn:#ffd166;--warn-dim:#ffd1661a;--info:#74b9ff;--info-dim:#74b9ff1a;--playground-bg:#0e1016;--playground-surface:#111318;--playground-raised:#161a22;--playground-border:#1e2229;--playground-border-hover:#2a2e38;--playground-text:#e2e8f0;--playground-text-muted:#5e6678;--playground-text-dim:#3a3f4e;--playground-accent:var(--mint);--editor-bg:#0e1016;--preview-bg:#fff;--preview-text:#1a1a1a;--preview-border:#e8ecf0;--preview-surface:#f7f8fa;--terminal-bg:#0b0d11;--terminal-text:#c9d1e0;--terminal-prompt:#00d68f;background:var(--playground-bg);height:100%;color:var(--playground-text);border:1px solid var(--playground-border);border-radius:12px;flex-direction:column;font-family:Outfit,system-ui,sans-serif;display:flex;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff08,0 24px 64px #00000080,0 4px 16px #0006}@keyframes pulse-dot{0%,to{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 var(--mint-glow)}70%{box-shadow:0 0 0 6px #0000}to{box-shadow:0 0 #0000}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.playground-header{background:var(--playground-surface);border-bottom:1px solid var(--playground-border);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;height:48px;padding:0 14px;display:flex}.playground-header-title{color:var(--playground-text);letter-spacing:.01em;align-items:center;gap:10px;min-width:0;font-size:13px;font-weight:600;display:flex}.playground-header-title:before{content:"";background:var(--playground-text-dim);border-radius:50%;flex-shrink:0;width:7px;height:7px;transition:background .3s,box-shadow .3s;display:inline-block}.playground-header[data-status=ready] .playground-header-title:before{background:var(--mint);animation:2s infinite pulse-ring}.playground-header[data-status=initializing] .playground-header-title:before,.playground-header[data-status=installing] .playground-header-title:before{background:var(--warn);animation:1s ease-in-out infinite pulse-dot}.playground-header[data-status=error] .playground-header-title:before{background:var(--error)}.playground-header-actions{flex-shrink:0;align-items:center;gap:2px;display:flex}.playground-header-btn{width:32px;height:32px;color:var(--playground-text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:background .12s,color .12s,transform .1s;display:flex;position:relative}.playground-header-btn:hover{background:var(--playground-raised);color:var(--playground-text)}.playground-header-btn:active{transform:scale(.93)}.playground-header-btn:focus-visible{outline:2px solid var(--mint-border);outline-offset:1px}.playground-header-btn:disabled{opacity:.28;cursor:not-allowed}.playground-header-btn:disabled:hover{background:0 0;transform:none}.playground-header-btn.active{color:var(--mint)}.playground-header-btn.active:hover{background:var(--mint-dim)}.playground-header-separator{background:var(--playground-border);width:1px;height:16px;margin:0 4px}.playground-editor{background:var(--editor-bg);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.editor-container{flex:1;position:relative;overflow:hidden}.editor-switching-overlay{z-index:10;-webkit-backdrop-filter:blur(3px);background:#0a0c10b8;justify-content:center;align-items:center;animation:.15s fade-in;display:flex;position:absolute;inset:0}.editor-switching-card{background:#13151c;border:1px solid #252830;border-radius:12px;flex-direction:column;align-items:center;gap:14px;padding:28px 36px;display:flex;box-shadow:0 8px 32px #00000080}.editor-switching-icon{color:var(--mint);animation:1.5s ease-in-out infinite pulse-dot;display:flex}.editor-switching-label{color:var(--playground-text-muted);letter-spacing:.02em;font-family:Outfit,sans-serif;font-size:13px;font-weight:500}.editor-switching-dots{gap:5px;display:flex}.editor-switching-dots span{background:var(--mint);opacity:.3;border-radius:50%;width:5px;height:5px;animation:1.2s ease-in-out infinite dot-bounce;display:block}.editor-switching-dots span:nth-child(2){animation-delay:.2s}.editor-switching-dots span:nth-child(3){animation-delay:.4s}@keyframes dot-bounce{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.editor-container .cm-editor{height:100%;background:var(--editor-bg)!important}.editor-container .cm-scroller{font-variant-ligatures:common-ligatures;font-family:Fira Code,JetBrains Mono,Monaco,monospace;font-size:13.5px;line-height:1.7}.editor-container .monaco-editor{--monaco-monospace-font:"JetBrains Mono", "Fira Code", Menlo, Monaco, "Courier New", monospace;--vscode-editor-background:var(--editor-bg);--vscode-editorGutter-background:var(--editor-bg);top:0;left:0;width:100%!important;height:100%!important;position:absolute!important}.editor-container .monaco-editor .overflow-guard{width:100%!important;height:100%!important}.editor-container .monaco-editor .inputarea{width:auto!important;min-width:0!important}.editor-container .monaco-editor .lines-content,.editor-container .monaco-editor .view-lines{min-width:100%!important}.editor-container .monaco-editor .monaco-scrollable-element.editor-scrollable{width:100%!important}.editor-container .monaco-editor a{text-decoration:none}.editor-container .monaco-editor a:hover{text-decoration:underline}.editor-container .monaco-editor .overflowingContentWidgets{z-index:100}.editor-container .cm-focused{outline:none!important}.editor-container .cm-gutters{background:var(--editor-bg)!important;border-right:1px solid var(--playground-border)!important;color:var(--playground-text-dim)!important}.editor-container .cm-activeLineGutter{background:var(--playground-raised)!important;color:var(--playground-text-muted)!important}.editor-container .cm-activeLine{background:#ffffff06!important}.editor-container .cm-selectionBackground{background:#00d68f26!important}.resizable-panel{position:relative}.resizable-panel-resizer{background:var(--playground-border);z-index:10;justify-content:center;align-items:center;transition:background .2s;display:flex;position:relative}.resizable-panel-resizer:after{content:"";opacity:0;pointer-events:none;background:linear-gradient(#0000 0%,#00d68f00 40% 60%,#0000 100%);transition:opacity .2s;position:absolute;inset:0}.resizable-panel-resizer:hover,.resizable-panel[data-dragging=true] .resizable-panel-resizer{background:var(--mint)}.resizable-panel-resizer:hover:after,.resizable-panel[data-dragging=true] .resizable-panel-resizer:after{opacity:1}.resizable-panel-resizer-line{background:0 0;border-radius:2px;transition:background .2s,width .15s,height .15s;position:absolute}.resizable-panel[data-direction=horizontal] .resizable-panel-resizer{width:5px!important}.resizable-panel[data-direction=horizontal] .resizable-panel-resizer-line{background:#ffffff26;width:1px;height:32px}.resizable-panel[data-direction=vertical] .resizable-panel-resizer{height:5px!important}.resizable-panel[data-direction=vertical] .resizable-panel-resizer-line{background:#ffffff26;width:32px;height:1px}.resizable-panel-resizer:hover .resizable-panel-resizer-line,.resizable-panel[data-dragging=true] .resizable-panel-resizer-line{background:#fff9}.resizable-panel[data-dragging=true]{-webkit-user-select:none;user-select:none}.resizable-panel[data-dragging=true] .resizable-panel-first,.resizable-panel[data-dragging=true] .resizable-panel-second{pointer-events:none}.resizable-panel-resizer:focus-visible{background:var(--mint);outline:none}.playground-panel{background:var(--preview-bg);flex-direction:column;flex:1;display:flex;overflow:hidden}.playground-panel-header{border-bottom:1px solid var(--preview-border);background:#f7f8fa;flex-shrink:0;justify-content:space-between;align-items:center;height:40px;padding:0 12px;display:flex}.playground-panel-tabs{flex-shrink:0;gap:0;height:100%;display:flex}.panel-url-form{flex:1;min-width:0;padding:0 6px}.panel-url-bar{border:1px solid var(--preview-border);background:#fff;border-radius:5px;align-items:center;gap:6px;height:24px;padding:0 8px;transition:border-color .15s;display:flex}.panel-url-bar:focus-within{border-color:#00d68f}.panel-url-input{color:var(--preview-text);background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:SFMono-Regular,Menlo,Monaco,monospace;font-size:11px}.panel-url-input:disabled{color:#9098a9;cursor:default}.panel-url-input::placeholder{color:#b0b8c8;font-style:italic}.panel-url-dot{background:#d0d5df;border-radius:50%;flex-shrink:0;width:6px;height:6px;transition:background .25s}.panel-url-dot[data-ready=true]{background:#00d68f}.panel-url-spinner{border:1.5px solid #d0d5df;border-top-color:#00d68f;border-radius:50%;flex-shrink:0;width:9px;height:9px;animation:.7s linear infinite spin}.playground-panel-tab{color:#9098a9;cursor:pointer;letter-spacing:.02em;background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:6px;height:100%;padding:0 14px;font-family:Outfit,sans-serif;font-size:12.5px;font-weight:500;transition:color .15s,border-color .15s;display:flex}.playground-panel-tab:hover{color:var(--preview-text)}.playground-panel-tab.active{color:#1a1f2e;border-bottom-color:#00d68f;font-weight:600}.console-badge{color:#fff;letter-spacing:0;border-radius:8px;justify-content:center;align-items:center;min-width:16px;height:15px;padding:0 4px;font-family:Outfit,sans-serif;font-size:10px;font-weight:700;display:inline-flex}.console-badge.log{background:#3a3d45}.console-badge.error{background:#c62828}.console-badge.warn{background:#e65100}.playground-panel-actions{gap:2px;display:flex}.playground-panel-action-btn{color:#9098a9;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:background .12s,color .12s;display:flex}.playground-panel-action-btn:hover{color:#1a1f2e;background:#edf0f4}.playground-panel-content{flex:1;position:relative;overflow:hidden}.playground-panel-result,.playground-panel-console,.playground-panel-terminal{display:none;position:absolute;inset:0}.playground-panel-result{overflow:auto}.playground-panel-result.active,.playground-panel-terminal.active{display:block}.playground-panel-console.active{display:flex}.playground-panel-loading{background:var(--playground-bg);height:100%;color:var(--playground-text-muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.playground-panel-loading:before{content:"";border:2px solid var(--playground-border-hover);border-top-color:var(--mint);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin;display:block}.playground-panel-loading-text{color:var(--playground-text-muted);letter-spacing:.02em;font-family:Outfit,sans-serif;font-size:13px;font-weight:500;animation:1.5s ease-in-out infinite pulse-dot}.playground-panel-iframe{background:#fff;border:none;width:100%;height:100%;display:block}.playground-panel-console{color:#d4d4d4;background:#1a1b1e;flex-direction:column;font-family:Fira Code,JetBrains Mono,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.5;overflow:hidden}.console-toolbar{background:#1f2023;border-bottom:1px solid #2d2f33;flex-shrink:0;align-items:center;gap:6px;height:32px;padding:0 8px;display:flex}.console-toolbar-clear{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;padding:0;transition:background .1s,color .1s;display:flex}.console-toolbar-clear:hover{color:#e1e4e8;background:#ffffff12}.console-toolbar-divider{background:#2d2f33;flex-shrink:0;width:1px;height:16px}.console-filters{gap:2px;display:flex}.console-filter-btn{color:#6b7280;cursor:pointer;letter-spacing:.02em;background:0 0;border:1px solid #0000;border-radius:3px;align-items:center;gap:4px;height:22px;padding:2px 8px;font-family:Outfit,sans-serif;font-size:11px;font-weight:500;line-height:1;transition:background .1s,color .1s,border-color .1s;display:flex}.console-filter-btn:hover{color:#d4d4d4;background:#ffffff0f}.console-filter-btn.active{color:#e1e4e8;background:#ffffff14;border-color:#3d4148}.console-filter-btn.error{color:#f48771}.console-filter-btn.error.active{background:#f4877114;border-color:#f4877166}.console-filter-btn.warn{color:#cca700}.console-filter-btn.warn.active{background:#cca70014;border-color:#cca70066}.console-filter-btn.info{color:#6796e6}.console-filter-btn.info.active{background:#6796e614;border-color:#6796e666}.filter-count{opacity:.85;font-family:Outfit,sans-serif;font-size:10px;font-weight:700}.console-messages{scrollbar-width:thin;scrollbar-color:#3a3d45 transparent;flex:1;overflow:hidden auto}.console-messages::-webkit-scrollbar{width:6px}.console-messages::-webkit-scrollbar-track{background:0 0}.console-messages::-webkit-scrollbar-thumb{background:#3a3d45;border-radius:3px}.console-row{border-top:1px solid #23252a;align-items:baseline;gap:8px;min-height:22px;padding:3px 12px 3px 8px;transition:background 80ms;animation:.12s fade-in;display:flex}.console-row:first-child{border-top:none}.console-row:hover{background:#ffffff08}.console-row.log{color:#d4d4d4}.console-row.error{color:#f48771;background:#f4433614;border-top-color:#f4433626}.console-row.error:hover{background:#f443361f}.playground-panel-terminal{background:var(--terminal-bg);overflow:hidden}.playground-panel-terminal .playground-terminal-container{width:100%;height:100%}.playground-panel-terminal .xterm{padding:8px}.playground-panel-terminal .xterm-viewport{overflow-y:auto!important}.playground-panel-terminal .xterm-screen{width:100%!important}.console-row.warn{color:#cca700;background:#ffc10712;border-top-color:#ffc10726}.console-row.warn:hover{background:#ffc1071c}.console-row.info{color:#6796e6}.console-row-icon{opacity:.9;flex-shrink:0;align-items:center;width:12px;margin-top:2px;display:flex}.console-row-text{white-space:pre-wrap;word-break:break-all;flex:1;font-size:12px;line-height:1.6}.console-row-time{color:#4a4f5a;font-variant-numeric:tabular-nums;letter-spacing:0;-webkit-user-select:none;user-select:none;flex-shrink:0;align-self:flex-start;margin-top:3px;font-size:10.5px}.playground-console-empty{color:#4a4f5a;justify-content:center;align-items:center;height:100%;font-family:Outfit,sans-serif;font-size:12px;font-style:italic;display:flex}.playground-file-tree{background:var(--playground-surface);flex-direction:column;height:100%;display:flex;overflow:hidden}.file-tree-header{background:var(--playground-surface);border-bottom:1px solid var(--playground-border);text-transform:uppercase;letter-spacing:.1em;height:36px;color:var(--playground-text-muted);align-items:center;padding:0 14px;font-size:10px;font-weight:600;display:flex}.file-tree-content{flex:1;padding:6px 4px;overflow-y:auto}.file-node,.directory-node summary{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--playground-text);border-radius:6px;align-items:center;gap:7px;padding:5px 10px;font-size:13px;font-weight:400;list-style:none;transition:background .1s,color .1s;display:flex}.file-node:hover,.directory-node summary:hover{background:var(--playground-raised)}.file-node:active{background:var(--mint-dim);color:var(--mint)}.directory-node summary{color:var(--playground-text-muted);font-weight:500}.directory-node summary:hover{color:var(--playground-text)}.directory-children{border-left:1px solid var(--playground-border);margin-left:14px;padding-left:14px}.file-icon,.folder-icon{flex-shrink:0;font-size:13px}.directory-node summary::marker{display:none}.directory-node summary::-webkit-details-marker{display:none}.file-tree-header{gap:8px}.file-tree-spinner{border:1.5px solid var(--playground-border-hover);border-top-color:var(--mint);border-radius:50%;flex-shrink:0;width:10px;height:10px;animation:.7s linear infinite spin}.file-tree-skeleton{flex-direction:column;gap:2px;padding:6px 4px;display:flex}.file-tree-skeleton-row{border-radius:6px;align-items:center;gap:7px;height:29px;display:flex}.file-tree-skeleton-icon{background:var(--playground-raised);border-radius:3px;flex-shrink:0;width:14px;height:14px;animation:1.4s ease-in-out infinite skeleton-pulse}.file-tree-skeleton-label{background:var(--playground-raised);border-radius:4px;height:10px;animation:1.4s ease-in-out infinite skeleton-pulse}.file-tree-skeleton-row:nth-child(2) .file-tree-skeleton-icon,.file-tree-skeleton-row:nth-child(2) .file-tree-skeleton-label{animation-delay:.1s}.file-tree-skeleton-row:nth-child(3) .file-tree-skeleton-icon,.file-tree-skeleton-row:nth-child(3) .file-tree-skeleton-label{animation-delay:.2s}.file-tree-skeleton-row:nth-child(4) .file-tree-skeleton-icon,.file-tree-skeleton-row:nth-child(4) .file-tree-skeleton-label{animation-delay:.3s}.file-tree-skeleton-row:nth-child(5) .file-tree-skeleton-icon,.file-tree-skeleton-row:nth-child(5) .file-tree-skeleton-label{animation-delay:.4s}.file-tree-skeleton-row:nth-child(6) .file-tree-skeleton-icon,.file-tree-skeleton-row:nth-child(6) .file-tree-skeleton-label{animation-delay:.5s}.file-tree-skeleton-row:nth-child(7) .file-tree-skeleton-icon,.file-tree-skeleton-row:nth-child(7) .file-tree-skeleton-label{animation-delay:.6s}@keyframes skeleton-pulse{0%,to{opacity:.4}50%{opacity:.9}}.playground-terminal{background:var(--terminal-bg);color:var(--terminal-text);border:1px solid var(--playground-border);flex-direction:column;height:100%;font-family:Fira Code,JetBrains Mono,Monaco,monospace;font-size:12.5px;display:flex;overflow:hidden}.terminal-header{text-transform:uppercase;letter-spacing:.1em;height:36px;color:var(--playground-text-muted);background:#ffffff08;border-bottom:1px solid #ffffff0f;flex-shrink:0;align-items:center;gap:8px;padding:0 14px;font-family:Outfit,sans-serif;font-size:10px;font-weight:600;display:flex}.terminal-header:before{content:"";background:var(--mint);opacity:.6;border-radius:50%;width:6px;height:6px;display:inline-block}.terminal-content{white-space:pre-wrap;word-wrap:break-word;flex:1;padding:12px 14px;line-height:1.7;overflow-y:auto}.terminal-content>div{margin-bottom:2px;animation:.15s slide-in-left}.terminal-output{color:var(--terminal-text)}.terminal-error{color:#ff8f8f}.terminal-warn{color:#ffd99a}.terminal-info{color:#a0c4ff}.terminal-log{color:var(--terminal-text)}.playground-toolbar{background:var(--playground-surface);border-bottom:1px solid var(--playground-border);justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.playground-toolbar button{background:var(--mint);color:#0a0c10;cursor:pointer;border:none;border-radius:6px;padding:6px 14px;font-family:Outfit,sans-serif;font-size:13px;font-weight:600;transition:opacity .15s,transform .1s}.playground-toolbar button:hover{opacity:.9}.playground-toolbar button:active{transform:scale(.97)}.playground-toolbar button:disabled{background:var(--playground-border);color:var(--playground-text-muted);cursor:not-allowed;opacity:1}.status-indicator{color:var(--playground-text-muted);letter-spacing:.02em;font-family:Outfit,sans-serif;font-size:12px;font-weight:500}.status-indicator[data-status=ready]{color:var(--mint)}.status-indicator[data-status=error]{color:var(--error)}.loading{height:100%;color:var(--playground-text-muted);justify-content:center;align-items:center;font-size:13px;display:flex}@media (width<=768px){.playground-header{height:44px;padding:0 10px}.playground-header-btn{width:30px;height:30px}.playground-header-btn[title=Toggle\ Sidebar]{display:none}.playground-panel-tab{padding:0 10px;font-size:12px}.playground-panel-console{padding:8px;font-size:12px}.editor-container .cm-scroller{font-size:12.5px}.resizable-panel[data-direction=vertical] .resizable-panel-resizer{cursor:row-resize;height:10px!important}.playground-file-tree{font-size:12px}.file-node,.directory-node summary{padding:6px 8px}.playground-terminal{font-size:12px}}@media (width<=480px){.playground-header-btn[title="Toggle Line Numbers"],.playground-header-btn[title="Open in StackBlitz"]{display:none}.playground-panel-tab{padding:0 8px;font-size:11.5px}.console-badge{min-width:14px;height:14px;font-size:9px}}.app{background:#0a0c10;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.template-bar{background:#0a0c10;border-bottom:1px solid #171a21;flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 20px;display:flex}.app-brand{-webkit-user-select:none;user-select:none;align-items:center;gap:10px;text-decoration:none;display:flex}.app-brand-mark{background:#00d68f;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;display:flex}.app-brand-mark svg{color:#0a0c10;width:14px;height:14px}.app-brand-name{letter-spacing:.12em;text-transform:uppercase;color:#8892a4;font-family:Outfit,sans-serif;font-size:13px;font-weight:700}.template-picker{background:#111318;border:1px solid #252830;border-radius:8px;align-items:center;gap:0;padding:3px;display:flex}.template-option{position:relative}.template-option input[type=radio]{opacity:0;width:0;height:0;position:absolute}.template-option label{color:#8892a4;cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:.02em;border-radius:6px;padding:5px 12px;font-family:Outfit,sans-serif;font-size:12px;font-weight:500;transition:color .15s,background .15s;display:block}.template-option label:hover{color:#e2e8f0}.template-option input[type=radio]:checked+label{color:#00d68f;background:#1d2129;font-weight:600}.template-bar select{color:#e2e8f0;cursor:pointer;appearance:none;letter-spacing:.02em;background:#111318 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892a4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 10px center no-repeat;border:1px solid #252830;border-radius:8px;padding:6px 28px 6px 12px;font-family:Outfit,sans-serif;font-size:12px;font-weight:500;transition:border-color .15s,box-shadow .15s}.template-bar select:hover{border-color:#313540}.template-bar select:focus{border-color:#00d68f;outline:none;box-shadow:0 0 0 3px #00d68f1f}.toolbar-actions{align-items:center;gap:6px;display:flex}.layout-toggle-btn{color:#8892a4;cursor:pointer;background:#111318;border:1px solid #252830;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;padding:0;transition:color .15s,border-color .15s,background .15s;display:flex}.layout-toggle-btn:hover{color:#e2e8f0;background:#1d2129;border-color:#313540}.layout-toggle-btn.active{color:#00d68f;background:#00d68f14;border-color:#00d68f59}.app-main{flex:1;padding:12px 16px 16px;overflow:hidden}.app-main .playground{height:100%}.playground-content{flex:1;height:calc(100% - 48px);display:flex;overflow:hidden}.playground-sidebar{border-right:1px solid var(--playground-border);flex-shrink:0;width:220px;overflow:hidden}.playground-main{flex:1;min-width:0;overflow:hidden}.playground-editor-section,.playground-preview-section{flex-direction:column;height:100%;display:flex;overflow:hidden}@media (width<=768px){.template-bar{height:44px;padding:0 12px}.app-brand-name{display:none}.app-main{padding:8px 8px 10px}.playground-content{flex-direction:column}.playground-sidebar{border-right:none;border-bottom:1px solid var(--playground-border);width:100%;max-height:160px}}@media (width<=480px){.template-bar{padding:0 10px}.app-main{padding:6px 6px 8px}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#e2e8f0;background:#0a0c10;font-family:Outfit,system-ui,sans-serif}#root{width:100%;height:100dvh}::selection{color:#e2e8f0;background:#00d68f40}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#252830;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#313540}