:root{--text:#a8abb3;--text-h:#eceef4;--bg:#1b1d24;--border:#343742;--code-bg:#23252e;--accent:#f70;--accent-bg:#ff770024;--accent-border:#ff77008c;--social-bg:#23252ea6;--shadow:#00000073 0 10px 15px -3px, #00000047 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#131418}@media (width<=1024px){:root{font-size:16px}}#root{box-sizing:border-box;max-width:100%;min-height:100svh;margin:0 auto}#root:has(.app--sandbox){height:100svh;min-height:100svh;max-height:100svh;overflow:hidden}html{height:100%}body{min-height:100%;margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.playground--fill .sp-layout>.sp-file-explorer{flex:0 0 220px!important;min-width:160px!important;max-width:min(280px,30vw)!important;height:100%!important;max-height:none!important;overflow:hidden!important}.playground__fileExplorer{background:color-mix(in srgb, var(--code-bg) 88%, var(--bg));flex-direction:column;min-height:0;display:flex}.playground__fileExplorerHeader{border-bottom:1px solid var(--border);flex-direction:column;gap:6px;padding:10px;display:flex}.playground__fileExplorerHint{opacity:.8;font-size:12px;line-height:1.35}.playground__fileTree{flex:1;min-height:0;padding:8px 0 10px;overflow:auto}.playground__rootDropZone{border-radius:999px;height:6px;margin:0 8px 4px}.playground__rootDropZone--bottom{border-radius:12px;height:200px;margin:4px 8px 0;position:relative}.playground__rootDropZone.is-drop-target{background:color-mix(in srgb, var(--accent) 28%, transparent)}.playground__rootDropZone--bottom.is-drop-target{background:color-mix(in srgb, var(--accent) 20%, transparent)}.playground__treeGroup{display:block}.playground__treeRow{align-items:center;gap:6px;min-width:0;padding-right:8px;display:flex}.playground__treeRow--folder{margin-top:2px}.playground__treeItem{width:100%;min-width:0;color:var(--text-h);cursor:pointer;text-align:left;font:inherit;background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;padding:6px 8px;display:inline-flex}.playground__treeItem:hover{background:color-mix(in srgb, var(--accent-bg) 40%, transparent)}.playground__treeItem.is-active{background:var(--accent-bg);color:var(--accent)}.playground__treeItem.is-focused{background:color-mix(in srgb, var(--accent-bg) 55%, transparent)}.playground__treeItem.is-drop-target{background:color-mix(in srgb, var(--accent-bg) 85%, transparent);outline:1px solid color-mix(in srgb, var(--accent) 45%, transparent)}.playground__treeItem--folder{font-weight:600}.playground__treeItem--file{font-size:13px}.playground__treeIcon{text-align:center;opacity:.8;flex:0 0 12px;align-self:center;width:12px}.playground__fileTypeIcon{--file-icon-color:#94a3b8;border:1px solid color-mix(in srgb, var(--file-icon-color) 36%, transparent);background:color-mix(in srgb, var(--file-icon-color) 14%, transparent);width:16px;height:16px;color:var(--file-icon-color);letter-spacing:.02em;text-transform:uppercase;border-radius:4px;flex:0 0 16px;justify-content:center;align-self:center;align-items:center;font-size:6.5px;font-weight:800;line-height:1;display:inline-flex;position:relative}.playground__fileTypeIcon:after{content:"";background:color-mix(in srgb, var(--file-icon-color) 28%, white);clip-path:polygon(0 0,100% 0,100% 100%);opacity:.95;border-top-right-radius:3px;width:4px;height:4px;position:absolute;top:1px;right:1px}.playground__fileTypeIcon--react{--file-icon-color:#61dafb}.playground__fileTypeIcon--ts{--file-icon-color:#3178c6}.playground__fileTypeIcon--js{--file-icon-color:#d4aa00}.playground__fileTypeIcon--css{--file-icon-color:#264de4}.playground__fileTypeIcon--html{--file-icon-color:#e34f26}.playground__fileTypeIcon--json{--file-icon-color:#f59e0b}.playground__fileTypeIcon--md{--file-icon-color:#a855f7}.playground__fileTypeIcon--vite{--file-icon-color:#8b5cf6}.playground__fileTypeIcon--npm{--file-icon-color:#cb3837}.playground__treeName{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.playground__filePeerDots{flex-shrink:0;align-items:center;gap:3px;margin-left:auto;padding-left:4px;display:inline-flex}.playground__filePeerDot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.playground__treeRow--draft{padding-right:12px}.playground__input--tree{flex:auto;width:100%;min-width:0;padding-block:6px;font-size:13px}.playground__contextMenu{z-index:30;border:1px solid var(--border);background:color-mix(in srgb, var(--code-bg) 92%, var(--bg));border-radius:8px;min-width:160px;padding:6px;position:fixed;box-shadow:0 10px 30px #00000038,0 2px 8px #0000001f}.playground__contextMenuItem{width:100%;color:var(--text-h);text-align:left;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:8px 10px;font-size:13px;display:block}.playground__contextMenuItem:hover:not(:disabled){background:color-mix(in srgb, var(--accent-bg) 55%, transparent)}.playground__contextMenuItem:disabled{opacity:.45;cursor:not-allowed}.playground__contextMenuItem.is-danger{color:#dc2626}.playground{margin:0}.playground--fill{flex-direction:column;flex:1;gap:6px;min-height:0;display:flex}.playground--fill .playground__toolbar{flex-shrink:0;margin-bottom:0;padding:8px 10px}.playground__spWrap,.playground__spWrap>div{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.playground__providerInner{flex-direction:column;flex:1;gap:8px;min-width:0;min-height:0;display:flex}.playground__toolbar{border:1px solid var(--border);background:color-mix(in srgb, var(--code-bg) 75%, var(--bg));border-radius:8px;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:12px;padding:12px 14px;display:flex}.playground__toolbarGroup{flex-direction:column;flex:220px;gap:6px;min-width:0;display:flex}.playground__toolbarGroup--end{flex:none;align-self:center}.playground__label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-h);font-size:12px;font-weight:600}.playground__toolbarRow{flex-wrap:wrap;gap:8px;display:flex}.playground__input{min-width:0;font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text-h);border-radius:6px;flex:160px;padding:8px 10px;font-size:14px}.playground__btn{font:inherit;border:2px solid var(--accent-border);background:var(--accent-bg);color:var(--accent);cursor:pointer;white-space:nowrap;border-radius:6px;padding:8px 14px;font-size:14px}.playground__btn:hover:not(:disabled){border-color:var(--accent)}.playground__btn:disabled{opacity:.45;cursor:not-allowed}.playground__btn--compact{padding-inline:10px}.playground__btn--ghost{border-color:var(--border);color:var(--text-h);background:0 0}.playground__btn--icon{padding:6px 10px;font-size:12px}.playground__btn--danger{border-color:color-mix(in srgb, #dc2626 45%, var(--border));color:#dc2626;background:#dc26261f}@media (prefers-color-scheme:dark){.playground__btn--danger{border-color:color-mix(in srgb, #f87171 45%, var(--border));color:#f87171;background:#f8717126}}.playground__sandpack{--sp-border-radius:8px;min-height:min(62vh,640px)}.playground--fill .playground__sandpack{flex:1 1 0!important;height:100%!important;min-height:0!important;max-height:100%!important}.playground--fill .playground__sandpack.sp-layout{flex-wrap:nowrap!important;flex:1 1 0!important;align-items:stretch!important;min-width:0!important;height:100%!important;min-height:0!important;max-height:100%!important;display:flex!important}.playground--fill .sp-layout>.sp-editor,.playground--fill .sp-layout>.sp-preview{flex-direction:column!important;flex:1!important;min-width:0!important;height:100%!important;min-height:0!important;max-height:none!important;display:flex!important;overflow:hidden!important}.playground--fill .sp-editor .sp-code-editor{flex-direction:column!important;flex:1!important;min-height:0!important;display:flex!important;overflow:hidden!important}.playground--fill .sp-editor .cm-editor{flex:1!important;height:100%!important;min-height:0!important}.playground--fill .sp-editor .cm-scroller{flex:1!important;min-height:0!important;max-height:none!important}.playground--fill .sp-preview .sp-preview-container{flex-direction:column!important;flex:1!important;min-height:0!important;display:flex!important}.playground--fill .sp-preview .sp-preview-iframe{border:none;flex:1!important;width:100%!important;height:100%!important;min-height:0!important}.playground__sandpack.sp-layout{border:1px solid var(--border)}