:root{color-scheme:light;--toolbar-height: 56px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-background);color:var(--color-text)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app{min-height:100%;display:flex;flex-direction:column;background:var(--color-background);color:var(--color-text);transition:background .2s ease,color .2s ease}.app.light{--color-background: #f4f6fb;--color-surface: #ffffff;--color-border: #dce1eb;--color-text: #1f2a37;--color-muted: #6b7280;--color-accent: #2563eb;--color-toolbar: rgba(255, 255, 255, .9);--color-canvas: #ffffff}.app.dark{color-scheme:dark;--color-background: #0f172a;--color-surface: #111b2f;--color-border: #1f293d;--color-text: #e2e8f0;--color-muted: #94a3b8;--color-accent: #38bdf8;--color-toolbar: rgba(17, 27, 47, .92);--color-canvas: #0b1220}.toolbar{height:var(--toolbar-height);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;border-bottom:1px solid var(--color-border);background:var(--color-toolbar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.toolbar__group{display:flex;align-items:center;gap:8px}.toolbar__group--insert{gap:12px}.toolbar__label{font-size:.85rem;letter-spacing:.02em;color:var(--color-muted)}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);padding:6px 12px;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease,border .15s ease}button:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}button:disabled{opacity:.5;cursor:not-allowed}.workspace{flex:1;display:grid;grid-template-columns:260px minmax(0,1fr) minmax(340px,35%);grid-template-areas:"outline canvas code";gap:16px;padding:16px 24px 24px;overflow:hidden;min-height:0}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.panel__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-border);font-weight:600}.panel__body{padding:16px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px}.outline-panel{grid-area:outline}.outline__body{padding:16px;gap:8px}.outline__list{list-style:none;padding-left:12px;display:flex;flex-direction:column;gap:4px}.outline__item{padding:6px 10px;border-radius:6px;border:1px solid transparent;transition:background .15s ease,border .15s ease,color .15s ease;font-size:.9rem}.outline__item:hover{background:#2563eb14;border-color:#2563eb26}.outline__item--active{background:#2563eb1f;border-color:#2563eb59;color:var(--color-accent)}.outline__placeholder{color:var(--color-muted);font-size:.85rem}.canvas-pane{grid-area:canvas}.canvas__body{padding:0}.canvas__surface{flex:1;padding:28px;border-radius:0;background:var(--color-canvas);color:var(--color-text);overflow:auto;box-shadow:inset 0 0 0 1px var(--color-border)}.canvas__placeholder{color:var(--color-muted);font-style:italic}.canvas-node{position:relative;outline:2px solid transparent;outline-offset:2px;transition:outline .15s ease,box-shadow .15s ease;cursor:pointer}.canvas-node:hover{outline-color:#2563eb40}.canvas-node--selected{outline-color:var(--color-accent);box-shadow:0 0 0 4px #2563eb1f}.canvas-text-node{cursor:text}.canvas-text-node--selected{background:#2563eb1f;border-radius:2px;padding:0 2px}.canvas-text-node[contenteditable=true]{outline:none;box-shadow:inset 0 -1px 0 0 var(--color-accent)}.canvas__surface h1,.canvas__surface h2,.canvas__surface p,.canvas__surface ul,.canvas__surface li,.canvas__surface button{margin-bottom:12px}.canvas__surface button{background:var(--color-accent);color:#fff;border:none;padding:10px 16px;border-radius:6px}.canvas__surface ul{padding-left:20px}.code-pane{grid-area:code}.code-pane__body{padding:0}.code-pane__body>*{flex:1}@media (max-width: 1280px){.workspace{grid-template-columns:220px minmax(0,1fr) minmax(320px,32%)}}@media (max-width: 1024px){.workspace{grid-template-columns:200px minmax(0,1fr) minmax(280px,34%);padding:16px}}@media (max-width: 900px){.toolbar{flex-wrap:wrap;gap:12px;height:auto;padding:12px 16px}.workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"outline" "canvas" "code";padding:16px;overflow:auto}.outline-panel,.canvas-pane,.code-pane{min-height:220px}}@media (max-width: 640px){button{font-size:.85rem}.toolbar__label{display:none}}