:root{color-scheme:dark;font-family:Segoe UI,IBM Plex Sans,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--app-bg: #090f1a;--app-bg-alt: #0f1726;--panel-bg: rgba(17, 24, 39, .92);--panel-elevated: rgba(15, 23, 42, .98);--panel-muted: rgba(30, 41, 59, .72);--surface-soft: rgba(51, 65, 85, .24);--surface-hover: rgba(96, 165, 250, .18);--border: rgba(148, 163, 184, .18);--border-strong: rgba(96, 165, 250, .42);--text: #dbe7ff;--text-muted: #8ca0bf;--text-dim: #68809e;--accent: #4cc9f0;--accent-secondary: #2dd4bf;--danger: #f87171;--warning: #fbbf24;--success: #34d399;--shadow: 0 18px 44px rgba(2, 6, 23, .42)}:root[data-theme=light]{color-scheme:light;--app-bg: #edf2fb;--app-bg-alt: #f8fafc;--panel-bg: rgba(255, 255, 255, .92);--panel-elevated: rgba(255, 255, 255, .98);--panel-muted: rgba(226, 232, 240, .82);--surface-soft: rgba(203, 213, 225, .5);--surface-hover: rgba(59, 130, 246, .12);--border: rgba(148, 163, 184, .24);--border-strong: rgba(59, 130, 246, .4);--text: #172554;--text-muted: #475569;--text-dim: #64748b;--accent: #2563eb;--accent-secondary: #0f766e;--danger: #dc2626;--warning: #d97706;--success: #059669;--shadow: 0 14px 36px rgba(148, 163, 184, .24)}:root[data-theme=vscode]{color-scheme:dark;--app-bg: #1e1e1e;--app-bg-alt: #252526;--panel-bg: #1f1f1f;--panel-elevated: #252526;--panel-muted: #2d2d2d;--surface-soft: rgba(255, 255, 255, .06);--surface-hover: rgba(0, 122, 204, .22);--border: rgba(255, 255, 255, .08);--border-strong: rgba(0, 122, 204, .42);--text: #cccccc;--text-muted: #9da7b3;--text-dim: #6f7681;--accent: #0e639c;--accent-secondary: #4ec9b0;--danger: #f48771;--warning: #d7ba7d;--success: #89d185;--shadow: 0 16px 36px rgba(0, 0, 0, .24)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;overflow:hidden;color:var(--text);background:radial-gradient(circle at top left,rgba(56,189,248,.12),transparent 22rem),radial-gradient(circle at top right,rgba(45,212,191,.12),transparent 24rem),linear-gradient(180deg,var(--app-bg-alt),var(--app-bg))}button,input,select{font:inherit}button{cursor:pointer}.app-shell{height:100vh;display:grid;grid-template-rows:44px auto minmax(0,1fr);gap:10px;padding:10px;overflow:hidden}.app-shell--static{height:auto;min-height:100vh;overflow:visible}.ide-layout,.workspace-grid,.resizable-pane,.editor-pane,.preview-pane,.console-panel,.sidebar,.bottom-panel-slot{min-height:0}.ide-layout{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;overflow:hidden}.bottom-panel-slot{overflow:hidden}.ad-slot{min-height:90px;border:1px dashed var(--border);border-radius:14px;background:#0f172a0a;display:grid;place-items:center;padding:10px}.ad-slot__label{color:var(--text-dim);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.ad-slot--sidebar{min-height:250px;width:100%;max-width:300px;margin-top:auto}#ad-top{width:100%;min-height:90px;max-height:110px}.topbar,.panel,.console-panel,.sidebar{border:1px solid var(--border);background:var(--panel-bg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.topbar{min-height:62px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}.topbar__left,.topbar__nav,.topbar__actions{display:flex;align-items:center;gap:10px}.topbar__nav{flex-wrap:wrap;justify-content:center}.topbar__actions{flex-wrap:wrap;justify-content:flex-end}.brand-lockup{display:flex;flex-direction:column;gap:2px}.brand-lockup--link{color:inherit;text-decoration:none}.brand-lockup__badge{font-size:.95rem;font-weight:700}.brand-lockup__meta{color:var(--text-muted);font-size:.82rem}.topbar__nav-link{min-height:36px;border-radius:999px;border:1px solid transparent;color:var(--text-muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:0 12px}.topbar__nav-link.is-active,.topbar__nav-link:hover{color:var(--text);background:var(--surface-hover);border-color:var(--border-strong)}.primary-button,.ghost-button,.toggle-pill,.theme-select{min-height:36px;border-radius:12px;border:1px solid var(--border);display:inline-flex;align-items:center;gap:8px;padding:0 12px;transition:background .16s ease,border-color .16s ease,transform .16s ease}.primary-button{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-secondary))}.ghost-button,.toggle-pill,.theme-select{color:var(--text);background:var(--surface-soft)}.primary-button:hover,.ghost-button:hover,.toggle-pill:hover,.theme-select:hover,.editor-tab:hover,.file-row__button:hover,.mobile-view-switcher button:hover,.icon-button:hover{transform:translateY(-1px);border-color:var(--border-strong);background:var(--surface-hover)}.theme-select select,.file-rename{width:100%;border:0;outline:none;color:inherit;background:transparent}.toggle-pill input{accent-color:var(--accent)}.workspace-grid{display:flex;gap:10px;overflow:hidden}.workspace-grid>*{min-width:0}.react-resizable{position:relative;flex:0 0 auto;height:100%}.resizable-pane{height:100%;position:relative}.resizable-pane--sidebar,.resizable-pane--preview{flex:0 0 auto}.resizable-pane--console{width:100%}.resizable-pane--preview-collapsed{width:52px}.resize-handle{position:absolute;z-index:5;opacity:0;transition:opacity .16s ease,background .16s ease}.react-resizable:hover .resize-handle,.resize-handle:hover{opacity:1}.resize-handle--e,.resize-handle--w{top:8px;bottom:8px;width:10px;border-radius:999px;background:#60a5fa2e;cursor:col-resize}.resize-handle--e{right:-6px}.resize-handle--w{left:-6px}.resize-handle--n{left:8px;right:8px;top:-6px;height:10px;border-radius:999px;background:#60a5fa2e;cursor:row-resize}.sidebar{height:100%;border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:16px;overflow:hidden}.sidebar__header,.panel__header,.console-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.sidebar__header h2,.panel__header h2{margin:0;font-size:.98rem}.sidebar__section{min-height:0;display:flex;flex-direction:column}.panel-label{margin:0 0 4px;font-size:.72rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.16em}.tree-heading{width:100%;border:0;background:transparent;color:var(--text-muted);display:flex;align-items:center;gap:8px;padding:0;font-weight:700}.file-tree{margin-top:10px;display:grid;gap:6px;overflow:auto}.file-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.file-row__button,.icon-button{border:1px solid transparent;background:transparent;color:inherit;border-radius:10px}.file-row__button{min-width:0;padding:10px 12px;display:flex;align-items:center;gap:10px;justify-content:flex-start}.file-row.is-active .file-row__button{background:var(--surface-hover);border-color:var(--border-strong)}.icon-button{width:34px;height:34px;display:inline-grid;place-items:center}.panel{height:100%;border-radius:20px;display:flex;flex-direction:column;overflow:hidden}.editor-pane{flex:1 1 auto}.editor-pane__content,.preview-pane__frame{flex:1;min-height:0}.editor-tabs{display:flex;align-items:center;gap:2px;padding:8px;border-bottom:1px solid var(--border);background:var(--panel-muted);overflow:auto}.editor-tab{border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text-muted);padding:10px 14px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.editor-tab.is-active{color:var(--text);background:var(--panel-elevated);border-color:var(--border)}.editor-tab__dot{width:10px;height:10px;border-radius:999px}.editor-tab__dot--html{background:#f97316}.editor-tab__dot--css{background:#38bdf8}.editor-tab__dot--js{background:#facc15}.preview-pane .panel__header{padding:14px 16px;border-bottom:1px solid var(--border)}.preview-pane--collapsed .panel__header{padding:14px 8px;flex-direction:column;justify-content:flex-start;align-items:center;height:100%}.preview-pane--collapsed .panel__header>div:first-child{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:8px}.preview-pane--collapsed .panel-label,.preview-pane--collapsed h2{margin:0}.preview-pane--collapsed .preview-pane__frame{display:none}.preview-pane__frame,.preview-pane iframe{width:100%;height:100%}.preview-pane__frame{background:#fff}.preview-pane iframe{border:0;background:#fff}.console-panel{height:100%;border-radius:20px;overflow:hidden;background:var(--panel-bg)}.console-panel__header{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel-muted)}.console-panel__actions{display:flex;align-items:center;gap:8px}.console-panel__title{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--text)}.console-panel--collapsed .console-panel__body{display:none}.console-panel__body{height:calc(100% - 56px);display:flex;flex-direction:column;gap:2px;padding:12px 14px 16px;overflow:auto;font-family:JetBrains Mono,Fira Code,monospace;font-size:.88rem;line-height:1.45;background:transparent}.console-panel__empty{margin:0;color:var(--text-dim)}.console-line{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;align-items:start;padding:0}.console-line__prompt{color:var(--text-dim);-webkit-user-select:none;user-select:none}.console-line__text{white-space:pre-wrap;word-break:break-word}.console-line--log{color:var(--text)}.console-line--info{color:var(--success)}.console-line--warn{color:var(--warning)}.console-line--error{color:var(--danger)}.console-panel .ghost-button{color:var(--text)}.console-panel .ghost-button:hover{background:var(--surface-hover);border-color:var(--border-strong);transform:none}.mobile-view-switcher{display:none;gap:8px}.mobile-view-switcher button{flex:1;min-height:42px;border-radius:14px;border:1px solid var(--border);color:var(--text);background:var(--surface-soft);display:inline-flex;align-items:center;justify-content:center;gap:8px}.mobile-view-switcher .is-active{background:var(--surface-hover);border-color:var(--border-strong)}.panel-toggle-button{min-width:36px;padding:0 10px;justify-content:center}.static-page{width:min(1100px,100%);margin:0 auto;display:grid;gap:10px}.static-page__hero,.static-page__content{padding:22px}.static-page__copy h1{margin:0 0 12px}.static-page__copy p{margin:0;color:var(--text-muted);max-width:70ch}.static-page__section+.static-page__section{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}.static-page__section h2{margin:0 0 8px;font-size:1.05rem}.static-page__section p{margin:0;color:var(--text-muted);line-height:1.6}.editor-loading{height:100%;display:grid;place-items:center;color:var(--text-muted);background:var(--panel-muted)}.file-rename{padding:0}@media(max-width:1120px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;grid-template-rows:44px auto auto auto;overflow:visible}.ide-layout{grid-template-rows:auto auto;overflow:visible}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);overflow:visible}.react-resizable{height:auto}.sidebar{position:fixed;top:90px;left:10px;bottom:10px;width:min(320px,calc(100vw - 20px));z-index:20;transform:translate(-120%);transition:transform .18s ease}.sidebar--open{transform:translate(0)}.bottom-panel-slot{min-height:180px}.ad-slot--sidebar{max-width:none;min-height:180px}.topbar{align-items:flex-start;flex-direction:column}.topbar__nav,.topbar__actions{width:100%;justify-content:flex-start}}@media(max-width:820px){.mobile-view-switcher{display:flex}.workspace-grid{grid-template-columns:1fr}.panel{min-height:56vh}.preview-pane--collapsed .panel__header{flex-direction:row;align-items:center;height:auto;padding:14px 16px}.preview-pane--collapsed .panel__header>div:first-child{writing-mode:initial;transform:none;display:block}.bottom-panel-slot,.console-panel{min-height:180px}#ad-top{min-height:72px}}@media(max-width:560px){.app-shell{padding:8px}.topbar,.panel,.console-panel,.sidebar{border-radius:16px}}.hero{display:flex;justify-content:center;margin:1rem 0 1.2rem}.cta-button{display:inline-block;padding:.7rem 1.2rem;background:#0f172a;color:#fff;font-weight:600;border-radius:8px;text-decoration:none;font-size:.9rem;transition:all .2s ease;box-shadow:0 6px 14px #0000001f}.cta-button:hover{background:#020617;transform:translateY(-1px)}.cta-button:active{transform:scale(.97)}