:root{--bg:#f0f4f8;--surface:#fff;--surface-2:#f1f5f9;--line:#e2e8f0;--line-strong:#cbd5e1;--text:#1e293b;--muted:#64748b;--blue:#3b82f6;--green:#10b981;--amber:#f59e0b;--red:#ef4444;--orange:#f97316;--purple:#8b5cf6;--terminal:#0d1117;--terminal-text:#e6edf3;--terminal-prompt:#3fb950;--terminal-host:#79c0ff;--terminal-error:#ff7b72;--terminal-warn:#e3b341;--shadow:0 4px 12px #0f172a12, 0 1px 3px #0f172a0f;--shadow-lg:0 10px 32px #0f172a21, 0 4px 10px #0f172a14;--shadow-glow-green:0 4px 20px #10b98173;--shadow-glow-blue:0 4px 20px #3b82f673;--shadow-glow-red:0 4px 20px #ef444473;--radius:10px;--radius-sm:7px;--mono:"Cascadia Code", "Consolas", "SFMono-Regular", monospace;--ai-panel-w:380px;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html[data-theme=dark]{--bg:#0b1120;--surface:#141e30;--surface-2:#1a2540;--line:#243048;--line-strong:#3d4f6e;--text:#f1f5f9;--muted:#94a3b8;--blue:#60a5fa;--green:#34d399;--amber:#fbbf24;--red:#f87171;--orange:#fb923c;--purple:#a78bfa;--terminal:#010409;--terminal-text:#e6edf3;--shadow:0 4px 16px #00000059, 0 1px 4px #0000004d;--shadow-lg:0 12px 40px #00000080, 0 4px 12px #00000059;--shadow-glow-green:0 4px 22px #34d39966;--shadow-glow-blue:0 4px 22px #60a5fa66;--shadow-glow-red:0 4px 22px #f8717166}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{background:var(--bg);overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer;border:0}input[type=radio],input[type=checkbox]{accent-color:var(--orange)}.app-shell{background:var(--bg);grid-template-rows:58px minmax(0,1fr);height:100vh;transition:background .2s;display:grid}.topbar{border-bottom:2px solid var(--orange);z-index:5;background:linear-gradient(135deg,#1a2744 0%,#0f1c36 100%);grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);align-items:center;gap:16px;padding:0 16px;display:grid}.brand{align-items:center;gap:11px;min-width:0;display:flex}.brand-mark,.drawer-mark{border-radius:var(--radius);color:#fff;background:linear-gradient(135deg,#22c55e 0%,#06b6d4 48%,#3b82f6 100%);flex:none;place-items:center;width:40px;height:40px;transition:transform .16s,box-shadow .16s;display:grid;box-shadow:0 4px 18px #3b82f673}.brand-mark:hover{transform:translateY(-1px)scale(1.04);box-shadow:0 6px 22px #22c55e47,0 4px 20px #3b82f673}.brand strong{color:#f1f5f9;letter-spacing:.03em;font-size:14px;font-weight:800;display:block}.brand span{color:#94a3b8e6;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.3;display:block;overflow:hidden}.tabbar,.segmented{border-radius:var(--radius);background:#00000059;border:1px solid #ffffff1a;align-items:center;gap:3px;padding:3px;display:inline-flex}.tab-button,.segment{border-radius:var(--radius-sm);color:#cbd5e1b3;background:0 0;justify-content:center;align-items:center;gap:7px;min-height:32px;padding:0 13px;font-size:13px;font-weight:650;transition:background .15s,color .15s,box-shadow .15s;display:inline-flex}.tab-button.is-active{color:#fff;background:var(--orange);box-shadow:0 2px 10px #f9731680}.segmented{background:var(--surface-2);border-color:var(--line)}.segment{color:var(--muted);font-size:12.5px}.segment.is-active{color:var(--text);background:var(--surface);box-shadow:var(--shadow)}.top-actions{justify-content:flex-end;align-items:center;gap:8px;display:flex}.status-pill{color:#cbd5e1d9;cursor:default;background:#ffffff14;border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:7px;min-height:32px;padding:0 12px;font-size:12px;font-weight:700;display:inline-flex}.status-pill span{background:var(--amber);border-radius:999px;width:7px;height:7px;animation:2.4s ease-in-out infinite status-pulse}.status-pill.is-connected span{background:var(--green);box-shadow:0 0 6px #10b981cc}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.45}}.status-dot-wrap{cursor:default;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex}.status-dot-inner{background:#64748b;border-radius:50%;width:10px;height:10px;transition:background .22s,box-shadow .22s;animation:2.4s ease-in-out infinite status-pulse;box-shadow:0 0 0 3px #64748b2e}.status-dot-wrap.is-connected .status-dot-inner{background:#10b981;box-shadow:0 0 0 3px #10b98138,0 0 8px #10b98180}.topbar-icon-btn{border-radius:var(--radius-sm);color:#cbd5e1bf;background:#ffffff12;border:1px solid #ffffff24;justify-content:center;align-items:center;width:32px;height:32px;padding:0;transition:background .14s,color .14s,border-color .14s;display:inline-flex}.topbar-icon-btn:hover{color:#fff;background:#ffffff26;border-color:#ffffff42}.topbar-sep{background:#ffffff1f;flex-shrink:0;width:1px;height:22px}.run-group{border-radius:var(--radius);background:#00000038;border:1px solid #ffffff1a;align-items:center;gap:4px;padding:3px;display:flex}.undo-group{border-radius:var(--radius);background:#ffffff0f;border:1px solid #ffffff1a;align-items:center;gap:4px;padding:3px;display:flex}.run-btn-sm,.save-btn-sm,.stop-btn-sm{border-radius:var(--radius-sm);color:#fff;border:none;justify-content:center;align-items:center;width:34px;height:34px;padding:0;font-size:0;transition:transform .12s,box-shadow .12s,filter .12s;display:inline-flex}.run-btn-sm:hover,.save-btn-sm:hover,.stop-btn-sm:hover{transform:translateY(-1px)}.run-btn-sm{background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 2px 8px #10b98166}.run-btn-sm:hover{box-shadow:0 4px 14px #10b98199}.save-btn-sm{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);box-shadow:0 2px 8px #3b82f666}.save-btn-sm:hover{box-shadow:0 4px 14px #3b82f699}.stop-btn-sm{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 2px 8px #ef444466}.stop-btn-sm:hover{box-shadow:0 4px 14px #ef444499}.run-btn-sm svg.lucide,.save-btn-sm svg.lucide,.stop-btn-sm svg.lucide{width:15px;height:15px}.ai-toggle-btn.is-active-ai{color:#a78bfa;background:#8b5cf638;border-color:#8b5cf680}.top-actions .soft-button{color:#f1f5f9;background:#ffffff1a;border-color:#fff3}.top-actions .soft-button:hover{color:#fff;background:#ffffff2e;border-color:#ffffff52}.workspace-grid{grid-template-columns:minmax(0,1fr);min-height:0;display:grid}.workspace-grid.ai-open{grid-template-columns:minmax(0, 1fr) var(--ai-panel-w)}.main-stage{border-right:1px solid var(--line);min-width:0;min-height:0;position:relative}.panel-view{background:var(--surface);min-height:0;display:none;position:absolute;inset:0}.panel-view.is-active{flex-direction:column;display:flex}#blocklyDiv{width:100%;height:100%;position:relative}#blocklyDiv:after{content:"";pointer-events:none;opacity:0;z-index:8;border-radius:14px;position:absolute;inset:12px}#blocklyDiv.is-ai-clearing:after{background:radial-gradient(circle,#ef444429,#0000 62%);animation:.52s both aiWorkspaceClear}#blocklyDiv.is-ai-placing:after{background:radial-gradient(circle at 50% 45%,#3b82f62e,#0000 64%);animation:.7s both aiWorkspacePlace}.ai-block-pop{transform-box:fill-box;transform-origin:50%;animation:.48s cubic-bezier(.2,.9,.2,1.2) both aiBlockPop}@keyframes aiWorkspaceClear{0%{opacity:0;transform:scale(.98)}35%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.015)}}@keyframes aiWorkspacePlace{0%{opacity:0;transform:scale(.96)}28%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}@keyframes aiBlockPop{0%{opacity:0;filter:drop-shadow(0 0 #3b82f600);transform:scale(.72)translateY(-8px)}55%{opacity:1;filter:drop-shadow(0 10px 18px #3b82f638);transform:scale(1.04)translateY(0)}to{opacity:1;filter:drop-shadow(0 0 #3b82f600);transform:scale(1)}}.side-panel{background:var(--surface-2);flex-direction:column;gap:10px;min-width:0;min-height:0;padding:12px;display:flex;overflow:auto}.run-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);align-items:center;gap:8px;padding:10px;display:flex}.run-button,.save-button,.stop-button{border-radius:var(--radius);color:#fff;letter-spacing:.01em;flex:1;justify-content:center;align-items:center;gap:7px;height:50px;font-size:13.5px;font-weight:800;transition:transform .12s,box-shadow .12s,filter .12s;display:inline-flex}.run-button:hover,.save-button:hover,.stop-button:hover{transform:translateY(-2px)}.run-button{box-shadow:var(--shadow-glow-green);background:linear-gradient(135deg,#10b981 0%,#059669 100%)}.save-button{box-shadow:var(--shadow-glow-blue);background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%)}.stop-button{box-shadow:var(--shadow-glow-red);background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)}.soft-button,.danger-button,.icon-button,.primary-icon{border:1px solid var(--line);border-radius:var(--radius-sm);min-height:33px;color:var(--text);background:var(--surface);justify-content:center;align-items:center;gap:7px;padding:0 11px;font-size:12.5px;font-weight:700;transition:background .13s,border-color .13s,box-shadow .13s;display:inline-flex}.soft-button:hover,.icon-button:hover{border-color:var(--line-strong);background:var(--surface-2);box-shadow:var(--shadow)}.danger-button{width:100%;color:var(--red);border-color:color-mix(in srgb, var(--red) 20%, var(--line))}.danger-button:hover{background:color-mix(in srgb, var(--red) 8%, var(--surface));border-color:color-mix(in srgb, var(--red) 38%, var(--line))}.icon-button,.primary-icon{width:33px;padding:0}.primary-icon{color:#fff;border-color:var(--blue);background:var(--blue)}.mini-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);padding:11px}.mini-heading{justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;display:flex}.mini-heading h2{color:var(--text);letter-spacing:.01em;margin:0;font-size:12.5px;font-weight:750}.mini-heading .section-label{align-items:center;gap:6px;display:flex}.mini-heading .section-label svg{color:var(--orange)}.code-preview,.terminal-output,#codeEditor,.repl-line input{font-family:var(--mono);font-size:12px;line-height:1.6}.code-preview{border:1px solid var(--line);border-radius:var(--radius-sm);height:340px;color:var(--text);background:color-mix(in srgb, var(--surface) 60%, var(--bg));white-space:pre;margin:0;padding:12px;overflow:auto}.tool-row{align-items:center;gap:8px;margin-bottom:8px;display:flex}.tool-row .soft-button,.file-button{flex:1}.file-button{position:relative}.file-button input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;inset:0}.editor-toolbar,.console-toolbar{border-bottom:1px solid var(--line);background:var(--surface);justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;display:flex}.editor-toolbar{background:color-mix(in srgb, var(--terminal) 96%, var(--surface));border-bottom-color:#ffffff0f}.editor-toolbar .soft-button,.editor-toolbar .segment{color:#e6edf3d9;background:#ffffff12;border-color:#ffffff1f}.editor-toolbar .segment.is-active{color:#fff;box-shadow:none;background:#f9731647}.editor-toolbar .soft-button:hover{color:#e6edf3;background:#ffffff21;border-color:#ffffff38}.console-toolbar{background:color-mix(in srgb, var(--terminal) 96%, var(--surface));border-bottom-color:#ffffff0f}.console-toolbar .soft-button{color:#e6edf3d9;background:#ffffff12;border-color:#ffffff1f;font-size:12px}.console-toolbar .soft-button:hover{color:#e6edf3;background:#ffffff21;border-color:#ffffff38}#codeEditor{resize:none;width:100%;min-height:0;color:var(--terminal-text);background:var(--terminal);tab-size:4;border:0;outline:0;flex:1;padding:18px}#codeEditor[readonly]{color:color-mix(in srgb, var(--terminal-text) 80%, var(--muted))}.terminal-pane{min-height:0;color:var(--terminal-text);background:var(--terminal);flex:1;padding:14px 16px 10px;position:relative;overflow:auto}.terminal-pane:before{content:"";pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#0000000a 2px 4px);position:absolute;inset:0}.terminal-output{z-index:1;min-height:calc(100% - 30px);color:inherit;white-space:pre-wrap;word-break:break-all;margin:0;position:relative}.con-host{color:var(--terminal-host);opacity:.8;font-style:italic}.con-error{color:var(--terminal-error);font-weight:600}.con-warn{color:var(--terminal-warn)}.repl-line{z-index:1;color:inherit;border-top:1px solid #ffffff0f;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;margin-top:4px;padding-top:4px;display:grid;position:relative}.repl-prompt{color:var(--terminal-prompt);font-family:var(--mono);font-size:12px;font-weight:800}.repl-line input{width:100%;min-width:0;color:var(--terminal-text);caret-color:var(--terminal-prompt);background:0 0;border:0;outline:0}.repl-line input::placeholder{color:#e6edf340}.drawer-backdrop{z-index:2147483500;pointer-events:none;background:#050a1900;transition:background .2s;position:fixed;inset:0}.drawer-open .drawer-backdrop{pointer-events:auto;background:#050a1985}.app-drawer{z-index:2147483501;pointer-events:none;visibility:hidden;scrollbar-color:#64748b66 transparent;background:linear-gradient(160deg,#192338 0%,#0f1a2e 100%);border-right:1px solid #ffffff12;flex-direction:column;width:min(430px,100vw - 24px);padding:0;transition:transform .22s cubic-bezier(.22,.88,.28,1);display:flex;position:fixed;inset:0 auto 0 0;transform:translate(-105%);box-shadow:24px 0 60px #00000073,1px 0 #ffffff0d}.drawer-open .app-drawer{pointer-events:auto;visibility:visible;transform:translate(0)}.drawer-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.drawer-hero{background:linear-gradient(135deg,#f9731626 0%,#0000 50%);border-bottom:1px solid #ffffff14;padding:16px 18px 14px}.drawer-title{align-items:center;gap:10px;display:flex}.drawer-title strong{color:#f1f5f9;letter-spacing:.02em;font-size:14.5px;font-weight:800;display:block}.drawer-title span{color:#94a3b8cc;font-size:11.5px;line-height:1.3;display:block}.drawer-mark{background:linear-gradient(135deg,#f97316 0%,#ef4444 100%);box-shadow:0 4px 14px #f9731673}.drawer-page{scrollbar-color:#64748b66 transparent;gap:12px;min-height:0;display:none;overflow:auto}.drawer-page.is-active{display:grid}.drawer-screen{height:100%;padding:0 16px 20px}.drawer-route-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.drawer-route{border-radius:var(--radius);color:#f1f5f9;text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;grid-template-columns:auto 1fr;align-items:center;gap:8px;min-height:72px;padding:12px;transition:background .16s,border-color .16s,box-shadow .16s;display:grid}.drawer-route:hover{background:#ffffff1a;border-color:#ffffff2e}.drawer-route svg{color:var(--orange);grid-row:span 2;align-self:center}.drawer-route span{font-size:13px;font-weight:800}.drawer-route small{color:#94a3b8bf;font-size:11px;line-height:1.25}.drawer-route.is-active{border-color:color-mix(in srgb, var(--orange) 55%, transparent);background:#f973161f;box-shadow:inset 0 0 0 1px #f9731633,0 4px 16px #f973161f}.drawer-hero .icon-button,.settings-topbar .icon-button{color:#94a3b8;background:#ffffff14;border-color:#ffffff24}.drawer-hero .icon-button:hover,.settings-topbar .icon-button:hover{color:#f1f5f9;background:#ffffff26}.settings-topbar{z-index:2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0f1a2ee6;border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;gap:12px;margin:0 -16px;padding:12px 16px;display:flex;position:sticky;top:0}.back-button{color:#94a3b8;background:#ffffff12;border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:7px;min-height:32px;padding:0 12px;font-size:12.5px;font-weight:750;transition:background .13s,color .13s;display:inline-flex}.back-button:hover{color:#f1f5f9;background:#ffffff21}.settings-hero{border-radius:var(--radius);background:linear-gradient(135deg,#f973161f 0%,#ef44440f 100%);border:1px solid #f9731640;grid-template-columns:52px 1fr;align-items:center;gap:14px;padding:16px;display:grid}.settings-hero h2{color:#f1f5f9;margin:0 0 3px;font-size:18px;font-weight:800}.settings-hero p{color:#94a3b8d9;margin:0;font-size:12.5px;line-height:1.4}.settings-hero-icon{border-radius:var(--radius);color:#fff;background:linear-gradient(135deg, var(--orange), #ef4444);place-items:center;width:52px;height:52px;display:grid;box-shadow:0 6px 20px #f9731673}.settings-card{border-radius:var(--radius);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0a;border:1px solid #ffffff14;padding:14px}.settings-card h2{color:#94a3b8b3;text-transform:uppercase;letter-spacing:.07em;margin:0 0 4px;font-size:12.5px;font-weight:750}.settings-card p{color:#94a3b8bf;margin:0 0 12px;font-size:12.5px;line-height:1.45}.card-heading{border-bottom:1px solid #ffffff12;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;display:flex}.card-heading svg{color:var(--orange)}.card-heading h2{color:#e2e8f0;text-transform:none;letter-spacing:0;margin:0;font-size:13.5px;font-weight:800}.choice-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.choice-grid.vertical{grid-template-columns:1fr}.choice-grid label,.toggle-line,.range-line{border-radius:var(--radius-sm);color:#e2e8f0;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;gap:4px;padding:10px 12px;font-size:13px;font-weight:700;transition:border-color .15s,background .15s,box-shadow .15s;display:grid}.setting-option{min-height:52px;position:relative}.setting-option:hover{background:#ffffff17;border-color:#fff3}.setting-option:has(input:checked){background:#f973161f;border-color:#f9731699;box-shadow:inset 0 0 0 1px #f9731640,0 4px 14px #f973161a}.theme-option{min-height:88px}.theme-option:after{content:"";border:1px solid #ffffff1a;border-radius:6px;grid-column:1/-1;height:24px}.light-option:after{background:linear-gradient(90deg,#f8fafc 0%,#e2e8f0 50%,#dbeafe 100%)}.dark-option:after{background:linear-gradient(90deg,#0b1120 0%,#141e30 50%,#1e3a5f 100%)}.visual-option span{font-size:13.5px;font-weight:800}.choice-grid label{grid-template-columns:auto 1fr;align-items:start}.choice-grid small{color:#94a3b8b3;grid-column:2;font-size:11px;font-weight:500;line-height:1.35}.toggle-line{grid-template-columns:auto 1fr;align-items:center;gap:12px}.toggle-line input[type=checkbox]{appearance:none;cursor:pointer;background:#ffffff26;border:1px solid #ffffff26;border-radius:24px;flex-shrink:0;order:-1;width:44px;height:24px;transition:background .2s;position:relative}.toggle-line input[type=checkbox]:checked{background:var(--orange);border-color:var(--orange)}.toggle-line input[type=checkbox]:before{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);position:absolute;top:2px;left:2px;box-shadow:0 2px 5px #0000004d}.toggle-line input[type=checkbox]:checked:before{transform:translate(20px)}.range-line{grid-template-columns:1fr;gap:8px;margin:8px 0 0}.range-line span{color:#94a3b8cc;font-size:12px;font-weight:600}.range-line input{width:100%}.range-line input[type=range]{accent-color:var(--orange);cursor:pointer;background:0 0;border:none;height:6px;padding:0}.test-sound-button{color:#fb923c;background:#f973161a;border-color:#f973164d;width:100%;margin-top:4px}.test-sound-button:hover{color:#fdba74;background:#f9731633;border-color:#f9731680}.playground-card p{color:#94a3b8bf}.drawer-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.drawer-actions .soft-button{color:#cbd5e1;background:#ffffff12;border-color:#ffffff1f;flex:28%}.drawer-actions .soft-button:hover{color:#fb923c;background:#f973161f;border-color:#f9731659}.progress-overlay{z-index:2147483502;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#050a1999;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.progress-overlay[hidden]{display:none}.progress-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:min(420px,100%);box-shadow:var(--shadow-lg);padding:22px;animation:.18s cubic-bezier(.34,1.56,.64,1) both progressPop}.progress-icon{border-radius:var(--radius);color:#fff;background:linear-gradient(135deg, var(--blue), #2563eb);width:48px;height:48px;box-shadow:var(--shadow-glow-blue);place-items:center;margin-bottom:14px;animation:.9s ease-in-out infinite progressPulse;display:grid}.progress-overlay[data-state=success] .progress-icon{background:linear-gradient(135deg, var(--green), #059669);box-shadow:var(--shadow-glow-green);animation:none}.progress-overlay[data-state=error] .progress-icon{background:linear-gradient(135deg, var(--red), #dc2626);box-shadow:var(--shadow-glow-red);animation:none}.progress-card h2{margin:0 0 6px;font-size:16px;font-weight:800}.progress-card p{color:var(--muted);margin:0 0 14px;font-size:13px;line-height:1.45}.progress-track{background:var(--surface-2);border-radius:999px;height:8px;overflow:hidden}.progress-track span{border-radius:inherit;background:linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);width:0;height:100%;transition:width .24s;display:block;box-shadow:0 0 8px #3b82f680}.progress-overlay[data-state=error] .progress-track span{background:var(--red);box-shadow:0 0 8px #ef444480}.progress-overlay[data-state=success] .progress-track span{background:linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);box-shadow:0 0 8px #10b98180}.blocklyTreeRow{border-radius:6px;margin:1px 6px}.blocklyToolboxDiv{border-right:1px solid var(--line);background:color-mix(in srgb, var(--surface) 70%, var(--surface-2))}.blocklyFlyoutBackground{fill:var(--surface);fill-opacity:.97}.blocklySvg{background-color:var(--surface)}.drawer-open .blocklyWidgetDiv,.drawer-open .blocklyDropDownDiv,.drawer-open .blocklyTooltipDiv,.drawer-open .blocklyMenu,.drawer-open .blocklyHtmlInput{z-index:1!important;pointer-events:none!important}.drawer-open .blocklyToolboxDiv,.drawer-open .blocklyFlyout,.drawer-open .blocklyFlyoutScrollbar,.drawer-open .blocklyScrollbarHandle{pointer-events:none!important}html[data-theme=dark] .blocklyMainBackground{stroke:var(--line);fill:#0a111e}html[data-theme=dark] .blocklyText,html[data-theme=dark] .blocklyTreeLabel{fill:#eef4ff;color:#eef4ff}html[data-theme=dark] .blocklyToolboxDiv{border-right-color:var(--line);background:linear-gradient(#111d30,#0a111e)}html[data-theme=dark] .blocklyFlyoutBackground{fill:#131f33}html[data-theme=dark] .blocklyTreeRow:hover{background-color:#f973161f}html[data-theme=dark] .blocklyScrollbarHandle{fill:#4b5e7a}html[data-theme=dark] .blocklySvg{background-color:#0a111e}html[data-theme=dark] .app-shell{background:var(--bg)}html[data-theme=dark] .side-panel{background:radial-gradient(circle at 50% 0,#f973160f,#0000 30%),#0d1626}html[data-theme=dark] .mini-panel,html[data-theme=dark] .run-card{border-color:var(--line);box-shadow:inset 0 1px 0 #ffffff0a, var(--shadow);background:linear-gradient(#17243a,#111d2e)}html[data-theme=dark] .code-preview,html[data-theme=dark] #codeEditor{color:var(--text);background:#080f1a}html[data-theme=dark] .segmented{border-color:var(--line);background:#0a111ed9}html[data-theme=dark] .segment.is-active{color:var(--text);background:#1a2744}html[data-theme=dark] .soft-button,html[data-theme=dark] .icon-button,html[data-theme=dark] .back-button{border-color:var(--line);background:#17243a}html[data-theme=dark] .soft-button:hover,html[data-theme=dark] .icon-button:hover{border-color:var(--line-strong);background:#1d2e48}html[data-theme=dark] .editor-toolbar{border-bottom-color:var(--line);background:#0d1626}.app-drawer::-webkit-scrollbar{width:7px}.drawer-page::-webkit-scrollbar{width:7px}.side-panel::-webkit-scrollbar{width:7px}.terminal-pane::-webkit-scrollbar{width:7px}.code-preview::-webkit-scrollbar{width:7px}.app-drawer::-webkit-scrollbar-track{background:0 0}.drawer-page::-webkit-scrollbar-track{background:0 0}.side-panel::-webkit-scrollbar-track{background:0 0}.terminal-pane::-webkit-scrollbar-track{background:0 0}.code-preview::-webkit-scrollbar-track{background:0 0}.app-drawer::-webkit-scrollbar-thumb{background:#64748b66 padding-box padding-box;border:2px solid #0000;border-radius:999px}.drawer-page::-webkit-scrollbar-thumb{background:#64748b66 padding-box padding-box;border:2px solid #0000;border-radius:999px}.side-panel::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--muted) 40%, transparent);border-radius:999px}.code-preview::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--muted) 40%, transparent);border-radius:999px}.terminal-pane::-webkit-scrollbar-thumb{background:#64748b80;border-radius:999px}html[data-visual-mode=simple] *{transition-duration:0s!important;animation-duration:0s!important}html[data-visual-mode=simple] .topbar{-webkit-backdrop-filter:none;backdrop-filter:none}html[data-visual-mode=simple] .run-card,html[data-visual-mode=simple] .mini-panel,html[data-visual-mode=simple] .settings-card,html[data-visual-mode=simple] .progress-card{box-shadow:none}html[data-visual-mode=simple] .run-button,html[data-visual-mode=simple] .save-button,html[data-visual-mode=simple] .stop-button{box-shadow:none;border-radius:var(--radius-sm)}html[data-visual-mode=simple] .terminal-pane:before{display:none}html[data-visual-mode=detailed] .blocklyPath{filter:drop-shadow(0 3px #0f172a2e)drop-shadow(0 8px 12px #0f172a1f)}html[data-visual-mode=detailed] .blocklySelected>.blocklyPath{filter:drop-shadow(0 0 7px #f97316b3)}html[data-visual-mode=detailed] .mini-panel,html[data-visual-mode=detailed] .run-card{border-color:color-mix(in srgb, var(--blue) 25%, var(--line))}html[data-visual-mode=detailed] .run-button:hover{box-shadow:0 6px 26px #10b98199}html[data-visual-mode=detailed] .save-button:hover{box-shadow:0 6px 26px #3b82f699}html[data-visual-mode=detailed] .stop-button:hover{box-shadow:0 6px 26px #ef444499}svg.lucide{stroke-width:2.3px;flex-shrink:0;width:15px;height:15px}.run-button svg.lucide,.save-button svg.lucide,.stop-button svg.lucide{width:17px;height:17px}.settings-hero-icon svg.lucide{width:22px;height:22px}@keyframes progressPop{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes progressPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.ai-panel{border-left:1px solid var(--line);background:#101826;flex-direction:column;min-width:0;min-height:0;display:none;position:relative;overflow:hidden}.workspace-grid.ai-open .ai-panel{display:flex}.ai-resize-handle{cursor:ew-resize;z-index:10;background:0 0;width:5px;transition:background .12s;position:absolute;top:0;bottom:0;left:0}.ai-resize-handle:hover{background:#8b5cf640}.ai-header{background:linear-gradient(90deg,#8b5cf61a 0%,#0000 70%);border-bottom:1px solid #ffffff12;flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.ai-header-title{align-items:center;gap:9px;display:flex}.ai-header-actions{align-items:center;gap:6px;display:flex}.ai-avatar{color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%);border-radius:8px;flex-shrink:0;place-items:center;width:30px;height:30px;display:grid;box-shadow:0 3px 10px #7c3aed66}.ai-avatar svg.lucide{width:15px;height:15px}.ai-header-title strong{color:#f1f5f9;font-size:13px;font-weight:800;display:block}.ai-header-title small{color:#94a3b8b3;font-size:10.5px;display:block}.ai-header .icon-button{color:#64748b;background:#ffffff12;border-color:#ffffff1a}.ai-header .icon-button:hover{color:#f1f5f9;background:#ffffff21}.ai-messages{scrollbar-color:#64748b4d transparent;scrollbar-width:thin;flex-direction:column;flex:1;gap:12px;min-height:0;padding:12px 12px 8px;display:flex;overflow-y:auto}.ai-messages::-webkit-scrollbar{width:5px}.ai-messages::-webkit-scrollbar-track{background:0 0}.ai-messages::-webkit-scrollbar-thumb{background:#64748b59;border-radius:999px}.ai-welcome{text-align:center;padding:20px 8px 8px;animation:.3s both fadeIn}.ai-welcome-icon{color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%);border-radius:14px;place-items:center;width:52px;height:52px;margin-bottom:12px;display:inline-grid;box-shadow:0 8px 24px #7c3aed66}.ai-welcome-icon svg.lucide{width:24px;height:24px}.ai-welcome h3{color:#f1f5f9;margin:0 0 6px;font-size:15px;font-weight:800}.ai-welcome p{color:#94a3b8cc;margin:0 0 14px;font-size:12.5px;line-height:1.55}.ai-welcome-chips{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.ai-chip{color:#a78bfa;cursor:pointer;background:#7c3aed1a;border:1px solid #8b5cf659;border-radius:999px;align-items:center;padding:5px 11px;font-size:11.5px;font-weight:700;transition:background .14s,border-color .14s,color .14s;display:inline-flex}.ai-chip:hover{color:#c4b5fd;background:#7c3aed38;border-color:#8b5cf699}.ai-message{flex-direction:column;gap:4px;animation:.2s both fadeIn;display:flex;position:relative}.ai-user .ai-msg-content{align-self:flex-end;max-width:88%}.ai-user .ai-text-block{color:#bfdbfe;word-break:break-word;background:#3b82f629;border:1px solid #3b82f638;border-radius:12px 12px 3px;padding:8px 12px;font-size:13px;line-height:1.5}.ai-assistant .ai-msg-content{max-width:100%}.ai-assistant .ai-text-block{color:#e2e8f0e6;word-break:break-word;padding:2px 0;font-size:13px;line-height:1.6}.ai-message.is-streaming .ai-text-block:last-child{background:linear-gradient(90deg,#e2e8f0f5 0%,#93c5fdf5 78%,#e2e8f033 100%) 0 0/180% 100%;color:#0000;-webkit-background-clip:text;background-clip:text;animation:1.8s ease-in-out infinite aiTextGlow}@keyframes aiTextGlow{0%{background-position:100% 0}to{background-position:0 0}}.ai-system-text{color:#94a3b8b3;text-align:center;background:#ffffff0a;border:1px solid #ffffff0f;border-radius:6px;padding:5px 10px;font-size:11.5px}.ai-thinking{align-items:center;gap:4px;padding:10px 4px;display:flex}.ai-thinking span{background:#7c3aed;border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite ai-bounce;display:inline-block}.ai-thinking span:first-child{animation-delay:0s}.ai-thinking span:nth-child(2){animation-delay:.2s}.ai-thinking span:nth-child(3){animation-delay:.4s}@keyframes ai-bounce{0%,60%,to{opacity:.5;transform:translateY(0)}30%{opacity:1;transform:translateY(-6px)}}.ai-code-block{background:#0d1117;border:1px solid #ffffff14;border-radius:8px;margin:6px 0;overflow:hidden}.ai-code-header{background:#ffffff08;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:5px 10px;display:flex}.ai-code-lang{font-family:var(--mono);color:#94a3b899;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;font-weight:700}.ai-code-pre{font-family:var(--mono);color:#e6edf3;white-space:pre;margin:0;padding:10px 12px;font-size:12px;line-height:1.6;overflow-x:auto}.ai-code-pre code{font:inherit;color:inherit}.ai-code-actions{background:#ffffff05;border-top:1px solid #ffffff0d;gap:6px;padding:6px 10px;display:flex}.ai-action-btn{border:1px solid;border-radius:5px;align-items:center;gap:5px;padding:4px 10px;font-size:11.5px;font-weight:700;transition:background .13s,border-color .13s;display:inline-flex}.ai-run-btn{color:#6ee7b7;background:#10b98114;border-color:#10b9814d}.ai-run-btn:hover{background:#10b9812e;border-color:#10b9818c}.ai-load-btn{color:#93c5fd;background:#3b82f614;border-color:#3b82f64d}.ai-load-btn:hover{background:#3b82f62e;border-color:#3b82f68c}.ai-inline-code{font-family:var(--mono);color:#fbbf24;background:#fbbf241a;border:1px solid #fbbf2426;border-radius:4px;padding:1px 5px;font-size:11.5px}.ai-undo-btn{border:1px solid color-mix(in srgb, var(--blue) 34%, var(--line));width:27px;height:27px;color:var(--blue);background:color-mix(in srgb, var(--surface) 92%, var(--blue));box-shadow:var(--shadow);opacity:0;border-radius:999px;place-items:center;transition:opacity .14s,transform .14s,background .14s;display:inline-grid;position:absolute;bottom:-15px;right:2px;transform:translateY(3px)}.ai-message:hover .ai-undo-btn,.ai-undo-btn:focus-visible{opacity:1;transform:translateY(0)}.ai-undo-btn:hover{background:color-mix(in srgb, var(--blue) 12%, var(--surface))}.ai-undo-btn.is-used{opacity:.45;color:var(--muted);border-color:var(--line)}.ai-composer{background:#0003;border-top:1px solid #ffffff12;flex-shrink:0;align-items:flex-end;gap:6px;padding:8px 10px;display:flex;position:relative}.ai-composer textarea{resize:none;color:#e2e8f0;scrollbar-width:thin;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;outline:none;flex:1;min-width:0;padding:8px 10px;font-size:12.5px;line-height:1.5;transition:border-color .16s,background .16s}.ai-composer textarea::placeholder{color:#94a3b866}.ai-composer textarea:focus{background:#ffffff17;border-color:#8b5cf680}.ai-send-btn{color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%);border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;padding:0;transition:box-shadow .13s,transform .13s;display:inline-flex;box-shadow:0 2px 8px #7c3aed66}.ai-send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px #7c3aed99}.ai-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.ai-send-btn svg.lucide{width:14px;height:14px}.input-field{margin-bottom:10px}.input-field label{color:#94a3b8bf;letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px;font-size:11.5px;font-weight:700;display:block}.input-field input{border-radius:var(--radius-sm);color:#e2e8f0;background:#ffffff0f;border:1px solid #ffffff1a;outline:none;width:100%;padding:7px 10px;font-size:13px;transition:border-color .15s,background .15s}.input-field input::placeholder{color:#94a3b859}.input-field input:focus{background:#ffffff17;border-color:#f9731680}.settings-hint{color:#94a3b899;margin:6px 0 0;font-size:11.5px;line-height:1.45}.settings-hint strong{color:#cbd5e1cc}.board-info-row{border-radius:var(--radius-sm);background:#ffffff0a;border:1px solid #ffffff12;align-items:center;gap:12px;padding:10px;display:flex}.board-info-icon{width:38px;height:38px;color:var(--orange);background:#f973161f;border-radius:8px;flex-shrink:0;place-items:center;display:grid}.board-info-name{color:#e2e8f0;font-size:13px;font-weight:800}.board-info-sub{color:#94a3b8a6;margin-top:2px;font-size:11px}.settings-section-label{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;padding:18px 20px 6px;font-size:10px;font-weight:800}.theme-toggle-row,.theme-grid{gap:10px;display:flex}.theme-pill,.theme-option,.visual-option,.mode-pill{border:1.5px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb, var(--surface) 84%, var(--surface-2));transition:border-color .16s,background .16s,box-shadow .16s,transform .16s}.theme-pill:hover,.theme-option:hover,.visual-option:hover,.mode-pill:hover{border-color:color-mix(in srgb, var(--blue) 42%, var(--line));transform:translateY(-1px)}:is(.theme-pill:has(input:checked),.theme-option:has(input:checked),.visual-option:has(input:checked),.mode-pill:has(input:checked)){border-color:var(--blue);background:color-mix(in srgb, var(--blue) 9%, var(--surface));box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent)}.visual-mode-pills{flex-direction:column;gap:8px;display:flex}.mode-pill{cursor:pointer;align-items:center;gap:12px;padding:12px 14px;display:flex}.mode-pill input,.theme-pill input{display:none}.mode-pill-icon,.theme-pill-icon{width:32px;height:32px;color:var(--muted);background:var(--line);border-radius:8px;flex-shrink:0;place-items:center;display:grid}.mode-pill-body strong{font-size:13px;display:block}.mode-pill-body small{color:var(--muted);font-size:11px}.toggle-row{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.toggle-switch{flex-shrink:0;position:relative}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-track{background:var(--line-strong);cursor:pointer;border-radius:999px;width:44px;height:24px;display:block;position:relative}.toggle-thumb{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .18s;position:absolute;top:3px;left:3px;box-shadow:0 1px 5px #00000038}.toggle-switch input:checked+.toggle-track{background:var(--blue)}.toggle-switch input:checked+.toggle-track .toggle-thumb{transform:translate(20px)}.slider-row{color:var(--muted);align-items:center;gap:10px;padding:6px 0 12px;display:flex}.slider-row input{accent-color:var(--blue);flex:1}.ai-model-hint{border:1px solid color-mix(in srgb, var(--blue) 22%, var(--line));border-radius:var(--radius-sm);color:var(--muted);background:color-mix(in srgb, var(--blue) 8%, var(--surface-2));gap:8px;margin-bottom:12px;padding:10px 12px;font-size:11.5px;line-height:1.45;display:flex}.ai-model-hint code{background:var(--line);color:var(--text);font-family:var(--mono);border-radius:4px;padding:1px 5px;font-size:10.5px}.input-with-icon{display:flex;position:relative}.input-with-icon input{padding-right:38px}.input-reveal-btn{width:38px;color:var(--muted);background:0 0;place-items:center;display:grid;position:absolute;top:0;bottom:0;right:0}.board-badge{border:1px solid color-mix(in srgb, var(--green) 22%, var(--line));border-radius:var(--radius);background:color-mix(in srgb, var(--green) 8%, var(--surface-2));align-items:center;gap:12px;padding:11px 14px;display:flex}.board-badge-icon{color:#fff;background:var(--green);border-radius:10px;place-items:center;width:36px;height:36px;display:grid}.board-badge-info{flex:1}.board-badge-info strong,.board-badge-info span{display:block}.board-badge-info span{color:var(--muted);margin-top:2px;font-size:11px}.board-badge-dot{background:var(--green);width:10px;height:10px;box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 24%, transparent);border-radius:50%}.settings-bottom-space{height:28px}#blocklyDiv{contain:strict;will-change:transform}html[data-visual-mode=simple] *{transition:none!important;animation:none!important}html[data-visual-mode=detailed] .blocklyBlockCanvas{filter:drop-shadow(0 2px 7px #0000001a)}html[data-visual-mode=detailed] .blocklyDraggable:not(.blocklyDragging){will-change:transform;filter:drop-shadow(0 1px 4px #0000001f)}html[data-visual-mode=detailed] .blocklyDraggable:hover{filter:drop-shadow(0 3px 12px #3b82f640)}html[data-visual-mode=detailed] .blocklySelected>.blocklyPath{stroke-width:2.5px!important}.progress-track-wrap{align-items:center;gap:10px;display:flex}.progress-pct{min-width:32px;color:var(--muted);text-align:right;font-size:11px;font-weight:800}.settings-kicker{color:#e2e8f0d1;letter-spacing:.08em;align-items:center;gap:8px;font-size:11px;font-weight:800;display:inline-flex}.settings-hint a{color:var(--blue);text-decoration:none}.settings-hint a:hover{text-decoration:underline}.mp-overlay{z-index:2147483600;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#050a1994;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.mp-overlay[hidden]{display:none}.mp-card{border:1px solid var(--line-strong);background:var(--surface);width:min(430px,100%);box-shadow:var(--shadow-lg);border-radius:18px;padding:26px}.mp-icon{width:52px;height:52px;color:var(--amber);background:color-mix(in srgb, var(--amber) 14%, var(--surface-2));border-radius:14px;place-items:center;margin-bottom:16px;display:grid}.mp-card h2{margin:0 0 8px;font-size:18px}.mp-card p{color:var(--muted);margin:0;font-size:13px;line-height:1.55}.mp-actions{justify-content:flex-end;gap:10px;margin-top:22px;display:flex}.mp-install-button{background:var(--blue);border-color:var(--blue);gap:8px;width:auto;min-height:36px;padding:0 14px}@media (width<=900px){.topbar{grid-template-columns:1fr;gap:10px;height:auto;padding:10px 14px}.ai-messages.is-clearing .ai-message{animation:.22s both aiMessageClear}.ai-welcome.is-returning{animation:.32s both fadeIn}@keyframes aiMessageClear{to{opacity:0;filter:blur(3px);transform:translateY(6px)scale(.985)}}.workspace-grid.ai-open{grid-template-rows:minmax(0,1fr) 340px;grid-template-columns:1fr}.workspace-grid.ai-open .ai-panel{border-top:1px solid #ffffff14;border-left:none}.ai-resize-handle{display:none}}@media (width<=720px){.app-shell{grid-template-rows:auto minmax(0,1fr)}.tabbar,.top-actions,.editor-toolbar,.console-toolbar{flex-wrap:wrap}.tab-button{flex:1}}.app-drawer .theme-pill,.app-drawer .theme-option,.app-drawer .visual-option,.app-drawer .mode-pill{color:#e5edf8;background:#ffffff0b;border-color:#94a3b82e}.app-drawer .theme-pill:hover,.app-drawer .theme-option:hover,.app-drawer .visual-option:hover,.app-drawer .mode-pill:hover{background:#ffffff13;border-color:#60a5fa73}:is(.app-drawer .theme-pill:has(input:checked),.app-drawer .theme-option:has(input:checked),.app-drawer .visual-option:has(input:checked),.app-drawer .mode-pill:has(input:checked)){color:#f8fafc;background:linear-gradient(135deg,#3b82f633,#10b9811a);border-color:#60a5fad1;box-shadow:inset 0 0 0 1px #93c5fd47,0 0 0 3px #3b82f629}:is(.app-drawer .theme-pill:has(input:checked) span,.app-drawer .theme-option:has(input:checked) span,.app-drawer .visual-option:has(input:checked) span,.app-drawer .mode-pill:has(input:checked) span,.app-drawer .mode-pill:has(input:checked) strong){color:#fff}:is(.app-drawer .theme-pill:has(input:checked) small,.app-drawer .theme-option:has(input:checked) small,.app-drawer .visual-option:has(input:checked) small,.app-drawer .mode-pill:has(input:checked) small){color:#cbd5e1d6}.app-drawer .visual-option input,.app-drawer .mode-pill input{accent-color:#22c55e}.editor-toolbar .segmented{background:#ffffff0e;border-color:#94a3b829}.editor-toolbar .segment{color:#cbd5e1b8;box-shadow:none;background:0 0;border:0}.editor-toolbar .segment:hover{color:#eef5ff;background:#ffffff13}.editor-toolbar .segment.is-active{color:#f8fbff;background:linear-gradient(135deg,#3b82f661,#22c55e2e);box-shadow:inset 0 0 0 1px #93c5fd42}