:root {
  --background: 120 25% 98%;
  --foreground: 145 24% 13%;
  --primary: 122 39% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 142 35% 92%;
  --secondary-foreground: 145 24% 13%;
  --muted: 120 12% 93%;
  --muted-foreground: 142 10% 38%;
  --destructive: 0 74% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 130 16% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 1px 2px rgba(20, 83, 45, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 83, 45, 0.12);
  --shadow-lg: 0 20px 45px rgba(20, 83, 45, 0.18);
  --transition-fast: 150ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}
.dark {
  --background: 145 24% 9%;
  --foreground: 120 22% 96%;
  --primary: 122 45% 56%;
  --primary-foreground: 145 24% 8%;
  --secondary: 145 20% 16%;
  --secondary-foreground: 120 22% 96%;
  --muted: 145 14% 18%;
  --muted-foreground: 120 10% 72%;
  --destructive: 0 68% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 145 16% 25%;
  --card: 145 22% 12%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background-color var(--transition-smooth), color var(--transition-smooth); }
a { color: inherit; text-decoration: none; }
button, textarea, input { font: inherit; }
.lesson-html h2 { font-size: 1.65rem; font-weight: 800; margin: 1.75rem 0 .75rem; }
.lesson-html h3 { font-size: 1.25rem; font-weight: 800; margin: 1.35rem 0 .5rem; }
.lesson-html p { line-height: 1.75; margin: .75rem 0; color: hsl(var(--foreground)); }
.lesson-html ul { list-style: disc; padding-left: 1.5rem; margin: .75rem 0; line-height: 1.75; }
.lesson-html code:not(pre code) { background: hsl(var(--secondary)); padding: .15rem .35rem; border-radius: 6px; color: hsl(var(--foreground)); }
.lesson-html pre { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: auto; box-shadow: var(--shadow-sm); margin: 1rem 0; }
.example-box { border-left: 6px solid hsl(var(--primary)); background: hsl(var(--primary) / .10); padding: 1rem; border-radius: var(--radius-md); margin: 1rem 0; }
.note-box { border-left: 6px solid #f7c948; background: rgba(247, 201, 72, .18); padding: 1rem; border-radius: var(--radius-md); margin: 1rem 0; }
.sidebar-scroll::-webkit-scrollbar, textarea::-webkit-scrollbar { width: 10px; height: 10px; }
.sidebar-scroll::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
.dark .hljs {
  background: #0f172a;
  color: #e2e8f0;
}
.dark .hljs-comment,
.dark .hljs-quote { color: #94a3b8; }
.dark .hljs-keyword,
.dark .hljs-selector-tag,
.dark .hljs-subst { color: #93c5fd; }
.dark .hljs-string,
.dark .hljs-doctag,
.dark .hljs-title,
.dark .hljs-section,
.dark .hljs-selector-id { color: #86efac; }
.dark .hljs-number,
.dark .hljs-literal,
.dark .hljs-variable,
.dark .hljs-template-variable,
.dark .hljs-tag .hljs-attr { color: #f9a8d4; }
.dark .hljs-type,
.dark .hljs-class .hljs-title { color: #fcd34d; }