:root{color-scheme:dark;--bg: #09111c;--bg-2: #0f1a28;--bg-3: #132235;--panel: rgba(9, 16, 27, .82);--panel-soft: rgba(16, 27, 42, .78);--border: rgba(151, 181, 221, .15);--border-strong: rgba(151, 181, 221, .28);--text: #ecf4ff;--muted: #8fa4bf;--accent: #88d8c0;--accent-2: #7ba6ff;--warn: #ffc97c;--shadow: 0 24px 60px rgba(0, 0, 0, .36);--radius: 18px;--terminal-bg: #091018;--editor-bg: #0d1522;--preview-bg: #f2f5fb;--preview-text: #132033}*{box-sizing:border-box}html,body{width:100%;height:100%}body{margin:0;min-height:100dvh;font-family:Avenir Next,Segoe UI Variable Display,IBM Plex Sans,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(900px 500px at 0% 0%,rgba(91,127,176,.28),transparent 60%),radial-gradient(700px 520px at 100% 0%,rgba(74,145,127,.22),transparent 62%),linear-gradient(160deg,var(--bg),var(--bg-2) 55%,#0a1420)}button,input,textarea{font:inherit}button{color:inherit}#app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) clamp(190px,28dvh,240px);gap:16px;padding:18px}.shellbar,.pane{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.shellbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;border-radius:22px}.brandlockup h1,.pane-header h2{margin:0}.eyebrow,.pane-eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.shellbar-meta{display:flex;align-items:center;gap:12px}.status-pill{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--border-strong);background:#0e1826bd;color:var(--muted);font-size:13px}.status-dot{width:9px;height:9px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 0 6px #88d8c024}.toolbar-button{border:1px solid var(--border-strong);background:#131f30d6;border-radius:12px;padding:10px 14px;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease}.toolbar-button:hover{transform:translateY(-1px);border-color:#88d8c06b}.toolbar-button.accent{background:linear-gradient(135deg,#509584eb,#3d69adf2);border-color:transparent}.workspace{min-height:0;display:grid;grid-template-columns:minmax(280px,.95fr) minmax(420px,1.2fr) minmax(240px,.72fr);gap:16px}.pane{min-height:0;border-radius:var(--radius);overflow:hidden}.pane.preview-pane,.pane.editor-pane,.pane.explorer-pane,.pane.terminal-pane{display:flex;flex-direction:column}.pane-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 14px;border-bottom:1px solid rgba(151,181,221,.08);background:linear-gradient(180deg,#162336c7,#09101b33)}.pane-header h2{font-size:18px}.pane-meta{margin:6px 0 0;color:var(--muted);font-size:12px;font-family:IBM Plex Mono,JetBrains Mono,monospace}.preview-controls{display:flex;align-items:end;gap:10px}.preview-port-input{display:grid;gap:6px;font-size:12px;color:var(--muted)}.preview-port-input input{width:92px;border:1px solid var(--border);border-radius:10px;background:#09101b8c;color:var(--text);padding:9px 10px}.preview-frame-shell{flex:1;min-height:0;margin:18px;border-radius:18px;background:#dfe7f5;overflow:hidden;box-shadow:inset 0 1px #ffffffb3}.browser-chrome{display:flex;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(180deg,#dde5f2,#ced8ea);border-bottom:1px solid rgba(19,32,51,.1)}.browser-chrome>span{width:10px;height:10px;border-radius:999px;background:#ff9472}.browser-chrome>span:nth-child(2){background:#ffd36c}.browser-chrome>span:nth-child(3){background:#79d79f}.preview-location{margin-left:8px;min-width:0;flex:1;border-radius:999px;padding:8px 12px;background:#ffffffbd;color:#40526d;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#preview-frame{width:100%;height:calc(100% - 55px);border:0;background:var(--preview-bg)}.pane-note,.terminal-hint,.explorer-notes{color:var(--muted);font-size:13px}.pane-note{margin:0 18px 18px}.editor-tabs{display:flex;gap:10px;padding:12px 18px 0;flex-wrap:wrap}.editor-tab{border:1px solid rgba(151,181,221,.08);border-radius:12px 12px 0 0;padding:10px 14px;background:#0a101c8c;color:var(--muted);cursor:pointer}.editor-tab.active{background:#111b2aeb;color:var(--text);border-color:#7ba6ff38}.editor-tab.dirty:after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px #88d8c01f}.editor-actions{display:flex;align-items:center;gap:10px}.sync-indicator{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid rgba(151,181,221,.16);border-radius:999px;color:var(--muted);background:#09101b70;font-size:12px}.sync-indicator[data-tone=saved]{color:var(--accent)}.sync-indicator[data-tone=pending]{color:var(--warn)}.sync-indicator[data-tone=error]{color:#ff9b9b}.editor-surface{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);background:var(--editor-bg);border-top:1px solid rgba(151,181,221,.08)}.editor-gutter{padding:18px 12px 18px 16px;background:#060b126b;color:#8fa4bfad;text-align:right;font-family:IBM Plex Mono,JetBrains Mono,monospace;font-size:13px;line-height:1.55;user-select:none;white-space:pre;overflow:hidden}#editor-input{width:100%;height:100%;border:0;resize:none;padding:18px 18px 18px 0;background:transparent;color:#dbe7fb;font-family:IBM Plex Mono,JetBrains Mono,monospace;font-size:13px;line-height:1.55;tab-size:2;white-space:pre;overflow-wrap:normal;overflow:auto;caret-color:var(--accent);outline:none}.explorer-group{padding:18px;border-top:1px solid rgba(151,181,221,.08)}.explorer-group:first-of-type{border-top:0}.explorer-group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.explorer-count{color:var(--accent)}.file-list,.tree-list,.explorer-notes{margin:0;padding:0;list-style:none}.tree-list{display:grid;gap:4px}.tree-children{padding-left:0}.tree-node{display:grid;gap:4px}.tree-row{--indent: calc(var(--depth, 0) * 16px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;padding:10px 12px 10px calc(12px + var(--indent));border-radius:12px;border:1px solid transparent;background:#0f18259e;color:inherit;text-align:left;cursor:pointer}.tree-row:hover{border-color:#7ba6ff29;background:#142031c2}.tree-row.active{border-color:#7ba6ff4d;background:#17263ae0}.tree-caret{width:16px;color:#8fa4bfe6}.tree-label{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-meta{font-size:12px;color:var(--muted);font-family:IBM Plex Mono,JetBrains Mono,monospace}.tree-badge{min-width:34px;text-align:center;border-radius:999px;padding:5px 8px;font-size:11px;color:var(--warn);background:#ffc97c1f}.explorer-notes li{padding:10px 0;border-top:1px dashed rgba(151,181,221,.08)}.explorer-notes li:first-child{border-top:0;padding-top:0}.terminal-pane{min-height:0}.terminal-frame{flex:1;min-height:0;position:relative;background:var(--terminal-bg)}#terminal{position:absolute;inset:0;min-height:0;overflow:hidden}#terminal .xterm{width:100%;height:100%;background:var(--terminal-bg)}#terminal .xterm .xterm-scrollable-element,#terminal .xterm-viewport{background:var(--terminal-bg)!important}#terminal .xterm-viewport{scrollbar-width:none}#terminal .xterm-viewport::-webkit-scrollbar{width:0;height:0}@media(max-width:1280px){.workspace{grid-template-columns:minmax(250px,.92fr) minmax(340px,1fr);grid-template-areas:"preview editor" "explorer editor"}.preview-pane{grid-area:preview}.editor-pane{grid-area:editor}.explorer-pane{grid-area:explorer}}@media(max-width:980px){#app{grid-template-rows:auto minmax(0,1fr) clamp(190px,34dvh,240px);padding:14px}.workspace{grid-template-columns:1fr;grid-template-areas:"preview" "editor" "explorer"}.shellbar,.pane-header{flex-direction:column;align-items:flex-start}.preview-controls,.shellbar-meta{width:100%}}