@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-primary:#0a0e17;--bg-secondary:#121824;--bg-tertiary:#1a2335;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent:#3b82f6;--accent-secondary:#8b5cf6;--accent-glow:#3b82f626;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--border-color:#1e293b;--glass-bg:#121824b3;--glass-border:#ffffff0d;--glass-shadow:#0000004d;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--transition-fast:.15s ease;--transition-normal:.25s ease}:root.light-mode{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#f1f5f9;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--accent:#2563eb;--accent-secondary:#7c3aed;--accent-glow:#2563eb14;--success:#059669;--warning:#d97706;--error:#dc2626;--border-color:#e2e8f0;--glass-bg:#fffc;--glass-border:#0000000f;--glass-shadow:#0f172a0d}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-normal), color var(--transition-normal);line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}#root{flex-direction:column;min-height:100vh;display:flex}header{border-bottom:1px solid var(--border-color);background-color:var(--glass-bg);-webkit-backdrop-filter:blur(12px);z-index:50;height:64px;transition:border-color var(--transition-normal);justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.main-layout{flex:1;height:calc(100vh - 64px);display:flex;position:relative;overflow:hidden}.sidebar{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);width:280px;transition:transform var(--transition-normal), width var(--transition-normal), background-color var(--transition-normal);z-index:40;flex-direction:column;display:flex;overflow-y:auto}.content-area{background-color:var(--bg-primary);flex:1;padding:24px;position:relative;overflow-y:auto}.glass-panel{background-color:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:0 8px 32px 0 var(--glass-shadow);-webkit-backdrop-filter:blur(8px);border-radius:12px}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:600}.simulation-container{grid-template-rows:auto auto;grid-template-columns:1fr 340px;gap:24px;max-width:1400px;margin:0 auto;display:grid}.canvas-viewport-card{flex-direction:column;grid-area:1/1/2/2;width:100%;display:flex;position:relative;overflow:hidden}.tabs-container{grid-area:2/1/3/2}.canvas-wrapper{aspect-ratio:16/9;background-color:#05070b;border-radius:8px;width:100%;position:relative;overflow:hidden}.simulation-canvas{width:100%;height:100%;display:block}.canvas-controls-overlay{border-top:1px solid var(--border-color);background:#0a0e17d9;border-radius:0 0 8px 8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.parameters-panel{flex-direction:column;grid-area:1/2/3/3;gap:20px;padding:20px;display:flex}.param-group{flex-direction:column;gap:8px;display:flex}.param-label{color:var(--text-secondary);justify-content:space-between;font-size:.875rem;display:flex}.param-value{font-family:var(--font-mono);color:var(--accent);font-weight:600}input[type=range]{-webkit-appearance:none;background:var(--border-color);border-radius:3px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;width:16px;height:16px;transition:transform var(--transition-fast), background var(--transition-fast);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{background:var(--text-primary);transform:scale(1.2)}.btn{cursor:pointer;transition:all var(--transition-fast);font-weight:500;font-family:var(--font-sans);border:1px solid #0000;border-radius:8px;outline:none;justify-content:center;align-items:center;gap:8px;padding:8px 16px;display:inline-flex}.btn-primary{background-color:var(--accent);color:#fff}.btn-primary:hover{box-shadow:0 0 12px var(--accent);background-color:#2563eb}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color)}.btn-secondary:hover{background-color:var(--border-color)}.btn-icon{border-radius:50%;width:36px;height:36px;padding:0}.btn-active{background-color:var(--accent-glow);border-color:var(--accent);color:var(--accent)}.switch-container{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.switch{width:44px;height:24px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider-round{cursor:pointer;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:34px;transition:all .3s;position:absolute;inset:0}.slider-round:before{content:"";background-color:var(--text-secondary);border-radius:50%;width:16px;height:16px;transition:all .3s;position:absolute;bottom:3px;left:3px}input:checked+.slider-round{background-color:var(--accent-glow);border-color:var(--accent)}input:checked+.slider-round:before{background-color:var(--accent);transform:translate(20px)}.tabs-container{margin-top:24px}.tabs-headers{border-bottom:1px solid var(--border-color);gap:8px;margin-bottom:16px;display:flex}.tab-header-btn{color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000;padding:10px 20px;font-weight:500}.tab-header-btn:hover{color:var(--text-primary)}.tab-header-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-panel-content{padding:16px;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.data-logger-table{border-collapse:collapse;width:100%;margin-top:12px;font-size:.9rem}.data-logger-table th,.data-logger-table td{text-align:left;border-bottom:1px solid var(--border-color);padding:10px 12px}.data-logger-table th{color:var(--text-secondary);font-weight:500}.quiz-question-box{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;margin-bottom:16px;padding:20px}.quiz-option{border:1px solid var(--border-color);cursor:pointer;transition:all var(--transition-fast);background-color:var(--bg-primary);border-radius:6px;align-items:center;gap:12px;margin-top:10px;padding:12px;display:flex}.quiz-option:hover{border-color:var(--accent);background-color:var(--bg-tertiary)}.quiz-option.correct{border-color:var(--success);background-color:#10b9810d}.quiz-option.wrong{border-color:var(--error);background-color:#ef44440d}.quiz-option-letter{background-color:var(--bg-tertiary);border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;font-weight:600;display:inline-flex}.quiz-option.correct .quiz-option-letter{background-color:var(--success);color:#fff}.quiz-option.wrong .quiz-option-letter{background-color:var(--error);color:#fff}.knowledge-tree-container{border:1px solid var(--border-color);background-color:#040810;border-radius:12px;justify-content:center;align-items:center;width:100%;height:80vh;display:flex;position:relative;overflow:hidden}.knowledge-tree-canvas{width:100%;height:100%;display:block}.home-welcome-overlay{pointer-events:none;max-width:400px;position:absolute;top:32px;left:32px}.home-welcome-title{background:linear-gradient(135deg, var(--text-primary), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:2rem;font-weight:700}.home-welcome-desc{color:var(--text-secondary);font-size:.95rem}.menu-toggle-btn{display:none}.sidebar-search-container{border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary);padding:12px;display:none}.btn,.simulation-canvas,canvas{touch-action:manipulation}@media (width<=768px){.menu-toggle-btn{display:inline-flex}.sidebar{position:absolute;top:64px;bottom:0;left:0;transform:translate(-100%);box-shadow:10px 0 30px #00000080}.sidebar.open{transform:translate(0)}.simulation-container{grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:16px}.canvas-viewport-card{grid-area:1/1}.parameters-panel{grid-area:2/1;padding:12px!important}.tabs-container{grid-area:3/1;margin-top:0;padding:12px!important}.content-area{padding:12px}}@media (width<=640px){.nav-search-container{display:none!important}.sidebar-search-container{display:block}header{padding:0 12px}header .btn{padding:6px 10px!important;font-size:.8rem!important}}