:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;--bg:#0b0d10;--panel:#0f1216;--panel-raised:#13171c;--panel-soft:#171b21;--border:#242a32;--border-bright:#303844;--text:#e6eaf0;--muted:#8993a1;--faint:#596371;--blue:#48a9f8;--blue-bright:#70bfff;--blue-soft:#15344d;--green:#55d6a5;--amber:#f6c760;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body.resizing-panels{cursor:col-resize;-webkit-user-select:none;user-select:none}button,input{font:inherit}button{color:inherit}button:disabled{cursor:default;opacity:.48;filter:none}.app-shell{background:var(--bg);width:100%;height:100%;color:var(--text)}.topbar{border-bottom:1px solid var(--border);background:linear-gradient(#11151a 0%,#0d1014 100%);grid-template-columns:1fr auto 1fr;align-items:center;height:50px;padding:0 10px 0 12px;display:grid;box-shadow:inset 0 2px #164b75}.brand,.brand-copy,.project-name,.top-actions,.runtime-pill,.button,.preview-header,.browser-bar,.address,.preview-footer,.response-row{align-items:center;display:flex}.brand{gap:9px;min-width:190px}.brand-mark{color:#fff;background:linear-gradient(145deg,#1b8be0,#115184);border-radius:8px;place-items:center;width:30px;height:30px;display:grid;transform:skew(-5deg);box-shadow:0 0 18px #1d8fe033}.brand-copy{flex-direction:column;align-items:flex-start;line-height:1.05}.brand-copy strong{letter-spacing:.01em;font-size:13px}.brand-copy small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:3px;font-size:10px}.project-name{color:#b6bfcb;border:1px solid var(--border);background:#14181e;border-radius:6px;justify-self:center;gap:7px;height:30px;padding:0 11px;font-size:12px}.top-actions{justify-self:end;gap:7px}.runtime-pill{color:#9da8b7;gap:7px;padding:0 9px;font-size:11px}.runtime-pill i,.live-badge i,.preview-footer i{background:var(--green);border-radius:50%;width:6px;height:6px;box-shadow:0 0 7px #55d6a599}.runtime-pill.booting i,.runtime-pill.resolving i,.runtime-pill.compiling i,.runtime-pill.starting i,.runtime-pill.stopping i{background:var(--amber);box-shadow:0 0 7px #f6c76088}.runtime-pill.error i{background:#ff667d;box-shadow:0 0 7px #ff667d88}.button,.icon-button{cursor:pointer;background:0 0;border:1px solid #0000}.button{border-radius:6px;gap:7px;height:31px;padding:0 11px;font-size:12px;font-weight:600}.button.ghost{color:#a5afbc;border-color:var(--border);background:#12161b}.button.run{color:#fff;background:#1688dc;border-color:#2b9bea;box-shadow:0 5px 16px #0876c033}.button.stop{color:#ff9baa;background:#44212a;border-color:#713341}.button:hover,.icon-button:hover{filter:brightness(1.15)}.icon-button{color:#8f99a7;border-radius:5px;place-items:center;width:30px;height:30px;display:grid}.icon-button.small{width:25px;height:25px}.workspace{grid-template-columns:48px var(--explorer-width,210px) minmax(430px, 1fr) var(--preview-width,42%);min-width:1040px;height:calc(100% - 50px);display:grid}.panel-border{border-left:1px solid var(--border)}.panel-top{border-top:1px solid var(--border)}.activity-rail{background:#0d1014;flex-direction:column;align-items:center;padding:7px 0;display:flex}.rail-button{color:#697482;cursor:pointer;background:0 0;border:0;border-left:2px solid #0000;place-items:center;width:48px;height:45px;display:grid}.rail-button:hover{color:#c1c8d2}.rail-button.active{color:#dbe0e8;border-left-color:var(--blue);background:linear-gradient(90deg,#11314a 0%,#0000 70%)}.rail-spacer{flex:1}.explorer{background:#101318;min-width:0;position:relative}.section-heading{color:#aeb6c2;letter-spacing:.1em;text-transform:uppercase;justify-content:space-between;align-items:center;height:42px;padding:0 10px 0 13px;font-size:10px;font-weight:700;display:flex}.tree-root,.folder-row,.file-row,.outline-heading{color:#abb4c1;align-items:center;gap:6px;height:27px;padding:0 9px;font-size:12px;display:flex}.tree-root strong{letter-spacing:.035em;font-size:11px}.file-tree button{cursor:pointer;text-align:left;border:0;width:100%}.folder-row.muted{color:#6f7885}.file-row{background:0 0}.file-row.nested{padding-left:29px}.file-row:hover{background:#171c22}.file-row.active{color:#eff3f8;box-shadow:inset 2px 0 0 var(--blue);background:#1d242c}.file-row svg{color:#4fa7df}.file-row span{text-overflow:ellipsis;overflow:hidden}.file-row small{color:var(--amber);margin-left:auto}.outline-heading{border-top:1px solid var(--border);color:#808b99;letter-spacing:.1em;text-transform:uppercase;margin-top:9px;font-size:10px;font-weight:700}.code-column{grid-template-rows:36px 26px minmax(220px, 1fr) var(--terminal-height,190px);background:#101317;min-width:0;display:grid}.tabs{border-bottom:1px solid var(--border);background:#0d1014;min-width:0;display:flex;overflow:hidden}.tab{border:0;border-right:1px solid var(--border);color:#798493;cursor:pointer;background:#0d1014;border-top:1px solid #0000;align-items:center;gap:7px;min-width:130px;max-width:180px;height:36px;padding:0 12px;font-size:12px;display:flex}.tab.active{color:#dce2ea;border-top-color:var(--blue);background:#101317}.tab svg{color:#56a9dc}.tab-dot{background:var(--blue);border-radius:50%;width:5px;height:5px;margin-left:auto}.breadcrumbs{color:#6f7986;border-bottom:1px solid #191e24;align-items:center;gap:5px;height:26px;padding:0 12px;font-size:10px;display:flex}.editor-wrap{min-height:0}.editor-loading{height:100%;color:var(--muted);place-items:center;font-size:12px;display:grid}.terminal{background:#0e1115;grid-template-rows:35px 1fr;min-height:0;display:grid;position:relative}.terminal-tabs{border-bottom:1px solid #1b2027;align-items:center;padding:0 9px;display:flex}.terminal-tab{color:#7f8996;letter-spacing:.075em;text-transform:uppercase;background:0 0;border:0;border-bottom:1px solid #0000;height:35px;padding:0 9px;font-size:10px;font-weight:700}.terminal-tab.active{color:#d8dde5;border-bottom-color:var(--blue)}.terminal-tab span{background:#242a32;border-radius:8px;margin-left:4px;padding:1px 5px}.terminal-spacer{flex:1}.terminal-output{color:#b7c0cb;padding:9px 13px;font:11px/1.65 SFMono-Regular,Consolas,Liberation Mono,monospace;overflow:auto}.terminal-output .muted{color:#6e7987}.terminal-output .success{color:var(--green)}.terminal-output .accent{color:var(--blue-bright)}.terminal-output .warning{color:var(--amber)}.terminal-output .error{color:#ff8091}.cursor{background:#9aa4b2;width:6px;height:12px;margin-top:4px;animation:1.1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.preview-column{background:#0c0f13;grid-template-rows:52px 39px 1fr 28px;min-width:0;display:grid;position:relative}.preview-header{border-bottom:1px solid var(--border);background:#11151a;justify-content:space-between;padding:0 13px}.preview-header>div{flex-direction:column;gap:2px;display:flex}.preview-header strong{font-size:13px}.eyebrow{color:#687483;letter-spacing:.1em;text-transform:uppercase;font-size:9px;font-weight:700}.live-badge{color:var(--green);text-transform:uppercase;letter-spacing:.09em;background:#102b22;border:1px solid #1d493b;border-radius:999px;align-items:center;gap:6px;padding:3px 8px;font-size:9px;font-weight:700;display:flex}.live-badge:not(.live){color:var(--amber);background:#2a2415;border-color:#50401d}.live-badge.error{color:#ff8b9b;background:#341a21;border-color:#65303c}.live-badge:not(.live) i{box-shadow:none;background:currentColor}.browser-bar{border-bottom:1px solid var(--border);background:#0e1216;gap:5px;padding:4px 7px}.browser-bar .icon-button{width:27px;height:27px}.address{color:#717c89;background:#090b0e;border:1px solid #252c35;border-radius:5px;flex:1;gap:7px;min-width:0;height:27px;padding:0 9px;font:10px SFMono-Regular,Consolas,Liberation Mono,monospace}.address span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.address svg{color:#4c9cd1;flex:none}.preview-frame{color:#15202d;background-color:#f4f7fa;background-image:radial-gradient(#d8e0e8 .75px,#0000 .75px);background-size:18px 18px;place-items:center;display:grid;overflow:auto}.preview-frame.loaded{background:#fff;display:block;overflow:hidden}.preview-frame iframe{background:#fff;border:0;width:100%;height:100%;display:block}.preview-card{text-align:center;background:#fff;border-radius:14px;width:min(82%,410px);padding:35px;box-shadow:0 20px 55px #1d344833,0 1px 2px #12223522}.preview-icon{color:#0879c8;background:#e7f4fd;border-radius:12px;place-items:center;width:50px;height:50px;margin:0 auto 16px;display:grid}.preview-kicker{color:#15825e;text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;font:600 10px SFMono-Regular,Consolas,Liberation Mono,monospace}.preview-card.error .preview-icon{color:#cc3f54;background:#fdecef}.preview-card.error .preview-kicker,.preview-card.error .response-row b{color:#bd3046}.preview-card h1{letter-spacing:-.04em;margin:0;font-size:24px}.preview-card>p:not(.preview-kicker){color:#697586;font-size:12px;line-height:1.6}.response-row{background:#f3f6f8;border:1px solid #e2e7ec;border-radius:7px;gap:8px;margin-top:20px;padding:9px 10px;font:10px SFMono-Regular,Consolas,Liberation Mono,monospace}.response-row span{color:#fff;background:#168b66;border-radius:4px;padding:3px 5px;font-weight:700}.response-row code{color:#4d5967}.response-row b{color:#168b66;margin-left:auto}.preview-footer{border-top:1px solid var(--border);color:#697482;background:#0d1014;justify-content:space-between;padding:0 10px;font-size:9px}.preview-footer span{align-items:center;gap:6px;display:flex}.preview-footer i{background:var(--amber);box-shadow:0 0 7px #f6c76066}.preview-footer i.ready{background:var(--green);box-shadow:0 0 7px #55d6a599}.spin{animation:.85s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.panel-resizer{z-index:20;touch-action:none;outline:none;position:absolute}.panel-resizer.explorer{cursor:col-resize;width:6px;height:100%;top:0;right:-3px}.panel-resizer.preview{cursor:col-resize;width:6px;height:100%;top:0;left:-3px}.panel-resizer.terminal{cursor:row-resize;width:100%;height:6px;top:-3px;left:0}.panel-resizer:after{content:"";background:var(--blue);opacity:0;transition:opacity .12s;position:absolute}.panel-resizer.explorer:after,.panel-resizer.preview:after{inset:0 2px}.panel-resizer.terminal:after{inset:2px 0}.panel-resizer:hover:after,.panel-resizer:focus-visible:after{opacity:.75}@media (max-width:1180px){.workspace{grid-template-columns:46px var(--explorer-width,180px) minmax(390px, 1fr) var(--preview-width,40%)}.runtime-pill,.button.ghost{display:none}}@media (max-width:900px){.topbar{grid-template-columns:1fr auto}.project-name,.runtime-pill,.button.ghost,.top-actions>.icon-button{display:none}.workspace{grid-template-rows:minmax(340px,58%) minmax(250px,42%);grid-template-columns:42px minmax(0,1fr);min-width:0}.activity-rail{grid-area:1/1/3}.rail-button{width:42px}.explorer{display:none}.code-column{grid-area:1/2;grid-template-rows:36px 24px minmax(180px,1fr) 130px}.preview-column{border-top:1px solid var(--border);border-left:1px solid var(--border);grid-area:2/2}.panel-resizer{display:none}}