@layer base{:root{--learning-bg-primary:#0a0a0b;--learning-bg-secondary:#111113;--learning-bg-tertiary:#18181b;--learning-bg-hover:#1f1f23;--learning-bg-elevated:#232326;--learning-border-subtle:#27272a;--learning-border-default:#3f3f46;--learning-border-strong:#52525b;--learning-text-primary:#fafafa;--learning-text-secondary:#a1a1aa;--learning-text-tertiary:#71717a;--learning-text-muted:#52525b;--learning-accent:#6366f1;--learning-accent-hover:#818cf8;--learning-accent-subtle:#6366f11a;--learning-accent-border:#6366f14d;--learning-success:#22c55e;--learning-success-subtle:#22c55e1a;--learning-warning:#eab308;--learning-warning-subtle:#eab3081a;--learning-danger:#ef4444;--learning-danger-subtle:#ef44441a;--learning-sidebar-width:240px;--learning-rail-width:200px;--learning-content-max:720px;--learning-page-padding:24px;--learning-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--learning-font-mono:"JetBrains Mono","Fira Code","SF Mono",monospace}}.learning-bg-primary{background-color:var(--learning-bg-primary)}.learning-bg-secondary{background-color:var(--learning-bg-secondary)}.learning-bg-tertiary{background-color:var(--learning-bg-tertiary)}.learning-bg-hover{background-color:var(--learning-bg-hover)}.learning-text-primary{color:var(--learning-text-primary)}.learning-text-secondary{color:var(--learning-text-secondary)}.learning-text-tertiary{color:var(--learning-text-tertiary)}.learning-border-subtle{border-color:var(--learning-border-subtle)}.learning-border-default{border-color:var(--learning-border-default)}.difficulty-beginner{background-color:var(--learning-success)}.difficulty-intermediate{background-color:var(--learning-warning)}.difficulty-advanced{background-color:var(--learning-danger)}.learning-gradient-line{background:#ffffff1a;height:1px}.learning-card{background-color:#0000;border:1px solid #0000;transition:all .15s}.learning-card:hover{background-color:var(--learning-bg-hover);border-color:var(--learning-border-subtle)}.learning-nav-item{color:var(--learning-text-tertiary);transition:all .15s}.learning-nav-item:hover{color:var(--learning-text-secondary);background-color:#ffffff08}.learning-nav-item.active{color:var(--learning-text-primary);background-color:var(--learning-bg-tertiary)}.learning-progress-track{background-color:var(--learning-bg-tertiary);border-radius:2px;height:4px;overflow:hidden}.learning-progress-fill{background-color:var(--learning-accent);height:100%;transition:width .3s}.learning-scrollbar::-webkit-scrollbar{width:6px}.learning-scrollbar::-webkit-scrollbar-track{background:0 0}.learning-scrollbar::-webkit-scrollbar-thumb{background-color:var(--learning-border-subtle);border-radius:3px}.learning-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--learning-border-default)}.lesson-content{line-height:1.8}.lesson-content hr{border-color:#ffffff1a;margin:2rem 0}.lesson-content strong{color:var(--learning-text-primary);font-weight:600}.lesson-content em{color:var(--learning-text-secondary)}.lesson-content code[class*=language-] .token.comment,.lesson-content code[class*=language-] .token.prolog,.lesson-content code[class*=language-] .token.doctype,.lesson-content code[class*=language-] .token.cdata{color:#6b7280;font-style:italic}html{scroll-behavior:smooth}.mermaid{justify-content:center;align-items:center;display:flex}.mermaid svg{max-width:100%;height:auto}
.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--learning-border-subtle)transparent}.custom-scrollbar::-webkit-scrollbar{width:8px;height:8px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--learning-border-subtle);border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--learning-text-tertiary)}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}.learning-ide{--ide-topbar-height:48px;--ide-nav-width:240px;--ide-explorer-width:260px;--ide-editor-width:600px}.learning-ide *{box-sizing:border-box}.file-tree-node{position:relative}.file-tree-node:before{content:"";background:var(--learning-accent);opacity:0;width:2px;transition:opacity .2s;position:absolute;top:0;bottom:0;left:0}.file-tree-node:hover:before{opacity:.3}.file-tree-node.active:before{opacity:1}.code-editor-tabs{scrollbar-width:none;display:flex;overflow-x:auto}.code-editor-tabs::-webkit-scrollbar{display:none}.code-editor-tab{flex-shrink:0;position:relative}.code-editor-tab:after{content:"";background:var(--learning-accent);height:2px;transition:transform .2s;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.code-editor-tab.active:after{transform:scaleX(1)}.resize-handle{cursor:col-resize;z-index:10;background:0 0;width:1px;transition:background .2s;position:absolute;top:0;bottom:0}.resize-handle:before{content:"";width:8px;position:absolute;top:0;bottom:0;left:-4px}.resize-handle:hover,.resize-handle.resizing{background:var(--learning-accent)}.content-workspace{font-family:var(--font-sans)}.content-workspace h1,.content-workspace h2,.content-workspace h3,.content-workspace h4{scroll-margin-top:80px;position:relative}.content-workspace h1:hover .heading-anchor,.content-workspace h2:hover .heading-anchor,.content-workspace h3:hover .heading-anchor{opacity:1}.heading-anchor{opacity:0;color:var(--learning-text-tertiary);text-decoration:none;transition:opacity .2s;position:absolute;left:-24px}.heading-anchor:hover{color:var(--learning-accent)}.content-workspace code{font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:.9em}.diagram-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:.2s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.file-link{border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.file-link:hover{transform:translate(4px)}.callout{border-left-width:4px;animation:.3s ease-out slideIn}@keyframes slideIn{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@media (max-width:1024px){.learning-ide{--ide-nav-width:200px;--ide-explorer-width:220px;--ide-editor-width:100%}}@media (max-width:768px){.learning-ide-mobile{flex-direction:column;height:100vh;display:flex}.file-tree-node{padding-left:.5rem!important}.content-workspace{padding:1rem!important}.file-tree-node,.code-editor-tab,.lesson-item{min-height:44px}}.progress-bar{transition:width .5s ease-out}.progress-dot{transition:all .3s ease-out}.progress-dot.completed{animation:.5s ease-out checkmark}@keyframes checkmark{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.tab-content{animation:.2s ease-out tabFadeIn}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.copy-button.copied{animation:.5s ease-out copySuccess}@keyframes copySuccess{0%,to{background:0 0}50%{background:#22c55e33}}.locked-lesson{opacity:.6;position:relative}.locked-lesson:after{content:"";pointer-events:none;background:repeating-linear-gradient(45deg,#0000,#0000 10px,#00000008 10px 20px);position:absolute;inset:0}.code-viewer pre{background:#0d1117!important;margin:0!important}.code-viewer code{font-variant-ligatures:common-ligatures;text-rendering:optimizeLegibility;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace!important}.code-viewer .linenumber{-webkit-user-select:none;user-select:none;cursor:pointer}.code-viewer .linenumber:hover{color:var(--learning-accent)!important}.learning-ide button:focus-visible,.learning-ide a:focus-visible,.learning-ide input:focus-visible{outline:2px solid var(--learning-accent);outline-offset:2px;border-radius:4px}.skeleton{background:linear-gradient(90deg,var(--learning-bg-tertiary)25%,var(--learning-bg-secondary)50%,var(--learning-bg-tertiary)75%);background-size:200% 100%;animation:1.5s ease-in-out infinite skeleton}@keyframes skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}@media print{.learning-ide{display:block!important}.ide-topbar,.course-navigator,.file-explorer,.code-editor-pane,.mobile-nav{display:none!important}.content-workspace{max-width:100%!important;padding:0!important}}@media (prefers-contrast:high){.learning-ide{--learning-border-subtle:#fff}.file-tree-node,.code-editor-tab,.lesson-item{border:1px solid var(--learning-border-subtle)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.learning-ide ::selection{background:var(--learning-accent);color:#fff}.learning-ide ::selection{background:var(--learning-accent);color:#fff}.tooltip{position:relative}.tooltip:before{content:attr(data-tooltip);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;z-index:1000;background:#000000e6;border-radius:.25rem;padding:.5rem .75rem;font-size:.75rem;transition:opacity .2s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)translateY(-8px)}.tooltip:hover:before{opacity:1}