@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg: #f2f4f8;--surface: #ffffff;--blue: #4c97ff;--blue-dark: #3373cc;--blue-darker: #2b64b3;--orange: #ff8c1a;--orange-dark: #e67e17;--text: #2b2f3a;--muted: #6b7280;--border: #d9dee8;--ok: #1f9d55;--error: #d64545;--busy: #3373cc;--topbar-h: 48px;--status-h: 28px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono: "JetBrains Mono", Consolas, Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:var(--font);color:var(--text);background:var(--bg);overflow:hidden;-webkit-text-size-adjust:100%;overscroll-behavior:none}body{display:flex;flex-direction:column;height:100dvh}button{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.topbar{display:flex;align-items:stretch;padding:var(--safe-top) 0 0;height:calc(var(--topbar-h) + var(--safe-top));background:var(--blue);color:#fff;flex-shrink:0;position:relative;z-index:20;font-size:14px}.brand{display:flex;align-items:center;gap:8px;padding:0 16px;font-weight:700;font-size:15px;white-space:nowrap;border-right:1px solid rgba(0,0,0,.15)}.menu{display:flex;align-items:stretch}.menu-group{position:relative;display:flex}.menu-btn{display:flex;align-items:center;padding:0 14px;border:none;background:transparent;color:#fff;font-weight:500;cursor:pointer;white-space:nowrap}.menu-btn:hover,.menu-btn[aria-expanded=true],.menu-btn.active{background:#00000026}.dropdown{position:absolute;top:100%;left:0;min-width:220px;padding:6px 0;background:var(--blue);border:1px solid rgba(0,0,0,.15);border-top:none;border-radius:0 0 6px 6px;box-shadow:0 6px 16px #0003;z-index:30}.dropdown[hidden]{display:none}.dropdown>button{display:block;width:100%;padding:9px 16px;border:none;background:transparent;color:#fff;text-align:left;cursor:pointer}.dropdown>button:hover{background:#00000026}.dropdown.panel{width:300px;padding:14px 16px;display:grid;gap:10px}.dropdown.panel[hidden]{display:none}.field{display:flex;flex-direction:column;gap:4px}.field>span{font-size:12px;font-weight:600}.field input{height:34px;width:100%;border:1px solid var(--blue-dark);border-radius:4px;padding:0 10px;font-size:14px;font-family:var(--font);background:#fff;color:var(--text);outline:none}.field input:focus{border-color:#fff}.title-input{align-self:center;margin-left:8px;height:32px;width:260px;max-width:40vw;border:1px solid var(--blue-dark);border-radius:4px;padding:0 10px;font-size:14px;font-weight:600;font-family:var(--font);background:#fffffff2;color:var(--text);outline:none}.title-input:focus{border-color:#fff}.build-btn{align-self:center;margin:0 12px 0 auto;height:32px;padding:0 16px;border:none;border-radius:4px;background:var(--orange);color:#fff;font-weight:600;cursor:pointer;white-space:nowrap}.build-btn:hover{background:var(--orange-dark)}.build-btn:disabled{opacity:.7;cursor:wait}.workspace{flex:1;display:flex;min-height:0;position:relative}#blockly{flex:1;min-width:0;touch-action:none}.blocklySvg{background:var(--bg)!important}.blocklyMainBackground{stroke:none!important}.blocklyToolbox{background:var(--surface)!important;border-right:1px solid var(--border);padding:8px 6px!important}.blocklyToolboxCategoryContainer{margin:0 0 2px!important}.blocklyToolboxCategory{height:auto!important;line-height:1.2!important;margin:0!important;padding:8px 10px 8px 8px!important;border-radius:4px;border-left-width:6px!important;display:flex;align-items:center;cursor:pointer}.blocklyToolboxCategory:not(.blocklyToolboxSelected):hover{background-color:#eef2f8!important}.blocklyToolboxCategoryIcon{display:none!important}.blocklyToolboxCategoryLabel{font:600 13px/1.2 var(--font)!important;color:var(--text)!important;padding:0!important;cursor:pointer!important}.blocklyToolboxSelected .blocklyToolboxCategoryLabel{color:#fff!important}.blocklyFlyoutBackground{fill:#f7f9fc!important;fill-opacity:1!important}.blocklyToolbox .blocklyTreeSeparator{display:none}.blocklyScrollbarHandle{fill:#c7cdd9!important}.blocklyWidgetDiv .blocklyMenu,.blocklyDropDownDiv{border-radius:4px!important;font-family:var(--font)!important}.blocklyTooltipDiv{border-radius:4px!important;background:#2b2f3a!important;color:#fff!important;font-family:var(--font)!important;padding:6px 10px!important;opacity:.96!important}.blocklyToolbox[layout=h]{border-right:none;border-top:1px solid var(--border);padding:6px 8px!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap;scrollbar-width:none}.blocklyToolbox[layout=h]::-webkit-scrollbar{display:none}.blocklyToolbox[layout=h] .blocklyToolboxCategoryGroup{flex-direction:row;flex-wrap:nowrap}.blocklyToolbox[layout=h] .blocklyToolboxCategoryContainer{margin:0 6px 0 0!important}.blocklyToolbox[layout=h] .blocklyToolboxCategory{padding:7px 12px 7px 8px!important;background:#f2f4f8}.code-panel{display:none;width:min(500px,45vw);flex-direction:column;border-left:1px solid var(--border);background:#1e2230;color:#e6e9f2}body.code-open .code-panel{display:flex}.code-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:600;font-size:13px;font-family:var(--mono);color:#b8bfd3}.code-actions{display:flex;gap:6px}.code-actions button{height:28px;padding:0 12px;border:none;border-radius:4px;background:#ffffff1f;color:#fff;font-weight:600;font-size:13px;cursor:pointer}.code-actions button:hover{background:#fff3}.errors{padding:10px 12px;background:#d6454526;color:#ffb3b3;font-size:12px;max-height:200px;overflow:auto;border-bottom:1px solid rgba(214,69,69,.3);font-family:var(--mono)}.error-line+.error-line{margin-top:4px}#code{flex:1;margin:0;padding:12px;overflow:auto;font:12px/1.55 var(--mono);white-space:pre;-webkit-overflow-scrolling:touch;tab-size:4}#code .k{color:#c792ea}#code .s{color:#c3e88d}#code .n{color:#f78c6c}#code .c{color:#7a829a;font-style:italic}#code .a{color:#ffcb6b}#code .t{color:#82aaff}.statusbar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:calc(var(--status-h) + var(--safe-bottom));padding:0 12px var(--safe-bottom);font-size:12px;color:var(--muted);border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}.status,.backend,.disclaimer{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status{flex:1}.counter{font-weight:600;color:var(--blue-dark);white-space:nowrap}.counter:empty{display:none}.disclaimer{color:#9aa3b5}@media(max-width:760px){.disclaimer{display:none}}.backend:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#cbd5e1;vertical-align:middle}.backend.ok:before{background:var(--ok)}.backend.error:before{background:var(--error)}.status.ok{color:var(--ok)}.status.error{color:var(--error)}.status.busy{color:var(--busy)}.toast{position:fixed;left:50%;bottom:calc(var(--status-h) + var(--safe-bottom) + 16px);transform:translate(-50%) translateY(8px);max-width:calc(100vw - 32px);padding:10px 16px;border-radius:4px;background:#2b2f3a;color:#fff;font-size:14px;z-index:50;box-shadow:0 4px 12px #00000040;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.toast.error{background:var(--error)}.toast.ok{background:var(--ok)}.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:#00000080}.modal[hidden]{display:none}.modal-card{width:min(440px,100%);border-radius:6px;background:var(--surface);box-shadow:0 8px 24px #0000004d;overflow:hidden}.modal-head{padding:16px 20px;background:var(--blue);color:#fff;transition:background .3s}.modal.success .modal-head{background:var(--ok)}.modal.error .modal-head{background:var(--error)}.modal-head h2{margin:0 0 2px;font-size:16px;font-weight:700}.modal-subtitle{margin:0;font-size:12px;font-family:var(--mono);opacity:.9}.modal-body{padding:20px}.progress{height:10px;border-radius:5px;background:#e6e9f0;overflow:hidden}.progress-bar{height:100%;width:0;border-radius:5px;background:var(--blue);transition:width .35s ease-out;position:relative}.progress-bar:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.25) 0 10px,transparent 10px 20px);animation:stripes .8s linear infinite}.modal.success .progress-bar{background:var(--ok)}.modal.success .progress-bar:after,.modal.error .progress-bar:after{display:none}.modal.error .progress-bar{background:var(--error)}.progress-percent{margin:6px 0 14px;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}.steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:#9aa3b5}.steps .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;font-size:10px;flex-shrink:0}.steps li.active{color:var(--text);font-weight:600}.steps li.active .dot{border-color:var(--blue);border-right-color:transparent;animation:spin .8s linear infinite}.steps li.done{color:var(--text)}.steps li.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}.steps li.done .dot:before{content:"✓"}.steps li.failed .dot{background:var(--error);border-color:var(--error);color:#fff}.steps li.failed .dot:before{content:"✕"}.modal-errors{margin-top:14px;padding:10px 12px;border-radius:4px;background:#fdecec;color:#8a1f1f;font:12px/1.5 var(--mono);max-height:160px;overflow:auto}.modal-hint{margin-top:14px;padding:10px 12px;border-radius:4px;background:#fff6e0;color:#6b4d00;font-size:12px;line-height:1.5}.modal-hint code{font-family:var(--mono);background:#0000000f;padding:0 4px;border-radius:3px}.modal-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:18px}.modal-actions button{height:36px;padding:0 16px;border-radius:4px;border:none;font-weight:600;font-size:14px;cursor:pointer}.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-dark)}.btn-secondary{background:#e6e9f0;color:var(--text)}.btn-secondary:hover{background:#d9dee8}@keyframes spin{to{transform:rotate(360deg)}}@keyframes stripes{to{background-position:28px 0}}@media(max-width:760px){.brand{padding:0 10px;font-size:14px}.menu-btn{padding:0 10px}.title-input{width:auto;flex:1;min-width:80px;max-width:none;margin-left:6px}.build-btn{margin:0 8px;padding:0 12px}.dropdown.panel{width:calc(100vw - 16px);left:-110px}.code-panel{position:absolute;inset:0;width:100%;border-left:none;z-index:10}.statusbar,#code{font-size:11px}}@media(max-width:480px){.brand,#btn-code{display:none}}
