:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.navbar{box-sizing:border-box;z-index:1100;justify-content:flex-start;align-items:center;width:100%;height:60px;padding:10px 12px;display:flex;position:sticky;top:0;left:0}.navbar-left{align-items:center;gap:10px;display:flex}.hamburger{cursor:pointer;color:#333;z-index:1200;background:0 0;border:none;justify-content:center;align-items:center;padding:10px;font-size:24px;display:flex}.dark-mode-toggle{cursor:pointer;z-index:1200;background:0 0;border:none;justify-content:center;align-items:center;padding:10px;font-size:24px;transition:transform .2s;display:flex}.dark-mode-toggle:hover{transform:scale(1.1)}.nav-sidebar{z-index:1001;background-color:#fff;width:250px;height:100%;padding:20px;transition:transform .3s ease-in-out;position:fixed;top:0;left:0;transform:translate(-100%);box-shadow:2px 0 5px #0000001a}.nav-sidebar.open{transform:translate(0)}.close-btn{cursor:pointer;margin-bottom:20px;font-size:24px}.nav-sidebar nav-links{flex-direction:column;margin-top:20px}.nav-link{color:#333;background:0 0;border:none;border-radius:4px;width:100%;padding:8px 12px;font-weight:500;text-decoration:none}.nav-link:hover{color:#000;background-color:#f0f0f0;border:none}.active-link{color:#e0e0e0;border-bottom:2px solid #e0e0e0}body.dark-mode .hamburger,body.dark-mode .dark-mode-toggle{color:#ccc}body.dark-mode .nav-sidebar{color:#ccc;background-color:#2c2c2c;box-shadow:2px 0 5px #00000080}body.dark-mode .nav-link{color:#ccc;border:none}body.dark-mode .nav-link:hover{background-color:#333;border:none}body.dark-mode .active-link{color:#444;border-bottom:2px solid #444}.practice-container{justify-content:unset;background:#fff;width:100%;min-width:400px;max-width:800px;margin:0 auto;padding:20px}.practice-container h1{color:#333;text-align:center;margin-bottom:20px;font-size:28px;font-weight:700}.bw-image{filter:grayscale()}.answer-input{border:1px solid #ccc;border-radius:4px;flex-grow:1;min-width:150px;margin:5px;padding:10px;font-size:16px}.controls-group input{color:#333;background-color:#e0e0e0;border:#000;border-radius:4px;min-width:100%;min-height:24px;margin:5px;padding:10px 15px}.controls-group button{color:#333;cursor:pointer;background-color:#e0e0e0;border:none;border-radius:4px;margin:5px;padding:10px 15px;font-size:14px;font-weight:600;transition:background-color .2s}.controls-group button:hover{background-color:#ccc}.feedback-message{text-align:center;color:#333;background-color:#f7f7f7;border:1px solid #ddd;border-radius:4px;margin-top:10px;padding:10px;font-weight:600}.feedback-message-right{background-color:#e6ffe6}.feedback-message-wrong{background-color:#ffe6e6}.stats-container{border-top:1px solid #eee;margin-top:30px;padding-top:15px}.stats-container h2{color:#555;margin-bottom:10px;font-size:20px}.stats-container p{color:#666;margin:5px 0;font-size:16px}.practice-container.dark-mode{color:#e0e0e0;background-color:#1e1e1e}.dark-mode .stats-container p{color:#b0b0b0}.dark-mode .stats-container{border-top:1px solid #444}.dark-mode .controls-group input{color:#e0e0e0;background-color:#2d2d2d;border:1px solid #444}.dark-mode .controls-group button{color:#e0e0e0;background-color:#2d2d2d}.dark-mode .controls-group button:hover{background-color:#3d3d3d}.dark-mode .feedback-message-right{color:#ccc;background-color:#2c432c}.dark-mode .feedback-message-wrong{color:#ccc;background-color:#432c2c}.options-modal{z-index:50;background:0 0;width:100%;max-width:500px;margin:10px auto 20px;display:block;position:static}.options-modal-content{z-index:55;background-color:#f9f9f9;border:1px solid #ccc;border-radius:8px;justify-content:center;width:90%;max-width:450px;margin:0 auto;padding:20px 25px;position:relative;box-shadow:0 2px 5px #0000001a}.options-actions button{text-align:center;color:#333;background-color:#e0e0e0;border-radius:4px;margin:5px;padding:10px 15px}.options-container h2{text-align:center;color:#444;margin-top:0;margin-bottom:20px;font-size:24px}.option-item{justify-content:space-between;align-items:center;margin-bottom:15px;padding:5px 0;display:flex}.option-item label{color:#333;flex-grow:1;font-size:16px}.option-item input[type=checkbox]{cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:4px;width:20px;height:20px}.option-item select,.option-item input[type=text]{color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;flex-grow:1;padding:8px;font-size:16px}.dark-mode .options-modal-content{color:#e0e0e0;background-color:#2d2d2d;border:1px solid #444}.dark-mode .options-container h2,.dark-mode .option-item label{color:#e0e0e0}.dark-mode .option-item input[type=checkbox]{background-color:#444;border:1px solid #666}.dark-mode .option-item select,.dark-mode .option-item input[type=text]{color:#e0e0e0;background-color:#444;border:1px solid #666}.feedback-message a{color:#1e1e1e;font-family:Arial,sans-serif;font-weight:700;text-decoration:underline}.dark-mode .feedback-message a{color:#ccc;font-family:Arial,sans-serif;font-weight:700;text-decoration:underline}.learn-container{justify-content:unset;background:#fff;width:100%;min-width:400px;max-width:800px;margin:0 auto;padding:20px}.learn-container h1{color:#333;text-align:center;margin-bottom:20px;font-size:28px;font-weight:700}.problem-image{border:1px solid #ccc;border-radius:4px;width:100%;max-width:400px;height:auto;margin:0 auto 20px;display:block}.controls-group{flex-wrap:wrap;justify-content:center;align-items:stretch;margin-bottom:15px;padding:5px 0;display:flex}.search-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-bottom:20px;padding:5px 0;display:flex}.search-bar input[type=text]{color:#333;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;flex-grow:1;min-width:250px;margin:5px;padding:10px;font-size:16px}.search-bar button{color:#333;cursor:pointer;background-color:#e0e0e0;border-radius:4px;margin:5px;padding:10px 15px;font-size:16px}.search-bar button:hover{background-color:#ccc}.image-result{text-align:center;margin-top:20px}.image-result p{color:#555;margin:10px 0;font-size:18px}.image-result button{color:#333;cursor:pointer;background-color:#e0e0e0;border:none;border-radius:4px;margin:5px;padding:10px 15px;font-size:14px;font-weight:600}.dark-mode-toggle{color:#333;cursor:pointer;background-color:#e0e0e0;border:none;border-radius:4px;padding:10px 15px;font-size:20px;transition:background-color .2s;position:absolute;top:20px;right:20px}body.dark-mode{background-color:#1e1e1e;width:100vw;margin:0;font-family:Arial,sans-serif;display:block}.dark-mode-toggle:hover{background-color:#ccc}.learn-container.dark-mode{color:#e0e0e0;background-color:#1e1e1e}.dark-mode h1,.dark-mode h2{color:#e0e0e0}.dark-mode .search-bar input[type=text]{color:#e0e0e0;background-color:#333;border:1px solid #555}.dark-mode .search-bar button{color:#e0e0e0;background-color:#333}.dark-mode .search-bar button:hover{background-color:#555}.dark-mode .dark-mode-toggle{color:#e0e0e0;background-color:#2d2d2d}.dark-mode .dark-mode-toggle:hover{background-color:#3d3d3d}.observation-code{text-align:center;color:#333;margin-top:10px;font-family:monospace}.dark-mode .observation-code{color:#e0e0e0}.dark-mode .image-result p{color:#b0b0b0}.dark-mode .image-result button{color:#e0e0e0;background-color:#2d2d2d}.image-result .wikipedia-link a{color:#1e1e1e;font-family:Arial,sans-serif;font-weight:700;text-decoration:underline}.dark-mode .wikipedia-link a{color:#ccc;font-family:Arial,sans-serif;font-weight:700;text-decoration:underline}.status-message{color:#555;text-align:center;margin-top:20px;font-size:18px}.dark-mode .status-message{color:#b0b0b0}body{background-color:#fff;width:100vw;margin:0;font-family:Arial,sans-serif;display:block}.about-container{color:#333;background-color:#fff;width:100%;min-width:400px;max-width:800px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.about-container h1{margin-bottom:20px}.about-container a{color:#1a73e8;text-decoration:none}.about-container a:hover{text-decoration:underline}.about-container.dark-mode{color:#f0f0f0;background-color:#1e1e1e}.about-container.dark-mode a{color:#4ea1f3}.about-container.dark-mode a:hover{text-decoration:underline}