:root{--accent: #7f5af0;--accent-soft: #ece6fd;--bg: #f4f6fb;--panel: #ffffff;--ink: #22283a;--ink-soft: #6b7280;--radius: 14px}body[data-platform=sphero]{--accent: #7f5af0;--accent-soft: #ece6fd}body[data-platform=lego]{--accent: #f5a800;--accent-soft: #fdf1d6}body[data-platform=ev3]{--accent: #c4111b;--accent-soft: #fbe0e2}body[data-platform=vex]{--accent: #2f6fd6;--accent-soft: #e1eafb}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;overflow:hidden}#topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--panel);border-bottom:3px solid var(--accent);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px}.brand-icon{width:26px;height:26px}.spacer{flex:1}#platform-tabs{display:flex;gap:6px}.tab{border:2px solid transparent;background:#eef0f6;border-radius:999px;padding:6px 16px;cursor:pointer;color:var(--ink);display:flex;align-items:baseline;gap:5px}.tab.active{background:var(--accent-soft);border-color:var(--accent)}.tab-img{height:26px;max-width:110px;object-fit:contain;display:block}.tab-fallback{display:none;align-items:baseline;gap:5px}.tab.noimg .tab-img{display:none}.tab.noimg .tab-fallback{display:flex}.tab-logo{font-weight:900;font-size:15px;letter-spacing:-.2px}.tab-sub{font-size:11px;font-weight:700;color:var(--ink-soft)}.logo-sphero{text-transform:lowercase;color:#1b2a4a;letter-spacing:.5px}.sub-sphero{color:#7f5af0;letter-spacing:2px}.logo-spike{background:#ffcf00;color:#17181c;padding:1px 7px;border-radius:5px;font-style:italic;letter-spacing:.5px}.sub-spike{color:#17181c;font-size:12.5px}.logo-ev3{color:#c4111b;font-size:17px}.sub-ev3{text-transform:uppercase;letter-spacing:1.5px;font-size:9.5px}.logo-vex{color:#d3382e;font-style:italic;letter-spacing:.5px}.sub-vex{color:#17181c;font-size:13px;font-weight:900}.segmented{display:flex;background:#eef0f6;border-radius:999px;padding:3px}body:not([data-platform=lego]) #mode-toggle{display:none}.seg{border:none;background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink-soft)}.seg.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 4px #00000026}.speed-label{display:flex;align-items:center;gap:7px}.speed-word{font-size:12.5px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.6px}#speed{width:110px;accent-color:var(--accent)}.btn{border:none;border-radius:10px;padding:9px 16px;font-size:15px;font-weight:800;cursor:pointer;color:#fff;display:inline-flex;align-items:center;gap:7px}.btn>svg{width:15px;height:15px}.btn:disabled{opacity:.45;cursor:default}.btn.run{background:#22a24a}.btn.stop{background:#e0403a}.btn.plain{background:#64748b}.btn.small{background:var(--panel);color:var(--ink);border:1.5px solid #d8dce6;font-size:12.5px;font-weight:700;padding:6px 10px}.btn.small:hover{border-color:var(--accent)}main{flex:1;display:flex;min-height:0}#blockly-wrap{flex:1;min-width:420px;position:relative}#blockly{position:absolute;top:0;right:0;bottom:0;left:0}#side{width:526px;min-width:526px;display:flex;flex-direction:column;gap:10px;padding:12px;overflow-y:auto;background:var(--bg);border-left:1px solid #e2e6ef}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border-radius:var(--radius);padding:8px 12px;font-size:13px;font-weight:600}.toolbar select{font-size:13px;padding:4px 6px;border-radius:8px;border:1.5px solid #d8dce6}.chk{display:flex;align-items:center;gap:4px}#stage-wrap{position:relative;align-self:center}#stage3d{width:500px;height:500px;border-radius:var(--radius);box-shadow:0 4px 18px #1e284624;overflow:hidden}#stage3d canvas{display:block}#banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(1);background:#fff;border:4px solid #22a24a;color:#14522a;border-radius:18px;padding:18px 30px;font-size:26px;font-weight:900;box-shadow:0 10px 40px #00000040;animation:pop .45s ease;text-align:center}#banner.hidden{display:none}@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4)}70%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1)}}#status{display:flex;gap:8px;flex-wrap:wrap}.chip{background:var(--panel);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:5px}.chip b{color:var(--ink);font-variant-numeric:tabular-nums}.led-dot{width:14px;height:14px;border-radius:50%;display:inline-block;background:#333;border:1.5px solid #cbd0dc}#st-bump.hit{background:#fde2e1;color:#b3261e;font-weight:800}#challenge-card{background:var(--panel);border-radius:var(--radius);padding:12px 14px}.card-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px}.card-head select{font-size:13px;padding:4px 6px;border-radius:8px;border:1.5px solid #d8dce6;max-width:300px}#challenge-desc{font-size:13.5px;color:var(--ink-soft);margin:8px 0 4px;line-height:1.45}#challenge-progress{display:flex;gap:6px}.step-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#eef0f6;color:var(--ink-soft)}.step-chip.done{background:#d9f2e2;color:#14522a}#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%);background:#22283a;color:#fff;padding:11px 20px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 6px 24px #0000004d;z-index:99;transition:opacity .3s}#toast.hidden{opacity:0;pointer-events:none}.blocklyToolboxDiv{background:#fbfcfe}.tbRow{display:flex!important;flex-direction:column;align-items:center;gap:5px;padding:10px!important;margin:2px 4px!important;border-radius:12px;cursor:pointer;height:auto!important}.tbRow:hover{background:#eef1f8}.blocklyToolboxSelected.tbRow,.tbRow.blocklyTreeSelected{background:#e8ecf7!important}.tbDot{width:26px;height:26px;border-radius:50%;display:block;visibility:visible!important;box-shadow:inset 0 -2px 4px #0000001f}.tbLabel{font-size:9.5px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.4px;color:#5d6472!important}.tbDot-event_category{background:#ffbf00}.tbDot-motion_category{background:#4c97ff}.tbDot-motors_category{background:#1e9df2}.tbDot-spikemove_category{background:#ff4da6}.tbDot-looks_category{background:#96f}.tbDot-sound_category{background:#cf63cf}.tbDot-control_category{background:#ffab19}.tbDot-sensing_category{background:#5cb1d6}.tbDot-operator_category{background:#59c059}#btn-obstacles.active{border-color:#b07840;background:#f4e5d4}body.obstacle-mode #stage3d canvas{cursor:crosshair}#obstacle-tray{display:flex;align-items:center;gap:8px;width:100%;padding:6px 2px 0}#obstacle-tray[hidden]{display:none}.tray-label{font-size:12px;font-weight:700;color:var(--ink-soft)}.ob-chip{width:44px;height:44px;border-radius:10px;background:#f0f2f8;border:2px solid transparent;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}.ob-chip svg{width:30px;height:30px}.ob-chip:hover{background:#e7eaf3}.ob-chip.selected{border-color:var(--accent);background:var(--accent-soft)}.ob-ghost{position:fixed;z-index:999;pointer-events:none;opacity:.85;transform:scale(1.1)}#device-panel{display:flex;gap:12px;align-items:stretch;background:var(--panel);border-radius:var(--radius);padding:12px}#device-panel[hidden]{display:none}.brick-mock{background:#e9ebef;border:2px solid #c6cbd2;border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:6px}#brick-screen{width:152px;height:114px;border:3px solid #3b4046;border-radius:6px;background:#b9c3a1;image-rendering:auto}.brick-light{width:60px;height:8px;border-radius:999px;background:#3a3f4c;transition:background .15s}.brick-buttons{display:flex;gap:6px}.brick-buttons span{width:14px;height:9px;border-radius:3px;background:#c6cbd2}.brick-buttons .bb-mid{background:#3b4046}.motor-mock{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}.motor-row{display:flex;align-items:center;gap:8px;font-size:13px}.motor-name{width:22px;height:22px;border-radius:6px;background:#3b4046;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}.motor-bar{position:relative;flex:1;height:12px;border-radius:999px;background:#eef0f6;overflow:hidden}.motor-bar:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#cdd2dd}.motor-fill{position:absolute;top:0;bottom:0;left:50%;width:0;border-radius:999px;transition:width .1s,left .1s}.motor-row b{min-width:34px;text-align:right;font-variant-numeric:tabular-nums}.motor-cap{font-size:11px;color:var(--ink-soft);text-align:right}#iconcoder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:#f0f2f8}#iconcoder[hidden]{display:none}.ic-canvas{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background-image:radial-gradient(circle,#d9dde8 1.3px,transparent 1.3px);background-size:22px 22px}.ic-strip-scroll{overflow-x:auto;padding:30px 18px 40px}.ic-strip{display:flex;align-items:center;width:max-content;--strip-bg: #f0f2f8}.ic-line{display:flex;align-items:center;min-width:80px;min-height:74px}.ic-hint{text-align:center;font-size:12.5px;color:var(--ink-soft);padding-bottom:12px}.ic-hat{width:84px;height:72px;background:#ffbf00;border-radius:36px 14px 14px 36px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;flex:0 0 auto;box-shadow:0 2px 6px #1e28462e;position:relative;z-index:0}.ic-hat:after{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:#ffbf00}.ic-block{position:relative;width:66px;height:66px;margin-left:6px;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;box-shadow:0 2px 6px #1e28462e;transition:transform .08s}.ic-block:hover{transform:translateY(-2px)}.ic-block:before{content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:17px;height:17px;border-radius:50%;background:var(--strip-bg, #fff);z-index:1}.ic-block:after{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:inherit;z-index:0}.ic-block.ic-end{border-radius:14px 26px 26px 14px}.ic-block.ic-end:after{display:none}.ic-icon{position:relative;z-index:2;display:flex}.ic-icon svg{width:36px;height:36px;display:block}.ic-hat svg{width:30px;height:30px}.ic-bubble{position:absolute;bottom:-11px;left:50%;transform:translate(-50%);min-width:27px;height:23px;padding:0 7px;background:#fff;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:800;color:var(--ink);box-shadow:0 1px 4px #1e28464d;z-index:3;cursor:pointer}.ic-bubble:hover{background:#eef4ff}.ic-running{outline:4px solid #22a24a;outline-offset:2px;transform:scale(1.06)}.ic-slot{width:0;height:60px;margin-left:6px;border-radius:12px;border:2.5px dashed #8b93a8;background:#8b93a81f;flex:0 0 auto;animation:slot-open .15s ease forwards}@keyframes slot-open{to{width:58px}}.ic-ghost{position:fixed;width:66px;height:66px;z-index:999;pointer-events:none;opacity:.9;transform:scale(1.12) rotate(-3deg);box-shadow:0 10px 26px #141e3c59!important;transition:opacity .1s}.ic-ghost:before,.ic-ghost:after{display:none}.ic-ghost-out{opacity:.35;filter:saturate(.3)}.ic-snap{animation:snap-in .32s cubic-bezier(.34,1.56,.64,1)}@keyframes snap-in{0%{transform:scale(1.25)}60%{transform:scale(.95)}to{transform:scale(1)}}.ic-palette-wrap{background:#fff;border-top:1px solid #e2e6ef;padding:8px 14px 20px}.ic-cats{display:flex;gap:8px;padding:2px 2px 8px}.ic-cat{width:46px;height:9px;border-radius:999px;cursor:pointer;opacity:.85}.ic-cat:hover{opacity:1}.ic-palette{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;--strip-bg: #ffffff}.ic-palette .ic-block{margin-left:0}