:root{--color-primary: #B50004;--color-primary-hover: #930003;--color-primary-active: #7A0002;--color-primary-soft: #FBEDEE;--color-primary-border: #F3C4C6;--color-bg-warm: #FFFDF5;--color-surface: #FFFFFF;--color-surface-subtle: #F9F8F3;--color-surface-hover: #F2EFE8;--color-border: #E5E1D8;--color-border-subtle: #ECE8E0;--color-text-main: #202020;--color-text-muted: #666666;--color-text-faint: #8E8A83;--color-text-inverse: #FFFFFF;--color-success: #1B7A3E;--color-success-bg: #E8F5E9;--color-error: #B50004;--color-error-bg: #FBEDEE;--header-height: 60px;--nav-strip-height: 44px;--sidebar-width: 260px;--max-content-width: 860px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -1px rgba(0, 0, 0, .04)}.lesson-page{display:flex;flex-direction:column;flex:1}.lesson-layout{display:flex;flex:1;min-width:0}.lesson-main{flex:1;min-width:0;padding:36px 48px 64px}.lesson-article{max-width:var(--max-content-width);margin:0 auto}.lesson-sidebar{width:var(--sidebar-width);flex-shrink:0;background-color:var(--color-surface);border-right:1px solid var(--color-border);overflow-y:auto;position:sticky;top:calc(var(--header-height) + var(--nav-strip-height));height:calc(100vh - var(--header-height) - var(--nav-strip-height))}.lesson-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--color-border-subtle)}.lesson-sidebar-title{font-size:16px;font-weight:700;color:var(--color-primary)}.lesson-sidebar-badge{font-size:11px;font-weight:600;color:var(--color-text-muted);background-color:var(--color-surface-hover);padding:2px 6px;border-radius:var(--radius-sm)}.lesson-sidebar-nav{padding:6px 0 24px}.lesson-sidebar-group-title{font-size:12px;font-weight:700;color:var(--color-text-main);padding:16px 20px 6px}.lesson-sidebar-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 20px 7px 17px;font-size:14px;color:var(--color-text-main);border-left:3px solid transparent}a.lesson-sidebar-link:hover{text-decoration:none;background-color:var(--color-surface-hover)}.lesson-sidebar-link.is-active{background-color:var(--color-primary-soft);color:var(--color-primary);font-weight:600;border-left-color:var(--color-primary)}.lesson-sidebar-link.is-disabled{color:var(--color-text-faint);cursor:not-allowed}.lesson-sidebar-soon{font-size:10px;font-weight:600;text-transform:uppercase;background-color:var(--color-surface-hover);padding:1px 5px;border-radius:var(--radius-sm)}.lesson-topics-toggle{display:none;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:10px 16px;font-size:14px;font-weight:600;color:var(--color-text-main);background-color:var(--color-surface);border-bottom:1px solid var(--color-border)}.lesson-topics-toggle-course{font-size:12px;font-weight:700;color:var(--color-primary)}.lesson-header{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--color-border)}.lesson-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.lesson-breadcrumb{font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-muted)}.lesson-time{font-size:12px;color:var(--color-text-muted);background-color:var(--color-surface-hover);padding:2px 8px;border-radius:var(--radius-sm)}.lesson-title{font-size:clamp(28px,5vw,36px);font-weight:800;letter-spacing:-.5px;line-height:1.2;margin-bottom:12px}.lesson-lead{font-size:18px;line-height:1.6;color:var(--color-text-muted)}.lesson-objectives{background-color:var(--color-primary-soft);border-left:4px solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:16px 20px;margin-bottom:32px}.lesson-objectives-title{font-size:15px;font-weight:700;color:var(--color-primary);margin-bottom:8px}.lesson-objectives ul,.lesson-keypoints ul{padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}.lesson-section{margin-bottom:36px;line-height:1.7}.lesson-section-heading{font-size:23px;font-weight:700;margin-bottom:12px}.lesson-text{font-size:16px;margin-bottom:14px}.lesson-list{font-size:16px;padding-left:24px;margin-bottom:14px;display:flex;flex-direction:column;gap:4px}.inline-code{font-family:var(--font-mono);font-size:.88em;color:var(--color-primary-active);background-color:var(--color-surface-hover);padding:1px 5px;border-radius:var(--radius-sm);word-break:break-word}.lesson-syntax,.lesson-code{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px 16px;margin:0 0 16px;overflow-x:auto}.lesson-syntax{border-left:4px solid var(--color-text-main)}.lesson-syntax-label,.lesson-code-label{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:6px}.lesson-syntax pre,.lesson-code pre{font-size:14px;line-height:1.55}.lesson-explained{background-color:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:16px}.lesson-explained-title{font-size:15px;font-weight:700;margin-bottom:6px}.lesson-explained ul{padding-left:20px;font-size:15px;display:flex;flex-direction:column;gap:4px}.lesson-callout{font-size:15px;border-radius:var(--radius-md);padding:12px 16px;margin-bottom:16px;border-left:4px solid}.lesson-callout-note{background-color:#eef4fb;border-left-color:#2f6db5}.lesson-callout-tip{background-color:var(--color-success-bg);border-left-color:var(--color-success)}.lesson-callout-important,.lesson-callout-warning{background-color:var(--color-primary-soft);border-left-color:var(--color-primary)}.lesson-table-wrap{overflow-x:auto;margin-bottom:16px}.lesson-table{width:100%;border-collapse:collapse;font-size:15px;background-color:var(--color-surface)}.lesson-table th,.lesson-table td{text-align:left;vertical-align:top;padding:9px 12px;border:1px solid var(--color-border)}.lesson-table th{background-color:var(--color-surface-subtle);font-weight:700}.lesson-check{border:1px solid var(--color-primary-border);border-radius:var(--radius-lg);padding:16px 18px;margin:8px 0 16px;background-color:var(--color-surface)}.lesson-check-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--color-primary);margin-bottom:6px}.lesson-check-question{font-size:16px;font-weight:600;margin-bottom:12px}.lesson-check-options{display:flex;flex-direction:column;gap:8px}.lesson-check-option{text-align:left;font-size:15px;min-height:44px;padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);color:var(--color-text-main)}.lesson-check-option:hover{border-color:var(--color-primary-border);background-color:var(--color-surface-subtle)}.lesson-check-option.is-correct{border-color:var(--color-success);background-color:var(--color-success-bg)}.lesson-check-option.is-wrong{border-color:var(--color-primary);background-color:var(--color-primary-soft)}.lesson-check-feedback{margin-top:12px;font-size:15px}.lesson-check-feedback.is-correct strong{color:var(--color-success)}.lesson-check-feedback.is-wrong strong{color:var(--color-primary)}.lesson-keypoints{border-top:1px solid var(--color-border);padding-top:24px;margin-bottom:8px}.lesson-keypoints-title{font-size:20px;font-weight:700;margin-bottom:10px}.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--color-border)}.lesson-nav-btn{padding:10px 18px;font-size:14px;font-weight:600;color:var(--color-text-main);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.lesson-nav-btn:hover{text-decoration:none;border-color:var(--color-text-faint)}.lesson-nav-btn.is-next{margin-left:auto;color:var(--color-text-inverse);background-color:var(--color-primary);border-color:var(--color-primary)}.lesson-nav-btn.is-next:hover{background-color:var(--color-primary-hover)}.lesson-nav-btn.is-disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-surface-hover)}.lesson-not-found{padding:40px 16px;text-align:center}@media(max-width:768px){.lesson-topics-toggle{display:flex;position:sticky;top:calc(var(--header-height) + var(--nav-strip-height));z-index:80}.lesson-sidebar{display:none}.lesson-sidebar.is-open{display:block;position:fixed;top:calc(var(--header-height) + var(--nav-strip-height) + 44px);left:0;width:min(320px,85vw);height:calc(100vh - var(--header-height) - var(--nav-strip-height) - 44px);z-index:150;box-shadow:var(--shadow-md)}.lesson-main{padding:24px 16px 48px}.lesson-nav{flex-direction:column}.lesson-nav-btn{text-align:center}}.lesson-status{max-width:var(--max-content-width);margin:40px auto;font-size:16px;color:var(--color-text-muted);display:flex;flex-direction:column;align-items:flex-start;gap:12px}.about-page{max-width:1040px;margin:0 auto;padding:56px 24px 72px}.about-hero{max-width:760px;margin-bottom:56px}.about-eyebrow{font-size:14px;font-weight:700;color:var(--color-primary);margin-bottom:10px}.about-title{font-size:clamp(30px,5vw,46px);font-weight:800;line-height:1.15;letter-spacing:-.5px;margin-bottom:18px}.about-accent{color:var(--color-primary)}.about-lead{font-size:18px;line-height:1.65;color:var(--color-text-muted)}.about-section{margin-bottom:56px;line-height:1.7}.about-heading{font-size:26px;font-weight:700;margin-bottom:18px}.about-section p{font-size:16px;margin-bottom:12px}.about-steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.about-step{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px}.about-step-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background-color:var(--color-primary);color:var(--color-text-inverse);font-weight:700;margin-bottom:10px}.about-step-title{font-size:18px;font-weight:700;margin-bottom:6px}.about-step p{font-size:15px;color:var(--color-text-muted);margin:0}.about-courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:14px}.about-course{display:flex;flex-direction:column;gap:4px;padding:20px;background-color:var(--color-surface);border:1px solid var(--color-border);border-top:4px solid var(--color-primary);border-radius:var(--radius-lg);color:var(--color-text-main)}.about-course:hover{text-decoration:none;border-color:var(--color-primary-border);border-top-color:var(--color-primary);box-shadow:var(--shadow-md)}.about-course-name{font-size:20px;font-weight:800}.about-course-what{font-size:15px;color:var(--color-text-muted)}.about-course-count{margin-top:8px;font-size:14px;font-weight:600;color:var(--color-primary)}.about-section .about-note{font-size:15px;color:var(--color-text-muted)}.about-split{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start}.about-facts{list-style:none;display:flex;flex-direction:column;gap:10px}.about-facts li{background-color:var(--color-primary-soft);border-left:4px solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:12px 16px;font-size:15px}.about-company{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:28px}.about-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.about-btn{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:var(--radius-md);font-size:15px;font-weight:600}.about-btn:hover{text-decoration:none}.about-btn-primary{background-color:var(--color-primary);color:var(--color-text-inverse)}.about-btn-primary:hover{background-color:var(--color-primary-hover)}.about-btn-secondary{background-color:var(--color-surface);color:var(--color-text-main);border:1px solid var(--color-border)}.about-btn-secondary:hover{border-color:var(--color-text-faint)}.about-cta{text-align:center;padding:40px 24px;border-top:1px solid var(--color-border)}.about-cta-title{font-size:24px;font-weight:700;margin-bottom:18px}@media(max-width:768px){.about-page{padding:36px 16px 56px}.about-split{grid-template-columns:1fr;gap:16px}.about-company{padding:20px}}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-sans);background-color:var(--color-bg-warm);color:var(--color-text-main);line-height:1.6;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:var(--font-mono)}button{font-family:inherit;cursor:pointer;border:none;background:none}button:focus-visible,a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.horizontal-scroll{display:flex;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}.horizontal-scroll::-webkit-scrollbar{height:4px}.horizontal-scroll::-webkit-scrollbar-track{background:transparent}.horizontal-scroll::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:4px}.playground-mobile-switcher{display:none}@media(max-width:768px){.playground-mobile-switcher{display:flex}.playground-divider{display:none!important}.playground-pane{width:100%!important}.playground-pane[data-mobile-hidden=true]{display:none!important}}@media(max-width:520px){.site-header-brand-text{display:none!important}.site-header-nav{gap:2px!important}.site-header-nav a{padding:6px 8px!important;font-size:13px!important}}