:root{--color-bg: #1a1d23;--color-grid: #272b33;--color-grid-strong: #323742}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--color-bg);font-family:system-ui,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none}#editor{display:block;width:100vw;height:100vh;touch-action:none;-webkit-touch-callout:none;cursor:grab}#editor:active{cursor:grabbing}#left-dock{position:fixed;top:12px;left:12px;display:flex;flex-direction:column;align-items:stretch;gap:12px;width:140px;max-height:calc(100vh - 24px)}#palette{display:flex;flex-direction:column;min-height:0;gap:8px;padding:8px;background:#272b33e6;border:1px solid #3a3f4a;border-radius:10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#palette-list{display:flex;flex-direction:column;gap:8px;min-height:0;max-height:calc(100vh - 220px);overflow-y:auto;scrollbar-width:none}#palette-list::-webkit-scrollbar{display:none}#palette button{width:100%;font:600 13px system-ui,sans-serif;line-height:1.3;color:#d8dee9;background:#353b45;border:1px solid #4a525e;border-radius:6px;padding:8px 12px;cursor:pointer;min-width:108px;min-height:40px;white-space:normal;overflow-wrap:anywhere;touch-action:none}#palette button:hover{background:#3f4651}#palette button:active{background:#2d333b}#palette button.logic-btn,#palette button.chip-btn{color:#c8d3f5;border-color:#4a5680;background:#3a4360}#palette button.logic-btn:hover,#palette button.chip-btn:hover{background:#444f70}#palette button.logic-btn,#palette button.chip-btn{display:flex;align-items:center;gap:4px;padding-left:6px;text-align:left}.palette-label{flex:1 1 auto;min-width:0}.drag-handle{flex:none;display:inline-flex;align-items:center;color:#8b93a7;cursor:grab;touch-action:none}.drag-handle:active{cursor:grabbing}.drag-handle .icon svg{width:16px;height:16px}#palette-list.reordering-active button{transition:transform .15s ease}#palette-list button.reordering{transition:none;position:relative;z-index:5;border-color:#e0af68;box-shadow:0 8px 22px #00000073;cursor:grabbing}#palette button.chip-btn.selected{border-color:#e0af68;border-width:2px}.palette-scroll{min-height:24px!important;padding:2px!important;font-size:11px!important;color:#aeb6c2!important;opacity:.85}.palette-scroll[hidden]{display:none}#make{display:flex;align-items:center;justify-content:center;gap:8px;font:700 14px system-ui,sans-serif!important;color:#1a1d23!important;background:#9ece6a!important;border:none!important;border-radius:8px;padding:10px 12px;min-height:44px;cursor:pointer}#make .icon svg{width:18px;height:18px}#make:hover{background:#aede7a!important}#make[hidden]{display:none}#edit-bar{position:fixed;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;background:#272b33e6;border:1px solid #5a4a32;border-radius:10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:16}#edit-bar[hidden]{display:none}#edit-label{font:600 13px system-ui,sans-serif;color:#e0af68}#edit-bar button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;cursor:pointer}#edit-bar button .icon svg{width:20px;height:20px}#finish-edit{color:#1a1d23;background:#9ece6a}#finish-edit:hover{background:#aede7a}#cancel-edit{color:#d8dee9;background:#353b45}#cancel-edit:hover{background:#3f4651}.icon{display:inline-flex;align-items:center;justify-content:center;flex:none}.icon svg{display:block;width:1.25em;height:1.25em;stroke:currentColor}#menu-btn{position:fixed;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:1;color:#d8dee9;background:#272b33e6;border:1px solid #3a3f4a;border-radius:10px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:17}#menu-btn .icon svg{width:24px;height:24px}#menu-btn:hover{background:#3f4651}#commands-menu{position:fixed;top:64px;right:12px;display:flex;flex-direction:column;gap:4px;width:180px;padding:8px;background:#272b33f5;border:1px solid #3a3f4a;border-radius:10px;box-shadow:0 8px 28px #00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:17}#commands-menu[hidden]{display:none}.menu-title{padding:4px 8px;font:700 11px system-ui,sans-serif;text-transform:uppercase;letter-spacing:1px;color:#aeb6c2}.menu-item{display:flex;align-items:center;gap:10px;font:600 13px system-ui,sans-serif;text-align:left;color:#d8dee9;background:#353b45;border:1px solid #4a525e;border-radius:6px;padding:6px 12px;min-height:34px;cursor:pointer}.menu-item .icon svg{width:22px;height:22px}.menu-item:hover{background:#3f4651}.menu-divider{height:1px;margin:2px 4px;background:#3a3f4a}#action-bar{position:fixed;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:14}#action-bar[hidden]{display:none}#action-bar button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:#d8dee9;background:#353b45;border:1px solid #4a525e;border-radius:50%;box-shadow:0 4px 14px #0006;cursor:pointer}#action-bar button .icon svg{width:22px;height:22px}#action-bar button[hidden]{display:none}#action-bar button:hover{background:#3f4651}#action-edit{color:#e0af68;border-color:#5a4a32}#action-edit:hover{background:#45402d}#action-delete{color:#f7768e;border-color:#5a3b42}#action-delete:hover{background:#45323a}#rename-overlay{position:fixed;transform:translate(-50%,-120%);display:flex;gap:6px;padding:6px;background:#272b33;border:1px solid #3a3f4a;border-radius:8px;box-shadow:0 6px 18px #0006;z-index:10}#rename-overlay[hidden]{display:none}#rename-input{font:16px system-ui,sans-serif;color:#d8dee9;background:#1a1d23;border:1px solid #4a525e;border-radius:6px;padding:8px 10px;width:auto;text-align:center}#rename-overlay.inplace{padding:0;gap:0;background:none;border:none;box-shadow:none}#rename-overlay.inplace #rename-input{width:100%;height:100%;border-color:#e0af68}#about-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20}#about-overlay[hidden]{display:none}#about-panel{width:100%;max-width:420px;max-height:90vh;overflow-y:auto;padding:24px;color:#d8dee9;background:#272b33;border:1px solid #3a3f4a;border-radius:14px;box-shadow:0 12px 40px #00000080}#about-title{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}.about-name{font:800 24px system-ui,sans-serif;color:#7aa2f7;letter-spacing:.5px}.about-tagline{font:600 14px system-ui,sans-serif;color:#aeb6c2}.about-intro{margin-bottom:16px;font-size:14px;line-height:1.5}.about-credits-title{margin-bottom:8px;font:700 12px system-ui,sans-serif;text-transform:uppercase;letter-spacing:1px;color:#aeb6c2}#about-panel p{margin-bottom:6px;font-size:14px;line-height:1.6}#about-panel a{color:#7aa2f7}.about-dismiss{display:flex;align-items:center;gap:8px;margin:18px 0;font-size:13px;color:#aeb6c2;cursor:pointer}.about-dismiss input{width:16px;height:16px;accent-color:#7aa2f7}#about-close{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:10px;font:700 14px system-ui,sans-serif;color:#1a1d23;background:#9ece6a;border:none;border-radius:8px;cursor:pointer}#about-panel p.about-icons-credit{margin-top:10px;font-size:12px;color:#aeb6c2}#about-close:hover{background:#aede7a}#help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20}#help-overlay[hidden]{display:none}#help-panel{width:100%;max-width:440px;max-height:90vh;overflow-y:auto;padding:24px;color:#d8dee9;background:#272b33;border:1px solid #3a3f4a;border-radius:14px;box-shadow:0 12px 40px #00000080}#help-title{margin-bottom:12px;font:800 22px system-ui,sans-serif;color:#7aa2f7;letter-spacing:.5px}.help-intro{margin-bottom:14px;font-size:14px;line-height:1.5;color:#aeb6c2}.help-list{margin:0 0 20px;padding-left:20px;display:flex;flex-direction:column;gap:10px}.help-list li{font-size:14px;line-height:1.5}#help-close{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:10px;font:700 14px system-ui,sans-serif;color:#1a1d23;background:#9ece6a;border:none;border-radius:8px;cursor:pointer}#help-close:hover{background:#aede7a}#tutorial-callout{position:fixed;bottom:76px;left:50%;transform:translate(-50%);z-index:18;width:calc(100% - 32px);max-width:460px;padding:16px 18px;color:#d8dee9;background:#272b33f5;border:1px solid #4a5680;border-radius:12px;box-shadow:0 8px 28px #00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#tutorial-callout[hidden]{display:none}.tutorial-progress{margin-bottom:6px;padding-right:24px;font:700 11px system-ui,sans-serif;text-transform:uppercase;letter-spacing:1px;color:#7aa2f7}.tutorial-text{font-size:14px;line-height:1.5}#tutorial-exit{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0 0 2px;font:700 15px system-ui,sans-serif;line-height:1;color:#aeb6c2;background:#353b45;border:1px solid #4a525e;border-radius:50%;cursor:pointer}#tutorial-exit:hover{color:#d8dee9;background:#3f4651}#tutorial-highlight{position:fixed;pointer-events:none;z-index:17;border-radius:6px;outline:2px solid #ffd23f;outline-offset:2px;box-shadow:0 0 0 4px #ffd23f4d;animation:tutorial-pulse 1.2s ease-in-out infinite}@keyframes tutorial-pulse{0%,to{box-shadow:0 0 0 4px #ffd23f4d}50%{box-shadow:0 0 0 7px #ffd23f1f}}