*{box-sizing:border-box;margin:0}html,body,#root{color:#27272a;background:#fff;height:100%;font-family:system-ui,sans-serif;overflow:hidden}.capability-screen{text-align:center;place-content:center;gap:.75rem;height:100%;display:grid}.editor-shell{height:100%;position:relative}.editor-canvas{touch-action:none;width:100%;height:100%;display:block}[data-tip]{position:relative}[data-tip]:after{content:attr(data-tip);transform-origin:bottom;color:#fafafa;white-space:nowrap;opacity:0;pointer-events:none;z-index:30;background:#18181b;border-radius:6px;padding:5px 9px;font-size:11.5px;font-weight:500;transition:opacity 90ms .25s,transform 90ms .25s;position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%)scale(.97)}[data-tip]:hover:after{opacity:1;transform:translate(-50%)scale(1)}.context-bar [data-tip]:after{transform-origin:top;top:calc(100% + 9px);bottom:auto}.bottom-toolbar{background:#fff;border:1px solid #e4e4e7;border-radius:12px;align-items:center;gap:4px;padding:6px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #0002}.tool-button{color:#3f3f46;cursor:pointer;background:0 0;border:none;border-radius:9px;place-content:center;width:38px;height:38px;display:grid}.tool-button:hover:not(:disabled){background:#f4f4f5}.tool-button.active{color:#fff;background:#2563eb}.tool-button:disabled{color:#d4d4d8;cursor:default}.toolbar-divider{background:#e4e4e7;width:1px;height:20px;margin:0 4px}.brush-options{background:#fff;border:1px solid #e4e4e7;border-radius:10px;align-items:center;gap:10px;padding:8px 12px;font-size:12px;display:flex;position:absolute;bottom:72px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000018}.brush-options input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:6px;width:26px;height:26px;padding:0}.brush-size-label{color:#71717a;align-items:center;gap:3px;display:flex}.brush-size-label kbd{border:1px solid #e4e4e7;border-radius:4px;padding:0 4px;font-size:10px}.layer-panel{background:#fff;border:1px solid #e4e4e7;border-radius:10px;width:240px;max-height:calc(100% - 24px);font-size:13px;position:absolute;top:12px;right:12px;overflow-y:auto;box-shadow:0 4px 16px #00000014}.layer-panel.empty p{color:#a1a1aa;margin:14px}.layer-panel ul{margin:0;padding:6px;list-style:none}.layer-row{cursor:pointer;border-radius:6px;align-items:center;gap:8px;padding:7px 8px;display:flex}.layer-row:hover{background:#f4f4f5}.layer-row.selected{background:#dbeafe}.layer-kind{color:#a1a1aa}.layer-name{flex:none}.layer-row input[type=range]{flex:1;min-width:40px}.layer-visibility{color:#a1a1aa;cursor:pointer;background:0 0;border:none;font-size:11px}.notices{flex-direction:column;gap:8px;display:flex;position:absolute;bottom:76px;right:16px}.notice{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;align-items:center;gap:12px;padding:10px 14px;font-size:13px;display:flex;box-shadow:0 4px 16px #00000014}.notice button{color:inherit;cursor:pointer;background:0 0;border:none;font-size:15px}.palette-backdrop{z-index:40;background:#0000002e;justify-content:center;align-items:flex-start;padding-top:14vh;display:flex;position:absolute;inset:0}.palette{background:#fff;border:1px solid #e4e4e7;border-radius:12px;width:min(440px,90vw);overflow:hidden;box-shadow:0 16px 48px #0003}.palette input{color:#18181b;width:100%;font:inherit;background:0 0;border:none;border-bottom:1px solid #e4e4e7;outline:none;padding:14px 16px;font-size:15px}.palette ul{max-height:40vh;margin:0;padding:6px;list-style:none;overflow-y:auto}.palette li{cursor:pointer;border-radius:7px;padding:9px 12px;font-size:14px}.palette li.active{background:#dbeafe}.palette-empty{color:#a1a1aa;cursor:default}.depth-panel{background:#fff;border:1px solid #e4e4e7;border-radius:10px;flex-direction:column;gap:10px;width:260px;padding:14px;font-size:13px;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 4px 16px #00000018}.depth-panel h2{font-size:13px;font-weight:600}.depth-panel label{color:#71717a;flex-direction:column;gap:4px;display:flex}.depth-panel .depth-keep{flex-direction:row;align-items:center;gap:8px}.depth-actions{gap:8px;display:flex}.depth-actions button{font:inherit;cursor:pointer;color:#27272a;background:#f4f4f5;border:none;border-radius:6px;flex:1;padding:7px 0}.depth-actions button:first-child{color:#fff;background:#2563eb}.status-pill{background:#fff;border:1px solid #e4e4e7;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000014}.status-spinner{border:2px solid #e4e4e7;border-top-color:#2563eb;border-radius:50%;width:12px;height:12px;animation:.8s linear infinite status-spin}@keyframes status-spin{to{transform:rotate(360deg)}}.text-overlay{z-index:10;position:absolute;top:0;left:0}.text-overlay textarea{outline-offset:3px;resize:none;caret-color:#2563eb;background:0 0;border:none;outline:1px dashed #93c5fd;width:24ch;min-width:30px;min-height:1.3em;padding:0;overflow:hidden}.text-format-bar{background:#fff;border:1px solid #e4e4e7;border-radius:9px;gap:2px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 10px);left:0;box-shadow:0 6px 20px #00000026}.text-format-bar button{color:#27272a;width:30px;height:30px;font:inherit;cursor:pointer;background:0 0;border:none;border-radius:6px;font-size:13px;font-weight:700}.text-format-bar button:hover{background:#f4f4f5}.text-format-bar button.active{color:#fff;background:#2563eb}.text-format-bar input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:6px;align-self:center;width:26px;height:26px;padding:0}.context-bar{visibility:hidden;z-index:5;background:#fff;border:1px solid #e4e4e7;border-radius:9px;gap:2px;padding:4px;display:flex;position:absolute;top:0;left:0;box-shadow:0 6px 20px #00000026}.context-bar button{color:#27272a;font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:6px 10px;font-size:12.5px;font-weight:500}.context-bar button:hover{background:#f4f4f5}.context-bar button.danger:hover{color:#b91c1c;background:#fee2e2}.perf-hud{z-index:30;color:#d7dce3;pointer-events:none;white-space:nowrap;background:#14181fd1;border-radius:8px;padding:8px 10px;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;bottom:12px;right:12px}.perf-hud b{color:#8fd3a6;font-size:13px}