:root{color-scheme:dark;--bg: #0e1013;--bg-1: #14181e;--bg-2: #1b2028;--bg-3: #232933;--panel: #12161c;--border: #2a313c;--border-strong: #3a4350;--text: #ece7dc;--text-dim: #9aa3b0;--text-faint: #6b7380;--accent: #d9a441;--accent-2: #6cb6ff;--accent-3: #7dcea0;--danger: #e26d6d;--fill: color-mix(in srgb, var(--accent) 22%, transparent);--shadow: 0 18px 50px rgba(0, 0, 0, .35);--radius: 10px;--titlebar: 38px;--sidebar: 260px;--inspector: 300px;--font: "Segoe UI Variable", "Segoe UI", "SF Pro Text", system-ui, sans-serif;--mono: "Cascadia Code", "SF Mono", "Consolas", ui-monospace, monospace}:root[data-theme=light]{color-scheme:light;--bg: #efe8db;--bg-1: #f7f1e6;--bg-2: #fffaf1;--bg-3: #ece3d3;--panel: #f4eee3;--border: #d9cbb4;--border-strong: #c3b398;--text: #1c1914;--text-dim: #5c564b;--text-faint: #8a8274;--accent: #b57916;--accent-2: #2b6cb0;--accent-3: #2f8a5b;--danger: #c44545}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden;-webkit-user-select:none;user-select:none;letter-spacing:.01em}button,input,select,textarea{font-family:inherit;color:inherit}button{cursor:pointer}.app{height:100%;display:flex;flex-direction:column;background:var(--bg)}.titlebar{height:var(--titlebar);display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;background:var(--bg-1);border-bottom:1px solid var(--border);-webkit-app-region:drag}.titlebar button,.titlebar .no-drag{-webkit-app-region:no-drag}.titlebar-web{-webkit-app-region:none}.brand{display:flex;align-items:center;gap:8px;font-weight:650;letter-spacing:.08em;font-size:12px;text-transform:uppercase}.brand-mark{width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,#4d6fa3,#1e2d48);box-shadow:inset 0 0 0 1px #ffffff26}.win-controls{display:flex}.win-controls button{width:42px;height:38px;border:0;background:transparent;color:var(--text-dim)}.win-controls button:hover{background:var(--bg-3);color:var(--text)}.win-controls button.close:hover{background:#c42b1c;color:#fff}.workspace{flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:var(--sidebar) 6px minmax(0,1fr) 6px var(--inspector)}.sidebar,.inspector,.center{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}.center{background:var(--bg);position:relative}.center.play-immersive{position:fixed;inset:0;z-index:80;width:100%!important;height:100%!important;max-width:none;background:var(--bg)}.center.play-immersive .app-actions{padding-top:env(safe-area-inset-top,0px)}.center.play-immersive .play-hud{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}.splitter{z-index:6;background:var(--border);transition:background .12s ease}.splitter:hover,.splitter.dragging{background:var(--accent)}.splitter-x{cursor:col-resize}.panel-head{flex:0 0 40px;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)}.toolbar{flex:0 0 auto;height:44px;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--border);background:var(--bg-1)}.tool{width:32px;height:32px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-dim);display:grid;place-items:center}.tool:hover{background:var(--bg-3);color:var(--text)}.tool.active{background:var(--bg-3);border-color:var(--accent);color:var(--accent)}.sep{width:1px;height:20px;background:var(--border);margin:0 6px}.grow{flex:1}.btn,.btn-ghost,.btn-accent{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);font-size:12px;display:inline-flex;align-items:center;gap:6px}.btn:hover,.btn-ghost:hover{border-color:var(--border-strong)}.btn-ghost{background:transparent}.btn-accent{background:var(--accent);border-color:transparent;color:#1a1408;font-weight:650}.btn.play-stop{background:color-mix(in srgb,var(--danger) 22%,var(--bg-2));border-color:var(--danger);color:var(--danger);font-weight:650}.btn.danger:hover{color:var(--danger);border-color:var(--danger)}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.field label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.field input,.field select,.field textarea{height:32px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0 8px;outline:none;min-width:0;width:100%}.field input:focus,.field select:focus{border-color:var(--accent)}.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.hint{font-size:11px;color:var(--text-faint);line-height:1.45}.check-row{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:8px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.check-row input{width:15px;height:15px;accent-color:var(--accent);margin:0}.layer-row{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;margin-bottom:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:inherit;text-align:left;cursor:pointer}.layer-row:hover{border-color:var(--border-strong)}.layer-row.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.layer-row input{width:15px;height:15px;accent-color:var(--accent);margin:0;flex:0 0 auto}.object-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}.object-row .object-name{flex:1;min-width:0;height:30px;padding:0 8px;text-align:left;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:inherit;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.object-row.active .object-name{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.object-row .object-vis{display:flex;align-items:center;margin:0;cursor:pointer}.object-row .object-vis input{width:15px;height:15px;accent-color:var(--accent);margin:0}.object-row .object-del{width:28px;height:28px;flex:0 0 28px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text-dim);font-size:16px;line-height:1;padding:0}.object-row .object-del:hover{color:var(--danger);border-color:var(--danger)}.action-card{border:1px solid var(--border);border-radius:8px;padding:8px;margin-bottom:8px;background:var(--bg)}.tools-rail{position:absolute;left:10px;top:10px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--bg-1) 92%,transparent);box-shadow:0 8px 24px #0006;pointer-events:auto}.tools-rail .sep{width:20px;height:1px;margin:4px 0}.editor-wrap{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(1200px 500px at 50% 0%,color-mix(in srgb,var(--accent-2) 8%,transparent),transparent 60%),var(--bg)}.canvas-host{flex:1;min-height:0;position:relative}.canvas-host canvas{touch-action:none;position:absolute;inset:0;width:100%;height:100%;display:block}.pick-banner{position:absolute;left:50%;top:12px;transform:translate(-50%);z-index:4;pointer-events:none;padding:6px 12px;border-radius:999px;background:#0e1013db;border:1px solid var(--accent);color:var(--text);font-size:12px;white-space:nowrap}.status{flex:0 0 26px;height:26px;display:flex;align-items:center;gap:14px;padding:0 12px;border-top:1px solid var(--border);font-size:11px;color:var(--text-dim);font-family:var(--mono)}.app-actions{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);overflow-x:auto;scrollbar-width:thin}.app-actions-start,.app-actions-end{display:flex;align-items:center;gap:6px;min-width:0}.app-actions-start{justify-content:flex-start}.app-actions-center{display:flex;align-items:center;justify-content:center;gap:4px}.app-actions-end{justify-content:flex-end}.app-actions .btn,.app-actions .btn-ghost,.app-actions .btn-accent{flex-shrink:0;white-space:nowrap}.editor-toolbar{flex-wrap:wrap;height:auto;min-height:44px;padding-top:5px;padding-bottom:5px;justify-content:flex-start}.editor-toolbar>*{flex-shrink:0}.toolbar-cluster{display:flex;align-items:center;gap:4px}.toolbar-snap-label{font-size:10px;color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase}.welcome{flex:1;display:grid;place-items:center;overflow:auto;background:radial-gradient(900px 420px at 20% -10%,color-mix(in srgb,var(--accent-2) 18%,transparent),transparent 55%),var(--bg)}.welcome-card{width:min(860px,calc(100% - 48px));background:var(--bg-1);border:1px solid var(--border);border-radius:18px;padding:36px;box-shadow:var(--shadow)}.welcome h1{margin:0 0 6px;font-size:32px;letter-spacing:-.03em}.welcome p.lead{margin:0 0 28px;color:var(--text-dim)}.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.actions-samples{grid-template-columns:repeat(3,1fr);margin-bottom:28px}.action-tile{text-align:left;padding:16px;border-radius:12px;border:1px solid var(--border);background:var(--bg-2);min-height:110px;display:flex;flex-direction:column;gap:8px}.action-tile:hover{border-color:var(--accent)}.action-tile strong{font-size:14px}.action-tile span{font-size:12px;color:var(--text-dim);line-height:1.4}.recents{display:grid;gap:6px}.recent{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;border:1px solid transparent;background:var(--bg);color:inherit;text-align:left}.recent:hover{border-color:var(--border)}.features{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-top:24px;color:var(--text-dim);font-size:12.5px}.inspector-body{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;padding:10px 12px 16px}.insp-section{padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--border)}.insp-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.insp-section h3{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-faint);margin:0 0 8px;font-weight:650}.insp-empty{margin:0;font-size:12.5px;color:var(--text-faint)}.insp-kind{margin:0 0 8px;font-size:13px;font-weight:650}.insp-sub{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}.insp-section .layer-row{margin-bottom:4px;padding:6px 8px}.insp-section .layer-row span{font-size:12.5px}.insp-section .field{margin-bottom:8px}.insp-section .check-row{margin-bottom:6px}.palette-body{flex:1;min-height:0;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:6px}.palette-section{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin:8px 2px 4px}.palette-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:inherit;text-align:left;cursor:grab}.palette-item:hover{border-color:var(--border-strong)}.palette-item.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.swatch{width:36px;height:36px;border-radius:8px;flex:0 0 36px;border:1px solid var(--border-strong);background-size:cover;background-position:center}.swatch.floor{background:#2c333c}.swatch.inner{background:linear-gradient(135deg,#f2f4f8,#9aa3b0)}.swatch.erase{background:repeating-linear-gradient(45deg,#2a313c,#2a313c 6px,#1b2028 6px 12px)}.swatch.path{background:repeating-linear-gradient(90deg,transparent 0 5px,#6cb6ff 5px 7px),linear-gradient(#1b2028,#1b2028)}.swatch.blade{background-size:contain;background-repeat:no-repeat;background-position:center}.palette-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.palette-copy strong{font-size:12.5px}.palette-copy span{font-size:11px;color:var(--text-faint);line-height:1.3}.help-overlay{position:absolute;right:12px;top:56px;width:300px;background:var(--bg-1);border:1px solid var(--border);border-radius:12px;padding:12px;z-index:5;font-size:12px;color:var(--text-dim);line-height:1.7}.help-overlay b{color:var(--text);font-family:var(--mono);font-weight:600}.ctx-menu{position:absolute;z-index:20;min-width:156px;padding:6px;background:var(--bg-1);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}.ctx-menu button{height:30px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left;font-size:12.5px}.ctx-menu button:hover{background:var(--bg-3)}.ctx-menu button.active{color:var(--accent);background:var(--bg-3)}.ctx-sep{height:1px;background:var(--border);margin:4px 2px}.tool-select{height:32px;width:64px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:11px;padding:0 4px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}::-webkit-scrollbar-track{background:transparent}.play-hud{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;align-items:flex-end;justify-content:space-between;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}.play-stick{pointer-events:auto;position:relative;width:128px;height:128px;touch-action:none;user-select:none;-webkit-user-select:none}.play-stick-ring{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--bg-1) 72%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 80%,transparent)}.play-stick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:color-mix(in srgb,var(--accent) 85%,white 8%);border:2px solid color-mix(in srgb,var(--text) 35%,transparent);box-shadow:0 4px 14px #00000059;will-change:transform}.play-hud-stop{pointer-events:auto;height:44px;min-width:72px;font-size:14px;touch-action:manipulation}.mobile-only{display:none!important}.desktop-only{display:inline-flex!important}.mobile-backdrop{display:none}.play-guides-check{display:inline-flex;align-items:center;gap:6px;margin-right:8px;font-size:12px;color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.play-guides-check input{width:15px;height:15px;accent-color:var(--accent);margin:0}@media(max-width:900px){.mobile-only{display:inline-flex!important}.desktop-only{display:none!important}.titlebar-web{height:28px;padding:0 10px}.titlebar-web .brand{font-size:10px;letter-spacing:.06em}.titlebar-web .brand-mark{width:12px;height:12px}.app.project-open .titlebar-web{display:none}.workspace{grid-template-columns:minmax(0,1fr)!important;padding-bottom:env(safe-area-inset-bottom,0px)}.workspace>.sidebar,.workspace>.inspector,.workspace>.splitter{display:none}.workspace.show-palette>.sidebar,.workspace.show-inspector>.inspector{display:flex;position:fixed;z-index:30;top:0;bottom:0;width:min(320px,88vw);max-width:100%;box-shadow:var(--shadow);padding-top:env(safe-area-inset-top,0px)}.workspace.show-palette>.sidebar{left:0}.workspace.show-inspector>.inspector{right:0;left:auto}.mobile-backdrop{display:block;position:absolute;inset:0;z-index:25;border:0;padding:0;margin:0;background:#00000073;cursor:pointer}.workspace.workspace-playing>.sidebar,.workspace.workspace-playing>.inspector,.workspace.workspace-playing.show-palette>.sidebar,.workspace.workspace-playing.show-inspector>.inspector{display:none}.app-actions{height:auto;min-height:44px;padding:6px 8px;padding-top:calc(6px + env(safe-area-inset-top,0px));gap:4px;overflow:hidden}.app-actions .btn-label{display:none}.app-actions .btn,.app-actions .btn-ghost,.app-actions .btn-accent{height:36px;padding:0 10px;font-size:13px}.play-guides-check{font-size:11px;margin-right:4px}.play-guides-check span{max-width:4.5em;overflow:hidden;text-overflow:ellipsis}.editor-toolbar{display:none!important}.tools-rail{left:50%;right:auto;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translate(-50%);flex-direction:row;max-width:calc(100% - 16px);overflow-x:auto;padding:5px 6px}.workspace-playing .tools-rail,.status{display:none}.help-overlay{left:10px;right:10px;width:auto;top:56px;max-height:min(60vh,420px);overflow:auto}.play-stick{width:148px;height:148px}.play-stick-knob{width:58px;height:58px;margin:-29px 0 0 -29px}.play-hud{padding-left:12px;padding-right:12px}.welcome-card{width:min(860px,calc(100% - 24px));padding:22px 18px}.actions,.actions-samples,.features{grid-template-columns:1fr}}.btn-ghost.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:var(--bg-3)}
