body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.App-header{align-items:center;color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:20px}.App-header h1{font-size:4rem;font-weight:700;margin-bottom:1rem}.App-header>p{font-size:1.3rem;margin-bottom:3rem;max-width:600px;opacity:.9;text-align:center}.features{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:3rem;max-width:900px;width:100%}.feature{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:10px;cursor:pointer;padding:2rem;transition:all .3s ease}.feature:hover{background:#ffffff26;border-color:#fff6;box-shadow:0 8px 24px #0003;transform:translateY(-5px)}.feature h3{font-size:1.8rem;margin-bottom:.5rem}.feature p{opacity:.9}.tutorials-page{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.navbar{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-bottom:1px solid #fff3;display:flex;justify-content:space-between;padding:1rem 2rem}.navbar h2{color:#fff;cursor:pointer;font-size:1.8rem;margin:0}.nav-links{display:flex;gap:2rem}.nav-links span{color:#fff;cursor:pointer;font-size:1.1rem;transition:opacity .3s}.nav-links span:hover{opacity:.7}.tutorials-container{margin:0 auto;max-width:1200px;padding:3rem 2rem}.tutorials-container h1{color:#fff;font-size:3rem;margin-bottom:.5rem;text-align:center}.subtitle{color:#fff;font-size:1.2rem;margin-bottom:3rem;opacity:.9;text-align:center}.tutorials-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.tutorial-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:10px;cursor:pointer;padding:2rem;transition:transform .3s ease}.tutorial-card:hover{transform:translateY(-5px)}.tutorial-card h3{color:#fff;font-size:1.5rem;margin-bottom:1rem;margin-top:0}.tutorial-card p{color:#fff;margin-bottom:1.5rem;opacity:.9}.tutorial-footer{align-items:center;display:flex;justify-content:space-between}.duration{color:#fff;font-size:.9rem;opacity:.8}.tutorial-card button{background:#fff;border:none;border-radius:20px;color:#667eea;cursor:pointer;font-weight:700;padding:.5rem 1.5rem;transition:all .3s}.tutorial-card button:hover{transform:scale(1.05)}.nav-links span.active{font-weight:700}.tutorial-page{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.tutorial-container{margin:0 auto;max-width:900px;padding:2rem}.back-button{background:#fff3;border:1px solid #ffffff4d;border-radius:20px;color:#fff;cursor:pointer;font-size:1rem;margin-bottom:2rem;padding:.5rem 1.5rem;transition:all .3s}.back-button:hover{background:#ffffff4d;transform:translateX(-5px)}.tutorial-content{background:#fff;border-radius:10px;box-shadow:0 10px 40px #0003;padding:3rem}.tutorial-content h1{color:#667eea;font-size:2.5rem;margin-bottom:2rem;margin-top:0}.tutorial-content h2{border-bottom:2px solid #eee;color:#764ba2;font-size:1.8rem;margin-bottom:1rem;margin-top:2.5rem;padding-bottom:.5rem}.tutorial-content h3{color:#667eea;font-size:1.4rem;margin-bottom:1rem;margin-top:2rem}.tutorial-content p{color:#333;line-height:1.8;margin-bottom:1rem}.tutorial-content ol,.tutorial-content ul{color:#333;line-height:1.8;margin-bottom:1.5rem;padding-left:2rem}.tutorial-content li{margin-bottom:.5rem}.tutorial-content pre{background:#2d2d2d;border-radius:8px;color:#f8f8f2;font-size:.9rem;line-height:1.6;margin:1.5rem 0;overflow-x:auto;padding:1.5rem}.tutorial-content code{background:#f4f4f4;border-radius:3px;color:#e83e8c;font-family:Courier New,monospace;font-size:.9em;padding:.2rem .4rem}.tutorial-content pre code{background:none;color:#f8f8f2;padding:0}.tutorial-content strong{color:#667eea;font-weight:600}.tutorial-content .mermaid{background:#f8f9ff;border:2px solid #e0e6ff;border-radius:8px;margin:2rem 0;padding:2rem;text-align:center}.tutorial-content .mermaid svg{height:auto;max-width:100%}.tutorial-navigation{border-top:3px solid #eee;display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3rem;margin-top:4rem;padding:2.5rem 0 1rem}.tutorial-nav-buttons{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr}.nav-button{border:none;border-radius:12px;box-shadow:0 3px 12px #0000001a;cursor:pointer;font-size:1.1rem;font-weight:600;min-width:200px;padding:1.2rem 2.5rem;transition:all .3s ease}.prev-button{background:#fff;border:2px solid #667eea;color:#667eea;justify-self:start}.prev-button:hover{background:#667eea;box-shadow:0 6px 20px #667eea4d;color:#fff;transform:translateY(-2px)}.next-button{justify-self:end}.next-button:hover{box-shadow:0 8px 24px #667eea66;transform:translateY(-2px)}.playground-button{align-self:center;background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;font-size:1.2rem;min-width:300px;padding:1.4rem 3rem}.playground-button:hover{box-shadow:0 10px 30px #11998e66;transform:translateY(-2px)}.tutorial-nav-buttons:has(.next-button:only-child){grid-template-columns:1fr;justify-items:end}.tutorial-nav-buttons:has(.prev-button:only-child){grid-template-columns:1fr;justify-items:start}@media (max-width:768px){.tutorial-container{padding:1rem}.tutorial-content{padding:1.5rem}.tutorial-content h1{font-size:2rem}.tutorial-content h2{font-size:1.5rem}.tutorial-content pre{font-size:.8rem;padding:1rem}.tutorial-nav-buttons{gap:1rem;grid-template-columns:1fr}.nav-button{justify-self:stretch!important}.nav-button,.playground-button{min-width:0;min-width:auto;width:100%}}.playground-page{background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;height:100vh;overflow:hidden}.playground-container{display:flex;flex:1 1;flex-direction:column;margin:0 auto;max-width:1400px;overflow:hidden;padding:1.5rem;width:100%}.level-header{background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000001a;flex-shrink:0;margin-bottom:.75rem;padding:.75rem 1.5rem}.level-title{align-items:center;display:flex;justify-content:space-between;margin-bottom:.25rem}.level-header h1{color:#667eea;font-size:1.3rem;margin:0}.progress{background:#e3f2fd;border-radius:20px;color:#1976d2;font-size:.85rem;font-weight:700;padding:.25rem .75rem}.level-description{color:#666;font-size:.85rem;margin:0}.feedback-panel{align-items:center;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;display:flex;flex-shrink:0;margin-bottom:.75rem;min-height:50px;padding:.75rem 1.5rem}.feedback-panel.success{background:#e8f5e9;border-left:4px solid #4caf50}.feedback-panel.error{background:#ffebee;border-left:4px solid #f44336}.feedback-panel.info{background:#e3f2fd;border-left:4px solid #2196f3}.feedback-panel p{color:#333;flex:1 1;font-size:.9rem;line-height:1.4;margin:0}.level-complete{align-items:center;display:flex;gap:1rem;width:100%}.complete-icon{font-size:1.5rem}.complete-text{flex:1 1}.complete-text strong{color:#4caf50;display:block;font-size:1rem;margin-bottom:.25rem}.complete-text p{color:#666;font-size:.85rem;margin:0}.next-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:700;padding:.6rem 1.25rem;transition:all .3s;white-space:nowrap}.next-button:hover{box-shadow:0 4px 12px #667eea66;transform:scale(1.05)}.game-layout{grid-gap:1.5rem;display:grid;flex:1 1;gap:1.5rem;grid-template-columns:1fr 400px}.editor-zone,.game-layout{min-height:0;overflow:hidden}.editor-zone{background:#1e1e1e;border-radius:8px;box-shadow:0 4px 12px #0000004d;display:flex;flex-direction:column}.editor-header{background:#2d2d2d;border-bottom:1px solid #3d3d3d;flex-shrink:0;padding:.4rem 1rem}.editor-title{color:#ccc;font-family:monospace;font-size:.8rem}.editor-content{flex:1 1;font-family:Courier New,monospace;font-size:.9rem;line-height:1.6;min-height:0;overflow-y:auto}.editor-line{align-items:center;display:flex;min-height:24px;position:relative;transition:all .2s}.editor-line:hover:not(.correct):not(.wrong){background:#2d2d2d}.editor-line.hover{background:#264f78}.editor-line.correct{background:#1e3a1e}.editor-line.wrong{background:#3a1e1e}.line-number{color:#858585;flex-shrink:0;font-size:.85rem;min-width:50px;padding:0 1rem;text-align:right;-webkit-user-select:none;user-select:none}.line-content{flex:1 1;padding:2px 4px}.line-placeholder{color:#3d3d3d;-webkit-user-select:none;user-select:none}.placed-code{color:#d4d4d4}.blocks-zone{background:#2d2d2d;border-radius:8px;box-shadow:0 4px 12px #0000004d;display:flex;flex-direction:column;min-height:0;overflow:hidden}.blocks-header{background:#1e1e1e;border-bottom:1px solid #3d3d3d;color:#ccc;flex-shrink:0;font-size:.85rem;font-weight:600;padding:.6rem 1rem}.blocks-content{align-items:flex-start;display:flex;flex:1 1;flex-direction:column;gap:.5rem;min-height:0;overflow-y:auto;padding:1rem}.code-block{background:#3d3d3d;border:1px solid #4d4d4d;border-radius:4px;cursor:grab;display:inline-block;max-width:100%;padding:.4rem .75rem;transition:all .2s;-webkit-user-select:none;user-select:none;width:-webkit-fit-content;width:fit-content}.code-block:hover:not(.placed){background:#4d4d4d;border-color:#667eea;transform:translateX(-2px)}.code-block:active{cursor:grabbing}.code-block.placed{cursor:not-allowed;opacity:.3}.code-block.dragging{opacity:.5}.code-block code{color:#d4d4d4;font-family:Courier New,monospace;font-size:.9rem;white-space:nowrap}.dragging-overlay{background:#667eea;border-color:#764ba2;box-shadow:0 4px 12px #0006}.dragging-overlay code{color:#fff}.blocks-footer{background:#1e1e1e;border-top:1px solid #3d3d3d;display:flex;flex-shrink:0;justify-content:flex-end;padding:.75rem 1rem}.reset-button{background:#ff9800;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.85rem;padding:.5rem 1rem;transition:all .3s}.reset-button:hover{background:#f57c00;transform:scale(1.05)}.draggable-placed-line{cursor:grab;display:inline-block}.draggable-placed-line:active{cursor:grabbing}.placed-code.locked{cursor:default}.code-block.locked{background:#2e4a2e;border-color:#4caf50;cursor:default;opacity:1}.code-block.locked:hover{border-color:#4caf50;transform:none}@media (max-width:1024px){.game-layout{grid-template-columns:1fr}.blocks-zone,.editor-zone{min-height:300px}}.generator-page{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding-bottom:2rem}.generator-container{margin:0 auto;max-width:1200px;padding:2rem}.generator-header{background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000001a;margin-bottom:2rem;padding:2rem;text-align:center}.generator-header h1{color:#667eea;font-size:2rem;margin:0 0 .5rem}.generator-header p{color:#666;font-size:1.1rem;margin:0}.generator-content{background:#fff;border-radius:10px;box-shadow:0 4px 12px #0000001a;padding:2rem}.ai-notice{align-items:flex-start;background:#fff3cd;border:2px solid #ffc107;border-radius:8px;display:flex;gap:1rem;margin-bottom:2rem;padding:1.5rem}.notice-icon{flex-shrink:0;font-size:2rem}.notice-content{flex:1 1}.notice-content strong{color:#856404;display:block;font-size:1.1rem;margin-bottom:.5rem}.notice-content p{color:#856404;font-size:.9rem;line-height:1.6;margin:.5rem 0}.notice-content a{color:#667eea;font-weight:600;text-decoration:underline}.notice-content a:hover{color:#764ba2}.mode-selector{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.mode-selector label{color:#333;font-size:1.1rem;font-weight:600}.mode-selector select{background:#fff;border:2px solid #667eea;border-radius:6px;color:#333;cursor:pointer;font-size:1rem;font-weight:500;padding:.5rem 1rem}.mode-selector select:focus{border-color:#764ba2;outline:none}.input-section{margin-bottom:2rem}.input-section label,.output-section label{color:#333;display:block;font-size:1rem;font-weight:600;margin-bottom:.5rem}.input-textarea,.output-textarea{background:#f8f9ff;border:2px solid #e0e0e0;border-radius:8px;font-family:Courier New,monospace;font-size:.95rem;line-height:1.6;padding:1rem;resize:vertical;width:100%}.input-textarea:focus,.output-textarea:focus{border-color:#667eea;outline:none}.output-textarea{background:#1e1e1e;border-color:#3d3d3d;color:#d4d4d4}.generate-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:700;margin-top:1rem;padding:.75rem 2rem;transition:all .3s;width:100%}.generate-button:hover:not(:disabled){box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.generate-button:disabled{cursor:not-allowed;opacity:.6}.error-message{background:#e3f2fd;border-left:4px solid #2196f3;border-radius:6px;color:#1565c0;font-weight:500;margin-bottom:1rem;padding:1rem}.output-section{margin-top:2rem}.output-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.output-actions{display:flex;gap:.5rem}.action-button{background:#667eea;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.5rem 1rem;transition:all .3s}.action-button:hover{background:#764ba2;transform:scale(1.05)}.nav-links span.active{border-bottom:3px solid #fff;font-weight:600;opacity:1}
/*# sourceMappingURL=main.372e60a1.css.map*/