html,body,#root{background:var(--ui-bg);height:100%;margin:0;overflow:hidden}.app{flex-direction:column;height:100%;display:flex}.menu-bar{background:var(--menu-bar);color:#fff;flex:none;align-items:center;gap:12px;height:48px;padding:0 16px;display:flex}.logo{letter-spacing:.02em;font-size:20px;font-weight:700}.file-menu{gap:4px;margin-left:12px;display:flex}.file-menu button{color:#fff;font:inherit;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:6px 12px;font-size:14px}.file-menu button:hover{background:var(--menu-bar-dark)}.extension-menu{position:relative}.extension-menu>button{color:#fff;font:inherit;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:6px 12px;font-size:14px}.extension-menu>button:hover,.extension-menu>button[aria-expanded=true]{background:var(--menu-bar-dark)}.share-button{color:#fff;font:inherit;cursor:pointer;background:#ff8c1a;border:none;border-radius:4px;margin-left:8px;padding:6px 14px;font-size:14px;font-weight:700}.share-button:hover{background:#e67a0e}.about-link{color:#fff;margin-left:auto;padding:6px 12px;font-size:14px;text-decoration:none}.about-link:hover{text-decoration:underline}.language-menu{background:var(--menu-bar-dark);color:#fff;font:inherit;cursor:pointer;border:1px solid #ffffff80;border-radius:4px;padding:4px 8px;font-size:14px}.extension-list{z-index:100;color:#575e75;background:#fff;border-radius:8px;min-width:240px;margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 6px);left:0;box-shadow:0 6px 20px #0003}.extension-list li{align-items:center;gap:10px;padding:8px;display:flex}.extension-swatch{border-radius:50%;flex:none;width:20px;height:20px}.extension-name{flex:1;font-weight:600}.extension-list button{border:1px solid var(--menu-bar);background:var(--menu-bar);color:#fff;cursor:pointer;border-radius:4px;padding:4px 10px}.extension-list button:disabled{color:#999;cursor:default;background:#fff;border-color:#ddd}.workspace-area{flex:1;gap:8px;min-height:0;padding:8px;display:flex}.code-area{border:1px solid var(--border);background:var(--panel);border-radius:8px;flex:1;min-width:0;overflow:hidden}.blocks-editor{width:100%;height:100%}.right-column{flex-direction:column;flex:none;gap:8px;width:488px;min-height:0;display:flex}.sprite-pane{border:1px solid var(--border);background:var(--panel);border-radius:8px;flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.sprite-info{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:6px 10px;padding:10px 12px;font-size:12px;display:flex}.field{align-items:center;gap:4px;display:flex}.field input:not([type=checkbox]):not([type=color]),.field select{border:1px solid var(--border);width:56px;height:26px;color:var(--text);border-radius:13px;padding:0 6px;font-size:12px}.field.name input{width:110px!important}.field select{width:76px}.field input[type=color]{border:1px solid var(--border);background:0 0;border-radius:4px;width:32px;height:24px;padding:0}.sprite-list{background:#f9fbfe;flex-wrap:wrap;flex:1;align-content:flex-start;gap:8px;padding:10px;display:flex;overflow:auto}.sprite-tile{border:2px solid var(--border);background:var(--panel);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:72px;height:76px;display:flex;position:relative}.sprite-tile:hover{border-color:var(--menu-bar)}.sprite-tile.selected{border-color:var(--menu-bar);box-shadow:0 0 0 3px #4c97ff4d}.sprite-thumb{font-size:30px;line-height:1}.sprite-name{text-overflow:ellipsis;white-space:nowrap;max-width:64px;margin-top:6px;font-size:11px;overflow:hidden}.sprite-delete{background:var(--menu-bar);color:#fff;cursor:pointer;border:none;border-radius:50%;width:20px;height:20px;font-size:13px;line-height:20px;position:absolute;top:-8px;right:-8px}.add-sprite{position:absolute;bottom:14px;right:14px}.add-sprite-button{background:var(--menu-bar);color:#fff;cursor:pointer;border:none;border-radius:50%;width:44px;height:44px;font-size:24px;box-shadow:0 2px 8px #0003}.add-sprite-button:hover{background:var(--menu-bar-dark)}.add-sprite-menu{z-index:10;background:var(--panel);border-radius:8px;flex-direction:column;min-width:120px;padding:4px;display:flex;position:absolute;bottom:52px;right:0;box-shadow:0 4px 16px #0000002e}.add-sprite-menu button{text-align:left;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:6px 10px;font-size:13px}.add-sprite-menu button:hover{background:var(--flag-hover)}.blocklyFlyoutButtonBackground{fill:#fff;stroke:#c6c6c6}.blocklyFlyoutButtonShadow{fill:#0000}.blocklyFlyout .blocklyFlyoutButton text.blocklyText{fill:var(--text)}.blocklyFlyoutButton:hover .blocklyFlyoutButtonBackground{fill:var(--flag-hover)}.modal-scrim{z-index:1000;background:#4c97ffb3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{color:#575e75;background:#fff;border-radius:8px;width:min(720px,100vw - 32px);overflow:hidden;box-shadow:0 8px 32px #00000040}.modal header{background:var(--menu-bar);color:#fff;text-align:center;padding:14px;font-weight:700}.procedure-workspace{background:#f9f9f9;border-bottom:1px solid #e0e0e0;height:200px}.procedure-add{justify-content:center;gap:12px;padding:16px;display:flex}.procedure-add button{width:160px;color:inherit;font:inherit;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:8px;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;font-size:13px;display:flex}.procedure-add button:hover{border-color:var(--menu-bar)}.procedure-add small{color:#999}.arg-shape{color:#fff;background:#ff6680;min-width:40px;height:22px;font-size:11px;line-height:22px;display:inline-block}.arg-shape.round{border-radius:11px}.arg-shape.hex{clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}.arg-shape.label{color:#ff4d6a;background:0 0;font-weight:700}.procedure-warp{justify-content:center;align-items:center;gap:6px;padding:0 16px 8px;font-size:14px;display:flex}.modal footer{justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.modal footer button{color:inherit;font:inherit;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:6px;padding:8px 18px}.modal footer button.primary{border-color:var(--menu-bar);background:var(--menu-bar);color:#fff}.small-dialog{width:min(360px,100vw - 32px)}.small-dialog-body{flex-direction:column;gap:8px;padding:20px 20px 4px;font-size:14px;display:flex}.small-dialog-body input{font:inherit;border:1px solid #ccc;border-radius:6px;padding:8px 10px}.small-dialog-scope{gap:16px;padding:8px 20px 4px;font-size:13px;display:flex}.small-dialog-scope label{align-items:center;gap:4px;display:flex}.small-dialog-body:is(p){white-space:pre-wrap;margin:0;padding-bottom:8px}.small-dialog-body input:focus{border-color:var(--menu-bar);outline:none;box-shadow:0 0 0 3px #4c97ff40}.perf-overlay .perf-detail{opacity:.8;padding-left:1em}.perf-overlay{color:#fff;pointer-events:none;background:#222831bf;border-radius:6px;padding:4px 8px;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;bottom:6px;right:6px}.logic-trial{position:fixed;inset:0;overflow:hidden}.share-dialog{width:min(560px,100vw - 32px)}.share-body{flex-direction:column;gap:12px;max-height:calc(100vh - 160px);padding:16px 20px 4px;font-size:14px;display:flex;overflow-y:auto}.share-body label{flex-direction:column;gap:6px;font-weight:700;display:flex}.share-body input,.share-body textarea{color:inherit;font:inherit;resize:vertical;border:1px solid #ccc;border-radius:6px;padding:8px 10px;font-weight:400}.share-body input:focus,.share-body textarea:focus{border-color:var(--menu-bar);outline:none}.share-privacy a{color:inherit}.share-privacy{color:#8a5300;background:#fff4e5;border-radius:6px;margin:0;padding:10px 12px;line-height:1.5}.share-done p{margin:0 0 8px}.share-link{align-items:center;gap:6px;display:flex}.share-link input{flex:1;min-width:0}.share-link button,.share-link a,.share-actions button{color:inherit;font:inherit;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:6px;padding:6px 12px;font-size:13px;text-decoration:none}.share-check:empty{display:none}.share-error{color:#d32f2f;margin:0}.share-mine h3{margin:4px 0 6px;font-size:14px}.share-mine ul{margin:0;padding:0;list-style:none}.share-mine li{border-top:1px solid #eee;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;display:flex}.share-mine li a{color:var(--menu-bar-dark);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.share-actions{flex:none;align-items:center;gap:6px;display:flex}.share-updated{color:#2e7d32;font-size:12px}.share-note{color:#8a91a6;margin:6px 0 0;font-size:12px}