:root{--primary-color: #5e4b8b;--primary-light: #8a77b5;--primary-dark: #724a95;--section-color: #9163b8;--section-color-light: #a87dc8;--section-color-dark: #724a95;--section-color-rgb: 145, 99, 184;--secondary-color: #444444;--secondary-dark: #222222;--text-color: #333333;--dark-text: #111111;--light-text: #666666;--editor-text: #d4d4d4;--white-text: #ffffff;--bg-color: #f8f7fc;--panel-bg: #ffffff;--code-bg: #f7f5fa;--editor-bg: #1e1e1e;--editor-highlight: #303030;--border-color: #e0e0e0;--info-color: #7a93fe;--success-color: #9b6dd4;--success-color-dark: #7c4dff;--success-color-light: #c9b8e8;--error-color: #cb6e75;--danger-color: #dc3545;--primary-bg-light: rgba(94, 75, 139, .05);--primary-bg-medium: rgba(94, 75, 139, .1);--primary-bg-instruction: rgba(125, 92, 203, .9);--success-bg-light: rgba(155, 109, 212, .15);--modal-bg: rgba(0, 0, 0, .5);--font-main: "Inter", "Segoe UI", Roboto, sans-serif;--font-code: "JetBrains Mono", "Fira Code", monospace;--shadow: 0 2px 8px rgba(0, 0, 0, .06);--shadow-modal: 0 4px 20px rgba(0, 0, 0, .15);--header-height: 50px;--sidebar-width: 280px;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px;--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem}*{margin:0;padding:0;box-sizing:border-box}.skip-link{position:absolute;top:-100%;left:16px;padding:8px 16px;background:var(--primary-dark);color:var(--white-text);text-decoration:none;border-radius:var(--border-radius-sm);z-index:10000;transition:top .2s ease}.skip-link:focus{top:8px}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);line-height:1.5;overflow:hidden}code,kbd{font-family:var(--font-code)}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--spacing-md);background:var(--panel-bg);border-bottom:1px solid var(--border-color);flex-shrink:0}.menu-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--border-radius-sm)}.menu-toggle:hover{background:var(--primary-bg-light)}.header-level-pill{display:none;padding:4px 12px;background:var(--primary-bg-light);border-radius:16px;font-size:.8rem;color:var(--text-muted);white-space:nowrap;margin-left:var(--spacing-sm);text-decoration:none;transition:background .2s,color .2s}.header-level-pill:hover{background:var(--primary-bg-medium);color:var(--primary-color)}.header-module-name{font-weight:600;color:var(--text-color)}.header-level{margin-left:.5em}.header-left{display:flex;align-items:center;gap:var(--spacing-sm)}@media(min-width:769px){.header-level-pill{display:block}.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.header-left{justify-self:start}.header .logo{justify-self:center}.header-actions{justify-self:end}}.hamburger-icon{position:relative;width:18px;height:2px;background-color:var(--text-color);border-radius:1px}.hamburger-icon:before,.hamburger-icon:after{content:"";position:absolute;left:0;width:100%;height:2px;background-color:var(--text-color);border-radius:1px}.hamburger-icon:before{top:-6px}.hamburger-icon:after{top:6px}.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;cursor:pointer}.logo h1{font-size:1rem;font-weight:800;color:var(--text-color);line-height:1;display:flex;align-items:center;gap:.15rem}.logo h1 .code-text{color:#9163b8}.logo h1 .crispies-text{background:#9163b8;color:#fff;padding:.15rem .35rem;border-radius:4px;letter-spacing:.05em;box-shadow:0 2px 4px #00000026}[data-section=html] .logo h1 .code-text{color:#d45aa0}[data-section=html] .logo h1 .crispies-text{background:#d45aa0}[data-section=tailwind] .logo h1 .code-text{color:#1aafb8}[data-section=tailwind] .logo h1 .crispies-text{background:#1aafb8}[data-section=markdown] .logo h1 .code-text{color:#5b8dd9}[data-section=markdown] .logo h1 .crispies-text{background:#5b8dd9}.help-toggle{width:28px;height:28px;border-radius:50%;border:2px solid var(--border-color);background:none;font-weight:700;cursor:pointer;color:var(--light-text);transition:color .2s,border-color .2s}.help-toggle:hover{border-color:var(--primary-color);color:var(--primary-color)}.header-actions{display:flex;align-items:center;gap:var(--spacing-sm)}#auth-trigger-header{display:none}@media(min-width:769px){#auth-trigger-header{display:inline-flex}}.game-layout{display:flex;flex:1;min-height:0;overflow:hidden;transition:transform .3s ease}.left-panel{width:50%;display:flex;flex-direction:column;border-right:1px solid var(--border-color);background:var(--panel-bg);min-height:0}.instructions{padding:var(--spacing-md);border-bottom:1px solid var(--border-color);max-height:calc(50vh - 60px);overflow-y:auto}#lesson-title,.lesson-description,.task-instruction{transition:opacity .1s ease}.editor-section.transitioning #lesson-title,.editor-section.transitioning .lesson-description,.editor-section.transitioning .task-instruction{opacity:.3}.loading-fallback{text-align:center;padding:3rem 1rem;color:var(--light-text);animation:fadeIn .5s ease}.loading-fallback p{margin-bottom:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.module-pill{display:inline-flex;align-items:center;gap:.5rem;background:var(--primary-bg-medium);color:var(--primary-color);padding:4px 12px;border-radius:16px;font-size:.8rem;font-weight:600;min-width:0;flex-shrink:1}.module-name{text-transform:uppercase;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.module-pill .level-indicator{color:var(--primary-dark);font-weight:500;opacity:.8;white-space:nowrap;flex-shrink:0}.lesson-title-row{display:flex;align-items:center;gap:.5rem;margin-bottom:var(--spacing-sm)}.lesson-title-row .difficulty-wrapper{display:flex;align-items:center;gap:.5rem;margin-left:auto}#lesson-title{font-size:1.25rem;color:var(--primary-dark);margin:0}.share-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;cursor:pointer;color:var(--light-text);border-radius:var(--border-radius-sm);transition:color .2s,background .2s}.share-btn:hover{color:var(--primary-color);background:var(--primary-bg-light)}.share-btn svg{width:16px;height:16px}.completion-badge{display:inline-block;padding:.15rem .5rem;background:linear-gradient(135deg,#9163b8,#d45aa0,#1aafb8,#7c4dff);color:#fff;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:var(--border-radius-sm);vertical-align:middle}.difficulty-badge{display:inline-flex;align-items:flex-end;gap:2px;vertical-align:middle}.difficulty-badge .bar{width:3px;border-radius:1px;background:var(--border-color)}.difficulty-badge .bar:nth-child(1){height:6px}.difficulty-badge .bar:nth-child(2){height:9px}.difficulty-badge .bar:nth-child(3){height:12px}.difficulty-easy .bar:nth-child(1),.difficulty-medium .bar:nth-child(1),.difficulty-medium .bar:nth-child(2),.difficulty-hard .bar{background:var(--light-text)}.lesson-description{font-size:.95rem;line-height:1.6;color:var(--text-color);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-md)}.lesson-description kbd,.lesson-description code{background:var(--primary-bg-medium);padding:2px 6px;border-radius:3px;font-size:.85rem}.lesson-description pre{background:var(--code-bg);padding:var(--spacing-md);border-radius:var(--border-radius-sm);overflow-x:auto;font-size:.85rem;margin:var(--spacing-sm) 0}.task-instruction{background:var(--primary-bg-instruction);color:var(--white-text);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:.9rem;line-height:1.6}.task-instruction kbd,.task-instruction code{background:#ffffff40;padding:2px 8px;border-radius:4px;font-size:.9em;font-weight:500}.editor-section{flex:1;display:flex;flex-direction:column;min-height:50vh;position:relative}.editor-section.playground-mode{flex:1;min-height:0}.code-editor{flex:1;display:flex;flex-direction:column;min-height:0}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) var(--spacing-md);background:var(--code-bg);border-bottom:1px solid var(--border-color)}.editor-label{font-size:.85rem;font-weight:600;color:var(--light-text)}.editor-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.editor-content{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--editor-bg);overflow:hidden}.editor-content .cm-editor{flex:1;height:100%}.cm-readonly-zone{opacity:.5;background:#6464781a}.editor-content .cm-scroller{overflow:auto}.code-input{flex:1;width:100%;padding:var(--spacing-md);background:var(--editor-bg);color:var(--editor-text);border:none;font-family:var(--font-code);font-size:14px;line-height:1.5;resize:none;outline:none}.code-input::placeholder{color:#666}.hint-area{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-sm) var(--spacing-md);background:#1e1e1ee6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:5}.hint-area:empty{display:none}.hint{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);background:#5e4b8b4d;border-left:3px solid var(--primary-light);border-radius:var(--border-radius-sm);color:var(--editor-text)}.hint-progress{background:var(--primary-color);color:#fff;padding:2px 8px;border-radius:10px;font-size:.75rem;font-weight:700;flex-shrink:0}.hint-message{font-size:.9rem;color:var(--editor-text)}.hint-message kbd,.hint-message code{background:#ffffff26;color:#fff;padding:2px 6px;border-radius:3px;font-size:.85rem;font-family:var(--font-code)}.hint-success{background:var(--success-bg-light);border-left-color:var(--success-color)}.hint-success .hint-progress{background:var(--success-color)}.right-panel{width:50%;display:flex;flex-direction:column;background:var(--bg-color);min-height:0}.preview-section{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}.preview-section.matched:before{content:"";position:absolute;inset:var(--spacing-md);border-radius:var(--border-radius-md);background:conic-gradient(from var(--border-angle),#9163b8,#d45aa0,#1aafb8,#7c4dff,#9163b8);filter:blur(30px);opacity:0;animation:spin-glow 3s ease-out forwards;pointer-events:none}.preview-section.completed-glow:before{content:"";position:absolute;inset:var(--spacing-md);border-radius:var(--border-radius-md);background:conic-gradient(from 0deg,#9163b8,#d45aa0,#1aafb8,#7c4dff,#9163b8);filter:blur(30px);opacity:.35;pointer-events:none}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) var(--spacing-md) var(--spacing-md);background:transparent}.preview-label{font-size:.85rem;font-weight:600;color:var(--light-text)}.preview-wrapper{flex:1;position:relative;background:var(--panel-bg);margin:var(--spacing-md);border-radius:var(--border-radius-md);box-shadow:var(--shadow);overflow:hidden;min-height:0;border:6px solid transparent;z-index:1}.preview-frame{width:100%;height:100%;padding:var(--spacing-xs)}.preview-frame iframe{width:100%;height:100%;border:none;border-radius:var(--border-radius-sm)}.expected-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--panel-bg);opacity:0;pointer-events:none;transition:opacity .3s ease;display:flex;align-items:center;justify-content:center}.expected-overlay.visible{opacity:1;pointer-events:auto}.expected-frame{width:100%;height:100%;padding:var(--spacing-xs)}.expected-frame iframe{width:100%;height:100%;border:none;border-radius:var(--border-radius-sm)}@property --border-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.preview-wrapper.completed-glow{border:6px solid transparent;background:linear-gradient(var(--panel-bg),var(--panel-bg)) padding-box,conic-gradient(from 0deg,#9163b8,#d45aa0,#1aafb8,#7c4dff,#9163b8) border-box}.preview-wrapper.matched{--border-angle: 0deg;border:6px solid transparent;background:linear-gradient(var(--panel-bg),var(--panel-bg)) padding-box,conic-gradient(from var(--border-angle),#9163b8,#d45aa0,#1aafb8,#7c4dff,#9163b8) border-box;animation:spin-border 3s ease-out forwards;overflow:visible}.preview-wrapper.matched:after{content:var(--crispy-quote, "Crispyyyyyy!");position:absolute;left:55%;bottom:0;transform:translate(-50%) translateY(100%) scale(.5);font-family:system-ui,-apple-system,sans-serif;font-size:2rem;font-weight:800;letter-spacing:.05em;color:#fff;background:linear-gradient(135deg,#9163b8,#d45aa0,#7c4dff);padding:1.25rem 2rem 1.75rem;z-index:10;pointer-events:none;animation:crispy-bounce 2.7s ease-in-out .3s forwards;opacity:0;white-space:nowrap;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M20,0 h160 a20,20 0 0 1 20,20 v60 a20,20 0 0 1 -20,20 h-65 l-15,20 l-15,-20 h-65 a20,20 0 0 1 -20,-20 v-60 a20,20 0 0 1 20,-20 z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M20,0 h160 a20,20 0 0 1 20,20 v60 a20,20 0 0 1 -20,20 h-65 l-15,20 l-15,-20 h-65 a20,20 0 0 1 -20,-20 v-60 a20,20 0 0 1 20,-20 z' fill='white'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%}@keyframes spin-border{0%{--border-angle: 0deg}80%{--border-angle: -288deg}to{--border-angle: -360deg}}@keyframes spin-glow{0%{--border-angle: 0deg;opacity:0}10%{opacity:.8}80%{--border-angle: -288deg;opacity:.6}to{--border-angle: -360deg;opacity:.35}}.preview-wrapper.matched .preview-frame{position:relative;overflow:hidden}.preview-wrapper.matched .preview-frame:before{content:"";position:absolute;bottom:0;left:50%;width:max(200px,50%);aspect-ratio:1;background:url(/bowl.png) center/contain no-repeat;z-index:5;pointer-events:none;animation:bowl-peek 3s ease-in-out forwards;transform:translate(-50%) translateY(100%)}@keyframes bowl-peek{0%{transform:translate(-50%) translateY(100%);opacity:0}20%{transform:translate(-50%) translateY(25%);opacity:1}35%{transform:translate(-50%) translateY(30%)}65%{transform:translate(-50%) translateY(28%)}to{transform:translate(-50%) translateY(100%);opacity:0}}@keyframes crispy-bounce{0%{transform:translate(-50%) translateY(100%) scale(.5);opacity:0}20%{transform:translate(-50%) translateY(-180%) scale(1.1);opacity:1}35%{transform:translate(-50%) translateY(-170%) scale(1)}65%{transform:translate(-50%) translateY(-172%) scale(1)}to{transform:translate(-50%) translateY(100%) scale(.5);opacity:0}}.game-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--spacing-md);align-items:center;padding:var(--spacing-md);background:var(--panel-bg);border-bottom:1px solid var(--border-color);box-shadow:0 10px 20px -10px #00000014}.game-controls #prev-btn{justify-self:start}.game-controls .module-pill{justify-self:center}.game-controls #next-btn{justify-self:end}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:199}.sidebar-backdrop.visible{opacity:1;visibility:visible}.sidebar-drawer{position:fixed;left:calc(-1 * var(--sidebar-width));top:0;width:var(--sidebar-width);height:100vh;background:var(--panel-bg);box-shadow:var(--shadow-modal);transition:left .3s ease;z-index:200;display:flex;flex-direction:column;overflow:hidden}.sidebar-drawer.open{left:0}.app-container:has(.sidebar-drawer.open) .game-layout{transform:translate(calc(var(--sidebar-width) * .8))}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-bottom:1px solid var(--border-color);flex-shrink:0}.sidebar-header h3{font-size:1.1rem;color:var(--primary-dark)}.close-btn{width:32px;height:32px;border:none;background:none;font-size:1.5rem;cursor:pointer;color:var(--light-text);border-radius:var(--border-radius-sm)}.close-btn:hover{background:var(--primary-bg-light);color:var(--primary-color)}.sidebar-section{padding:var(--spacing-md);border-bottom:1px solid var(--border-color)}.sidebar-section:last-child{border-bottom:none}.sidebar-nav-mobile{display:flex;flex-direction:column;gap:0}.sidebar-nav-link{display:block;padding:.6rem var(--spacing-md);font-size:.9rem;font-weight:500;text-decoration:none;color:var(--text-color);border-bottom:1px solid var(--border-color)}.sidebar-nav-link:last-child{border-bottom:none}.sidebar-nav-link:hover{background:var(--primary-bg-light);color:var(--primary-color)}.sidebar-auth-link{width:calc(100% - 2 * var(--spacing-md));margin:var(--spacing-sm) var(--spacing-md);padding:.5rem 1rem;text-align:center;background:var(--primary-color);color:var(--white-text);border:none;border-radius:var(--border-radius-md);cursor:pointer;font-family:inherit;font-weight:500}.sidebar-auth-link:hover{background:var(--primary-dark)}@media(min-width:769px){.sidebar-nav-mobile{display:none}}nav.sidebar-section:not(.sidebar-nav-mobile){flex:1;overflow-y:auto;min-height:0;padding-bottom:var(--spacing-md)}.sidebar-nav-mobile{flex:none;padding:0}.sidebar-section h4{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--light-text);margin-bottom:var(--spacing-sm)}.progress-display{display:flex;flex-direction:column;gap:var(--spacing-xs)}.progress-bar{height:8px;background:var(--border-color);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#9163b8,#d45aa0,#1aafb8,#7c4dff);background-size:calc(100% * 100 / var(--progress-percent, 100)) 100%;border-radius:4px;transition:width .3s ease;width:0%}.progress-text{font-size:.85rem;color:var(--light-text)}.progress-bar-row{display:flex;align-items:center;gap:var(--spacing-sm)}.progress-bar-row .progress-bar{flex:1}.progress-current{font-size:.85rem;font-weight:600;color:var(--text-color);white-space:nowrap}.progress-total{font-size:.75rem;color:var(--light-text)}.milestone-progress{gap:var(--spacing-sm)}.milestones{display:flex;justify-content:space-between;padding:0 2px}.milestone{display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;font-size:.7rem;font-weight:600;color:var(--light-text);background:var(--border-color);border-radius:50%;transition:all .3s ease}.milestone.reached{color:#fff}.milestone.reached:nth-child(1){background:#a55eac}.milestone.reached:nth-child(2){background:#c459a2}.milestone.reached:nth-child(3){background:#d45aa0}.milestone.reached:nth-child(4){background:#a874a8}.milestone.reached:nth-child(5){background:#7785ac}.milestone.reached:nth-child(6){background:#33a3b6}.milestone.reached:nth-child(7){background:#4889d8}.milestone.reached:nth-child(8){background:#7c4dff}.milestone.current{color:#fff;transform:scale(1.15);box-shadow:0 2px 8px #9163b866}.milestone.next{border:2px dashed var(--light-text);background:transparent}@keyframes milestone-pop{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1.15)}}.milestone.just-reached{animation:milestone-pop .5s ease-out}.module-container{margin-bottom:4px}.module-header{display:flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;border-radius:var(--border-radius-sm);font-weight:600;font-size:.9rem;transition:background .2s}.module-header:hover{background:var(--primary-bg-light)}details.module-container{margin:0}summary.module-header{list-style:none;cursor:pointer}summary.module-header::-webkit-details-marker{display:none}summary.module-header:before{content:"";display:block;flex-shrink:0;width:10px;height:10px;margin-right:8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1 L7 5 L3 9' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;transition:transform .2s}details.module-container[open]>summary.module-header:before{transform:rotate(90deg)}.module-header.completed:after{content:"✓";margin-left:8px;color:var(--success-color)}.lessons-container{margin-left:16px;border-left:2px solid var(--border-color);padding-left:8px}.lesson-list-item{padding:6px 10px;border-radius:var(--border-radius-sm);cursor:pointer;font-size:.85rem;margin:2px 0;transition:background .2s}.lesson-list-item:hover{background:var(--primary-bg-light)}.lesson-list-item.active{background:var(--primary-bg-medium);font-weight:600}.lesson-list-item.completed:before{content:"✓";margin-right:6px;color:var(--success-color)}.module-header:focus,.lesson-list-item:focus{background:var(--primary-bg-light)}button.module-header,button.lesson-list-item{border:none;background:none;text-align:left;width:100%;font-family:inherit;color:inherit}.btn{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-sm);border:1px solid var(--border-color);background:var(--panel-bg);color:var(--text-color);cursor:pointer;font-family:var(--font-main);font-size:.9rem;transition:background .2s,color .2s,border-color .2s}.btn:hover{background:var(--code-bg)}.btn img{width:.8rem;height:.8rem;margin-right:.3rem}.btn-primary{background:var(--section-color, var(--primary-color));color:var(--white-text);border-color:var(--section-color-dark, var(--primary-dark))}.btn-primary:hover{background:var(--section-color-dark, var(--primary-dark))}.btn-run{background:var(--secondary-color);color:var(--white-text);border-color:var(--secondary-dark)}.btn-run:hover{background:var(--secondary-dark)}.btn-run.success{background:var(--success-color);border-color:var(--success-color-dark)}.btn-small{padding:4px 10px;font-size:.8rem}.btn-icon{display:flex;align-items:center;justify-content:center;padding:4px 8px;font-size:1rem;min-width:32px;background:transparent;color:var(--light-text);border:1px solid var(--border-color)}.btn-icon:hover{background:var(--bg-color);color:var(--text-color);border-color:var(--section-color, var(--primary-color))}.btn-icon img,.btn-icon svg{width:1rem;height:1rem;margin:0;display:block}.editor-tools{display:flex;gap:4px}.btn-ghost{background:transparent;color:var(--light-text);border:1px solid var(--border-color)}.btn-ghost:hover{background:var(--bg-color);color:var(--danger-color);border-color:var(--danger-color)}.btn-text{background:transparent;color:var(--light-text);border:none;font-size:.85rem;text-decoration:underline;padding:var(--spacing-xs) 0}.btn-text:hover{background:transparent;color:var(--danger-color)}.btn-danger{background:var(--danger-color);color:#fff;border-color:var(--danger-color)}.btn-danger:hover{background:#c82333;border-color:#bd2130}.btn-text.btn-danger{background:transparent;color:var(--danger-color);border:none}.btn-text.btn-danger:hover{color:#c82333;text-decoration:underline}#reset-code-btn{background:var(--section-color, var(--primary-color));color:#fff;border-color:var(--section-color, var(--primary-color))}#reset-code-btn:hover{background:var(--section-color-dark, var(--primary-dark));border-color:var(--section-color-dark, var(--primary-dark))}#run-btn{display:none}.settings-card{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius-md);overflow:hidden}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border-color)}.settings-row:last-child{border-bottom:none}.settings-label{font-size:.9rem;color:var(--text-color)}.settings-toggle{width:40px;height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border-color);border-radius:11px;position:relative;cursor:pointer;transition:background .2s}.settings-toggle:before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s}.settings-toggle:checked{background:var(--primary-color)}.settings-toggle:checked:before{transform:translate(18px)}.setting-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.setting-label{font-size:.9rem;color:var(--text-color)}.lang-select{padding:6px 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--panel-bg);color:var(--text-color);font-size:.85rem;cursor:pointer;min-width:120px}.lang-select:hover{border-color:var(--primary-color)}.lang-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #6366f133}.toggle-switch{display:flex;align-items:center;cursor:pointer;margin-bottom:var(--spacing-sm)}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:relative;display:inline-block;width:36px;height:20px;background:#ccc;border-radius:20px;transition:background .3s;margin-right:8px;flex-shrink:0}.toggle-slider:before{content:"";position:absolute;height:16px;width:16px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:transform .3s}input:checked+.toggle-slider{background:var(--primary-color)}input:checked+.toggle-slider:before{transform:translate(16px)}.toggle-label{font-size:.9rem;color:var(--text-color)}.dialog{border:none;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-modal);padding:0;width:90%;max-width:600px;max-height:80vh;overflow-y:auto;background:var(--panel-bg);margin:auto;position:fixed;top:0;right:0;bottom:0;left:0;height:fit-content}.dialog::backdrop{background:var(--modal-bg)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-bottom:1px solid var(--border-color)}.dialog-header h3{margin:0}.dialog-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--light-text);line-height:1;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s,color .2s}.dialog-close:hover{background:var(--primary-bg-light);color:var(--primary-color)}.dialog-content{padding:var(--spacing-lg)}.dialog-content h4{margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs);color:var(--dark-text)}.dialog-content h4:first-child{margin-top:0}.dialog-content p{margin-bottom:var(--spacing-md)}.dialog-content ul,.dialog-content ol{margin:0 0 var(--spacing-md) 0;padding-left:var(--spacing-lg)}.dialog-content li{margin-bottom:var(--spacing-xs)}.dialog-content kbd{background:var(--code-bg);padding:2px 6px;border-radius:var(--border-radius-sm);font-size:.85em;border:1px solid var(--border-color)}.help-nav-links{font-size:.9rem;color:var(--light-text);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-color);border-radius:var(--border-radius-sm);margin-top:var(--spacing-sm)}.help-nav-links a{color:var(--primary-color);text-decoration:none;font-weight:500}.help-nav-links a:hover{text-decoration:underline}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--spacing-sm);margin-top:var(--spacing-lg)}.share-url-container{display:flex;gap:var(--spacing-sm);margin:var(--spacing-md) 0}.share-url-input{flex:1;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-family:var(--font-code);font-size:.85rem;background:var(--code-bg);color:var(--text-color)}.share-url-input:focus{outline:none;border-color:var(--primary-color)}.copy-feedback{color:var(--success-color);font-size:.9rem;margin-top:var(--spacing-sm)}[dir=rtl] .share-url-container{flex-direction:row-reverse}.auth-dialog{max-width:400px}.auth-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-field{display:flex;flex-direction:column;gap:.25rem}.form-field label{font-size:.875rem;font-weight:500;color:var(--light-text)}.form-field input{padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:var(--border-radius-md);font-size:1rem;font-family:var(--font-main);transition:border-color .2s}.form-field input:focus{outline:none;border-color:var(--primary-color)}.btn-full{width:100%}.btn-sm{padding:.375rem .75rem;font-size:.875rem}.auth-error{color:var(--danger-color);font-size:.875rem;margin:0}.auth-success{color:var(--success-color);font-size:.875rem;margin:0}.auth-instructions{color:var(--light-text);font-size:.9rem;margin-bottom:var(--spacing-sm)}.auth-links{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}.auth-links .btn-text{font-size:.875rem;color:var(--primary-color);text-decoration:none;cursor:pointer}.auth-links .btn-text:hover{color:var(--primary-color-dark, var(--primary-color));text-decoration:underline}.auth-social{margin-top:var(--spacing-lg)}.auth-divider{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md);color:var(--light-text);font-size:.875rem}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border-color)}.auth-social-buttons{display:flex;gap:.75rem}.btn-social{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:var(--border-radius-md);background:var(--panel-bg);font-weight:500;cursor:pointer;transition:border-color .2s,background .2s}.btn-social:hover{border-color:var(--primary-color);background:var(--primary-bg-light)}.social-icon{width:1.25rem;height:1.25rem}.user-menu{display:flex;align-items:center;gap:.75rem}.user-email{font-size:.875rem;color:var(--light-text);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-auth-box{margin-top:var(--spacing-md);padding:var(--spacing-md);background:#1a1a2e;border-radius:var(--border-radius-md);color:#e0e0e0}.sidebar-auth-box h4{color:#fff;margin-bottom:var(--spacing-sm)}.sidebar-auth-box .btn-outline{background:transparent;color:#e0e0e0;border-color:#444}.sidebar-auth-box .btn-outline:hover{background:#2a2a4e;border-color:#666;color:#fff}.user-menu-sidebar{display:flex;flex-direction:column;gap:.5rem}.user-menu-sidebar .user-email{max-width:none;word-break:break-all;font-size:.875rem;color:#aaa;font-weight:500}.sidebar-auth-hint{font-size:.8rem;color:#888;margin-top:var(--spacing-sm)}.footer-legal{margin-top:var(--spacing-xs);font-size:.85rem}.footer-legal .btn-text{color:var(--light-text);font-size:.85rem;text-decoration:none;padding:0}.footer-legal .btn-text:hover{color:var(--text-color);text-decoration:underline}.footer-separator{color:var(--light-text);margin:0 .5rem}.legal-dialog{max-width:600px}.legal-content{max-height:60vh;overflow-y:auto}.legal-content h4{margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs);font-size:1rem;color:var(--text-color)}.legal-content p{margin-bottom:var(--spacing-sm);line-height:1.6;color:var(--light-text)}.legal-content a{color:var(--primary-color)}.legal-updated{margin-top:var(--spacing-md);font-size:.85rem;font-style:italic;color:var(--lighter-text)}.project-cards{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.project-card{display:block;padding:var(--spacing-md);background:var(--primary-bg-light);border-radius:var(--border-radius-md);border:1px solid var(--primary-bg-medium);text-decoration:none;color:var(--text-color);transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}.project-card:hover{background:var(--primary-bg-medium);border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #5e4b8b26}.project-card strong{display:block;color:var(--primary-color);font-size:1rem;margin-bottom:4px}.project-card span{font-size:.9rem;color:var(--light-text);line-height:1.4}.app-footer{padding:var(--spacing-md);font-size:.7rem;color:var(--light-text);text-align:center;border-top:1px solid var(--border-color);margin-top:auto}.app-footer a{color:var(--primary-color);text-decoration:none}.main-nav{display:none;align-items:center;gap:var(--spacing-xs)}.nav-link{padding:6px 12px;border-radius:var(--border-radius-sm);text-decoration:none;font-size:.85rem;font-weight:500;color:var(--light-text);transition:background .2s,color .2s}.nav-link:hover{background:var(--primary-bg-light);color:var(--text-color)}.nav-link.active{background:var(--primary-bg-medium);color:var(--primary-color)}.nav-link-ref{margin-left:1rem}@media(min-width:769px){.main-nav{display:flex}}.landing-page{flex:1;overflow-y:auto;background:var(--bg-color)}.landing-content{max-width:900px;margin:0 auto;padding:var(--spacing-lg)}.hero{text-align:center;padding:3rem 1rem}.hero-logo{margin-bottom:1rem}.hero h1{font-size:2.5rem;font-weight:800;color:var(--text-color);line-height:1.2;margin-bottom:1rem}.hero-highlight{color:var(--primary-color)}.hero-subtitle{font-size:1.1rem;color:var(--light-text);max-width:500px;margin:0 auto 2rem}.hero .cta-button{margin-top:1rem}.why-it-works{padding:3rem 1rem;text-align:center}.why-it-works h2{font-size:1.75rem;color:var(--primary-dark);margin-bottom:2rem}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--spacing-lg);text-align:left}.benefit-card{background:var(--panel-bg);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}.benefit-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.benefit-icon{width:48px;height:48px;color:var(--primary-color);margin-bottom:var(--spacing-md)}.benefit-card h3{font-size:1.1rem;color:var(--primary-dark);margin-bottom:var(--spacing-sm)}.benefit-card p{color:var(--light-text);line-height:1.6;font-size:.95rem}.benefit-card a{color:var(--primary-color);text-decoration:none}.benefit-card a:hover{text-decoration:underline}.learning-paths{padding:2rem 1rem 3rem;text-align:center}.learning-paths h2{font-size:1.75rem;color:var(--primary-dark);margin-bottom:0}.section-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-lg);margin-top:2rem}.section-card{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);background:var(--panel-bg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow);text-decoration:none;color:var(--text-color);transition:transform .2s,box-shadow .2s}.section-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.section-card-icon{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:var(--spacing-md)}.section-card h2,.section-card h3{font-size:1.25rem;margin-bottom:var(--spacing-xs)}.section-card p{font-size:.9rem;color:var(--light-text);text-align:center;margin-bottom:var(--spacing-sm)}.section-card-progress{font-size:.8rem;color:var(--primary-color);font-weight:500}.section-card-disabled{cursor:not-allowed;opacity:.7;position:relative}.section-card-disabled:hover{transform:none;box-shadow:0 4px 6px #0000001a}.coming-soon-badge{display:inline-block;background:linear-gradient(135deg,#7c6f8a,#5e5168);color:#fff;font-size:.65rem;font-weight:600;padding:3px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px}.section-card-disabled .coming-soon-badge{position:absolute;top:12px;right:12px}.topic-link-disabled{cursor:not-allowed;opacity:.6}.topic-link-disabled .coming-soon-badge{margin-left:8px;vertical-align:middle}.landing-about{padding:3rem 1rem;text-align:center}.landing-about h2{font-size:1.75rem;color:var(--primary-dark);margin-bottom:2rem}.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;text-align:left}.about-item{text-align:center}.about-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:var(--primary-color);color:#fff;font-weight:700;font-size:1.1rem;border-radius:50%;margin-bottom:1rem}.about-item h3{font-size:1rem;color:var(--primary-dark);margin-bottom:.5rem}.about-item p{color:var(--light-text);line-height:1.6}.landing-features{padding:2rem 1rem;max-width:800px;margin:0 auto}.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.feature-text h3{font-size:1rem;color:var(--primary-dark);margin-bottom:.5rem}.feature-text p{color:var(--light-text);line-height:1.6;font-size:.95rem}@media(max-width:600px){.feature-row{grid-template-columns:1fr;gap:1.5rem}}.coming-soon{margin-top:var(--spacing-xl);text-align:center}.coming-soon h2{font-size:1.5rem;color:var(--primary-dark);margin-bottom:var(--spacing-lg)}.coming-soon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-md)}.coming-soon-card{background:var(--panel-bg);border-radius:var(--border-radius-md);padding:1.5rem 1rem;text-align:center;border:1px dashed var(--border-color);opacity:.85;transition:opacity .2s,border-color .2s}.coming-soon-card:hover{opacity:1;border-color:var(--section-color)}.coming-soon-icon{display:block;margin-bottom:.75rem}.coming-soon-icon svg{width:2rem;height:2rem;stroke:var(--section-color)}.coming-soon-card h3{font-size:1rem;margin-bottom:.5rem;color:var(--text-color)}.coming-soon-card p{font-size:.85rem;color:var(--light-text);line-height:1.5;margin:0}@media(max-width:900px){.coming-soon-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:500px){.coming-soon-grid{grid-template-columns:1fr}}.newsletter-signup{margin-top:var(--spacing-lg);padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.newsletter-signup p{margin:0;color:var(--light-text)}.newsletter-form{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.newsletter-form input[type=email]{padding:.5rem 1rem;border:2px solid var(--border-color);border-radius:var(--border-radius-sm);background:var(--panel-bg);color:var(--text);font-size:1rem;min-width:200px}.newsletter-form input[type=email]:focus{outline:none;border-color:var(--section-color)}.newsletter-signup .btn-outline{border:2px solid var(--section-color);color:var(--section-color);background:transparent;padding:.5rem 1.5rem;font-weight:500;transition:all .2s}.newsletter-signup .btn-outline:hover{background:var(--section-color);color:#fff}.newsletter-disclaimer{font-size:.8rem;opacity:.7}.newsletter-thanks{color:var(--success);font-weight:500}.newsletter-thanks.hidden{display:none}.device-notice{margin-top:var(--spacing-lg);text-align:center;padding:.75rem 1.5rem;background:linear-gradient(135deg,#9163b81a,#d45aa01a,#1aafb81a);border-radius:var(--border-radius-md);color:var(--light-text);font-size:.9rem}.device-notice strong{color:var(--text-color)}.landing-cta{text-align:center;padding:3rem 1rem;background:var(--panel-bg);border-radius:var(--border-radius-lg);margin-top:var(--spacing-lg)}.landing-cta h2{font-size:1.5rem;color:var(--primary-dark);margin-bottom:var(--spacing-sm)}.cta-button{display:inline-block;padding:1rem 2.5rem;background:var(--primary-color);color:#fff;text-decoration:none;border-radius:var(--border-radius-md);font-weight:600;font-size:1.1rem;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 2px 8px #00000026}.cta-button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.cta-sub{color:var(--light-text);font-size:.875rem;margin-top:1rem}.landing-footer{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border-color)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}.footer-section h4{font-size:.875rem;font-weight:600;color:var(--text-color);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:.5rem}.footer-links a{color:var(--light-text);text-decoration:none;font-size:.875rem;transition:color .2s}.footer-links a:hover{color:var(--primary-color)}#footer-lesson-links,#ref-footer-lesson-links,#section-footer-lesson-links{display:flex;gap:2rem}.footer-section-group{display:flex;flex-direction:column;gap:.25rem;min-width:0}.footer-section-group strong{margin-bottom:.5rem}.footer-section-group strong a{color:var(--text-color);font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}.footer-section-group a{display:inline-block;color:#888;text-decoration:none;font-size:.7rem;font-weight:500;background:#00000008;padding:4px 10px;border-radius:12px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.footer-section-group a:hover{color:var(--primary-color);background:#0000000f}.footer-support p{color:var(--light-text);font-size:.875rem;margin-bottom:1rem}.footer-bottom{text-align:center;padding-top:1.5rem;border-top:1px solid var(--border-color)}.footer-bottom p{color:var(--light-text);font-size:.8rem;margin:0}.footer-bottom a{color:var(--light-text)}.footer-bottom a:hover{color:var(--primary-color)}@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:1.5rem}}@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}.section-page{flex:1;overflow-y:auto;background:var(--bg-color);padding:var(--spacing-lg)}.section-hero{text-align:center;padding:2rem 1rem;max-width:600px;margin:0 auto}.section-hero h1{font-size:2rem;color:var(--primary-dark);margin-bottom:var(--spacing-xs)}.section-hero p{color:var(--light-text);margin-bottom:var(--spacing-md)}.section-progress-bar{max-width:400px;margin:0 auto}.section-progress-bar .progress-bar{height:8px;margin-bottom:var(--spacing-xs)}.section-content{max-width:1200px;margin:0 auto}.section-intro{padding:0 var(--spacing-md)}.section-overview{padding:1.5rem 0 2rem;border-bottom:1px solid var(--border-color);margin-bottom:.5rem}.section-overview p{color:var(--text-color);line-height:1.7;margin-bottom:1rem;max-width:85ch}.section-overview p:last-child{margin-bottom:0}.section-overview strong{color:var(--section-color-dark, var(--primary-dark))}.section-overview code{background:rgba(var(--section-color-rgb, 145, 99, 184),.1);color:var(--section-color-dark, var(--primary-dark));padding:.1rem .35rem;border-radius:4px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.85em}.topic-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem 0;border-bottom:1px solid var(--border-color);align-items:start}.topic-row:last-child{border-bottom:none}.topic-text h2{font-size:1.25rem;color:var(--section-color-dark, var(--primary-dark));margin:0 0 .75rem}.topic-text h3{font-size:1rem;color:var(--section-color-dark, var(--primary-dark));margin:0 0 .5rem}.topic-text p{color:var(--text-color);line-height:1.6;margin:0 0 1rem}.topic-text p:last-child{margin-bottom:0}.topic-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;padding:.75rem 1.5rem;background:var(--section-color, var(--primary-color));color:#fff;text-decoration:none;border-radius:var(--border-radius-md);font-size:1rem;font-weight:600;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 2px 4px #0000001a}.topic-link:hover{background:var(--section-color-dark, var(--primary-dark));transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.topic-link:after{content:"→";transition:transform .2s}.topic-link:hover:after{transform:translate(3px)}.topic-ref{display:block;margin-top:.75rem;color:var(--light-text);font-size:.9rem;text-decoration:none}.topic-ref:hover{color:var(--section-color, var(--primary-color));text-decoration:underline}.section-see-also{margin-top:var(--spacing-md);font-size:.9rem;color:var(--light-text)}.section-see-also a{color:var(--section-color, var(--primary-color));text-decoration:none}.section-see-also a:hover{text-decoration:underline}.topic-text code{background:rgba(var(--section-color-rgb, 145, 99, 184),.1);color:var(--section-color-dark, var(--primary-dark));padding:.15rem .4rem;border-radius:4px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.9em}.topic-code{position:sticky;top:1rem}.code-block{background:#0d1117;border-radius:var(--border-radius-md);border:1px solid #30363d;overflow:hidden}.code-block pre{margin:0;padding:1rem;overflow-x:auto}.code-block code{font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.8rem;line-height:1.6;color:#e6edf3;white-space:pre}.code-block .cm-editor{background:transparent}.code-block .cm-scroller{overflow-x:auto}.code-caption{font-size:.75rem;color:var(--light-text);margin-top:.5rem}@media(max-width:900px){.topic-row{grid-template-columns:1fr;gap:1rem}.topic-code{position:static}}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md);max-width:1000px;margin:0 auto}.module-card{display:block;padding:var(--spacing-md);background:var(--panel-bg);border-radius:var(--border-radius-md);box-shadow:var(--shadow);text-decoration:none;color:var(--text-color);border-left:4px solid var(--primary-color);transition:transform .2s,box-shadow .2s}.module-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.module-card h3{font-size:1rem;color:var(--primary-dark);margin-bottom:var(--spacing-xs)}.module-card-meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--light-text)}.module-card-progress{color:var(--success-color);font-weight:500}.reference-page{flex:1;overflow-y:auto;background:var(--bg-color)}.reference-content{max-width:900px;margin:0 auto;padding:var(--spacing-lg)}.reference-nav{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--panel-bg);border-radius:var(--border-radius-md);margin-bottom:var(--spacing-lg)}.ref-nav-link{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);text-decoration:none;color:var(--text-color);font-size:.9rem;font-weight:500;transition:background .2s,color .2s}.ref-nav-link:hover{background:var(--hover-bg)}.ref-nav-link.active{background:var(--primary-color);color:#fff}.reference-body h1{font-size:1.75rem;margin-bottom:var(--spacing-sm);color:var(--primary-dark)}.ref-intro{font-size:1rem;color:var(--light-text);margin-bottom:var(--spacing-lg);line-height:1.6}.ref-section{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.ref-section:first-of-type{margin-top:0}.ref-section h2{font-size:1.2rem;margin-bottom:var(--spacing-md);color:var(--text-color);border-bottom:2px solid var(--border-color);padding-bottom:var(--spacing-xs)}.ref-table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--panel-bg);border-radius:var(--border-radius-md);overflow:hidden;box-shadow:var(--shadow)}.ref-table thead{background:var(--hover-bg)}.ref-table th,.ref-table td{padding:var(--spacing-sm) var(--spacing-md);text-align:left;border-bottom:1px solid var(--border-color)}.ref-table th{font-weight:600;color:var(--text-color)}.ref-table tr:last-child td{border-bottom:none}.ref-table tr:hover{background:var(--hover-bg)}.ref-table code{background:var(--code-bg);padding:.15rem .4rem;border-radius:4px;font-size:.85em;color:var(--primary-dark)}.ref-table-more{margin-top:-1px}.ref-table-more summary{padding:var(--spacing-sm) var(--spacing-md);background:var(--hover-bg);cursor:pointer;font-size:.85rem;color:var(--light-text);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);list-style:none;text-align:center}.ref-table-more summary::-webkit-details-marker{display:none}.ref-table-more summary:hover{background:var(--border-color);color:var(--text-color)}.ref-table-more[open] summary{border-radius:0}.ref-table-continuation{border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:0}.ref-list{background:var(--panel-bg);border-radius:var(--border-radius-md);padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-xl);box-shadow:var(--shadow)}.ref-list li{padding:var(--spacing-xs) 0;line-height:1.6}.ref-list code{background:var(--code-bg);padding:.15rem .4rem;border-radius:4px;font-size:.85em}.reference-body .code-block{margin:var(--spacing-md) 0}.ref-see-also{margin-top:var(--spacing-lg);padding:var(--spacing-md);background:linear-gradient(135deg,#9b59b61a,#00bcd41a);border-radius:var(--border-radius-md);font-size:.95rem;color:var(--text-color);border:1px solid rgba(155,89,182,.2)}.ref-see-also a{color:var(--section-color, var(--primary-color));text-decoration:none;font-weight:600;padding:.25rem .5rem;background:#ffffff1a;border-radius:var(--border-radius-sm);transition:background .2s,transform .2s}.ref-see-also a:hover{background:var(--section-color, var(--primary-color));color:#fff;transform:translateY(-1px)}@media(max-width:600px){.ref-table{font-size:.8rem}.ref-table th,.ref-table td{padding:var(--spacing-xs) var(--spacing-sm)}.reference-nav{position:static}.ref-nav-link{font-size:.8rem}}.hidden{display:none!important}@media(max-width:768px){.game-layout{flex-direction:column;overflow-y:auto}.left-panel,.right-panel{width:100%;flex-shrink:0;border-right:none;display:contents}.game-controls{order:1;padding:var(--spacing-sm)}.instructions{order:2;max-height:none;overflow-y:visible}.preview-section{order:3;display:flex;flex-direction:column;min-height:50vh}.preview-section .preview-header{order:1}.preview-section .preview-wrapper{order:2}.editor-section{order:4;display:flex;flex-direction:column;min-height:50vh}.preview-wrapper{flex:1;margin:var(--spacing-sm);min-height:40vh}.editor-content{flex:1;min-height:45vh}.module-pill{flex:1;min-width:0;max-width:100%;margin:0 var(--spacing-sm);justify-content:center;overflow:hidden}.module-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-label{display:none}.btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:.85rem}}@media(max-width:480px){.logo h1{font-size:.9rem}.logo img{width:32px}#lesson-title{font-size:1.1rem}.lesson-description{font-size:.9rem}.task-instruction{font-size:.85rem}.code-input{font-size:13px}}[dir=rtl] .sidebar-drawer{left:auto;right:calc(-1 * var(--sidebar-width));transition:right .3s ease}[dir=rtl] .sidebar-drawer.open{right:0}[dir=rtl] .app-container:has(.sidebar-drawer.open) .game-layout{transform:translate(calc(-1 * var(--sidebar-width) * .8))}[dir=rtl] .editor-tools,[dir=rtl] .nav-controls{flex-direction:row-reverse}[dir=rtl] .hint{flex-direction:row-reverse;text-align:right;border-left:none;border-right:3px solid var(--primary-light)}[dir=rtl] .hint-success{border-right-color:var(--success-color)}[dir=rtl] .module-header{flex-direction:row-reverse}[dir=rtl] .lesson-list button{text-align:right}[dir=rtl] .lesson-list button:before{margin-left:var(--spacing-sm);margin-right:0}[dir=rtl] .lesson-description,[dir=rtl] .task-instruction{direction:auto;unicode-bidi:plaintext}[dir=rtl] .editor-content,[dir=rtl] .CodeMirror{direction:ltr;text-align:left}[dir=rtl] .preview-wrapper,[dir=rtl] #preview-area{direction:ltr}[dir=rtl] .dialog-close{left:var(--spacing-sm);right:auto}[dir=rtl] .logo{direction:ltr}[dir=rtl] .game-layout{flex-direction:row-reverse}[dir=rtl] .left-panel{border-right:none;border-left:1px solid var(--border-color)}[dir=rtl] .lessons-container{margin-left:0;margin-right:16px;border-left:none;border-right:2px solid var(--border-color);padding-left:0;padding-right:8px}[dir=rtl] summary.module-header{justify-content:flex-end;text-align:right}[dir=rtl] summary.module-header:before{order:1;margin-left:8px;margin-right:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M7 1 L3 5 L7 9' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}[dir=rtl] details.module-container[open]>summary.module-header:before{transform:rotate(-90deg)}[dir=rtl] .lesson-list-item{text-align:right}[dir=rtl] .lesson-list-item.completed:before{float:right;margin-left:6px;margin-right:0}[dir=rtl] .module-header.completed:after{margin-left:0;margin-right:8px}[dir=rtl] .lesson-list-item.completed:before{margin-left:6px;margin-right:0}[dir=rtl] .header-level-pill{margin-left:0;margin-right:var(--spacing-sm)}[dir=rtl] .header-level{margin-left:0;margin-right:.5em}[dir=rtl] .toggle-slider{margin-right:0;margin-left:8px}[dir=rtl] .preview-controls,[dir=rtl] .lesson-title-row{flex-direction:row-reverse}[dir=rtl] .lesson-description ul,[dir=rtl] .lesson-description ol{padding-left:0;padding-right:1.5em}[dir=rtl] .lesson-description li{text-align:right}[dir=rtl] pre,[dir=rtl] code,[dir=rtl] kbd{direction:ltr;text-align:left}[data-section=html]{--section-color: #d45aa0;--section-color-light: #e07ab5;--section-color-dark: #b24485;--section-color-rgb: 212, 90, 160}[data-section=tailwind]{--section-color: #1aafb8;--section-color-light: #3fc1c9;--section-color-dark: #0d8f96;--section-color-rgb: 26, 175, 184}[data-section=markdown]{--section-color: #5b8dd9;--section-color-light: #7ba3e5;--section-color-dark: #4070b8;--section-color-rgb: 91, 141, 217}.nav-link[data-section=css]{color:#9163b8}.nav-link[data-section=html]{color:#d45aa0}.nav-link[data-section=tailwind]{color:#1aafb8}.nav-link[data-section=markdown]{color:#5b8dd9}.nav-link[data-section=css]:hover,.nav-link[data-section=css].active{background:#9163b81a;color:#724a95}.nav-link[data-section=html]:hover,.nav-link[data-section=html].active{background:#d45aa01a;color:#b24485}.nav-link[data-section=tailwind]:hover,.nav-link[data-section=tailwind].active{background:#1aafb81a;color:#0d8f96}.nav-link[data-section=markdown]:hover,.nav-link[data-section=markdown].active{background:#5b8dd91a;color:#4070b8}body[data-section=css] .hint{background:#9163b84d;border-left-color:#a98cd6}body[data-section=css] .hint-progress{background:#9163b8}body[data-section=html] .hint{background:#d45aa04d;border-left-color:#d97a94}body[data-section=html] .hint-progress{background:#d45aa0}body[data-section=tailwind] .hint{background:#1aafb84d;border-left-color:#4db6ac}body[data-section=tailwind] .hint-progress{background:#1aafb8}body[data-section=markdown] .hint{background:#5b8dd94d;border-left-color:#7ba3e5}body[data-section=markdown] .hint-progress{background:#5b8dd9}[dir=rtl] body[data-section=css] .hint{border-right-color:#a98cd6}[dir=rtl] body[data-section=html] .hint{border-right-color:#d97a94}[dir=rtl] body[data-section=tailwind] .hint{border-right-color:#4db6ac}[dir=rtl] body[data-section=markdown] .hint{border-right-color:#7ba3e5}.ref-nav-link[data-ref=css],.ref-nav-link[data-ref=selectors],.ref-nav-link[data-ref=flexbox],.ref-nav-link[data-ref=grid]{color:#9163b8}.ref-nav-link[data-ref=css]:hover,.ref-nav-link[data-ref=css].active,.ref-nav-link[data-ref=selectors]:hover,.ref-nav-link[data-ref=selectors].active,.ref-nav-link[data-ref=flexbox]:hover,.ref-nav-link[data-ref=flexbox].active,.ref-nav-link[data-ref=grid]:hover,.ref-nav-link[data-ref=grid].active{background:#9163b826;color:#724a95}.ref-nav-link[data-ref=html]{color:#d45aa0}.ref-nav-link[data-ref=html]:hover,.ref-nav-link[data-ref=html].active{background:#d45aa026;color:#b24485}body[data-section=css] .cm-editor .cm-content{caret-color:#9163b8!important}body[data-section=css] .cm-editor .cm-cursor,body[data-section=css] .cm-editor .cm-dropCursor{border-left-color:#9163b8!important}body[data-section=css] .cm-editor .cm-selectionBackground,body[data-section=css] .cm-editor .cm-content ::selection{background-color:#9163b840!important}body[data-section=css] .cm-editor .cm-activeLine{background-color:#9163b814!important}body[data-section=html] .cm-editor .cm-content{caret-color:#d45aa0!important}body[data-section=html] .cm-editor .cm-cursor,body[data-section=html] .cm-editor .cm-dropCursor{border-left-color:#d45aa0!important}body[data-section=html] .cm-editor .cm-selectionBackground,body[data-section=html] .cm-editor .cm-content ::selection{background-color:#d45aa040!important}body[data-section=html] .cm-editor .cm-activeLine{background-color:#d45aa014!important}body[data-section=tailwind] .cm-editor .cm-content{caret-color:#1aafb8!important}body[data-section=tailwind] .cm-editor .cm-cursor,body[data-section=tailwind] .cm-editor .cm-dropCursor{border-left-color:#1aafb8!important}body[data-section=tailwind] .cm-editor .cm-selectionBackground,body[data-section=tailwind] .cm-editor .cm-content ::selection{background-color:#1aafb840!important}body[data-section=tailwind] .cm-editor .cm-activeLine{background-color:#1aafb814!important}body[data-section=markdown] .cm-editor .cm-content{caret-color:#5b8dd9!important}body[data-section=markdown] .cm-editor .cm-cursor,body[data-section=markdown] .cm-editor .cm-dropCursor{border-left-color:#5b8dd9!important}body[data-section=markdown] .cm-editor .cm-selectionBackground,body[data-section=markdown] .cm-editor .cm-content ::selection{background-color:#5b8dd940!important}body[data-section=markdown] .cm-editor .cm-activeLine{background-color:#5b8dd914!important}body[data-section=css] .module-pill{background:#9163b81a;color:#9163b8}body[data-section=css] .module-pill .level-indicator{color:#724a95}body[data-section=html] .module-pill{background:#d45aa01a;color:#d45aa0}body[data-section=html] .module-pill .level-indicator{color:#b24485}body[data-section=tailwind] .module-pill{background:#1aafb81a;color:#1aafb8}body[data-section=tailwind] .module-pill .level-indicator{color:#0d8f96}body[data-section=markdown] .module-pill{background:#5b8dd91a;color:#5b8dd9}body[data-section=markdown] .module-pill .level-indicator{color:#4070b8}body[data-section=css] .code-block{border-color:#9163b866}body[data-section=html] .code-block{border-color:#d45aa066}body[data-section=tailwind] .code-block{border-color:#1aafb866}body[data-section=markdown] .code-block{border-color:#5b8dd966}body[data-section=css] .code-block .cm-editor .cm-line{color:#c9c0e0}body[data-section=html] .code-block .cm-editor .cm-line{color:#e8c0cc}body[data-section=tailwind] .code-block .cm-editor .cm-line{color:#c0e0e8}body[data-section=markdown] .code-block .cm-editor .cm-line{color:#c0d0e8}[data-section=css] .task-instruction{background:#9163b8eb}[data-section=html] .task-instruction{background:#d45aa0eb}[data-section=tailwind] .task-instruction{background:#1aafb8eb}[data-section=markdown] .task-instruction{background:#5b8dd9eb}body[data-section=css] .section-progress-bar .progress-fill{background:#9163b8}body[data-section=html] .section-progress-bar .progress-fill{background:#d45aa0}body[data-section=tailwind] .section-progress-bar .progress-fill{background:#1aafb8}body[data-section=markdown] .section-progress-bar .progress-fill{background:#5b8dd9}[data-section=css] .section-hero h1{color:#9163b8}[data-section=html] .section-hero h1{color:#d45aa0}[data-section=tailwind] .section-hero h1{color:#1aafb8}[data-section=markdown] .section-hero h1{color:#5b8dd9}body[data-section=css] #lesson-title{color:#9163b8}body[data-section=html] #lesson-title{color:#d45aa0}body[data-section=tailwind] #lesson-title{color:#1aafb8}body[data-section=markdown] #lesson-title{color:#5b8dd9}.section-footer.landing-footer,.reference-footer.landing-footer{max-width:900px;margin:6rem auto 0;padding:0 var(--spacing-lg) var(--spacing-lg);border-top:none}.section-footer .footer-links a,.reference-footer .footer-links a{color:var(--light-text)}.section-footer .footer-links a:hover,.reference-footer .footer-links a:hover{color:var(--section-color, var(--primary-color))}