.app-container{width:100%;height:100%;display:flex;flex-direction:column;background:#fff}.app-header{flex-shrink:0;padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;align-items:center}.home-link{display:flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none;font-size:1.5rem;font-weight:600;transition:opacity .2s ease}.home-link:hover{opacity:.8}.app-nav{display:flex;gap:1rem}.nav-link{color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:6px;font-weight:500;transition:all .2s ease;background:#ffffff1a}.nav-link:hover{background:#fff3;transform:translateY(-1px)}.app-main{flex:1;overflow-y:auto;background:#fff}@media screen and (max-width: 1024px){.app-header{padding:.875rem 1.5rem}.home-link{font-size:1.35rem}.home-icon{font-size:1.6rem}.home-text{font-size:1.35rem}}@media screen and (max-width: 1024px) and (orientation: portrait){.app-header{padding:.875rem 1.5rem}.home-link{font-size:1.25rem}.home-icon{font-size:1.5rem}.home-text{font-size:1.25rem}}@media screen and (max-width: 767px) and (orientation: landscape){.app-header{padding:.5rem 1rem}.home-link{font-size:1.1rem}.home-icon{font-size:1.25rem}.home-text{font-size:1.1rem}}@media screen and (max-width: 767px) and (orientation: portrait){.app-header{padding:.875rem 1.25rem}.home-link{font-size:1.2rem}.home-icon{font-size:1.4rem}.home-text{font-size:1.2rem}}.lesson-collection{width:100%;max-width:1200px;margin:0 auto;height:100%;display:flex;flex-direction:column;background:#fff;overflow:hidden}.lesson-collection-empty{text-align:center;color:#333;font-size:1.5rem;padding:2rem}.lesson-list{flex:1;list-style:none;padding:2rem;margin:0;overflow-y:auto}.lesson-item{list-style:none;margin-bottom:1rem}.lesson-link{display:block;background:#f8f9fa;border-radius:12px;padding:1.5rem;border:2px solid #e9ecef;transition:all .3s ease;text-decoration:none;color:inherit}.lesson-link:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea33;transform:translateY(-2px)}.lesson-item:last-child{margin-bottom:0}.lesson-item-header{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.lesson-item .lesson-icon{font-size:2rem;flex-shrink:0}.lesson-item-content{flex:1}.lesson-item-title{font-size:1.25rem;font-weight:600;color:#333;margin:0 0 .25rem}.lesson-item-type{font-size:.875rem;color:#666;margin:0;text-transform:uppercase;letter-spacing:.5px}.lesson-item-footer{display:flex;justify-content:flex-end;padding-top:.75rem;border-top:1px solid #dee2e6}.question-count{font-size:.875rem;color:#667eea;font-weight:500}.lesson-collection{max-width:1200px}.lesson-item{padding:1.5rem}.lesson-item .lesson-icon{font-size:2rem}.lesson-item-title{font-size:1.25rem}@media screen and (max-width: 1024px){.lesson-collection{max-width:100%}.lesson-item{padding:1.25rem}.lesson-item .lesson-icon{font-size:1.75rem}.lesson-item-title{font-size:1.1rem}}@media screen and (max-width: 1024px) and (orientation: portrait){.lesson-collection{max-width:100%}.lesson-item{padding:1rem}.lesson-item .lesson-icon{font-size:1.5rem}.lesson-item-title{font-size:1rem}}@media screen and (max-width: 767px) and (orientation: landscape){.lesson-collection{max-width:100%}.lesson-list{padding:1rem}.lesson-item{padding:.75rem;margin-bottom:.75rem}.lesson-item-header{gap:.75rem}.lesson-item .lesson-icon{font-size:1.25rem}.lesson-item-title{font-size:.9rem}.lesson-item-type,.question-count{font-size:.75rem}}@media screen and (max-width: 767px) and (orientation: portrait){.lesson-collection{max-width:100%}.lesson-list,.lesson-item{padding:1rem}.lesson-item .lesson-icon{font-size:1.5rem}.lesson-item-title{font-size:1rem}.lesson-item-type{font-size:.8rem}}.lesson-display{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.lesson-content-wrapper{width:100%;max-width:900px;display:flex;flex-direction:column;gap:1.5rem}.lesson-header{display:flex;align-items:center;gap:1.5rem;width:100%;max-width:900px}.lesson-header-content{display:flex;flex-direction:column;gap:.5rem;flex:1}.lesson-icon{font-size:5rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.lesson-title{font-size:2.5rem;color:#333;margin:0;text-align:left}.lesson-description{font-size:1.1rem;color:#666;margin:0;text-align:left}.lesson-stats{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;margin-left:auto}.stat-item{display:flex;align-items:center;gap:.5rem}.stat-label{font-size:1.15rem;color:#666;font-weight:500}.stat-value{font-size:1.5rem;color:#333;font-weight:700;padding:.25rem .75rem;border-radius:6px;min-width:2rem;text-align:center}.lesson-content{margin-top:1rem;font-size:1.25rem;color:#444;width:100%;max-width:900px}.number-content{display:flex;flex-direction:column;align-items:flex-start;gap:2rem;width:100%}.number-display{font-size:8rem;font-weight:700;line-height:1}.number-dots{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;max-width:500px}.dot{font-size:2rem;color:currentColor}.color-content{display:flex;flex-direction:column;align-items:flex-start;gap:2rem;width:100%}.color-display{padding:3rem 6rem;border-radius:15px;font-size:3rem;font-weight:700;text-transform:uppercase;box-shadow:0 10px 30px #0003;min-width:300px;text-align:center}.color-shades{display:flex;gap:1rem;align-items:center}.color-shade{width:60px;height:60px;border-radius:50%;box-shadow:0 4px 8px #0003}.number-display{font-size:8rem}.dot{font-size:2rem}.color-display{padding:3rem 6rem;font-size:3rem;min-width:300px}.color-shade{width:60px;height:60px}@media screen and (max-width: 1024px){.lesson-icon{font-size:4rem}.lesson-title{font-size:2rem}.lesson-description{font-size:1rem}.lesson-header{gap:1rem}.number-display{font-size:6rem}.dot{font-size:1.5rem}.color-display{padding:2.5rem 5rem;font-size:2.5rem;min-width:250px}.color-shade{width:50px;height:50px}}@media screen and (max-width: 1024px) and (orientation: portrait){.lesson-icon{font-size:3.5rem}.lesson-title{font-size:1.75rem}.lesson-description{font-size:.95rem}.lesson-header{gap:.75rem}.number-display{font-size:5rem}.dot{font-size:1.25rem}.color-display{padding:2rem 4rem;font-size:2rem;min-width:200px}.color-shade{width:45px;height:45px}}@media screen and (max-width: 767px) and (orientation: landscape){.lesson-display{gap:1rem}.lesson-icon{font-size:2.5rem}.lesson-title{font-size:1.25rem}.lesson-description{font-size:.85rem}.lesson-header{gap:.75rem}.lesson-content{margin-top:.5rem}.number-display{font-size:3.5rem}.dot{font-size:1rem}.number-dots{gap:.5rem}.color-display{padding:1.25rem 2rem;font-size:1.5rem;min-width:150px}.color-shade{width:30px;height:30px}.color-shades{gap:.5rem}}@media screen and (max-width: 767px) and (orientation: portrait){.lesson-icon{font-size:3rem}.lesson-title{font-size:1.5rem}.lesson-description{font-size:.9rem}.lesson-header{gap:.75rem}.number-display{font-size:4rem}.dot{font-size:1.1rem}.color-display{padding:1.5rem 3rem;font-size:2rem;min-width:180px}.color-shade{width:40px;height:40px}}.equation-section{margin-top:2rem;padding:2rem;background:linear-gradient(135deg,#fff5f8,#ffeef5);border-radius:15px;box-shadow:0 4px 12px #e91e631a;width:100%;box-sizing:border-box}.equation-section-wrapper{position:relative;width:100%}.lesson-success-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700;color:#28a745;background:#fff;border:4px solid #28a745;border-radius:50%;z-index:10;animation:successCheckmark .4s ease-out;box-shadow:0 4px 12px #28a7454d}@keyframes successCheckmark{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}50%{transform:translate(-50%,-50%) scale(1.1)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.lesson-incorrect-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700;color:#dc3545;background:#fff;border:4px solid #dc3545;border-radius:50%;z-index:10;animation:incorrectCross .4s ease-out;box-shadow:0 4px 12px #dc35454d}@keyframes incorrectCross{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}50%{transform:translate(-50%,-50%) scale(1.1)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes successFadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.equation-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem}.equation-display{display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;justify-content:center;font-size:4rem;font-weight:700;max-width:100%;overflow-x:auto}.equation-term{min-width:80px;display:flex;justify-content:center;align-items:center}.equation-number{font-size:4rem;color:#333;padding:.5rem 1rem;background-color:#f5f5f5;border-radius:8px;box-shadow:0 2px 4px #0000001a}.equation-input{width:80px;height:auto;min-height:5rem;padding:.5rem 1rem;font-size:4rem;text-align:center;border:3px solid #e91e63;border-radius:8px;background-color:#fff;font-weight:700;transition:all .3s ease;-moz-appearance:textfield;caret-color:transparent}.equation-input::-webkit-outer-spin-button,.equation-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.equation-input:focus{outline:none;border-color:#c2185b;box-shadow:0 0 0 3px #e91e6333}.equation-input.incorrect{border-color:#f44336;background-color:#ffebee}.equation-input.correct{border-color:#4caf50;background-color:#e8f5e9}.equation-operator{font-size:4rem;color:#e91e63;font-weight:700}.equation-equals{font-size:4rem;color:#333;font-weight:700}.equation-result{color:#2196f3;padding:.5rem 1rem;background-color:#e3f2fd;border-radius:8px;box-shadow:0 2px 4px #0000001a}.equation-feedback{font-size:1.5rem;font-weight:700;padding:1rem 2rem;border-radius:10px;animation:fadeIn .3s ease-in}.correct-feedback{color:#4caf50;background-color:#e8f5e9;border:2px solid #4caf50}.incorrect-feedback{color:#f44336;background-color:#ffebee;border:2px solid #f44336}.equation-check-btn{padding:1rem 3rem;font-size:1.25rem;font-weight:700;color:#fff;background-color:#e91e63;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px #e91e634d}.equation-check-btn:hover:not(:disabled){background-color:#c2185b;transform:translateY(-2px);box-shadow:0 6px 12px #e91e6366}.equation-check-btn:active:not(:disabled){transform:translateY(0)}.equation-check-btn:disabled{opacity:.6;cursor:not-allowed}@media screen and (max-width: 1024px){.equation-display,.equation-number{font-size:3.5rem}.equation-input{width:70px;height:auto;min-height:4.5rem;padding:.5rem 1rem;font-size:3.5rem}.equation-operator,.equation-equals{font-size:3.5rem}}@media screen and (max-width: 767px){.equation-container{padding:1rem;gap:1rem}.equation-display,.equation-number{font-size:2.5rem}.equation-input{width:60px;height:auto;min-height:3.5rem;padding:.5rem 1rem;font-size:2.5rem}.equation-operator,.equation-equals{font-size:2.5rem}.equation-feedback{font-size:1.25rem;padding:.75rem 1.5rem}.equation-check-btn{padding:.875rem 2rem;font-size:1.1rem}}.keyboard-overlay{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid #e9ecef;z-index:1000;padding:1rem;animation:slideUp .3s ease-out;box-shadow:0 -4px 20px #0000001a}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.keyboard{width:80%;margin:0 auto;overflow:hidden}.keyboard-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,80px));gap:12px;justify-content:center;max-height:300px;overflow-y:auto}.keyboard-button{background:#fff;border:2px solid #e9ecef;border-radius:8px;padding:8px 4px;font-size:2.25rem;font-weight:600;color:#495057;cursor:pointer;transition:all .4s ease-out;min-height:64px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.keyboard-button:hover{background:#f8f9fa;border-color:#dee2e6;transform:translateY(-1px)}.keyboard-button.selected{background:#007bff;border-color:#0056b3;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #007bff4d}.keyboard-button:active{transform:translateY(0)}.keyboard-feedback{text-align:center;padding:1rem;font-size:1.2rem;font-weight:600;border-radius:8px;margin-bottom:1rem;animation:fadeIn .3s ease-in}.keyboard-feedback.correct{background:#d4edda;color:#155724;border:2px solid #c3e6cb}.keyboard-feedback.incorrect{background:#f8d7da;color:#721c24;border:2px solid #f5c6cb}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.keyboard-button.correct{background:#28a745!important;border-color:#1e7e34!important;color:#fff!important;animation:correctPulse .5s ease-in-out}.keyboard-button.incorrect{background:#dc3545!important;border-color:#bd2130!important;color:#fff!important;animation:incorrectShake .3s ease-in-out}@keyframes correctPulse{0%{transform:scale(1);box-shadow:0 0 #28a745b3}50%{transform:scale(1.08);box-shadow:0 0 0 8px #28a74500}to{transform:scale(1);box-shadow:0 0 #28a74500}}@keyframes incorrectShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media screen and (min-width: 769px){.keyboard-overlay{padding:1.5rem}.keyboard-buttons{grid-template-columns:repeat(auto-fit,minmax(90px,90px));gap:16px}.keyboard-button{padding:8px 4px;font-size:2.75rem;min-height:80px}}@media screen and (max-width: 768px){.keyboard{width:90%}.keyboard-overlay{padding:.5rem}.keyboard-buttons{grid-template-columns:repeat(auto-fit,minmax(65px,65px));gap:8px}.keyboard-button{padding:6px 4px;font-size:1.75rem;min-height:56px}}@media screen and (max-width: 480px){.keyboard{width:95%}.keyboard-buttons{grid-template-columns:repeat(auto-fit,minmax(50px,50px));gap:6px}.keyboard-button{padding:4px 2px;font-size:1.5rem;min-height:48px}}.shape-content{display:flex;flex-direction:column;align-items:center;gap:2rem}.shape-display-container{width:200px;height:200px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.shape-circle{width:150px;height:150px;border-radius:50%}.shape-square{width:120px;height:120px;border-radius:8px}.shape-triangle{width:0;height:0;border-left:75px solid transparent;border-right:75px solid transparent;border-bottom:130px solid;background-color:transparent!important;opacity:1!important}.shape-rectangle{width:180px;height:120px;border-radius:8px}.shape-pentagon{width:0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:50px solid;background-color:transparent!important;opacity:1!important;position:relative}.shape-pentagon:after{content:"";position:absolute;top:50px;left:-60px;width:0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-top:50px solid}.shape-hexagon{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:35px solid;background-color:transparent!important;opacity:1!important;position:relative}.shape-hexagon:before{content:"";position:absolute;top:35px;left:-50px;width:100px;height:60px;background-color:inherit}.shape-hexagon:after{content:"";position:absolute;top:95px;left:-50px;width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-top:35px solid}.shape-info{display:flex;flex-direction:column;gap:1rem}.shape-property{display:flex;align-items:center;gap:1rem;font-size:1.25rem}.property-label{font-weight:600;color:#666}.property-value{color:#333;font-size:1.5rem;font-weight:700}@media screen and (max-width: 1024px){.shape-display-container{width:180px;height:180px}.shape-circle{width:130px;height:130px}.shape-square{width:110px;height:110px}}@media screen and (max-width: 767px) and (orientation: landscape){.shape-content{gap:1rem;flex-direction:row}.shape-display-container{width:120px;height:120px}.shape-circle{width:80px;height:80px}.shape-square{width:70px;height:70px}.shape-property{font-size:1rem}.property-value{font-size:1.25rem}}@media screen and (max-width: 767px) and (orientation: portrait){.shape-display-container{width:160px;height:160px}.shape-circle{width:110px;height:110px}.shape-square{width:90px;height:90px}}.lesson-view-container{width:100%;max-width:1200px;margin:0 auto;padding:2rem;height:100%;overflow-y:auto}@media screen and (max-width: 1024px){.lesson-view-container{padding:1.5rem}}@media screen and (max-width: 767px) and (orientation: portrait){.lesson-view-container{padding:1rem}}@media screen and (max-width: 767px) and (orientation: landscape){.lesson-view-container{padding:.75rem}}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:#fff}.app{padding:0}@media screen and (max-width: 1024px){.app{padding:0}}@media screen and (max-width: 1024px) and (orientation: portrait){.app{padding:0}}@media screen and (max-width: 767px) and (orientation: landscape){.app{padding:0}}@media screen and (max-width: 767px) and (orientation: portrait){.app{padding:0}}