:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%;height:100vh;margin:0;padding:0}body{margin:0;font-family:sans-serif;overflow:hidden}.lienzo-container{height:100vh;width:100%;display:flex;flex-direction:column;background:linear-gradient(135deg,#f8fafc,#eef2ff);font-family:Outfit,sans-serif;overflow:hidden;position:relative}.top-bar{height:48px;background:linear-gradient(90deg,#a855f7,#6366f1);color:#fff;display:flex;align-items:center;padding:0 16px;font-weight:600;justify-content:space-between;box-shadow:0 2px 10px #0000001a;z-index:10}.top-bar-left{display:flex;align-items:center;gap:12px}.estela-logo{height:36px;width:auto;filter:brightness(1)}.menu-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.85rem;padding:6px 12px;border-radius:4px;cursor:pointer;transition:all .2s}.menu-btn:hover{background:#fff3}.top-bar-divider{width:1px;height:24px;background:#fff3;margin:0 4px}.top-bar-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.85rem;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.top-bar-btn img{width:18px;height:18px;filter:brightness(0) invert(1)}.top-bar-btn:hover{background:#fff3;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a;border-color:#fff6}.top-bar-btn:active{transform:translateY(0)}.app-title{font-size:1.1rem}.main-workspace{flex:1;display:flex;overflow:hidden;position:relative;z-index:5}.block-palette{width:320px;background-color:#e5e7eb;border-right:1px solid #d1d5db;display:flex;flex-direction:column}.palette-header{padding:8px;background-color:#d1d5db;font-weight:700;font-size:.75rem;color:#374151;text-transform:uppercase}.palette-content{flex:1;padding:16px;color:#6b7280;font-size:.875rem}.code-workspace{flex:1;background-color:#fff;position:relative;display:flex;align-items:center;justify-content:center;color:#d1d5db;overflow:hidden}.workspace-watermark{position:absolute;top:10px;right:10px;width:100px;height:100px;opacity:.1;pointer-events:none;object-fit:contain;z-index:5}.workspace-label{position:absolute;top:8px;left:8px;padding:4px;background-color:#f3f4f6;border-radius:4px;font-size:.75rem;color:#6b7280;z-index:10}.stage-area{width:490px;background-color:#fff;border-left:1px solid #d1d5db;display:flex;flex-direction:column;padding:8px;gap:8px}.control-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;transition:transform .2s}.stage-canvas-container{position:relative;width:100%;aspect-ratio:4 / 3;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;align-self:center;box-shadow:0 1px 2px #0000000d;display:flex;align-items:center;justify-content:center}.sprite-pane{flex:1;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;display:flex;flex-direction:column;overflow:hidden}.sprite-info-panel{padding:16px;border-bottom:1px solid #e5e7eb;display:flex;flex-direction:column;gap:16px;background-color:#fff}.info-row{display:flex;align-items:center;gap:20px;flex-wrap:nowrap}.info-group{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#575e75}.info-group label{margin-right:4px}.info-icon{font-size:16px;color:#575e75}.info-input{border:1px solid #d1d5db;border-radius:18px;padding:5px 12px;font-size:12px;outline:none;background:#fff;transition:all .2s;color:#575e75}.info-input:focus{border-color:#a855f7;box-shadow:0 0 0 2px #a855f71a}.input-name{width:130px}.visibility-toggle{display:flex;border:1px solid #d1d5db;border-radius:8px;overflow:hidden;background:#fff}.toggle-btn{padding:5px 10px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#9ca3af;transition:all .2s}.toggle-btn.active{background-color:#f0f0f8;color:#a855f7}.mirror-btn{width:30px;height:30px;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.mirror-btn.active{background-color:#e0e7ff;border-color:#4f46e5}.bottom-pane{display:flex;flex:1;overflow:hidden;gap:8px;padding:8px;background-color:#f3f4f680;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5}.sprite-pane{flex:1;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;position:relative}.stage-pane{width:140px;height:auto;min-height:100%;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 8px 70px;position:relative;flex-shrink:0;box-sizing:border-box}.stage-header-title{width:100%;border-bottom:1px solid #e5e7eb;margin-bottom:8px;padding:8px 0 4px;text-align:center}.stage-pane h3{margin:0;font-size:11px;font-weight:600;color:#575e75;text-transform:uppercase;letter-spacing:.5px}.stage-thumbnail{width:110px;height:82px;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;background-color:#f9fafb;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s;box-shadow:inset 0 0 4px #0000000d;margin-top:4px}.stage-info{margin-top:8px;text-align:center;width:100%}.backdrop-name{font-size:12px;font-weight:700;color:#575e75;margin-bottom:2px}.backdrop-count{font-size:10px;color:#9ca3af}.add-sprite-btn,.add-backdrop-btn{position:absolute;top:auto;bottom:12px;right:12px;width:64px;height:64px;background-color:#855cd6;border:4px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:200}.add-sprite-btn img,.add-backdrop-btn img{width:28px;height:28px}.scrollable-sprites{flex:1;padding:12px;overflow-y:auto;background-color:#f9fafb;position:relative}.delete-btn{position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:#ef4444;color:#fff;border:none;border-radius:50%;font-size:12px;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:40}.section-title{font-size:.75rem;font-weight:700;color:#6b7280;margin-bottom:8px}.sprite-grid{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:12px;padding:12px;width:100%}.sprite-item{width:84px;height:96px;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;position:relative;transition:all .2s;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;padding:8px 8px 34px}.sprite-item img{width:100%!important;height:100%!important;object-fit:contain!important;padding:2px!important}.sprite-name{position:absolute;bottom:0;left:0;width:100%;font-size:11px;font-weight:500;text-align:center;background-color:#f3f4f6;white-space:normal;word-wrap:break-word;overflow:hidden;padding:4px 2px;line-height:1.2;min-height:28px;display:flex;align-items:center;justify-content:center}.add-sprite-btn{width:64px;height:64px;border:2px dashed #9ca3af;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#9ca3af;font-size:1.5rem;background:transparent}.add-sprite-btn:hover{border-color:#a855f7;color:#a855f7;background-color:#f5f3ff}.stage-pane{height:80px;background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;padding:8px;display:flex;align-items:center;justify-content:space-between}.stage-thumbnail{width:48px;height:40px;background-color:#fff;border:1px solid #d1d5db}.modal-content{background:#fff;padding:24px;border-radius:12px;width:500px;max-height:80vh;display:flex;flex-direction:column}.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;overflow-y:auto;padding:10px;margin-top:10px}.library-item{border:1px solid #e5e7eb;border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:all .2s}.library-item:hover{border-color:#3b82f6;background-color:#eff6ff}.library-item img{max-width:100%;height:60px;object-fit:contain;margin-bottom:8px}.library-item span{display:block;font-size:11px;font-weight:700;color:#374151}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5e7eb;padding-bottom:10px}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#6b7280}.lienzo-container.fullscreen-mode .top-bar,.lienzo-container.fullscreen-mode .code-workspace,.lienzo-container.fullscreen-mode .bottom-pane{display:none}.lienzo-container.fullscreen-mode .stage-area{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:1000;background-color:#fff;padding:10;display:flex;flex-direction:column}.lienzo-container.fullscreen-mode .stage-header{background-color:#f3f4f6;padding:10px 20px;border-radius:0;border:none;border-bottom:1px solid #d1d5db}.lienzo-container.fullscreen-mode .stage-canvas-container{flex:1;width:100%;height:100%;max-width:none;max-height:none;background-color:#f3f4f6;display:flex;align-items:center;justify-content:center;padding:0;border:none;box-shadow:none}.lienzo-container.fullscreen-mode .scratch-stage-canvas{width:100%;height:100%;object-fit:contain;background-color:#fff;box-shadow:none}.code-workspace{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}.sound-editor-container{display:flex;flex:1;background-color:#f0f0f8;overflow:hidden;height:100%}.sound-list-sidebar{width:100px;background-color:#fff;border-right:1px solid #d1d5db;display:flex;flex-direction:column;padding:12px;gap:12px}.sound-item{position:relative;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;padding:4px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;min-height:80px;flex-shrink:0}.sound-item.selected{border-color:#855cd6;background-color:#f5f3ff;box-shadow:0 0 0 2px #855cd633}.sound-icon-box{width:40px;height:40px;background-color:#f3f4f6;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#575e75}.sound-icon-box img{width:30px}.sound-item-info{flex:1;overflow:hidden}.sound-item-name{font-size:11px;font-weight:700;color:#575e75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sound-item-duration{font-size:10px;color:#9ca3af}.delete-sound-btn{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background-color:#ef4444;color:#fff;border:none;border-radius:50%;font-size:12px;display:none;align-items:center;justify-content:center;cursor:pointer}.sound-item:hover .delete-sound-btn{display:flex}.add-sound-btn{width:60px;height:60px;align-self:center;margin-top:auto;margin-bottom:20px;background-color:#855cd6;border:3px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 8px #0000001a;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:200}.add-sound-btn img{width:34px;height:34px}.add-sound-btn:hover{transform:scale(1.1);background-color:#724dbd;border-color:#fff9}.sound-main-workspace{flex:1;display:flex;flex-direction:column;padding:20px;gap:20px;background:#fff}.sound-top-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.sound-name-input-group{display:flex;align-items:center;gap:8px}.sound-name-label{font-size:12px;font-weight:700;color:#575e75}.sound-name-input{border:1px solid #d1d5db;border-radius:12px;padding:6px 12px;font-size:12px;outline:none}.sound-action-btns{display:flex;gap:8px}.sound-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;min-width:60px;transition:all .2s}.sound-action-btn:hover{background-color:#f9fafb;border-color:#855cd6}.sound-action-btn span{font-size:10px;color:#575e75;margin-top:4px}.sound-action-btn.danger{color:#ef4444}.waveform-container{flex:1;background-color:#fef2f2;border:1px solid #fecaca;border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.waveform-placeholder{width:90%;height:60%;background-color:#d946ef;opacity:.5;border-radius:100px;-webkit-mask-image:linear-gradient(to right,black,transparent,black);mask-image:linear-gradient(to right,black,transparent,black)}.waveform-svg{width:100%;height:100%;fill:#d946ef;opacity:.6}.sound-bottom-controls{display:flex;align-items:center;gap:20px;padding:10px;border-top:1px solid #e5e7eb}.play-sound-btn{width:48px;height:48px;background-color:#855cd6;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 8px #0000001a}.play-sound-btn:hover{transform:scale(1.1);background-color:#724dbd;border-color:#fff9}.sound-effects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px;flex:1}.effect-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer}.effect-btn:hover span{color:#855cd6}.effect-btn img{width:20px;height:20px}.effect-btn span{font-size:9px;color:#575e75;font-weight:500}.library-sound-icon{height:60px;display:flex;align-items:center;justify-content:center;background-color:#f3f4f6;border-radius:8px;margin-bottom:8px}.costume-editor-container{display:flex;height:100%;width:100%;background-color:#f0f0f5;font-family:inherit;color:#575e75;overflow:hidden}.costume-list-sidebar{width:100px;background-color:#e5e7eb;border-right:1px solid #d1d5db;display:flex;flex-direction:column;padding:8px 4px;flex-shrink:0}.costume-list-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:0}.costume-item{position:relative;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;padding:4px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;min-height:80px;flex-shrink:0}.costume-item.selected{border-color:#855cd6;box-shadow:0 0 0 2px #855cd633;background-color:#f5f3ff}.costume-number{position:absolute;top:4px;left:4px;font-size:10px;font-weight:700;color:#94a3b8}.costume-thumbnail{width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.costume-thumbnail img{max-width:100%;max-height:100%;object-fit:contain}.costume-info{width:100%;text-align:center}.costume-name-text{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.costume-size-text{font-size:8px;color:#94a3b8}.delete-costume-btn{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background-color:#855cd6;color:#fff;border:none;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:14px;cursor:pointer;z-index:5}.costume-item:hover .delete-costume-btn{display:flex}.add-costume-btn{width:60px;height:60px;background-color:#855cd6;border:3px solid rgba(255,255,255,.4);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:center;margin-top:12px;flex-shrink:0;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:200;margin-bottom:20px}.add-costume-btn:hover{transform:scale(1.1);background-color:#724dbd;border-color:#fff9}.add-costume-btn img{width:34px;height:34px}.costume-main-workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.costume-top-toolbar{background-color:#fff;border-bottom:1px solid #d1d5db;padding:8px 16px;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.costume-name-input{border:1px solid #d1d5db;border-radius:12px;padding:4px 12px;font-size:12px;width:120px;outline:none}.costume-editor-body{flex:1;display:flex;background-color:#f8fafc;min-height:0;overflow:hidden}.costume-left-toolbar{width:50px;background-color:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;padding:8px 4px;gap:8px;flex-shrink:0;overflow-y:auto}.costume-canvas-container{flex:1;display:flex;flex-direction:column;padding:12px;min-width:0;min-height:0}.canvas-costume-preview{max-width:90%;max-height:90%;object-fit:contain}.no-costume-message{height:100%;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-style:italic}.backdrop-editor-container{display:flex;height:100%;width:100%;background-color:#f0f0f5;font-family:inherit;color:#575e75;overflow:hidden}.backdrop-list-sidebar{width:100px;background-color:#e5e7eb;border-right:1px solid #d1d5db;display:flex;flex-direction:column;padding:8px 4px;flex-shrink:0}.backdrop-list-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:0}.backdrop-item{position:relative;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;padding:4px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;min-height:80px;flex-shrink:0}.backdrop-item.selected{border-color:#855cd6;box-shadow:0 0 0 2px #855cd633;background-color:#f5f3ff}.backdrop-number{position:absolute;top:4px;left:4px;font-size:10px;font-weight:700;color:#94a3b8}.backdrop-thumbnail{width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.backdrop-thumbnail img{max-width:100%;max-height:100%;object-fit:contain}.backdrop-info{width:100%;text-align:center}.backdrop-name-text{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.backdrop-size-text{font-size:8px;color:#94a3b8}.delete-backdrop-btn{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background-color:#855cd6;color:#fff;border:none;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:14px;cursor:pointer;z-index:5}.backdrop-item:hover .delete-backdrop-btn{display:flex}.add-backdrop-btn-sidebar{width:60px;height:60px;background-color:#855cd6;border:3px solid rgba(255,255,255,.4);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:center;margin-top:12px;flex-shrink:0;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:200;margin-bottom:20px}.add-backdrop-btn-sidebar:hover{transform:scale(1.1);background-color:#724dbd;border-color:#fff9}.add-backdrop-btn-sidebar img{width:34px;height:34px}.backdrop-main-workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.backdrop-top-toolbar{background-color:#fff;border-bottom:1px solid #d1d5db;padding:8px 16px;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.toolbar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toolbar-group{display:flex;align-items:center;gap:8px}.toolbar-group label{font-size:11px;font-weight:600}.backdrop-name-input{border:1px solid #d1d5db;border-radius:12px;padding:4px 12px;font-size:12px;width:120px;outline:none}.toolbar-divider{width:1px;height:20px;background-color:#e2e8f0}.tool-btn-icon{background:transparent;border:1px solid #e2e8f0;border-radius:4px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tool-btn-icon img{width:16px;height:16px}.tool-btn-text{background:transparent;border:1px solid #e2e8f0;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}.tool-btn-text.disabled{opacity:.4;cursor:default}.toolbar-row-2{display:flex;align-items:center;gap:16px;padding-top:4px;border-top:1px dashed #f1f5f9;flex-wrap:wrap}.color-picker-group{gap:12px}.color-field{display:flex;align-items:center;gap:6px}.color-preview{width:22px;height:22px;border:1px solid #d1d5db;border-radius:4px}.border-width-input{width:36px;border:1px solid #d1d5db;border-radius:4px;padding:2px 4px;font-size:11px;text-align:center}.tool-btn-action{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;font-size:11px;font-weight:600;padding:4px;white-space:nowrap}.tool-btn-action img{width:14px;height:14px}.tool-btn-action.danger{color:#ef4444}.backdrop-editor-body{flex:1;display:flex;background-color:#f8fafc;min-height:0;overflow:hidden}.backdrop-left-toolbar{width:50px;background-color:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;padding:8px 4px;gap:8px;flex-shrink:0;overflow-y:auto}.draw-tool-btn{width:32px;height:32px;background:transparent;border:1px solid transparent;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.draw-tool-btn.active{background-color:#855cd6;border-color:#855cd6}.draw-tool-btn.active img{filter:brightness(0) invert(1)}.draw-tool-btn:not(.active):hover{background-color:#f1f5f9}.draw-tool-btn img{width:18px;height:18px}.backdrop-canvas-container{flex:1;display:flex;flex-direction:column;padding:12px;min-width:0;min-height:0}.checkerboard-bg{flex:1;background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:0}.canvas-backdrop-preview{max-width:90%;max-height:90%;object-fit:contain}.canvas-bottom-bar{height:40px;display:flex;align-items:center;justify-content:space-between;padding-top:8px;flex-shrink:0}.convert-btn{background-color:#855cd6;color:#fff;border:none;border-radius:12px;padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer}.zoom-controls{display:flex;gap:4px;background-color:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:2px 6px}.zoom-btn{background:transparent;border:none;cursor:pointer;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.zoom-btn img{width:12px;height:12px;opacity:.6}.no-backdrop-message{height:100%;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-style:italic}.blocklyTreeRow{border-left:none!important}.blocklyTreeIcon{opacity:1!important;background-image:none!important;width:20px!important;height:20px!important;border-radius:50%!important;margin-right:8px!important;display:inline-block!important;-webkit-mask-image:none!important;mask-image:none!important;transition:transform .3s ease;background-color:#ccc!important}.blocklyTreeRow[style*="#4C97FF"] .blocklyTreeIcon,.blocklyTreeRow[style*="76, 151, 255"] .blocklyTreeIcon,.blocklyTreeRow.blocklyTreeCategory_motion_category .blocklyTreeIcon{background-color:#4c97ff!important}.blocklyTreeRow[style*="#9966FF"] .blocklyTreeIcon,.blocklyTreeRow[style*="153, 102, 255"] .blocklyTreeIcon,.blocklyTreeRow.blocklyTreeCategory_looks_category .blocklyTreeIcon{background-color:#96f!important}.blocklyTreeRow[style*="#D65CD6"] .blocklyTreeIcon,.blocklyTreeRow[style*="214, 92, 214"] .blocklyTreeIcon,.blocklyTreeRow.blocklyTreeCategory_sound_category .blocklyTreeIcon{background-color:#d65cd6!important}.blocklyTreeRow[style*="#FFBF00"] .blocklyTreeIcon,.blocklyTreeRow[style*="255, 191, 0"] .blocklyTreeIcon,.blocklyTreeRow.blocklyTreeCategory_events_category .blocklyTreeIcon{background-color:#ffbf00!important}.blocklyTreeRow[style*="#FFAB19"] .blocklyTreeIcon,.blocklyTreeRow[style*="255, 171, 25"] .blocklyTreeIcon,.blocklyTreeRow.blocklyTreeCategory_control_category .blocklyTreeIcon{background-color:#ffab19!important}.blocklyTreeRow[style*="#5CB1D6"] .blocklyTreeIcon,.blocklyTreeRow[style*="92, 177, 214"] .blocklyTreeIcon,.blocklyTreeRow.blocklyTreeCategory_sensing_category .blocklyTreeIcon{background-color:#5cb1d6!important}.blocklyTreeRow[style*="#59C059"] .blocklyTreeIcon,.blocklyTreeRow[style*="89, 192, 89"] .blocklyTreeIcon,.blocklyTreeRow.blocklyTreeCategory_operator_category .blocklyTreeIcon{background-color:#59c059!important}.blocklyTreeRow[style*="#FF8C1A"] .blocklyTreeIcon,.blocklyTreeRow[style*="255, 140, 26"] .blocklyTreeIcon,.blocklyTreeRow.blocklyTreeCategory_variables_category .blocklyTreeIcon{background-color:#ff8c1a!important}.blocklyTreeRow[style*="#00A3E0"] .blocklyTreeIcon,.blocklyTreeRow[style*="0, 163, 224"] .blocklyTreeIcon{background-color:#00a3e0!important}.blocklyTreeRow:hover .blocklyTreeIcon{transform:rotate(15deg) scale(1.1)}.blocklyTreeSelected .blocklyTreeIcon{transform:scale(1.2)}.sprite-selector-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#f8fafc,#eef2ff);z-index:99999;display:flex;flex-direction:column;overflow:hidden;font-family:Outfit,sans-serif;animation:fadeIn .3s ease-out}.selector-header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 4px 6px -1px #0000000d}.selector-content{flex:1;overflow-y:auto;padding:40px;scroll-behavior:smooth}.category-icon{width:28px;height:28px;background-color:#6366f1;-webkit-mask-image:url(/cursos/escuelacodinglab/assets/logo/estela-logo-mask.svg);mask-image:url(/cursos/escuelacodinglab/assets/logo/estela-logo-mask.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transition:transform .3s ease}.icon-personajes{background-color:#6366f1}.icon-deporte{background-color:#f59e0b}.icon-comida{background-color:#ec4899}.icon-mitologia{background-color:#8b5cf6}.icon-objetos{background-color:#06b6d4}.selector-sprite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px}.sprite-card{background:#fff;border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;border:1px solid rgba(255,255,255,.8);box-shadow:0 4px 20px #00000008;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.sprite-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 30px #6366f126;border-color:#e0e7ff}.sprite-image-container{width:120px;height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:#f8fafc;border-radius:12px;padding:10px;transition:background .3s}.sprite-card:hover .sprite-image-container{background:#eef2ff}.sprite-image-container img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .3s}.sprite-card:hover .sprite-image-container img{transform:scale(1.1)}.selector-sprite-name{font-size:16px;font-weight:600;color:#475569;text-align:center}.sprite-selector-container .bg-circle{pointer-events:none;position:absolute;border-radius:50%;filter:blur(60px);opacity:.15;z-index:0}.sprite-selector-container .circle-1{width:600px;height:600px;background:#6366f1;top:-200px;left:-200px}.sprite-selector-container .circle-2{width:800px;height:800px;background:#a855f7;bottom:-300px;right:-200px}.backdrop-selector-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#f8fafc,#eef2ff);z-index:99999;display:flex;flex-direction:column;overflow:hidden;font-family:Outfit,sans-serif;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.selector-header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 4px 6px -1px #0000000d;position:relative;z-index:10}.selector-header h1{margin:0;font-size:28px;background:linear-gradient(135deg,#6366f1,#a855f7);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}.back-btn{padding:10px 24px;background:#fff;border:2px solid #e2e8f0;border-radius:12px;font-size:16px;font-weight:600;color:#475569;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px}.back-btn:hover{background:#f1f5f9;border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 4px 6px #0000000d}.selector-content{flex:1;overflow-y:auto;padding:40px;scroll-behavior:smooth;position:relative;z-index:10}.category-section{margin-bottom:40px}.category-icon{width:28px;height:28px;background-color:#6366f1;-webkit-mask-image:url(/cursos/escuelacodinglab/assets/logo/estela-logo-mask.svg);mask-image:url(/cursos/escuelacodinglab/assets/logo/estela-logo-mask.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transition:transform .3s ease}.icon-interiores{background-color:#10b981}.icon-exteriores{background-color:#f43f5e}.selector-sprite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}.backdrop-card{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;border:1px solid rgba(255,255,255,.8);box-shadow:0 4px 20px #00000008;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.backdrop-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 30px #6366f126;border-color:#e0e7ff}.backdrop-image-container{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;margin-bottom:12px;background:#f8fafc;border-radius:12px;overflow:hidden;transition:background .3s}.backdrop-card:hover .backdrop-image-container{background:#eef2ff}.backdrop-image-container img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.backdrop-card:hover .backdrop-image-container img{transform:scale(1.05)}.selector-backdrop-name{font-size:16px;font-weight:600;color:#475569;text-align:center}.backdrop-selector-container .bg-circle{pointer-events:none;position:absolute;border-radius:50%;filter:blur(60px);opacity:.15;z-index:0}.backdrop-selector-container .circle-1{width:600px;height:600px;background:#6366f1;top:-200px;left:-200px}.backdrop-selector-container .circle-2{width:800px;height:800px;background:#a855f7;bottom:-300px;right:-200px}.extension-selector-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#f8fafc,#eef2ff);z-index:99999;display:flex;flex-direction:column;overflow:hidden;font-family:Outfit,sans-serif;animation:extensionFadeIn .3s ease-out}@keyframes extensionFadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.extension-selector-container .bg-circle{pointer-events:none;position:absolute;border-radius:50%;filter:blur(60px);opacity:.12;z-index:0}.extension-selector-container .circle-1{width:600px;height:600px;background:#6366f1;top:-200px;left:-200px}.extension-selector-container .circle-2{width:800px;height:800px;background:#a855f7;bottom:-300px;right:-200px}.extension-selector-container .circle-3{width:400px;height:400px;background:#ec4899;top:20%;right:10%;opacity:.08}.selector-header{display:flex;justify-content:space-between;align-items:center;padding:24px 48px;background:#fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 4px 6px -1px #0000000d;position:relative;z-index:10}.selector-header h1{margin:0;font-size:32px;background:linear-gradient(135deg,#6366f1,#a855f7);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}.back-btn{padding:12px 28px;background:#fff;border:2px solid #e2e8f0;border-radius:14px;font-size:16px;font-weight:600;color:#475569;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:10px}.back-btn:hover{background:#f8fafc;border-color:#6366f1;color:#6366f1;transform:translateY(-2px);box-shadow:0 4px 12px #6366f11a}.selector-content{flex:1;overflow-y:auto;padding:48px;position:relative;z-index:10;scroll-behavior:smooth}.category-section{margin-bottom:60px}.category-title{font-size:22px;font-weight:700;color:#334155;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #e2e8f0;display:flex;align-items:center;gap:12px}.category-icon{width:28px;height:28px;background-color:#6366f1;-webkit-mask-image:url(/cursos/escuelacodinglab/assets/logo/estela-logo-mask.svg);mask-image:url(/cursos/escuelacodinglab/assets/logo/estela-logo-mask.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transition:transform .3s ease}.category-section:hover .category-icon{transform:rotate(15deg) scale(1.1)}.icon-hardware{background-color:#64748b}.icon-robotica{background-color:#f59e0b}.extension-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px}.extension-card{background:#ffffffe6;border-radius:20px;padding:24px;display:flex;gap:20px;border:1px solid rgba(255,255,255,1);box-shadow:0 4px 20px #00000008;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1)}.extension-card:hover{transform:translateY(-10px) scale(1.02);background:#fff;box-shadow:0 20px 40px #6366f126;border-color:#e0e7ff}.extension-image-container{width:100px;height:100px;min-width:100px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;border-radius:16px;padding:12px;transition:all .3s ease}.extension-card:hover .extension-image-container{background:#eef2ff;transform:rotate(-5deg)}.extension-image-container img{max-width:100%;max-height:100%;object-fit:contain}.extension-info{display:flex;flex-direction:column;justify-content:center}.extension-name{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:8px;transition:color .3s}.extension-card:hover .extension-name{color:#6366f1}.extension-description{font-size:14px;color:#64748b;line-height:1.5}.landing-container{height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,#f8fafc,#eef2ff);overflow:hidden;font-family:Outfit,Inter,Helvetica Neue,Arial,sans-serif}.bg-circle{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;animation:float 20s infinite ease-in-out;z-index:0}.circle-3{width:350px;height:350px;background:#6366f1;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-10s;opacity:.3}.content-glass{position:relative;z-index:10;background:#ffffffb3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:60px;width:90%;max-width:800px;box-shadow:0 8px 32px #1f268726;text-align:center;animation:scaleIn .8s cubic-bezier(.2,.8,.2,1)}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.brand-logo-container{margin-bottom:20px;display:flex;justify-content:center;align-items:center}.landing-logo{height:120px;width:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));transition:transform .3s ease}.landing-logo:hover{transform:scale(1.05)}.landing-title{font-size:4rem;font-weight:800;margin:0 0 10px;background:linear-gradient(45deg,#4c97ff,#7c3aed,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-2px;line-height:1.2;padding-bottom:10px}.landing-subtitle{font-size:1.5rem;color:#575e75;margin-bottom:50px;font-weight:500}.menu-grid{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.menu-card{background:#fff;border:none;border-radius:16px;padding:24px;width:280px;text-align:left;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.project-card:hover{transform:translateY(-5px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:2px solid #a855f7}.project-card:active{transform:scale(.98)}.card-icon{font-size:2.5rem;margin-bottom:10px}.card-text h3{margin:0;font-size:1.25rem;color:#374151;font-weight:700}.card-text p{margin:4px 0 0;font-size:.9rem;color:#6b7280}.card-arrow{position:absolute;bottom:24px;right:24px;font-size:1.5rem;color:#a855f7;opacity:0;transform:translate(-10px);transition:all .3s ease}.project-card:hover .card-arrow{opacity:1;transform:translate(0)}.disabled-card{opacity:.6;cursor:not-allowed;background:#f9fafb}.footer{position:absolute;bottom:20px;color:#9ca3af;font-size:.8rem;font-weight:500}.creator-container{height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f8fafc,#eef2ff);font-family:Outfit,sans-serif;position:relative;overflow:hidden}.creator-header{height:60px;background:linear-gradient(90deg,#374151,#4b5563);color:#fff;display:flex;align-items:center;padding:0 20px;gap:20px;box-shadow:0 2px 10px #0000001a;z-index:10}.back-btn{background:transparent;border:1px solid #6b7280;color:#e5e7eb;padding:6px 12px;border-radius:4px;cursor:pointer}.back-btn:hover{background:#ffffff1a}.header-title{margin:0;font-size:1.2rem;flex:1}.level-controls{display:flex;align-items:center;gap:10px}.level-input{width:60px;padding:4px;border-radius:4px;border:1px solid #9ca3af}.header-actions{display:flex;gap:12px}.export-btn,.import-btn{padding:8px 16px;background-color:#4c97ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;display:flex;align-items:center;gap:8px}.import-btn{background-color:#59c059}.export-btn:hover,.import-btn:hover{filter:brightness(1.1)}.creator-body{flex:1;display:flex;overflow:hidden;position:relative;z-index:5}.level-sidebar{width:120px;background-color:#e5e7eb;border-right:1px solid #d1d5db;overflow-y:auto;display:flex;flex-direction:column}.level-tab{padding:15px;border-bottom:1px solid #d1d5db;cursor:pointer;font-size:.9rem;color:#4b5563;transition:background-color .2s}.level-tab:hover{background-color:#d1d5db}.level-tab.active{background-color:#fff;color:#2563eb;font-weight:700;border-left:4px solid #2563eb}.level-editor{flex:1;display:flex;flex-direction:column;padding:20px;gap:20px;overflow-y:auto}.config-panel{background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,.8);display:flex;gap:40px;height:400px;overflow-y:auto;align-items:stretch;box-shadow:0 4px 15px #0000000d}.form-group{display:flex;flex-direction:column;gap:8px;min-height:100%}.description-group{flex:2}.categories-group{flex:1}.form-group label{font-weight:700;font-size:.9rem;color:#374151}textarea{resize:none;flex:1;min-height:100px;padding:10px;border:1px solid #d1d5db;border-radius:4px;font-family:inherit}.checkbox-group{display:flex;flex-direction:column;gap:8px}.chk-label{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer}.category-selection{display:flex;flex-direction:column;gap:12px}.category-title{font-weight:700!important;color:#2563eb!important}.block-selection{display:flex;flex-direction:column;gap:6px;padding-left:24px;border-left:2px solid #e5e7eb;margin-top:-4px;margin-bottom:4px}.block-item{font-weight:400!important;color:#4b5563}.solution-panel{flex:1;min-height:400px;background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;border:1px solid rgba(255,255,255,.8);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 15px #0000000d}.panel-header{padding:10px;background-color:#f9fafb;border-bottom:1px solid #e5e7eb;font-weight:700;color:#374151;font-size:.9rem}.workspace-wrapper{flex:1;position:relative}.hints-group{flex:2}.hints-list{display:flex;flex-direction:column;gap:8px}.hint-item{display:flex;gap:8px;align-items:center}.hint-item textarea{flex:1;padding:8px;border:1px solid #d1d5db;border-radius:4px;resize:vertical;min-height:40px;font-family:inherit;font-size:.85rem}.remove-hint-btn{background:#fee2e2;color:#ef4444;border:none;border-radius:4px;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.remove-hint-btn:hover{background:#fecaca}.add-hint-btn{background:#eff6ff;color:#2563eb;border:1px dashed #2563eb;padding:6px;border-radius:4px;cursor:pointer;font-size:.85rem;font-weight:500}.add-hint-btn:hover{background:#dbeafe}.import-code-btn{padding:8px 16px;background-color:#a855f7;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;display:flex;align-items:center;gap:8px;transition:filter .2s}.import-code-btn:hover{filter:brightness(1.1)}.modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background:#fff;padding:24px;border-radius:12px;width:600px;max-width:90vw;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.modal-content h3{margin:0;color:#111827;font-size:1.25rem}.modal-content p{margin:0;color:#4b5563;font-size:.95rem}.code-textarea{width:100%;height:300px;font-family:"ui-monospace",SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85rem;padding:12px;border:1px solid #d1d5db;border-radius:8px;resize:none;background-color:#f9fafb;outline:none;transition:border-color .2s}.code-textarea:focus{border-color:#a855f7;box-shadow:0 0 0 2px #a855f733}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}.cancel-btn{padding:10px 20px;background-color:#fff;color:#4b5563;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s}.confirm-btn{padding:10px 24px;background-color:#a855f7;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s}.confirm-btn:hover{background-color:#9333ea}.cancel-btn:hover{background-color:#f9fafb;border-color:#9ca3af}.ai-btn{padding:10px 20px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;transition:all .2s;box-shadow:0 2px 4px #4f46e533}.ai-btn:hover{transform:translateY(-1px);box-shadow:0 4px 6px #4f46e54d;filter:brightness(1.1)}.ai-btn:active{transform:translateY(0)}.player-container{display:flex;height:100vh;width:100vw;font-family:Outfit,sans-serif;background:linear-gradient(135deg,#f8fafc,#eef2ff);position:relative;overflow:hidden}.player-sidebar{width:280px;background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid rgba(255,255,255,.8);display:flex;flex-direction:column;padding:16px;box-shadow:2px 0 15px #0000000d;z-index:20;flex-shrink:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;border-bottom:1px solid #e5e7eb;padding-bottom:8px}.sidebar-header h3{margin:0;font-size:1rem;color:#374151}.exit-btn{background:transparent;border:1px solid #ef4444;color:#ef4444;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:.75rem}.exit-btn:hover{background:#fef2f2}.header-actions{display:flex;align-items:center;gap:4px}.header-icon-btn{background:#7c3aed14;border:1px solid rgba(124,58,237,.2);color:#7c3aed;width:30px;height:30px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);padding:0}.header-icon-btn img{width:16px;height:16px;filter:invert(23%) sepia(92%) saturate(1500%) hue-rotate(246deg) brightness(80%)}.header-icon-btn:hover{background:#7c3aed26;transform:translateY(-1px);box-shadow:0 3px 8px #7c3aed33;border-color:#7c3aed66}.header-icon-btn:active{transform:translateY(0)}.level-indicator{background-color:#f5f3ff;color:#7c3aed;padding:8px;border-radius:6px;font-weight:700;text-align:center;margin-bottom:16px;font-size:.9rem}.level-instructions{flex:1;background:#fff;padding:12px;border-radius:8px;border:1px solid #e5e7eb;overflow-y:auto;margin-bottom:16px;display:flex;flex-direction:column}.level-instructions h4{margin-top:0;color:#4b5563;font-size:.9rem}.level-instructions p{color:#6b7280;line-height:1.4;font-size:.85rem;white-space:pre-wrap}.status-badge{margin-bottom:16px;text-align:center}.badge{padding:6px 12px;border-radius:20px;font-weight:700;font-size:.8rem;display:inline-block}.badge.solved{background-color:#dcfce7;color:#166534;border:1px solid #bbf7d0}.badge.pending{background-color:#fef3c7;color:#92400e;border:1px solid #fde68a}.player-controls{margin-top:auto}.next-level-btn{width:100%;background-color:#a855f7;color:#fff;border:none;padding:12px;border-radius:6px;font-weight:700;cursor:pointer;font-size:.9rem;transition:all .2s}.next-level-btn:hover:not(:disabled){background-color:#9333ea;transform:translateY(-2px)}.next-level-btn:disabled{background-color:#9ca3af;cursor:not-allowed;opacity:.7}.player-main{flex:1;display:flex;overflow:hidden;position:relative;z-index:5}.player-workspace{flex:1;background-color:#fff;position:relative;overflow:hidden}.workspace-watermark{position:absolute;top:10px;right:10px;width:80px;height:80px;opacity:.1;pointer-events:none;object-fit:contain;z-index:5}.player-stage-area{width:490px;background-color:#fff;border-left:1px solid #d1d5db;display:flex;flex-direction:column;padding:8px;gap:8px;flex-shrink:0}.stage-header{display:flex;justify-content:space-between;align-items:center;padding:4px;background-color:#fff;border:1px solid #e5e7eb;border-radius:4px}.controls{display:flex;gap:8px}.control-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;transition:transform .2s}.control-btn:hover{transform:scale(1.1)}.btn-flag,.btn-stop{background-color:transparent}.stage-canvas-container{position:relative;width:100%;aspect-ratio:4 / 3;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;align-self:center;display:flex;align-items:center;justify-content:center}.scratch-stage-canvas{width:100%;height:100%;display:block}.bottom-pane{display:flex;flex:1;overflow:hidden;gap:8px;padding:8px;background-color:#f3f4f680;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sprite-pane{flex:1;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;display:flex;flex-direction:column;overflow:hidden;position:relative}.stage-pane{width:120px;height:auto;min-height:100%;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 6px 60px;position:relative;flex-shrink:0;box-sizing:border-box}.stage-header-title{width:100%;border-bottom:1px solid #e5e7eb;margin-bottom:6px;padding:6px 0 4px;text-align:center}.stage-pane h3{margin:0;font-size:10px;font-weight:600;color:#575e75;text-transform:uppercase}.stage-thumbnail{width:90px;height:68px;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;background-color:#f9fafb;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s;margin-top:4px}.stage-thumbnail img{width:100%;height:100%;object-fit:cover}.stage-info{margin-top:6px;text-align:center;width:100%}.backdrop-name{font-size:11px;font-weight:700;color:#575e75;margin-bottom:1px}.backdrop-count{font-size:9px;color:#9ca3af}.backdrop-count strong{color:#575e75}.add-sprite-btn,.add-backdrop-btn{position:absolute;top:auto;bottom:10px;right:10px;width:64px;height:64px;background-color:#855cd6;border:3px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 8px #0000001a;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:200}.add-sprite-btn img{width:46px;height:46px}.add-backdrop-btn img{width:40px;height:40px}.add-sprite-btn:hover,.add-backdrop-btn:hover{transform:scale(1.1);background-color:#724dbd;border-color:#fff9}.add-sprite-btn:active,.add-backdrop-btn:active{transform:scale(.95)}.sprite-info-panel{padding:12px;border-bottom:1px solid #e5e7eb;display:flex;flex-direction:column;gap:12px;background-color:#fff}.info-row{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}.info-group{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:#575e75}.info-group label{margin-right:2px}.info-icon{font-size:14px;color:#575e75}.info-input{border:1px solid #d1d5db;border-radius:14px;padding:4px 8px;font-size:10px;outline:none;background:#fff;transition:all .2s;color:#575e75}.info-input:focus{border-color:#4c97ff;box-shadow:0 0 0 2px #4c97ff1a}.info-input::-webkit-outer-spin-button,.info-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.info-input[type=number]{-moz-appearance:textfield;appearance:none}.mirror-btn{width:26px;height:26px;background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.mirror-btn:hover{background-color:#f9fafb;border-color:#3b82f6}.mirror-btn.active{background-color:#f5f3ff;border-color:#a855f7}.input-name{width:80px}.input-small{width:40px;text-align:center}.scrollable-sprites{flex:1;padding:8px;overflow-y:auto;background-color:#f3f4f6}.sprite-grid{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:12px;padding:8px;width:100%}.sprite-item{width:76px;height:86px;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;padding:6px 6px 28px}.sprite-item.selected{border-color:#a855f7;box-shadow:0 0 0 2px #a855f7;background-color:#f5f3ff}.sprite-item img{width:100%;height:100%;object-fit:contain}.sprite-name{position:absolute;bottom:0;left:0;width:100%;font-size:10px;font-weight:500;text-align:center;background-color:#f3f4f6;white-space:normal;word-wrap:break-word;overflow:hidden;padding:2px;line-height:1.1;min-height:24px;display:flex;align-items:center;justify-content:center}.sprite-item.selected .sprite-name{background-color:#a855f7;color:#fff}.delete-btn{position:absolute;top:-6px;right:-6px;width:16px;height:16px;background:#ef4444;color:#fff;border:none;border-radius:50%;font-size:10px;display:none;align-items:center;justify-content:center;z-index:10}.sprite-item:hover .delete-btn{display:flex}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:20px;border-radius:12px;width:450px;max-height:80vh;display:flex;flex-direction:column}.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;overflow-y:auto;padding:10px}.library-item{border:1px solid #e5e7eb;border-radius:8px;padding:8px;text-align:center;cursor:pointer}.library-item img{height:50px;object-fit:contain}.library-item span{font-size:10px;display:block}.player-container.fullscreen-mode .player-sidebar,.player-container.fullscreen-mode .player-workspace,.player-container.fullscreen-mode .bottom-pane{display:none}.btn-fullscreen{padding:2px;border-radius:4px;background-color:#fff;border:1px solid #e5e7eb;margin-left:auto;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-fullscreen:hover{background-color:#f3f4f6;transform:scale(1.1)}.player-container.fullscreen-mode .player-stage-area{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:1000;background-color:#fff;padding:0;display:flex;flex-direction:column}.player-container.fullscreen-mode .stage-header{background-color:#f3f4f6;padding:10px 20px;border-radius:0;border:none;border-bottom:1px solid #d1d5db}.player-container.fullscreen-mode .stage-canvas-container{flex:1;width:100%;height:100%;max-width:none;max-height:none;background-color:#f3f4f6;display:flex;align-items:center;justify-content:center;padding:20px;border:none;box-shadow:none}.player-container.fullscreen-mode .scratch-stage-canvas{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:4 / 3;background-color:#fff;box-shadow:0 10px 25px #0000001a}.hints-section{margin-top:auto;border-top:1px solid #f3f4f6;padding-top:12px;display:flex;flex-direction:column;gap:10px}.hint-btn{background:#fef3c7;border:1px solid #fde68a;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;align-self:flex-start}.hint-btn:hover{background:#fde68a;transform:scale(1.1)}.hint-btn img{width:24px;height:24px}.hint-card{background:#fffbeb;border:1px solid #fef3c7;border-radius:8px;padding:10px;animation:slideDown .3s ease-out}.hint-card p{margin:0 0 4px;color:#92400e;font-size:.8rem;font-style:italic;white-space:pre-wrap}.hint-card small{display:block;text-align:right;color:#d97706;font-size:.7rem;font-weight:700}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.ask-overlay{position:absolute;bottom:20px;left:20px;right:20px;background:#fff;border:2px solid #dcdcdc;border-radius:24px;padding:6px 16px;display:flex;justify-content:center;align-items:center;z-index:100;box-shadow:0 4px 6px #0000001a}.ask-form{display:flex;align-items:center;gap:12px;width:100%}.ask-input{flex:1;padding:8px 16px;border:1px solid #eeeeee;border-radius:20px;font-size:16px;outline:none;color:#374151;font-family:inherit;background:#f9f9f9}.ask-input:focus{background:#fff;border-color:#8a2be2}.ask-submit-btn{width:36px;height:36px;background-color:#8a2be2;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:background-color .2s,transform .1s;font-weight:700;flex-shrink:0}.ask-submit-btn:hover{background-color:#7b1fa2}.ask-submit-btn:active{transform:scale(.9)}.add-extension-btn{position:absolute!important;bottom:15px!important;left:15px!important;width:auto!important;height:auto!important;min-width:50px;min-height:50px;padding:4px 8px;background-color:#a855f7!important;border:2px solid white!important;box-shadow:0 4px 8px #0000004d!important;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;z-index:99999!important;transition:transform .2s;pointer-events:auto!important}.add-extension-btn .btn-text{color:#fff;font-size:8px;font-weight:700;margin-top:2px}.add-extension-btn:hover{transform:scale(1.1);background-color:#9333ea!important}.add-extension-btn img{width:32px;height:32px}.challenge-list-container{height:100vh;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#eef2ff);position:relative;overflow:hidden;font-family:Outfit,sans-serif}.bg-circle{position:absolute;border-radius:50%;filter:blur(60px);opacity:.4;animation:float 20s infinite ease-in-out;z-index:0}.circle-1{width:450px;height:450px;background:#a855f7;top:-150px;left:-100px;animation-delay:0s}.circle-2{width:550px;height:550px;background:#4c97ff;bottom:-150px;right:-50px;animation-delay:-5s}.circle-3{width:350px;height:350px;background:#6366f1;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-10s;opacity:.2}@keyframes float{0%{transform:translate(0) rotate(0)}33%{transform:translate(30px,-50px) rotate(10deg)}66%{transform:translate(-20px,20px) rotate(-5deg)}to{transform:translate(0) rotate(0)}}.list-content-glass{background:#ffffffb3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.8);border-radius:32px;padding:2.5rem;width:90%;max-width:900px;height:80vh;box-shadow:0 25px 50px -12px #00000026;z-index:10;display:flex;flex-direction:column}.list-header{display:flex;align-items:center;gap:20px;margin-bottom:2rem;color:#374151}.back-button{background:#fff;border:1px solid #e5e7eb;color:#4c97ff;padding:8px 16px;border-radius:12px;cursor:pointer;font-weight:600;transition:all .2s;box-shadow:0 2px 4px #0000000d}.back-button:hover{background:#f8fafc;transform:translate(-4px);box-shadow:0 4px 8px #0000001a;border-color:#4c97ff}.list-header h2{font-size:2.5rem;font-weight:800;margin:0;background:linear-gradient(45deg,#4c97ff,#7c3aed,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}.categories-scroll{flex:1;overflow-y:auto;padding-right:10px}.categories-scroll::-webkit-scrollbar{width:6px}.categories-scroll::-webkit-scrollbar-track{background:#ffffff0d;border-radius:10px}.categories-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.category-section{margin-bottom:2.5rem}.category-title{color:#e0e7ff;font-size:1.25rem;margin-bottom:1rem;padding-left:5px;border-left:4px solid #a855f7}.challenges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.challenge-card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:1.25rem;display:flex;align-items:center;gap:1rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:left;box-shadow:0 4px 6px -1px #0000000d}.challenge-card:hover{background:#fff3;transform:translateY(-5px);border-color:#ffffff4d;box-shadow:0 10px 20px #0003}.challenge-icon{font-size:2rem;background:#ffffff1a;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:16px}.challenge-info h4{color:#374151;margin:0 0 4px;font-size:1.1rem;font-weight:700}.challenge-info p{color:#6b7280;margin:0;font-size:.9rem}