*{box-sizing:border-box;margin:0;padding:0}body{margin:0;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:linear-gradient(135deg,#1a3a1a,#2d5016);min-height:100vh}.app-container{max-width:1800px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;padding:30px 20px;background:linear-gradient(135deg,#2c5530,#3a6b1f);border-radius:12px;margin-bottom:30px;box-shadow:0 4px 12px #0000004d}.app-title{font-size:42px;font-weight:700;color:#fff;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-subtitle{font-size:18px;color:#b8e6b8;font-weight:500}.app-main{flex:1;display:grid;grid-template-columns:400px 1fr 500px;gap:20px;margin-bottom:20px}.control-panel-container{display:flex;flex-direction:column}.visualization-container{display:flex;justify-content:center;align-items:center;position:relative}.education-container{display:flex;flex-direction:column;max-height:900px;overflow-y:auto}.mode-indicator{position:absolute;top:60px;left:50%;transform:translate(-50%);z-index:10}.mode-badge{display:inline-block;padding:8px 16px;font-size:14px;font-weight:700;border-radius:20px;box-shadow:0 2px 8px #0003;animation:fadeIn .3s ease-in}.mode-practice{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff}.mode-learn{background:linear-gradient(135deg,#2196f3,#1565c0);color:#fff}.mode-quiz{background:linear-gradient(135deg,#ff9800,#e65100);color:#fff}.tooltip{position:fixed;background:#000000e6;color:#fff;padding:12px 16px;border-radius:8px;font-size:13px;max-width:250px;z-index:1000;pointer-events:none;box-shadow:0 4px 12px #00000080;animation:tooltipFadeIn .2s ease-in}.tooltip-title{font-weight:700;margin-bottom:5px;font-size:14px;color:#4caf50}.tooltip-content{line-height:1.4}.app-footer{text-align:center;padding:20px;background:#2c55304d;border-radius:8px;color:#b8e6b8;font-size:13px;line-height:1.6}.footer-links{margin-top:10px}.footer-links a{color:#4caf50;text-decoration:none;font-weight:500;transition:color .2s}.footer-links a:hover{color:#66bb6a;text-decoration:underline}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1200px){.app-main{grid-template-columns:300px 1fr 350px}}@media (max-width: 1024px){.app-main{grid-template-columns:1fr;grid-template-rows:auto auto auto}.visualization-container{order:1}.control-panel-container{order:2}.education-container{order:3;max-height:none}.control-panel-container,.education-container{max-width:100%}}@media (max-width: 900px){.app-title{font-size:32px}.app-subtitle{font-size:16px}.visualization-container svg{max-width:100%;height:auto}}.education-container::-webkit-scrollbar{width:8px}.education-container::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.education-container::-webkit-scrollbar-thumb{background:#4caf5080;border-radius:4px}.education-container::-webkit-scrollbar-thumb:hover{background:#4caf50b3}.text-center{text-align:center}.mt-4{margin-top:16px}.mb-4{margin-bottom:16px}@media print{.control-panel-container,.app-footer{display:none}.app-main{grid-template-columns:1fr}}