:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{touch-action:manipulation;overscroll-behavior:none}body{margin:0;min-height:100vh;min-height:100dvh;background:#f5f7fb;overflow-x:hidden}*{box-sizing:border-box}:root{color:#111827;background-color:#f5f7fb;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#root{min-height:100vh}.mobile-run-button{display:none}.scene-panel>.messages{display:none}.desktop-messages{display:flex}@media(max-width:768px){.scene-panel>.messages{display:flex}.desktop-messages{display:none}}.app-shell{display:flex;flex-direction:column;min-height:100vh;gap:1.5rem;padding:1.5rem 2rem 2.5rem}.app-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.app-header h1{margin:0;font-size:1.9rem}.header-actions{display:flex;gap:.75rem;align-items:center}.level-panel{display:flex;flex-direction:column;gap:.5rem;padding:.45rem .9rem;background:linear-gradient(135deg,#eef2ff,#e0f2fe);border-radius:1.1rem;box-shadow:inset 0 1px #fff9,0 6px 20px #0f172a1f}.level-nav{display:flex;align-items:center;gap:.85rem}.level-nav button{background:#c7d2fe;color:#0f172a;padding:.35rem .8rem}.level-label-group{display:flex;flex-direction:column;align-items:center;gap:.15rem;flex:1}.level-label{font-weight:700;color:#0f172a}.level-label-group select{border:1px solid rgba(148,163,184,.5);background:#ffffffd9;border-radius:999px;padding:.2rem .9rem;font-weight:600;color:#0f172a;font-size:.85rem}.level-label-group select:disabled{opacity:.6}.level-meta-row{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.85rem;color:#475569}.difficulty-pill,.steps-pill{padding:.1rem .65rem;border-radius:999px;background:#e2e8f0;font-weight:600}.difficulty-pill{background:#fee2e2;color:#b91c1c}.steps-pill{background:#dbf4ff;color:#0369a1}.live-toggle{background:#f1f5f9;color:#0f172a;border:1px solid #cbd5f5;border-radius:999px;padding:.45rem 1rem;font-size:.9rem;box-shadow:none}.live-toggle.active{background:#0ea5e9;color:#fff;box-shadow:0 10px 22px #0ea5e959}button{border:none;border-radius:.65rem;padding:.65rem 1.2rem;background:#2563eb;color:#fff;font-weight:600;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 20px #2563eb40}button:disabled{opacity:.6;cursor:not-allowed}button.ghost{background:#e2e8f0;color:#111827;box-shadow:none}.app-content{display:grid;grid-template-columns:minmax(320px,2fr) minmax(320px,1.4fr);gap:1.5rem}.scene-panel{background:#fff;border-radius:1.5rem;padding:.75rem;box-shadow:0 15px 40px #0f172a1a;min-height:560px;position:relative;overflow:hidden}.scene-panel canvas{border-radius:1.2rem}.control-panel{background:#fff;border-radius:1.5rem;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;box-shadow:0 15px 40px #0f172a1a}.block-selector label{display:block;font-size:.9rem;color:#475569;margin-bottom:.35rem}.block-tabs{display:flex;flex-wrap:wrap;gap:.4rem}.block-tabs button{background:#e2e8f0;color:#0f172a;padding:.45rem .9rem}.block-tabs button.active{background:#2563eb;color:#fff}.instructions{background:#f8fafc;border-radius:1rem;padding:.75rem;min-height:190px;max-height:190px;display:flex;flex-direction:column;gap:.65rem;flex-shrink:0}.instruction-track{display:flex;flex-wrap:wrap;gap:.6rem;overflow-y:auto;padding-right:.4rem;padding-bottom:.2rem;align-content:flex-start}.instruction-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#fff;padding:.35rem;box-shadow:0 3px 8px #0f172a1f;min-width:56px}.instruction-pill.function-pill{background:#ede9fe;padding:.4rem 1.2rem}.function-pill-label{font-weight:600;color:#4c1d95}.pill-remove{position:absolute;top:-3px;right:-3px;width:18px;height:18px;border:none;background:transparent;color:#dc2626;font-weight:700;font-size:1rem;line-height:1;cursor:pointer;padding:0}.pill-remove:hover{transform:none;box-shadow:none;color:#b91c1c}.command-icon{border-radius:12px;display:grid;place-items:center;box-shadow:inset 0 2px 4px #fff9}.palette h3{margin:.5rem 0}.button-row{display:flex;flex-wrap:wrap;gap:.5rem}.command-button{border:none;background:transparent;padding:0;display:inline-flex;align-items:center}.command-button:hover:not(:disabled){transform:none;box-shadow:none}.fireworks-overlay{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483647;overflow:hidden;background:transparent;mix-blend-mode:normal;isolation:isolate;will-change:transform;transform:translateZ(0);contain:layout style paint}.fireworks-overlay:before{content:"";position:absolute;inset:-15%;background:radial-gradient(circle at 15% 25%,rgba(255,255,255,.1),transparent 60%),radial-gradient(circle at 70% 5%,rgba(255,255,255,.05),transparent 55%);filter:blur(28px);opacity:.5}.firework-glow{position:absolute;border-radius:50%;opacity:.65;mix-blend-mode:screen}.firework-rocket{position:absolute;bottom:-10%;width:7px;height:28px;border-radius:999px;animation:rocket-launch var(--rocket-duration, 2.6s) ease-in infinite;animation-delay:var(--rocket-delay, 0s);mix-blend-mode:normal;filter:drop-shadow(0 0 14px rgba(255,255,255,.9))}.firework-rocket:after{content:"";position:absolute;bottom:-60px;left:-3.5px;width:12px;height:60px;background:linear-gradient(180deg,rgba(255,255,255,.9),transparent 70%);border-radius:999px;filter:blur(1.6px)}.firework-burst{position:absolute;width:14px;height:14px;border-radius:50%;animation:firework-pop var(--burst-duration, 2s) ease-out infinite;animation-delay:var(--burst-delay, 0s);opacity:0;mix-blend-mode:normal;filter:saturate(1.9) brightness(1.35) drop-shadow(0 0 22px rgba(255,255,255,.55))}.firework-burst:after{content:"";position:absolute;inset:-18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);opacity:.6;filter:blur(2px)}.firework-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffffffeb;box-shadow:0 0 18px #fffffff2;animation:sparkle-fade var(--spark-duration, 3s) ease-in-out infinite;animation-delay:var(--spark-delay, 0s);opacity:0;mix-blend-mode:normal}.firework-comet{position:absolute;top:0;width:180px;height:3px;border-radius:999px;animation:comet-streak var(--comet-duration, 2s) linear infinite;animation-delay:var(--comet-delay, 0s);opacity:0;mix-blend-mode:normal;filter:drop-shadow(0 0 22px rgba(255,255,255,.85));transform-origin:left center}@keyframes rocket-launch{0%{transform:translateY(0) scaleY(.5);opacity:0}20%{opacity:1}70%{transform:translateY(-95vh) scaleY(1.08);opacity:1}to{transform:translateY(-130vh) scaleY(.85);opacity:0}}@keyframes firework-pop{0%{transform:scale(.35);opacity:0}30%{opacity:1}to{transform:scale(var(--burst-scale, 4)) rotate(20deg);opacity:0}}@keyframes comet-streak{0%{opacity:0;transform:rotate(var(--comet-rotation, 0deg)) translate(-20vw)}15%{opacity:1}to{opacity:0;transform:rotate(var(--comet-rotation, 0deg)) translate(120vw)}}@keyframes sparkle-fade{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.4)}}.tag-button{background:#e0f2fe;color:#0369a1}.function-builder{display:flex;gap:.5rem}.function-builder input{flex:1;border-radius:.6rem;border:1px solid #cbd5f5;padding:.5rem .75rem;font-size:1rem}.function-list{display:flex;flex-direction:column;gap:.5rem}.function-hints{display:flex;flex-wrap:wrap;gap:.4rem}.messages{display:flex;flex-direction:column;gap:.3rem;font-size:.95rem}.status{color:#15803d}.error{color:#b91c1c}.warning{color:#b45309}.empty{margin:0;color:#94a3b8}.retry-button{margin-top:.4rem;align-self:flex-start;background:#f97316;color:#fff}.retry-button:hover:not(:disabled){box-shadow:0 10px 20px #f9731659}.advance-button{margin-top:.4rem;align-self:flex-start;background:#10b981;color:#fff}.advance-button:hover:not(:disabled){box-shadow:0 10px 20px #10b98159}@media(max-width:1100px){.app-content{grid-template-columns:1fr}.scene-panel{min-height:420px}}@media(max-width:768px){.app-shell{padding:0;gap:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;position:fixed;inset:0}.app-header{flex-direction:row;align-items:center;justify-content:center;gap:.5rem;padding:.4rem .75rem;padding-top:calc(env(safe-area-inset-top,0) + .4rem);background:linear-gradient(135deg,#1e3a5f,#2d5a87);box-shadow:0 2px 8px #0000001f;position:relative;z-index:100;flex-shrink:0}.app-header>div:first-child{display:none}.app-header h1,.app-header p{display:none}.header-actions{display:flex;align-items:center;gap:.5rem;width:100%;justify-content:center}.level-panel{padding:.2rem .5rem;background:#ffffff1f;border-radius:.6rem;box-shadow:none}.level-nav{gap:.35rem}.level-nav button{padding:.2rem .45rem;min-width:28px;min-height:28px;background:#fff3;color:#fff;font-size:1rem;font-weight:700}.level-label{font-size:.8rem;color:#fff}.level-label-group select{font-size:.7rem;padding:.1rem .4rem;background:#ffffffe6}.level-meta-row{display:none}.live-toggle{padding:.3rem .6rem;font-size:.7rem;background:#fff3;color:#fff;border:none;min-height:28px}.live-toggle.active{background:#10b981;box-shadow:0 0 8px #10b98180}.header-actions>button.ghost,.header-actions>button:last-child:not(.ghost):not(.live-toggle){display:none}.app-content{display:flex;flex-direction:column;flex:1;gap:0;overflow:hidden;min-height:0}.scene-panel{flex:1;min-height:45vh;max-height:none;border-radius:0;padding:0;margin:0;box-shadow:none;position:relative;touch-action:none;background:#e8f0f8}.scene-panel canvas{border-radius:0;width:100%!important;height:100%!important}.control-panel{padding:.6rem .75rem;padding-bottom:calc(env(safe-area-inset-bottom,0) + .6rem);gap:.5rem;border-radius:1rem 1rem 0 0;box-shadow:0 -4px 20px #0000001f;max-height:38vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;flex-shrink:0;position:relative}.block-selector{display:none}.instructions{min-height:56px;max-height:56px;padding:.3rem .4rem;margin:0;border-radius:.6rem;background:#f1f5f9}.instructions .empty{font-size:.75rem;text-align:center;padding:.5rem}.instruction-track{display:flex;flex-wrap:nowrap;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.1rem;align-items:center}.instruction-track::-webkit-scrollbar{display:none}.instruction-pill{min-width:44px;padding:.2rem;flex-shrink:0}.instruction-pill .command-icon{width:38px!important;height:38px!important}.palette{display:flex;flex-direction:column;gap:.4rem}.palette h3{font-size:.7rem;margin:0;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.palette h3:nth-of-type(2),.function-builder,.function-list{display:none}.button-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;justify-items:center}.command-button{width:100%;display:flex;justify-content:center}.command-button .command-icon{width:48px!important;height:48px!important;border-radius:12px;box-shadow:0 3px 10px #0000001f}.messages{position:absolute;top:.5rem;left:50%;transform:translate(-50%);z-index:150;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.3rem;width:90%;max-width:320px}.messages p{background:#1e293bf2;color:#fff;padding:.5rem .9rem;border-radius:999px;font-size:.8rem;box-shadow:0 4px 16px #0003;text-align:center;pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.messages .status{background:#059669f2}.messages .error{background:#dc2626f2}.messages .warning{background:#d97706f2}.retry-button{pointer-events:auto;padding:.5rem 1.2rem;border-radius:999px;font-size:.85rem;box-shadow:0 4px 12px #f9731659}.advance-button{pointer-events:auto;padding:.5rem 1.2rem;border-radius:999px;font-size:.85rem}.mobile-run-button{display:flex!important;position:absolute;bottom:calc(38vh + 1rem);right:1rem;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:1.8rem;font-weight:700;border:none;box-shadow:0 6px 24px #10b98173,0 2px 8px #0000001a;z-index:200;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.mobile-run-button:active{transform:scale(.95)}.mobile-run-button:disabled{background:linear-gradient(135deg,#6b7280,#4b5563);box-shadow:0 3px 12px #0003}.mobile-run-button .play-icon{width:0;height:0;border-left:18px solid white;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px}.mobile-run-button.running .play-icon{display:none}.mobile-run-button.running:after{content:"";width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}}@media(max-width:375px){.control-panel{max-height:40vh;padding:.5rem}.button-row{grid-template-columns:repeat(6,1fr);gap:.3rem}.command-button .command-icon{width:42px!important;height:42px!important}.instructions{min-height:50px;max-height:50px}.instruction-pill .command-icon{width:34px!important;height:34px!important}.instruction-pill{min-width:40px}.mobile-run-button{width:56px;height:56px;bottom:calc(40vh + .75rem);right:.75rem}.mobile-run-button .play-icon{border-left-width:14px;border-top-width:9px;border-bottom-width:9px}}@media(pointer:coarse){button{min-height:44px}.pill-remove{width:26px;height:26px;top:-8px;right:-8px;font-size:1.3rem;background:#dc2626e6;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.level-nav button{min-height:36px;min-width:36px}.block-tabs button{min-height:38px}.tag-button{min-height:42px}.command-button{padding:.25rem}}@media(max-width:768px){.fireworks-overlay{filter:none;contain:strict}.firework-rocket,.firework-burst,.firework-spark,.firework-comet{filter:none!important;box-shadow:none!important;will-change:transform,opacity}.firework-glow{display:none}.fireworks-overlay:before{display:none}}@media(max-height:500px)and (orientation:landscape){.app-shell{padding:0;gap:0}.app-header{padding:.3rem .75rem;padding-left:calc(env(safe-area-inset-left,0) + .75rem);padding-right:calc(env(safe-area-inset-right,0) + .75rem)}.app-content{flex-direction:row;flex:1}.scene-panel{flex:1.5;max-height:none;min-height:0}.control-panel{flex:1;max-height:none;border-radius:0;padding:.5rem;padding-left:calc(env(safe-area-inset-left,0) + .5rem);padding-right:calc(env(safe-area-inset-right,0) + .5rem)}.instructions{min-height:45px;max-height:45px}.button-row{grid-template-columns:repeat(6,1fr);gap:.25rem}.command-button .command-icon{width:38px!important;height:38px!important}.messages{top:.3rem;left:.5rem;transform:none;width:auto;max-width:50%}.mobile-run-button{bottom:1rem;right:calc(50% + 1rem);width:52px;height:52px}}@media(display-mode:standalone){.app-shell{padding-top:0}.app-header{padding-top:calc(env(safe-area-inset-top,0) + .5rem)}}