:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000000de;background-color:#f8f9fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:2rem;line-height:1.2;font-weight:600}h2{font-size:1.8rem;line-height:1.2;font-weight:600}h3{font-size:1.4rem;font-weight:500}h4{font-size:1.2rem;font-weight:600}p{margin:.5rem 0}a{text-decoration:none;color:#2a7d4f;transition:color .3s}a:hover{color:#1d5937}button{border-radius:4px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#2a7d4f;color:#fff;cursor:pointer;transition:all .25s}button:hover{background-color:#1d5937}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: dark){:root{color:#000000de;background-color:#f8f9fa}a:hover{color:#1d5937}button{background-color:#2a7d4f}button:hover{background-color:#1d5937}}@media (max-width: 768px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.1rem}}.tab-content{padding:1.5rem;background-color:#f8f9fa;border-radius:0 0 8px 8px;box-shadow:0 2px 4px #0000001a;min-height:400px}.tab-content h2{color:#2a7d4f;margin-bottom:.5rem}.tab-content h3{color:#333;font-weight:500;margin-bottom:1.5rem;font-size:1.2rem}.tab-content h4{color:#2a7d4f;margin-top:1.5rem;margin-bottom:.75rem;border-bottom:1px solid #ddd;padding-bottom:.5rem}.task-section{margin-bottom:2rem}.expandable-section{margin:1.5rem 0}.expand-btn{background-color:#2a7d4f;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:background-color .3s}.expand-btn:hover{background-color:#1d5937}.expanded-content{margin-top:1rem;padding:1rem;background-color:#fff;border-radius:4px;border-left:4px solid #2a7d4f}.task-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #ddd;font-size:.9rem;color:#666}ul,ol{padding-left:1.5rem}li{margin-bottom:.5rem}.code-block{background-color:#f5f5f5;padding:1rem;border-radius:4px;font-family:monospace;margin:1rem 0;border-left:4px solid #2a7d4f;white-space:pre-wrap}.code-block p{margin:0;padding:0;font-size:14px;line-height:1.4}.visualization-container{margin:2rem 0;display:flex;flex-direction:column;align-items:center}.chart-container{width:100%;height:400px;margin:1rem 0;border:1px solid #ddd;border-radius:4px}.controls{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.control-group{display:flex;flex-direction:column}label{font-size:.9rem;margin-bottom:.3rem;color:#555}select,input{padding:.5rem;border:1px solid #ddd;border-radius:4px}.quiz-container{max-width:800px;margin:0 auto}.quiz-question{margin-bottom:2rem;padding:1rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a}.option{padding:.75rem 1rem;margin:.5rem 0;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s}.option:hover{background-color:#f0f8f4}.option.selected{background-color:#d1eadd;border-color:#2a7d4f}.option.correct{background-color:#d4edda;border-color:#28a745}.option.incorrect{background-color:#f8d7da;border-color:#dc3545}.quiz-result{text-align:center;margin:2rem 0;padding:1rem;border-radius:8px}.quiz-result.success{background-color:#d4edda;color:#155724}.quiz-result.failure{background-color:#f8d7da;color:#721c24}.quiz-button{background-color:#2a7d4f;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s;display:block;margin:1.5rem auto}.quiz-button:hover{background-color:#1d5937}.quiz-button:disabled{background-color:#88b59f;cursor:not-allowed}.tip-card{margin-bottom:1.5rem;padding:1.25rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 6px #0000001a}.tip-card h5{color:#2a7d4f;margin-bottom:.75rem;font-size:1.1rem}.resource-link{display:block;margin-top:.5rem;color:#2a7d4f;text-decoration:none}.resource-link:hover{text-decoration:underline}.solution-step{margin-bottom:2rem;padding:1.25rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 6px #0000001a}.step-number{display:inline-block;width:30px;height:30px;background-color:#2a7d4f;color:#fff;border-radius:50%;text-align:center;line-height:30px;margin-right:.75rem}.locked-message{text-align:center;margin:3rem auto;padding:2rem;background-color:#f8f9fa;border-radius:8px;max-width:600px;border:1px solid #ddd}.lock-icon{font-size:2rem;margin:1rem 0;display:block}.solution-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #ddd;font-size:.9rem;color:#666}.modal-content{background-color:#fff;padding:2rem;border-radius:8px;max-width:800px;max-height:80vh;overflow-y:auto}.close-modal{position:absolute;top:20px;right:20px;background:#fff;width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:1.5rem;border:none}@media (max-width: 768px){.tab-content{padding:1rem}.expanded-content{padding:.75rem}.controls{flex-direction:column}.modal-content{max-width:90%;padding:1.5rem}}.description-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:2rem;border-radius:8px;max-width:900px;max-height:85vh;overflow-y:auto;position:relative}.close-modal{position:absolute;top:15px;right:15px;background:#fff;width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:1.5rem;border:1px solid #ddd;color:#333;transition:all .2s}.close-modal:hover{background-color:#f0f0f0;color:#2a7d4f}.modal-content h2{color:#2a7d4f;margin-bottom:.5rem}.modal-content h3{color:#333;font-weight:500;margin-bottom:1.5rem;font-size:1.2rem}.description-section{margin-bottom:2rem}.description-section h4{color:#2a7d4f;border-bottom:1px solid #ddd;padding-bottom:.5rem;margin-bottom:1rem}.code-structure{background-color:#f5f5f5;padding:1rem;border-radius:4px;font-family:monospace;white-space:pre;overflow-x:auto;font-size:.9rem;line-height:1.4;margin:1rem 0;border-left:4px solid #2a7d4f}.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem}.tech-item{background-color:#f8f9fa;padding:1.25rem;border-radius:8px;transition:transform .2s,box-shadow .2s}.tech-item:hover{transform:translateY(-5px);box-shadow:0 5px 15px #0000001a}.tech-item a{text-decoration:none;color:inherit;display:flex;align-items:center;margin-bottom:.75rem}.tech-logo{width:30px;height:30px;margin-right:1rem}.tech-item h5{margin:0;font-size:1.1rem;color:#2a7d4f}.tech-item p{margin:0;font-size:.9rem;color:#555}.description-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #ddd;text-align:center;color:#666;font-size:.9rem}.heart{color:#e25555;display:inline-block;animation:pulse 1.5s infinite}.logo-container{display:flex;justify-content:center;margin-top:1rem;gap:1.5rem}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@media (max-width: 768px){.modal-content{max-width:90%;padding:1.5rem;max-height:80vh}.tech-grid{grid-template-columns:1fr}.code-structure{font-size:.8rem}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #2a7d4f;--secondary-color: #1d5937;--background-color: #f8f9fa;--text-color: #333;--border-color: #ddd;--shadow: 0 2px 4px rgba(0, 0, 0, .1)}.app-container{display:flex;flex-direction:column;min-height:100vh;background-color:var(--background-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.app-header{background-color:var(--primary-color);color:#fff;padding:1.5rem;text-align:center;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center}.app-header h1{margin:0;font-size:1.8rem}.description-button{background-color:transparent;border:2px solid white;color:#fff;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s}.description-button:hover{background-color:#fff;color:var(--primary-color)}.tabs-navigation{background-color:#fff;box-shadow:var(--shadow)}.tabs-navigation ul{display:flex;list-style-type:none;padding:0;margin:0;overflow-x:auto}.tab{padding:1rem 1.5rem;cursor:pointer;transition:background-color .2s;white-space:nowrap;position:relative}.tab:hover{background-color:#2a7d4f1a}.tab.active{background-color:var(--primary-color);color:#fff}.tab.locked{opacity:.7;cursor:not-allowed}.lock-icon{margin-left:.5rem;font-size:.8rem}.tab-container{flex:1;padding:1.5rem;max-width:1200px;margin:0 auto;width:100%}.app-footer{background-color:#fff;padding:1rem;text-align:center;border-top:1px solid var(--border-color);margin-top:auto;font-size:.9rem;color:#666}.logo-container{display:flex;justify-content:center;margin-top:.5rem;gap:1rem}.footer-logo{width:24px;height:24px;transition:transform .2s}.footer-logo:hover{transform:scale(1.2)}@media (max-width: 768px){.app-header{flex-direction:column;gap:1rem}.tab{padding:.75rem 1rem;font-size:.9rem}.tab-container{padding:1rem}}