#root{max-width:1280px;margin:0 auto;padding:1rem;text-align:center;width:100%}.logo{height:2em;padding:.5em;will-change:filter;transition:filter .3s;vertical-align:middle}.logo:hover,.logo.react:hover{filter:drop-shadow(0 0 1em var(--accent-color))}.app-container{display:flex;flex-direction:column;min-height:90vh}header{background:var(--header-bg);color:var(--header-text);padding:2rem 1rem;margin-bottom:1rem;border-radius:8px;box-shadow:0 4px 6px var(--card-shadow)}header h1{margin-bottom:.5rem}.tabs{display:flex;justify-content:center;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.tabs button{background-color:var(--button-bg);color:var(--text-color);border:1px solid var(--border-color);border-radius:4px;padding:.5rem 1rem;cursor:pointer;transition:all .3s ease}.tabs button:hover:not(.active){background-color:var(--accent-color);color:#fff}.tabs button.active{background-color:var(--accent-color);color:#fff;border-color:var(--accent-color)}main{flex:1;margin-bottom:2rem}.tab-content{background-color:var(--card-bg);border-radius:8px;padding:1.5rem;text-align:left;margin-bottom:1.5rem;box-shadow:0 2px 8px var(--card-shadow)}.tips-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.tip{background-color:var(--table-header-bg);border-radius:8px;padding:1rem;box-shadow:0 2px 5px var(--card-shadow)}.tip h3{color:var(--accent-color);margin-top:0}.visualizations{display:flex;flex-direction:column;gap:2rem}.process-diagram{background-color:var(--table-header-bg);border-radius:8px;padding:1rem;margin-bottom:1rem}.process-step{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.process-step:last-child{border-bottom:none}.process-step h4{color:var(--accent-color);margin-bottom:.5rem}.comparison-table{width:100%;border-collapse:collapse;margin:1rem 0}.comparison-table th,.comparison-table td{border:1px solid var(--table-border);padding:.75rem;text-align:left}.comparison-table th{background-color:var(--table-header-bg);font-weight:700}.application-chart{margin-top:1rem}.usage-area{background-color:var(--table-header-bg);border-radius:4px;padding:.5rem;margin-bottom:.5rem;display:flex;justify-content:space-between}.bar{height:24px;background-color:var(--accent-color);border-radius:3px;transition:width 1s ease-in-out}.quiz-container{max-width:800px;margin:0 auto}.quiz-question{background-color:var(--table-header-bg);border-radius:8px;padding:1rem;margin-bottom:1.5rem;box-shadow:0 2px 5px var(--card-shadow)}.options{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}.option{display:flex;align-items:center;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:4px;padding:.75rem;cursor:pointer;transition:background-color .3s}.option:hover{background-color:var(--table-header-bg)}.option.selected{border-color:var(--accent-color);background-color:#3498db1a}.option input{margin-right:1rem}.feedback{margin-top:1rem;padding:1rem;border-radius:4px}.feedback.correct{background-color:#2ecc7133;border:1px solid #2ecc71}.feedback.incorrect{background-color:#e74c3c33;border:1px solid #e74c3c}.submit-btn{background-color:var(--accent-color);color:#fff;padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;margin-top:1rem;font-weight:700}.submit-btn:hover{background-color:var(--accent-hover)}.submit-btn:disabled{background-color:#ccc;cursor:not-allowed}.solution-container{max-width:800px;margin:0 auto}.locked-content{text-align:center;padding:2rem;background-color:var(--card-bg);border-radius:8px;box-shadow:0 2px 5px var(--card-shadow)}.lock-icon{width:64px;height:64px;margin:1rem 0}.solution-step{margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.solution-step:last-child{border-bottom:none}.solution-step h3{color:var(--accent-color);margin-bottom:.5rem}.implication{background-color:var(--table-header-bg);padding:1rem;border-radius:4px;margin-bottom:1rem}.description-content{max-width:800px;margin:0 auto;padding:2rem;background-color:var(--card-bg);border-radius:8px;text-align:left;box-shadow:0 2px 8px var(--card-shadow)}.description-content h1{color:var(--accent-color);margin-bottom:1.5rem}.description-content section{margin-bottom:2rem}.back-btn{background-color:var(--accent-color);color:#fff;padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;margin-top:1rem}.back-btn:hover{background-color:var(--accent-hover)}pre.structure{background-color:var(--code-bg);padding:1rem;border-radius:4px;overflow-x:auto;font-family:monospace;white-space:pre;line-height:1.4}.info-button{background-color:var(--button-bg);color:var(--text-color);border:1px solid var(--border-color);border-radius:4px;padding:.5rem 1rem;cursor:pointer;margin-bottom:1rem}.info-button:hover{background-color:var(--accent-color);color:#fff}footer{margin-top:auto;padding:1rem;background-color:var(--card-bg);border-radius:8px 8px 0 0;box-shadow:0 -2px 5px var(--card-shadow)}footer p{margin:.5rem 0;font-size:.9rem}@media (max-width: 768px){.tabs{flex-direction:column;gap:.25rem}.tips-container{grid-template-columns:1fr}.comparison-table th,.comparison-table td{padding:.5rem;font-size:.9rem}}:root{--bg-color: #f5f7fa;--text-color: #213547;--accent-color: #3498db;--accent-hover: #2980b9;--card-bg: #ffffff;--card-shadow: rgba(0, 0, 0, .1);--button-bg: #f1f1f1;--code-bg: #f8f9fa;--border-color: #e2e8f0;--header-bg: linear-gradient(135deg, #3498db, #2980b9);--header-text: white;--table-bg: #ffffff;--table-header-bg: #f1f5f9;--table-border: #e2e8f0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--text-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=dark]{--bg-color: #242424;--text-color: rgba(255, 255, 255, .87);--accent-color: #61dafb;--accent-hover: #8ae8ff;--card-bg: #333;--card-shadow: rgba(0, 0, 0, .4);--button-bg: #1a1a1a;--code-bg: #2a2a2a;--border-color: #444;--header-bg: linear-gradient(135deg, #1a1a2e, #16213e);--header-text: #f1f1f1;--table-bg: #333;--table-header-bg: #2a2a2a;--table-border: #444;color-scheme:dark}.theme-toggle{position:absolute;top:10px;right:10px;z-index:100}.theme-toggle-btn{display:flex;align-items:center;gap:8px;background-color:var(--button-bg);color:var(--text-color);border:1px solid var(--border-color);padding:8px 12px;border-radius:20px;cursor:pointer;font-size:.9rem;transition:all .3s ease}.theme-toggle-btn:hover{border-color:var(--accent-color);box-shadow:0 0 5px var(--card-shadow)}@media (max-width: 600px){.theme-toggle-text{display:none}}a{font-weight:500;color:var(--accent-color);text-decoration:inherit}a:hover{color:var(--accent-hover)}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:2.2em;line-height:1.1}button{border-radius:4px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--button-bg);cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--accent-color)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}ul,ol{margin-left:1.5rem;margin-bottom:1.5rem}li{margin-bottom:.5rem}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background-color:var(--code-bg);padding:.2em .4em;border-radius:3px;font-size:.9em}.tab-content,.description-content{background-color:var(--card-bg);color:var(--text-color);box-shadow:0 2px 5px var(--card-shadow)}.tab-content h2,.comparison-table th,.process-diagram,.tip,.quiz-question,.usage-area,.implication,pre.structure,.option{background-color:var(--table-header-bg)}.comparison-table th,.comparison-table td{border-color:var(--table-border)}