@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";:root{--font-primary: "Poppins", sans-serif;--color-primary: #4a90e2;--color-primary-dark: #357abd;--color-secondary: #f5a623;--color-success: #7ed321;--color-text: #333333;--color-text-light: #666666;--color-background: #f4f7f9;--color-card-bg: #ffffff;--color-border: #e0e0e0;--color-shadow: rgba(0, 0, 0, .1);--color-primary-dark-theme: #6495ED;--color-primary-dark-hover-dark-theme: #87CEFA;--color-secondary-dark-theme: #FFD700;--color-text-dark-theme: #e0e0e0;--color-text-light-dark-theme: #b0b0b0;--color-background-dark-theme: #1a1d24;--color-card-bg-dark-theme: #2c303a;--color-border-dark-theme: #444958;--color-shadow-dark-theme: rgba(0, 0, 0, .3);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 16px;--transition-fast: all .2s ease-in-out;font-family:var(--font-primary);line-height:1.6;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-background);color:var(--color-text);min-height:100vh;display:flex;flex-direction:column;transition:background-color .3s ease,color .3s ease}#root{width:100%;max-width:1280px;margin:0 auto;padding:var(--spacing-md) var(--spacing-lg);display:flex;flex-direction:column;flex-grow:1}h1,h2,h3,h4,h5,h6{font-weight:600;margin-bottom:var(--spacing-md);color:var(--color-primary);transition:color .3s ease}h1{font-size:2.5em;line-height:1.1}h2{font-size:1.8em;line-height:1.2;margin-bottom:var(--spacing-lg)}h3{font-size:1.4em;line-height:1.3}p{margin-bottom:var(--spacing-md);color:var(--color-text-light);transition:color .3s ease}a{color:var(--color-primary);text-decoration:none;transition:var(--transition-fast)}a:hover{color:var(--color-primary-dark);text-decoration:underline}button,input,select,textarea{font-family:inherit;font-size:1rem;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-md);background-color:var(--color-card-bg);color:var(--color-text);transition:background-color .3s ease,color .3s ease,border-color .3s ease}button{background-color:var(--color-primary);color:#fff;border:none;cursor:pointer;transition:var(--transition-fast),background-color .3s ease,color .3s ease;font-weight:500}button:hover{background-color:var(--color-primary-dark)}label{display:block;margin-bottom:var(--spacing-sm);font-weight:500;color:var(--color-text);transition:color .3s ease}input[type=range]{padding:0;cursor:pointer;accent-color:var(--color-primary);background-color:#e0e0e0;transition:background-color .3s ease,accent-color .3s ease;height:8px;border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--color-primary);border-radius:50%;cursor:pointer;transition:background-color .15s ease-in-out}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--color-primary);border-radius:50%;cursor:pointer;border:none;transition:background-color .15s ease-in-out}input[type=range]:hover::-webkit-slider-thumb{background:var(--color-primary-dark)}input[type=range]:hover::-moz-range-thumb{background:var(--color-primary-dark)}.card{background-color:var(--color-card-bg);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);box-shadow:0 4px 12px var(--color-shadow);border:1px solid var(--color-border);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}[data-theme=dark]{--color-primary: var(--color-primary-dark-theme);--color-primary-dark: var(--color-primary-dark-hover-dark-theme);--color-secondary: var(--color-secondary-dark-theme);--color-text: var(--color-text-dark-theme);--color-text-light: var(--color-text-light-dark-theme);--color-background: var(--color-background-dark-theme);--color-card-bg: var(--color-card-bg-dark-theme);--color-border: var(--color-border-dark-theme);--color-shadow: var(--color-shadow-dark-theme)}[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{background-color:#3a3f4b;border-color:var(--color-border-dark-theme);color:var(--color-text-dark-theme)}[data-theme=dark] input[type=range]{accent-color:var(--color-primary-dark-theme);background-color:#4f5563}[data-theme=dark] input[type=range]::-webkit-slider-thumb{background:var(--color-primary-dark-theme)}[data-theme=dark] input[type=range]::-moz-range-thumb{background:var(--color-primary-dark-theme)}[data-theme=dark] input[type=range]:hover::-webkit-slider-thumb{background:var(--color-primary-dark-hover-dark-theme)}[data-theme=dark] input[type=range]:hover::-moz-range-thumb{background:var(--color-primary-dark-hover-dark-theme)}[data-theme=dark] .visual-triangle{fill:#6495ed40;stroke:var(--color-primary-dark-theme);transition:fill .3s ease,stroke .3s ease}[data-theme=dark] .visual-text{fill:var(--color-text-dark-theme);transition:fill .3s ease}[data-theme=dark] .total-sum{background-color:#6495ed26;color:#add8e6;transition:background-color .3s ease,color .3s ease}[data-theme=dark] .calculated-value{color:var(--color-secondary-dark-theme);transition:color .3s ease}[data-theme=dark] .app-footer{background-color:var(--color-card-bg-dark-theme);border-top-color:var(--color-border-dark-theme);color:var(--color-text-light-dark-theme);transition:background-color .3s ease,border-color .3s ease,color .3s ease}[data-theme=dark] .app-footer a{color:var(--color-primary-dark-theme)}[data-theme=dark] .app-footer .social-links a svg{color:var(--color-text-light-dark-theme)}[data-theme=dark] .app-footer .social-links a:hover svg{color:var(--color-primary-dark-theme)}[data-theme=dark] .app-footer .connect-text{color:var(--color-text-light-dark-theme)}.app-footer{padding:var(--spacing-lg) var(--spacing-lg);text-align:center;background-color:var(--color-card-bg);border-top:1px solid var(--color-border);margin-top:var(--spacing-xl);transition:background-color .3s ease,border-color .3s ease}.social-links{margin-bottom:var(--spacing-sm)}.social-links a{font-size:1.8rem;margin:0 var(--spacing-md);display:inline-block;transition:var(--transition-fast);vertical-align:middle}.social-links a svg{color:var(--color-text-light);transition:color .3s ease}.social-links a:hover svg{color:var(--color-primary)}.social-links a:hover{transform:translateY(-2px);text-decoration:none}.connect-text{font-size:.9em;color:var(--color-text-light);margin-bottom:var(--spacing-xs);line-height:1.4;transition:color .3s ease}.connect-text a{color:var(--color-primary);font-weight:500}.connect-text a:hover{color:var(--color-primary-dark)}.connect-text:last-child{margin-bottom:0}.tutor-credit{margin-top:var(--spacing-md);font-size:.8em;font-style:italic;opacity:.7}.app-layout{display:flex;flex-direction:column;min-height:100vh}.app-header{background-color:var(--color-card-bg);padding:var(--spacing-md) var(--spacing-lg);box-shadow:0 2px 5px var(--color-shadow);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md);position:sticky;top:0;z-index:10;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.logo a{font-size:1.5em;font-weight:700;color:var(--color-primary);text-decoration:none;transition:var(--transition-fast)}.logo a:hover{color:var(--color-primary-dark);text-decoration:none}.main-nav{display:flex;gap:var(--spacing-md);flex-wrap:wrap;margin:0 auto}.nav-link{padding:var(--spacing-sm) var(--spacing-md);color:var(--color-text-light);text-decoration:none;border-radius:var(--border-radius-md);font-weight:500;transition:var(--transition-fast);border:1px solid transparent}.nav-link:hover{background-color:rgba(var(--color-primary),.1);color:var(--color-primary);text-decoration:none}.theme-toggle-button{background:none;border:none;color:var(--color-text);cursor:pointer;font-size:1.4rem;padding:var(--spacing-sm);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast),color .3s ease;margin-left:var(--spacing-sm)}.theme-toggle-button:hover{background-color:#8080801a;color:var(--color-primary)}.app-content{flex-grow:1;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl);width:100%}.app-footer{width:100%;flex-shrink:0}@media (max-width: 768px){.main-nav{order:1;width:100%;justify-content:space-around;margin:var(--spacing-sm) 0 0 0}.theme-toggle-button{order:0;margin-left:auto}.logo{order:-1}.nav-link{flex-grow:1;text-align:center}}@media (max-width: 480px){.app-header{flex-direction:column;align-items:stretch}.logo{text-align:center;margin-bottom:var(--spacing-sm)}.theme-toggle-button{align-self:flex-end;margin-left:0;margin-bottom:var(--spacing-sm)}.main-nav{margin-top:0}#root{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}}.angle-sum-lesson{text-align:center}.angle-sum-lesson h2{color:var(--color-primary)}.lesson-controls{width:100%;max-width:450px;display:flex;flex-direction:column;gap:var(--spacing-lg)}.control-group{display:grid;grid-template-columns:60px 1fr 50px;align-items:center;gap:var(--spacing-md);text-align:left}.control-group label{margin-bottom:0;font-weight:500;color:var(--color-primary);text-align:right;padding-right:var(--spacing-sm)}.control-value{font-weight:600;text-align:right;color:var(--color-text);font-variant-numeric:tabular-nums}.lesson-results{margin-top:var(--spacing-md);text-align:center}.lesson-results p{color:var(--color-text);font-size:1.1em}.calculated-value{color:var(--color-secondary);font-weight:700;padding:0 4px}.total-sum{display:inline-block;margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-lg);background-color:rgba(var(--color-primary-rgb, 74, 144, 226),.1);border-radius:var(--border-radius-md);color:var(--color-primary-dark);font-size:1.15em;font-weight:600;border:1px solid rgba(var(--color-primary-rgb, 74, 144, 226),.2);transition:background-color .3s ease,color .3s ease,border-color .3s ease}:root{--color-primary-rgb: 74, 144, 226}[data-theme=dark]{--color-primary-rgb: 100, 149, 237}.lesson-visual{width:100%;max-width:350px;aspect-ratio:300 / 180}.visual-triangle{fill:rgba(var(--color-primary-rgb),.25);stroke:var(--color-primary);stroke-width:2.5;stroke-linejoin:round;transition:all .1s linear,fill .3s ease,stroke .3s ease}.visual-text{font-size:13px;font-weight:500;fill:var(--color-text);dominant-baseline:middle;transition:fill .3s ease;pointer-events:none}@media (min-width: 768px){.lesson-interactive-area{flex-direction:row;align-items:center;justify-content:space-around;gap:var(--spacing-xl)}.lesson-controls{flex-basis:45%;max-width:none}.lesson-visual{flex-basis:45%;max-width:400px}}.pythagoras-lesson h2{color:var(--color-primary);text-align:center}.pythagoras-lesson .formula{font-size:1.4em;font-weight:600;text-align:center;margin:var(--spacing-sm) 0 var(--spacing-lg) 0;padding:var(--spacing-sm) var(--spacing-md);background-color:rgba(var(--color-primary-rgb),.1);border-radius:var(--border-radius-md);display:inline-block;left:50%;position:relative;transform:translate(-50%);color:var(--color-primary-dark)}.lesson-controls{width:100%;max-width:400px;display:flex;flex-direction:column;gap:var(--spacing-md)}.lesson-controls p:first-of-type{color:var(--color-text-light);text-align:center;margin-bottom:var(--spacing-sm)}.control-group{display:flex;align-items:center;gap:var(--spacing-md)}.control-group label{flex-basis:60px;text-align:right;margin-bottom:0;font-weight:500;color:var(--color-text)}.control-group input[type=number]{flex-grow:1;border-color:var(--color-border)}.control-group.number-group label{flex-basis:60px;text-align:right;margin-bottom:0;font-weight:500;color:var(--color-text)}.control-group.number-group input[type=number]{flex-grow:1}.error-message{color:#e74c3c;font-size:.9em;text-align:center;font-weight:500;margin-top:var(--spacing-sm)}.lesson-results{margin-top:var(--spacing-lg);padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-md);background-color:rgba(var(--color-primary-rgb),.05)}.lesson-results h4{margin-bottom:var(--spacing-sm);color:var(--color-primary);text-align:center}.lesson-results p{margin-bottom:var(--spacing-sm);font-size:1em;color:var(--color-text);line-height:1.5}.hypotenuse-result{font-weight:600;margin-top:var(--spacing-md)!important}.highlight{color:var(--color-secondary);font-weight:700}.lesson-visual{width:100%;max-width:350px;aspect-ratio:1 / 1;margin:0 auto}.visual-triangle{fill:rgba(var(--color-primary-rgb),.2);stroke:var(--color-primary);stroke-width:2;transition:all .2s ease-out,fill .3s ease,stroke .3s ease}.right-angle-marker{fill:none;stroke:var(--color-text-light);stroke-width:1.5}.visual-text.side-label{font-size:12px;font-weight:500;fill:var(--color-text);transition:fill .3s ease}.visual-text.hypotenuse-label{font-style:italic;font-weight:600}@media (min-width: 768px){.lesson-interactive-area{flex-direction:row;align-items:flex-start;justify-content:space-around;gap:var(--spacing-xl)}.lesson-controls{flex-basis:45%;max-width:none}.lesson-visual{flex-basis:45%;max-width:400px;margin:0}}.input-mode-toggle{display:flex;align-items:center;gap:var(--spacing-sm);margin:0 auto var(--spacing-lg) auto;padding:var(--spacing-sm) var(--spacing-lg);font-weight:500;background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-fast)}.slider-group{display:grid;grid-template-columns:60px 1fr 50px;align-items:center;gap:var(--spacing-md)}.slider-group label{flex-basis:auto;text-align:right;padding-right:var(--spacing-sm);margin-bottom:0;font-weight:500;color:var(--color-text)}.slider-group input[type=range]{width:100%}.slider-group .control-value{font-weight:600;text-align:right;color:var(--color-text);font-variant-numeric:tabular-nums}.herons-formula-lesson h2{color:var(--color-primary);text-align:center}.herons-formula-lesson .formula{font-family:Courier New,Courier,monospace;font-size:1.2em;font-weight:600;text-align:center;margin:var(--spacing-sm) 0 var(--spacing-md) 0;padding:var(--spacing-sm) var(--spacing-md);background-color:rgba(var(--color-primary-rgb),.08);border-radius:var(--border-radius-md);display:block;color:var(--color-primary-dark);border-left:4px solid var(--color-primary);transition:background-color .3s ease,color .3s ease,border-color .3s ease}.herons-formula-lesson .area-formula{font-size:1.1em;word-break:break-all}.lesson-interactive-area{display:flex;flex-direction:column;gap:var(--spacing-xl);margin-top:var(--spacing-lg);align-items:center}.lesson-controls{width:100%;max-width:450px;display:flex;flex-direction:column;gap:var(--spacing-md)}.input-mode-toggle{display:flex;align-items:center;gap:var(--spacing-sm);margin:0 auto var(--spacing-lg) auto;padding:var(--spacing-sm) var(--spacing-lg);font-weight:500;background-color:var(--color-secondary);color:#fff;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-fast)}.input-mode-toggle:hover{opacity:.9;box-shadow:0 2px 4px #0003}.input-mode-label{text-align:center;font-style:italic;color:var(--color-text-light);margin-bottom:var(--spacing-lg)}.slider-controls,.number-controls{width:100%;display:flex;flex-direction:column;gap:var(--spacing-md)}.control-group{display:grid;grid-template-columns:60px 1fr 50px;align-items:center;gap:var(--spacing-md)}.control-group.number-group{display:flex;align-items:center;gap:var(--spacing-md)}.control-group label{text-align:right;margin-bottom:0;font-weight:500;color:var(--color-text);padding-right:var(--spacing-sm);transition:color .3s ease}.control-group.number-group label{flex-basis:60px;flex-shrink:0}.control-group input[type=range]{width:100%}.control-group input[type=number]{flex-grow:1}.control-group .control-value{font-weight:600;text-align:right;color:var(--color-text);font-variant-numeric:tabular-nums;transition:color .3s ease}.control-group input.input-error{border-color:#e74c3c;box-shadow:0 0 0 2px #e74c3c33}.error-message{color:#e74c3c;font-size:.95em;text-align:center;font-weight:500;margin-top:var(--spacing-sm);background-color:#e74c3c1a;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-md);border-left:3px solid #e74c3c}.lesson-results{margin-top:var(--spacing-lg);padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-md);background-color:rgba(var(--color-primary-rgb),.05);transition:background-color .3s ease,border-color .3s ease}.lesson-results h4{margin-bottom:var(--spacing-sm);color:var(--color-primary);text-align:center;transition:color .3s ease}.lesson-results p{margin-bottom:var(--spacing-sm);font-size:1em;color:var(--color-text);line-height:1.5;transition:color .3s ease}.lesson-results p:last-child{margin-bottom:0}.area-result{font-family:Courier New,Courier,monospace;word-break:break-all}.final-area{font-weight:600;margin-top:var(--spacing-md)!important;font-size:1.1em}.highlight{color:var(--color-secondary);font-weight:700;transition:color .3s ease}.calculated-value{font-size:1.1em;padding:0 4px}.lesson-visual{width:100%;max-width:400px;aspect-ratio:320 / 200;margin:0 auto;position:relative;border:1px dashed var(--color-border);border-radius:var(--border-radius-sm);background-color:#00000005;transition:background-color .3s ease,border-color .3s ease}[data-theme=dark] .lesson-visual{background-color:#ffffff08}.lesson-visual svg{display:block;width:100%;height:100%;overflow:visible}.visual-triangle{fill:rgba(var(--color-primary-rgb),.25);stroke:var(--color-primary);stroke-width:2;stroke-linejoin:round;transition:all .2s ease-out,fill .3s ease,stroke .3s ease}.visual-text{font-size:12px;font-weight:500;fill:var(--color-text);transition:fill .3s ease}.placeholder-text{font-style:italic;fill:var(--color-text-light)}.vertex-label{font-weight:700;font-size:14px;fill:var(--color-primary);transition:fill .3s ease}[data-theme=dark] .vertex-label{fill:var(--color-primary-dark-theme)}.side-label{font-size:11px;font-style:italic;fill:var(--color-text-light);transition:fill .3s ease;pointer-events:none}[data-theme=dark] .side-label{fill:var(--color-text-light-dark-theme)}.visual-error-text{text-align:center;font-size:.9em;color:#e74c3c;margin-top:var(--spacing-sm);font-weight:500}@media (min-width: 768px){.lesson-interactive-area{flex-direction:row;align-items:flex-start;justify-content:space-around;gap:var(--spacing-xl)}.lesson-controls{flex-basis:45%;max-width:none}.lesson-visual{flex-basis:45%;max-width:450px;margin:0}}.home-page-container{display:flex;flex-direction:column;gap:var(--spacing-xl)}.enhanced-intro{text-align:center;padding:var(--spacing-xl) var(--spacing-lg);position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-card-bg) 0%,rgba(var(--color-primary-rgb),.05) 100%);border:none;box-shadow:0 6px 18px rgba(var(--color-primary-rgb),.15)}[data-theme=dark] .enhanced-intro{background:linear-gradient(135deg,var(--color-card-bg-dark-theme) 0%,rgba(var(--color-primary-rgb),.1) 100%);box-shadow:0 6px 18px #0003}.intro-icon{font-size:2.5rem;color:var(--color-secondary);margin-bottom:var(--spacing-sm)}[data-theme=dark] .intro-icon{color:var(--color-secondary-dark-theme)}.enhanced-intro h2{color:var(--color-primary);font-size:2.2em;font-weight:700;margin-bottom:var(--spacing-sm)}[data-theme=dark] .enhanced-intro h2{color:var(--color-primary-dark-theme)}.enhanced-intro .intro-subtitle{font-size:1.2em;color:var(--color-text);margin-bottom:var(--spacing-md);font-weight:500}[data-theme=dark] .enhanced-intro .intro-subtitle{color:var(--color-text-dark-theme)}.enhanced-intro p:not(.intro-subtitle){font-size:1em;color:var(--color-text-light);max-width:600px;margin-left:auto;margin-right:auto}[data-theme=dark] .enhanced-intro p:not(.intro-subtitle){color:var(--color-text-light-dark-theme)}.lesson-section{padding-top:var(--spacing-lg);min-height:50vh}.lesson-section>.card{width:100%}