*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #09090b;--surface: #111113;--surface2: #18181b;--border: #27272a;--border2: #3f3f46;--text: #f4f4f5;--muted: #71717a;--subtle: #a1a1aa;--accent: #6366f1;--accent-dim: #4f46e5;--accent-muted: rgba(99, 102, 241, .15);--font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;--font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace}html,body,#root{height:100%;width:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#52525b}.app{display:grid;grid-template-columns:200px 1fr 220px;grid-template-rows:40px 1fr;height:100vh;width:100vw;background:var(--bg)}.app-header{grid-column:1 / -1;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border)}.app-title{font-family:var(--font);font-size:13px;font-weight:500;color:var(--subtle);letter-spacing:.01em}.app-header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}.btn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:var(--font);font-size:12px;cursor:pointer;transition:all .12s;white-space:nowrap}.btn:hover{color:var(--text);border-color:var(--border2);background:var(--surface2)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}.btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim);color:#fff}.btn-danger{border-color:var(--border);color:var(--muted)}.btn-danger:hover{border-color:#ef4444;color:#ef4444;background:#ef444414}.toolbar{display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);overflow:hidden}.toolbar-header{padding:10px 12px 8px;border-bottom:1px solid var(--border);flex-shrink:0}.toolbar-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}.toolbar-body{overflow-y:auto;flex:1;padding:6px 0}.toolbar-section{margin-bottom:2px}.toolbar-category{padding:8px 12px 3px;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}.toolbar-item{display:flex;flex-direction:column;gap:1px;width:100%;padding:5px 12px;border:none;background:transparent;color:var(--muted);text-align:left;cursor:pointer;transition:background .1s,color .1s;border-left:2px solid transparent}.toolbar-item:hover{background:var(--surface2);color:var(--subtle)}.toolbar-item--active{background:var(--accent-muted);color:var(--text);border-left-color:var(--accent)}.toolbar-item-preview{font-family:var(--font-mono);font-size:10px;color:inherit;overflow:hidden;text-overflow:clip;white-space:nowrap;opacity:.6}.toolbar-item-label{font-size:12px;color:inherit}.canvas-wrapper{position:relative;overflow:hidden;background:var(--bg);outline:none}.canvas-scroll{width:100%;height:100%;overflow:auto}.canvas{display:block;cursor:crosshair;image-rendering:pixelated}.canvas--place-mode{cursor:cell}.inspector{display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);overflow:hidden}.inspector-header{padding:10px 14px 8px;border-bottom:1px solid var(--border);flex-shrink:0}.inspector-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}.inspector-section{border-bottom:1px solid var(--border);padding:10px 14px}.inspector-section-title{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px}.inspector-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}.inspector-key{font-size:12px;color:var(--muted)}.inspector-value{font-size:12px;color:var(--subtle);font-family:var(--font-mono)}.inspector-value--green{color:var(--accent)}.inspector-value--kbd{color:var(--subtle);font-size:11px}.inspector-value--muted{color:var(--muted);font-family:var(--font)}.inspector-preview{margin-top:8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:8px;overflow-x:auto}.inspector-preview-line{font-family:var(--font-mono);font-size:10px;color:var(--subtle);white-space:pre;line-height:1.4}.inspector-hint{margin-top:6px;font-size:11px;color:var(--muted)}