*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #faf7f4;--surface: #f0ebe4;--surface2: #e8e0d6;--border: rgba(26,22,18,.1);--border2: rgba(26,22,18,.2);--text: #1a1612;--muted: rgba(26,22,18,.45);--subtle: rgba(26,22,18,.65);--accent: #FF851B;--accent-dim: #e67615;--accent-muted: rgba(255,133,27,.12);--font: "Space Grotesk", -apple-system, system-ui, sans-serif;--font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace}[data-theme=dark]{--bg: #0d0c0b;--surface: #161412;--surface2: #1e1b18;--border: rgba(242,237,232,.1);--border2: rgba(242,237,232,.18);--text: #f2ede8;--muted: rgba(242,237,232,.45);--subtle: rgba(242,237,232,.65)}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:#1a16124d}.app{display:grid;grid-template-columns:200px 1fr 220px;grid-template-rows:40px 1fr;height:100vh;height:100dvh;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}.header-mobile{display:none}.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}.btn-icon-round{width:32px;height:32px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.mobile-bar,.mobile-backdrop,.mobile-more-sheet{display:none}@media(max-width:768px){.app{grid-template-columns:1fr;grid-template-rows:44px 1fr 54px}.app-header{grid-column:1;padding:0 12px}.header-desktop{display:none}.header-mobile{display:flex;margin-left:auto;align-items:center;gap:4px}.btn-icon-round{width:36px;height:36px}.mobile-bar{display:flex;align-items:stretch;justify-content:space-around;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0px);z-index:110}.mobile-bar-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;min-height:54px;border:none;background:transparent;color:var(--muted);font-family:var(--font);font-size:10px;cursor:pointer;transition:color .12s,background .12s;padding:0 4px}.mobile-bar-btn:hover,.mobile-bar-btn.is-active{color:var(--text);background:var(--surface2)}.mobile-bar-btn--add{color:var(--accent)}.mobile-bar-btn--add:hover,.mobile-bar-btn--add.is-active{color:var(--accent-dim);background:var(--accent-muted)}.mobile-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:99}.mobile-more-sheet{display:flex;flex-direction:column;position:fixed;bottom:calc(54px + env(safe-area-inset-bottom,0px));left:0;right:0;background:var(--surface);border-top:1px solid var(--border);border-radius:12px 12px 0 0;z-index:105;box-shadow:0 -4px 20px #00000026;padding:6px 0}.mobile-action-item{display:flex;align-items:center;width:100%;padding:14px 20px;border:none;background:transparent;color:var(--text);font-family:var(--font);font-size:15px;text-align:left;cursor:pointer;transition:background .1s}.mobile-action-item:hover,.mobile-action-item:active{background:var(--surface2)}}.toolbar{display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);overflow:hidden}.toolbar-search{position:relative;padding:6px 8px 4px;border-bottom:1px solid var(--border);flex-shrink:0}.toolbar-search-input{width:100%;box-sizing:border-box;padding:4px 24px 4px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:var(--font);font-size:11px;outline:none;transition:border-color .12s}.toolbar-search-input:focus{border-color:var(--accent)}.toolbar-search-input::placeholder{color:var(--muted)}.toolbar-search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}.toolbar-search-clear:hover{color:var(--text)}.toolbar-no-results{padding:16px 12px;font-size:11px;color:var(--muted);text-align:center}.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}@media(max-width:768px){.toolbar{position:fixed;bottom:calc(54px + env(safe-area-inset-bottom,0px));left:0;right:0;width:100%;max-height:45vh;overflow-y:auto;z-index:100;background:var(--surface);border-right:none;border-top:1px solid var(--border);border-radius:12px 12px 0 0;transform:translateY(110%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 -4px 20px #0000001f}.toolbar--mobile-open{transform:translateY(0)}.toolbar-body{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:0;padding:6px 0}.toolbar-section{flex-shrink:0;margin-bottom:0;border-right:1px solid var(--border)}.toolbar-item{min-height:44px;min-width:44px;padding:6px 10px}}.canvas-wrapper{position:relative;overflow:hidden;background:var(--bg);outline:none;touch-action:manipulation}.canvas-scroll{width:100%;height:100%;overflow:auto;touch-action:pan-x pan-y}.canvas{display:block;cursor:crosshair;image-rendering:pixelated}.canvas--place-mode{cursor:cell}@media(max-width:768px){.canvas-wrapper{height:100%}}.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)}@media(max-width:768px){.inspector{display:flex;position:fixed;bottom:calc(54px + env(safe-area-inset-bottom,0px));left:0;right:0;height:45vh;border-left:none;border-top:1px solid var(--border);border-radius:12px 12px 0 0;z-index:100;transform:translateY(110%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);overflow-y:auto;box-shadow:0 -4px 20px #0000001f}.inspector.is-open{transform:translateY(0)}}