:root{--lab-bg:#f4f5f7;--lab-panel:#fff;--lab-border:#e2e5ea;--lab-muted:#6b7280;--lab-text:#111827;--lab-accent:#16a34a;--lab-accent-ink:#fff;--lab-topbar-h:40px;--lab-mobile-tabs-h:0px;--lab-danger:#dc2626;--lab-warn:#d97706}.dark{--lab-bg:#0b0f14;--lab-panel:#12171e;--lab-border:#243041;--lab-muted:#9ca3af;--lab-text:#e5e7eb;--lab-accent:#22c55e}*,:before,:after{box-sizing:border-box}html,body.lab-body{background:var(--lab-bg);height:100%;color:var(--lab-text);margin:0;font-family:DM Sans,ui-sans-serif,system-ui,sans-serif}.lab-root{height:100dvh;min-height:100dvh}.lab-toast{z-index:50;background:var(--lab-accent);color:#fff;border-radius:.5rem;padding:.4rem .85rem;font-size:.8rem;font-weight:600;position:fixed;top:.5rem;left:50%;transform:translate(-50%)}.lab-topbar{height:var(--lab-topbar-h);border-bottom:1px solid var(--lab-border);background:var(--lab-panel);flex-shrink:0;justify-content:space-between;align-items:center;gap:.75rem;padding:0 .6rem;display:flex}.lab-topbar__left,.lab-topbar__right{align-items:center;gap:.45rem;min-width:0;display:flex}.lab-brand{color:inherit;flex-shrink:0;align-items:center;gap:.35rem;font-size:.85rem;font-weight:700;text-decoration:none;display:inline-flex}.lab-brand__mark{background:var(--lab-accent);color:#fff;border-radius:.35rem;place-items:center;width:1.35rem;height:1.35rem;font-size:.7rem;display:grid}.lab-topbar__tagline{color:var(--lab-muted);font-size:.7rem}.lab-project-name{color:inherit;font:inherit;background:0 0;border:0;border-radius:.35rem;min-width:0;max-width:14rem;padding:.15rem .35rem;font-size:.85rem;font-weight:600}.lab-project-name:focus{outline:2px solid color-mix(in srgb, var(--lab-accent) 55%, transparent)}.lab-save-status{color:var(--lab-muted);white-space:nowrap;font-size:.7rem}.lab-save-status[data-state=dirty]{color:var(--lab-warn)}.lab-save-status[data-state=error]{color:var(--lab-danger)}.lab-save-status[data-state=saving]{color:var(--lab-accent)}.lab-btn{font:inherit;cursor:pointer;min-height:2rem;color:inherit;background:0 0;border:1px solid #0000;border-radius:.4rem;justify-content:center;align-items:center;gap:.25rem;padding:.35rem .7rem;font-size:.8rem;font-weight:600;text-decoration:none;display:inline-flex}.lab-btn--sm{min-height:1.75rem;padding:.2rem .55rem;font-size:.75rem}.lab-btn--primary{background:var(--lab-accent);color:var(--lab-accent-ink)}.lab-btn--primary:hover{filter:brightness(1.05)}.lab-btn--ghost{border-color:var(--lab-border);background:var(--lab-panel)}.lab-btn--ghost:hover{border-color:var(--lab-accent)}.lab-btn:disabled{opacity:.55;cursor:not-allowed}.lab-icon-btn{color:var(--lab-muted);cursor:pointer;background:0 0;border:0;border-radius:.3rem;width:1.6rem;height:1.6rem;font-size:.85rem}.lab-icon-btn:hover{background:color-mix(in srgb, var(--lab-border) 60%, transparent);color:var(--lab-text)}.lab-menu{position:relative}.lab-menu>summary{list-style:none}.lab-menu>summary::-webkit-details-marker{display:none}.lab-menu__panel{z-index:40;background:var(--lab-panel);border:1px solid var(--lab-border);border-radius:.5rem;min-width:11rem;padding:.25rem;position:absolute;top:calc(100% + .25rem);right:0;box-shadow:0 8px 24px #0000002e}.lab-menu__panel button,.lab-menu__panel a,.lab-menu__check{text-align:left;width:100%;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:.35rem;padding:.45rem .55rem;font-size:.8rem;text-decoration:none;display:block}.lab-menu__panel button:hover,.lab-menu__panel a:hover{background:color-mix(in srgb, var(--lab-border) 55%, transparent)}.lab-mobile-tabs{border-bottom:1px solid var(--lab-border);background:var(--lab-panel);display:none}.lab-mobile-tabs button{color:var(--lab-muted);font:inherit;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;background:0 0;border:0;flex:1;padding:.45rem .25rem;font-size:.72rem;font-weight:700}.lab-mobile-tabs button.is-active{color:var(--lab-accent);box-shadow:inset 0 -2px 0 var(--lab-accent)}.lab-ide{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.lab-workspace{flex:1;min-width:0;min-height:0;display:flex}.lab-files,.lab-preview-pane,.lab-editor-pane,.lab-console{background:var(--lab-panel);min-width:0}.lab-files{border-right:1px solid var(--lab-border);flex-direction:column;flex:none;display:flex}.lab-files.is-collapsed{display:none}.lab-panel-head{border-bottom:1px solid var(--lab-border);text-transform:uppercase;letter-spacing:.05em;height:1.85rem;color:var(--lab-muted);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 .45rem;font-size:.68rem;font-weight:700;display:flex}.lab-file-list{margin:0;padding:.25rem;list-style:none;overflow:auto}.lab-file{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:.35rem;justify-content:space-between;align-items:center;gap:.35rem;padding:.35rem .45rem;font-size:.8rem;display:flex}.lab-file.is-active{background:color-mix(in srgb, var(--lab-accent) 14%, transparent);color:var(--lab-accent);font-weight:600}.lab-file__dot{color:var(--lab-warn);font-size:.55rem}.lab-editor-pane{flex-direction:column;flex:auto;min-width:12rem;display:flex}.lab-tabs{border-bottom:1px solid var(--lab-border);flex-shrink:0;gap:0;height:1.85rem;display:flex;overflow-x:auto}.lab-tab{color:var(--lab-muted);font:inherit;cursor:pointer;border:0;border-right:1px solid var(--lab-border);white-space:nowrap;background:0 0;align-items:center;gap:.3rem;padding:0 .7rem;font-size:.75rem;display:inline-flex}.lab-tab.is-active{color:var(--lab-text);background:color-mix(in srgb, var(--lab-bg) 70%, var(--lab-panel));box-shadow:inset 0 -2px 0 var(--lab-accent)}.lab-tab__dirty{color:var(--lab-warn);font-size:.55rem}.lab-monaco{flex:1;min-height:0}.lab-preview-pane{border-left:1px solid var(--lab-border);flex-direction:column;flex:none;display:flex}.lab-preview-pane.is-collapsed{display:none}.lab-preview-toolbar__left{align-items:center;gap:.35rem;display:flex}.lab-viewport-toggle{border:1px solid var(--lab-border);border-radius:.35rem;display:inline-flex;overflow:hidden}.lab-viewport-toggle button{color:var(--lab-muted);font:inherit;cursor:pointer;background:0 0;border:0;padding:.15rem .4rem;font-size:.65rem;font-weight:600}.lab-viewport-toggle button.is-active{background:var(--lab-accent);color:#fff}.lab-preview-frame-wrap{background:#fff;flex:1;justify-content:center;min-height:0;padding:0;display:flex}.lab-preview-frame-wrap[data-viewport=mobile]{background:var(--lab-bg);padding:.5rem}.lab-preview-frame{background:#fff;border:0;width:100%;height:100%}.lab-preview-frame-wrap[data-viewport=mobile] .lab-preview-frame{border:1px solid var(--lab-border);border-radius:.5rem;width:min(375px,100%)}.lab-console{border-top:1px solid var(--lab-border);flex-direction:column;flex:none;display:flex}.lab-console.is-collapsed{display:none}.lab-console__actions{align-items:center;gap:.25rem;display:flex}.lab-console__body{background:color-mix(in srgb, var(--lab-bg) 55%, var(--lab-panel));flex:1;padding:.35rem .55rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;line-height:1.45;overflow:auto}.lab-console__line{gap:.4rem;display:flex}.lab-console__line[data-level=warn]{color:var(--lab-warn)}.lab-console__line[data-level=error]{color:var(--lab-danger)}.lab-console__tag{opacity:.7;flex-shrink:0}.lab-splitter--v{cursor:col-resize;background:0 0;flex:0 0 4px;width:4px}.lab-splitter--v:hover{background:color-mix(in srgb, var(--lab-accent) 35%, transparent)}.lab-splitter--h{cursor:row-resize;background:0 0;flex:0 0 4px;height:4px}.lab-splitter--h:hover{background:color-mix(in srgb, var(--lab-accent) 35%, transparent)}.lab-hub{flex-direction:column;min-height:100dvh;display:flex}.lab-hub__main{width:min(56rem,100%);margin:0 auto;padding:1.25rem 1rem 2rem}.lab-hub--narrow .lab-hub__main{width:min(28rem,100%)}.lab-hub__intro{margin-bottom:1.5rem}.lab-hub__intro h1{margin:0 0 .35rem;font-size:1.5rem}.lab-hub__intro p{color:var(--lab-muted);margin:0 0 .85rem;font-size:.9rem}.lab-hub__form-title{margin:0 0 1rem;font-size:1.25rem}.lab-hub__section{margin-top:1.5rem}.lab-hub__section h2{text-transform:uppercase;letter-spacing:.06em;color:var(--lab-muted);margin:0 0 .6rem;font-size:.75rem}.lab-muted{color:var(--lab-muted);font-size:.875rem}.lab-project-row{border:1px solid var(--lab-border);color:inherit;background:var(--lab-panel);border-radius:.55rem;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.4rem;padding:.7rem .75rem;text-decoration:none;display:flex}.lab-project-row:hover{border-color:var(--lab-accent)}.lab-project-row__title{margin:0;font-size:.9rem;font-weight:600}.lab-project-row__meta{color:var(--lab-muted);margin:.15rem 0 0;font-size:.72rem}.lab-project-row__chevron{color:var(--lab-muted)}.lab-template-grid{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.5rem;display:grid}.lab-template-card{border:1px solid var(--lab-border);background:var(--lab-panel);border-radius:.55rem;padding:.75rem}.lab-template-card h3{margin:0 0 .25rem;font-size:.9rem}.lab-template-card p{color:var(--lab-muted);margin:0 0 .65rem;font-size:.75rem}.lab-form{gap:.85rem;display:grid}.lab-field{gap:.3rem;font-size:.8rem;font-weight:600;display:grid}.lab-field em{color:var(--lab-muted);font-weight:400}.lab-field input,.lab-field textarea,.lab-field select{font:inherit;border:1px solid var(--lab-border);background:var(--lab-panel);color:inherit;border-radius:.45rem;padding:.55rem .65rem;font-weight:400}.lab-error{color:var(--lab-danger);font-size:.75rem;font-weight:500}.lab-template-pick{gap:.4rem;display:grid}.lab-template-option{border:1px solid var(--lab-border);cursor:pointer;border-radius:.5rem;align-items:flex-start;gap:.55rem;padding:.55rem;font-weight:400;display:flex}.lab-template-option:has(input:checked){border-color:var(--lab-accent);background:color-mix(in srgb, var(--lab-accent) 10%, transparent)}.lab-template-option strong{font-size:.85rem;display:block}.lab-template-option small{color:var(--lab-muted);font-size:.72rem}@media (width<=900px){.lab-preview-pane{width:min(42vw,360px)!important}}@media (width<=768px){.lab-mobile-tabs{height:2.1rem;display:flex}.lab-workspace{display:block;position:relative}.lab-files,.lab-editor-pane,.lab-preview-pane,.lab-console,.lab-splitter{border:0!important;width:100%!important;height:auto!important;display:none!important}.lab-workspace[data-mobile-tab=files] .lab-files,.lab-workspace[data-mobile-tab=code] .lab-editor-pane,.lab-workspace[data-mobile-tab=preview] .lab-preview-pane{position:absolute;inset:0;display:flex!important}.lab-ide:has(.lab-workspace[data-mobile-tab=console]) .lab-console{flex:1;min-height:0;display:flex!important}.lab-ide:has(.lab-workspace[data-mobile-tab=console]) .lab-workspace{display:none}.lab-monaco,.lab-preview-frame-wrap{min-height:calc(100dvh - var(--lab-topbar-h) - 2.1rem - 1.85rem)}}