:root{--primary-font: "Roboto", sans-serif;--heading-font: "Montserrat", sans-serif;--code-font: monospace;--font-size-base: 16px;--font-size-small: .875rem;--font-size-medium: 1rem;--font-size-large: 1.125rem;--font-size-xl: 1.25rem;--font-size-xxl: 1.5rem;--font-size-heading: 2rem;--light-bg: #ffffff;--light-text: #333333;--dark-bg: #1a1a1a;--dark-text: #e0e0e0;--primary-color: #007bff;--spacing-base: 1rem;--line-height: 1.6}html,body{font-family:var(--primary-font);font-size:var(--font-size-base);line-height:var(--line-height);margin:0;padding:0;transition:background-color .3s ease,color .3s ease}h1,h2,h3,h4,h5,h6{font-family:var(--heading-font);font-weight:600;margin-top:0}h1{font-size:var(--font-size-heading)}h2{font-size:var(--font-size-xxl)}h3{font-size:var(--font-size-xl)}p{font-size:var(--font-size-medium);margin-bottom:var(--spacing-base)}code,pre{font-family:var(--code-font);background-color:#0000000d;padding:.2rem .4rem;border-radius:4px}body.dark-mode code,body.dark-mode pre{background-color:#ffffff1a}a{color:var(--primary-color);text-decoration:none;transition:color .3s ease}a:hover{text-decoration:underline}@media (max-width: 768px){:root{--font-size-base: 14px;--font-size-heading: 1.75rem}}.home-page{padding:20px;font-family:var(--font-family)}* Keyframes for gradient border animation */ @keyframes gradientBorder{0%{border-color:#75d0ef;box-shadow:0 4px 15px #75d0ef66}25%{border-color:#1818ec;box-shadow:0 4px 15px #1818ec66}50%{border-color:#4e85e8;box-shadow:0 4px 15px #4e85e866}75%{border-color:#1818ec;box-shadow:0 4px 15px #1818ec66}100%{border-color:#75d0ef;box-shadow:0 4px 15px #75d0ef66}}.centered-cta{position:fixed;bottom:60px;left:50%;transform:translate(-50%);z-index:100;pointer-events:auto;width:auto}.cta-button{display:inline-block;background-color:#06c;color:#fff!important;font-size:1.4rem;font-weight:700;padding:1rem 3rem;border-radius:50px;text-decoration:none;transition:transform .3s ease;border:3px solid #75d0ef;text-align:center;animation:gradientBorder 8s ease infinite}.cta-button:hover{background-color:#0052a3;transform:translateY(-2px) scale(1.05)}:root{--navbar-bg: #ffffff;--navbar-text: #333333;--navbar-accent: #007bff;--navbar-accent-rgb: 0, 123, 255;--navbar-highlight: #0056b3;--navbar-border: #dddddd}body.dark-mode{--navbar-bg: #222222;--navbar-text: #f5f5f5;--navbar-accent: #66b3ff;--navbar-accent-rgb: 102, 179, 255;--navbar-highlight: #99ccff;--navbar-border: #444444}.navbar{display:flex;justify-content:space-between;align-items:center;background-color:var(--navbar-bg);padding:10px 20px;color:var(--navbar-text);box-shadow:0 2px 4px #0000001a;transition:background-color .3s ease,color .3s ease}.navbar-title{font-size:24px;color:var(--navbar-accent);text-decoration:none;font-family:var(--code-font, monospace);transition:color .3s ease}.navbar-title:hover{color:var(--navbar-highlight)}.navbar-right{display:flex;align-items:center;gap:20px}.navbar-links{display:flex;gap:15px}.navbar-links a{color:var(--navbar-text);text-decoration:none;font-size:16px;transition:color .3s ease}.navbar-links a:hover{text-decoration:underline;color:var(--navbar-accent)}.navbar-hamburger{display:none;cursor:pointer;font-size:30px;color:var(--navbar-text)}.navbar-dropdown{display:none;flex-direction:column;position:absolute;top:60px;right:20px;background-color:var(--navbar-bg);padding:10px;border:1px solid var(--navbar-border);border-radius:5px;box-shadow:0 4px 8px #0000001a;z-index:100;transition:background-color .3s ease}.navbar-dropdown.open{display:flex}.navbar-dropdown .navbar-links{flex-direction:column;gap:10px}.navbar-dropdown .navbar-links a{margin:5px 0}@media (max-width: 768px){.navbar-right{display:none}.navbar-hamburger{display:block}.navbar-dropdown{display:none}.navbar-dropdown.open{display:flex}.navbar-dropdown .theme-toggle{margin-top:10px;align-self:center}}.navbar-links{display:flex;gap:15px;justify-content:center;align-items:center;width:100%}.navbar-links a{color:var(--text-color);text-decoration:none;font-size:16px;text-align:center;white-space:nowrap}.navbar-links a:hover{text-decoration:underline;color:var(--accent-color)}@media (max-width: 768px){.navbar-links a{display:block;gap:10px;text-align:center}}.level-selector{display:flex;align-items:center;gap:10px;margin:5px;flex-grow:1;max-width:400px;min-width:0}select{padding:8px 12px;font-size:14px;background-color:var(--navbar-bg);color:var(--navbar-text);border:1px solid var(--navbar-accent);border-radius:5px;transition:all .3s ease;cursor:pointer;width:100%;max-width:100%}select:focus{border-color:var(--navbar-highlight);outline:none;box-shadow:0 0 0 2px rgba(var(--navbar-accent-rgb, 0, 123, 255),.25)}select option{background-color:var(--navbar-bg);color:var(--navbar-text);padding:8px}select:hover{border-color:var(--navbar-highlight)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--navbar-accent);color:#fff;border-radius:50%;cursor:pointer;transition:all .3s ease;aspect-ratio:1;box-sizing:border-box}body.dark-mode .theme-toggle{color:#000}.theme-toggle:hover{color:#999!important}.toggle-icon{font-size:20px}:root{--goal-bg: #f4f4f4;--input-bg: #fff;--preview-bg: #f9f9f9;--border-color: #ddd;--text-color: #333}body.dark-mode{--goal-bg: #333;--input-bg: #444;--preview-bg: #555;--border-color: #666;--text-color: #fff}.editor-container{display:flex;height:100%;width:100%;overflow:hidden;border:1px solid var(--border-color)}.markdown-output,.markdown-editor{flex:1;padding-left:20px;box-sizing:border-box;color:var(--text-color);overflow-y:auto;overflow-x:hidden}.markdown-editor{background-color:var(--input-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding-top:20px}.markdown-editor textarea{width:100%;height:100%;font-size:16px;border:none;outline:none;resize:none;background-color:var(--input-bg);color:var(--text-color);white-space:pre-wrap;word-wrap:break-word;padding-right:1rem;box-sizing:border-box;overflow:hidden}.markdown-output{background-color:var(--preview-bg);overflow-y:auto}.about-container{padding:2rem;max-width:800px;margin:0 auto;font-family:var(--font-family);line-height:var(--line-height)}.about-container h1{margin-bottom:var(--spacing);font-size:2em}.about-container p{margin:var(--spacing) 0;font-size:1.1em}.about-container a{color:var(--primary-color);text-decoration:none;transition:color .3s ease}.about-container a:hover{text-decoration:underline}.about-container .button{margin-top:var(--spacing);font-size:1em}:root{--goal-bg: #f4f4f4;--input-bg: #fff;--preview-bg: #f9f9f9;--border-color: #ddd;--text-color: #333;--code-background-color: #eef;--font-family: "Roboto", sans-serif}body.dark-mode{--goal-bg: #333;--input-bg: #444;--preview-bg: #555;--border-color: #666;--text-color: #fff;--code-background-color:rgb(105, 105, 110);--font-family: "Roboto", sans-serif}.cheat-sheet{padding:20px;font-family:var(--font-family)}.markdown-section{background-color:var(--goal-bg);border:1px solid var(--border-color);border-radius:5px;padding:15px;margin:20px 0}.subheadings{color:var(--text-color);font-family:Montserrat,sans-serif}p{line-height:1.5}code{background-color:var(--code-background-color);padding:2px 4px;border-radius:4px}.table-of-contents{margin:20px 0;font-family:var(--font-family)}.toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px}.toc-grid a{text-decoration:none;color:var(--text-color);background-color:var(--goal-bg);padding:10px;border:1px solid var(--border-color);border-radius:5px;transition:background-color .3s}.toc-grid a:hover{background-color:var(--border-color);color:var(--goal-bg)}.documentation-container{padding:2rem;max-width:800px;margin:0 auto;font-family:var(--font-family);line-height:var(--line-height)}.documentation-container h1{margin-bottom:var(--spacing);font-size:2em}.documentation-container p{margin-bottom:var(--spacing)}.documentation-container ul{margin-top:var(--spacing);padding-left:1.5rem}.documentation-container li{margin-bottom:.8em}.documentation-container a{color:var(--primary-color);text-decoration:none;transition:color .3s ease}.documentation-container a:hover{text-decoration:underline}:root{--light-bg: #ffffff;--light-text: #333333;--dark-bg: #1a1a1a;--dark-text: #e0e0e0;--primary-color: #007bff;--font-family: "Arial", sans-serif;--spacing: 1.5em;--line-height: 1.6}body.dark-mode{background-color:var(--dark-bg);color:var(--dark-text)}.report-bug-container{padding:2rem;max-width:800px;margin:0 auto;font-family:var(--font-family);line-height:var(--line-height)}.report-bug-container h1{margin-bottom:var(--spacing);font-size:2em}.report-bug-container p{margin-bottom:var(--spacing)}form{display:flex;flex-direction:column}label{margin-top:var(--spacing);font-weight:700}input,textarea{margin-top:.5rem;padding:.8rem;font-size:1em;border:1px solid #ccc;border-radius:5px}textarea{resize:vertical;min-height:100px}.submit-button{margin-top:var(--spacing);padding:.8rem 1.5rem;font-size:1em;color:#fff;background-color:var(--primary-color);border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.submit-button:hover{background-color:darken(var(--primary-color),10%)}.success-message{margin-top:var(--spacing);color:green;font-weight:700}.error-message{margin-top:var(--spacing);color:red;font-weight:700}.tutorial-container{display:flex;flex-direction:column;height:100vh}.markdown-game{flex:1;display:flex;overflow:hidden}:root{--goal-bg: #f4f4f4;--input-bg: #fff;--preview-bg: #f9f9f9;--border-color: #ddd;--text-color: #333;--link-color: hsl(240, 100%, 50%);--link-visited-color: hsl(270, 100%, 50%)}body.dark-mode{--goal-bg: #333;--input-bg: #444;--preview-bg: #555;--border-color: #666;--text-color: #fff;--link-color: hsl(200, 100%, 70%);--link-visited-color: hsl(250, 100%, 70%)}.markdown-game-container{display:flex;height:100%;width:100%;overflow:hidden}.goal-section,.input-section,.preview-section{flex:1;padding-left:20px;box-sizing:border-box;color:var(--text-color);overflow-y:auto;overflow-x:hidden}.goal-section{background-color:var(--goal-bg);border-right:1px solid var(--border-color);padding-right:10px}.goal-section,.preview-section{box-sizing:border-box;color:var(--text-color);overflow-y:auto;overflow-x:hidden}.input-section{background-color:var(--input-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:0}.input-section textarea{width:100%;height:100%;font-size:16px;border:none;outline:none;resize:none;background-color:var(--input-bg);color:var(--text-color);padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5}.preview-section{background-color:var(--preview-bg);overflow-y:auto}.markdown-output{white-space:pre-wrap;word-wrap:break-word;color:var(--text-color);padding:20px}.goal-section,.input-section textarea,.markdown-output{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;line-height:1.5;padding:20px}.goal-section>*:first-child,.markdown-output>*:first-child{margin-top:0}.goal-section>*:last-child,.markdown-output>*:last-child{margin-bottom:0}.goal-section h1,.goal-section h2,.goal-section h3,.goal-section h4,.goal-section h5,.goal-section h6,.markdown-output h1,.markdown-output h2,.markdown-output h3,.markdown-output h4,.markdown-output h5,.markdown-output h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.goal-section h1,.markdown-output h1{font-size:2em;padding-bottom:.3em}.goal-section h2,.markdown-output h2{font-size:1.5em;padding-bottom:.3em}.goal-section p,.markdown-output p{margin-top:0;margin-bottom:16px}.goal-section hr,.markdown-output hr{height:.25em;padding:0;margin:24px 0;background-color:var(--border-color);border:0}.goal-section ul,.goal-section ol,.markdown-output ul,.markdown-output ol{padding-left:2em;margin-top:0;margin-bottom:16px}.goal-section pre,.markdown-output pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:var(--code-bg);border-radius:3px;margin-top:0;margin-bottom:16px}.goal-section code,.markdown-output code{padding:.2em .4em;margin:0;font-size:85%;background-color:var(--code-bg);border-radius:3px}.goal-section blockquote,.markdown-output blockquote{padding:0 1em;color:var(--blockquote-color);margin:0 0 16px}.markdown-output blockquote{line-height:.5}.goal-section table,.markdown-output table{border-spacing:0;border-collapse:collapse;margin-top:0;margin-bottom:16px}.goal-section table th,.goal-section table td,.markdown-output table th,.markdown-output table td{padding:6px 13px;border:1px solid var(--border-color)}:root{--code-bg: #f0f0f0;--blockquote-color: #6a737d;--blockquote-border: #dfe2e5}body.dark-mode{--code-bg: #2b2b2b;--blockquote-color: #9e9e9e;--blockquote-border: #4a4a4a}a:not(.navbar a){color:var(--link-color)}a:not(.navbar a):visited{color:var(--link-visited-color)}.markdown-output h1,.markdown-output h2,.markdown-output h3,.markdown-output h4,.markdown-output h5,.markdown-output h6,.markdown-output p,.markdown-output hr{margin-top:0;margin-bottom:0}.markdown-output h1+p,.markdown-output h2+p,.markdown-output h3+p,.markdown-output h4+p,.markdown-output h5+p,.markdown-output h6+p,.markdown-output hr+p{margin-top:0}.markdown-output p+h1,.markdown-output p+h2,.markdown-output p+h3,.markdown-output p+h4,.markdown-output p+h5,.markdown-output p+h6,.markdown-output p+hr{margin-top:0}.markdown-output ul,.markdown-output ol{margin-top:0;padding-top:0;margin-bottom:0;line-height:.8}.markdown-output li,.goal-section li{margin-bottom:0}.goal-section ul,.goal-section ol{line-height:1.5}:root{--bottombar-bg: #ffffff;--bottombar-text: #333333;--bottombar-border: #dddddd;--bottombar-button-bg: #f5f5f5;--bottombar-button-hover: #e6e6e6;--bottombar-shadow: rgba(0, 0, 0, .1);--toggle-button-shadow: rgba(0, 0, 0, .2)}body.dark-mode{--bottombar-bg: #222222;--bottombar-text: #f5f5f5;--bottombar-border: #444444;--bottombar-button-bg: #333333;--bottombar-button-hover: #444444;--bottombar-shadow: rgba(0, 0, 0, .3);--toggle-button-shadow: rgba(0, 0, 0, .4)}.bottom-bar-container{position:fixed;bottom:0;left:0;width:100%;transition:transform .3s ease-in-out;z-index:10;box-shadow:0 -2px 10px var(--bottombar-shadow)}.bottom-bar-container.open{transform:translateY(0)}.bottom-bar{display:flex;justify-content:space-between;align-items:flex-start;padding:20px;width:100%;box-sizing:border-box;background-color:var(--bottombar-bg);color:var(--bottombar-text);border-top:1px solid var(--bottombar-border);transition:background-color .3s ease,color .3s ease}@media (max-width: 768px){.bottom-bar{max-height:30vh;overflow-y:auto}}.welcome-message{color:var(--bottombar-text);font-size:18px;flex:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.5}.welcome-message code{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;max-width:100%;background-color:#0000000d;padding:2px 4px;border-radius:3px;font-family:var(--code-font, monospace)}body.dark-mode .welcome-message code{background-color:#ffffff1a}.toggle-btn{position:absolute;top:-40px;right:20px;background-color:var(--bottombar-button-bg);border:1px solid var(--bottombar-border);border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px;cursor:pointer;padding:10px;width:40px;height:40px;display:flex;justify-content:center;align-items:center;color:var(--bottombar-text);transition:all .3s ease;box-shadow:0 -4px 8px var(--toggle-button-shadow);z-index:100}.toggle-btn:hover{background-color:var(--bottombar-button-hover);transform:scaleY(1.05);transform-origin:bottom;box-shadow:0 -6px 12px var(--toggle-button-shadow)}.toggle-btn i{font-size:20px}:root{--continue-button-bg: #f5f5f5;--continue-button-text: #333333;--continue-button-valid-bg: var(--primary-color);--continue-button-valid-bg-hover: var(--accent-color);--continue-button-valid-text: #ffffff;--continue-button-disabled-bg: #dddddd;--continue-button-disabled-text: #999999;--continue-button-shadow: rgba(0, 0, 0, .2);--continue-button-border: #dddddd}body.dark-mode{--continue-button-bg: #333333;--continue-button-text: #f5f5f5;--continue-button-valid-bg: var(--primary-color);--continue-button-valid-bg-hover: var(--accent-color);--continue-button-valid-text: #ffffff;--continue-button-disabled-bg: #444444;--continue-button-disabled-text: #aaaaaa;--continue-button-shadow: rgba(0, 0, 0, .4);--continue-button-border: #444444}.floating-continue-button{position:absolute;top:-40px;right:80px;padding:10px 20px;height:40px;font-size:16px;font-weight:600;color:var(--continue-button-text);background-color:var(--continue-button-bg);border:1px solid var(--continue-button-border);border-bottom:none;border-radius:5px 5px 0 0;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 -4px 8px var(--continue-button-shadow);transition:all .3s ease;z-index:99}.floating-continue-button.valid{background-color:var(--continue-button-valid-bg);color:var(--continue-button-valid-text);box-shadow:0 -4px 12px #0066cc4d}.floating-continue-button:disabled{background-color:var(--continue-button-disabled-bg);color:var(--continue-button-disabled-text);cursor:not-allowed;opacity:.8}.floating-continue-button.valid:hover{background-color:var(--continue-button-valid-bg-hover);transform:scaleY(1.05);transform-origin:bottom;box-shadow:0 -6px 12px #06c6}.floating-continue-button:not(.valid):hover:not(:disabled){background-color:var(--continue-button-border)}.bottom-bar-container.closed{transform:translateY(calc(100% - 40px))}.progress-bar-container{width:100%;height:5px;background-color:var(bg-color);position:relative;overflow:hidden}@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#75d0ef,#1818ec,#4e85e8,#75d0ef);background-size:300% 100%;animation:gradientFlow 8s ease infinite;transition:width .5s ease-in-out}