auto-claude: 6.3 - Final review of all concept texts for clarity, con

- Reviewed all 85+ lesson concepts across 20+ modules
- Trimmed 7 lessons that exceeded 2-4 sentence limit
- Edited 06-transitions-animations.json (all 4 lessons)
- Edited 08-responsive.json (all 4 lessons)
- Preserved beginner-friendly language and WHY focus
- Maintained excellent ASCII diagrams

All concepts now comply with 2-4 sentence guideline while
maintaining clarity and conceptual depth.

lessons/06-transitions-animations.json

@@ -19,7 +19,7 @@
 			"solution": "  transition: background-color 0.3s;",
 			"previewContainer": "preview-area",
 			"concept": {
-				"explanation": "CSS transitions interpolate (calculate in-between values) smoothly between a property's start and end values over a specified duration. When you hover the button, the browser detects the background-color change from black to white and automatically generates intermediate color values at each frame (typically 60 frames per second). For colors, the browser converts both values to RGB, then calculates the proportional change for each channel (red, green, blue) at each timestamp. For example, at 50% through a 0.3s transition, the color would be halfway between black (rgb(0,0,0)) and white (rgb(255,255,255)), resulting in gray (rgb(128,128,128)). This frame-by-frame interpolation creates the smooth visual effect you see.",
+				"explanation": "CSS transitions interpolate (calculate in-between values) smoothly between a property's start and end values over a specified duration. When you hover the button, the browser detects the background-color change and automatically generates intermediate color values at each frame (typically 60 frames per second). For colors, the browser converts both values to RGB, then calculates proportional changes for each channel—for example, at 50% through a 0.3s transition, the color is halfway between black and white, resulting in gray.",
 				"diagram": "How CSS Transitions Interpolate Values\n\nTransition: background-color 0.3s\nStart: black → End: white\n\nTime progression (60fps = 60 frames in 0.3s):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n0.00s (0%)    rgb(0, 0, 0)     ███████ black\n              ↓ interpolate\n0.05s (17%)   rgb(43, 43, 43)  ███████ dark gray\n              ↓ interpolate\n0.15s (50%)   rgb(128,128,128) ███████ gray\n              ↓ interpolate\n0.25s (83%)   rgb(212,212,212) ███████ light gray\n              ↓ interpolate\n0.30s (100%)  rgb(255,255,255) ███████ white\n\nRGB interpolation formula at time t:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nvalue = start + (end - start) × progress\n\nAt t=0.15s (50% through 0.3s duration):\nprogress = 0.15 / 0.3 = 0.5\n\nRed:   0 + (255 - 0) × 0.5 = 128\nGreen: 0 + (255 - 0) × 0.5 = 128\nBlue:  0 + (255 - 0) × 0.5 = 128\n\nResult: rgb(128, 128, 128) ✓\n\nBrowser rendering process:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n1. Detect property change (hover triggers)\n2. Start transition timer (0.3s duration)\n3. Calculate frame count (0.3s × 60fps = 18 frames)\n4. For each frame:\n   - Calculate progress (elapsed / duration)\n   - Interpolate RGB values\n   - Repaint element\n5. End at final value\n\nTransitionable properties:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nColors:     rgb values interpolate\nLengths:    px, rem, % interpolate  \nTransforms: matrix values interpolate\nOpacity:    0-1 range interpolates\nNOT text:   \"foo\" → \"bar\" can't interpolate!"
 			},
 			"validations": [
@@ -51,7 +51,7 @@
 			"solution": "  transition-timing-function: ease-in-out;",
 			"previewContainer": "preview-area",
 			"concept": {
-				"explanation": "Timing functions (also called easing functions) control the rate of change during a transition or animation by applying a mathematical curve to the linear progress over time. Instead of changing at a constant speed (linear), timing functions accelerate or decelerate at different points, making animations feel more natural and realistic. The browser uses Bézier curves (cubic-bezier) to calculate the output progress for each input time value. For example, ease-in-out starts slow (low acceleration), speeds up in the middle (high velocity), then slows down at the end (deceleration), mimicking real-world physics where objects don't instantly reach full speed or stop abruptly.",
+				"explanation": "Timing functions (also called easing functions) control the rate of change during a transition by applying a mathematical curve to the linear progress over time. Instead of changing at a constant speed (linear), timing functions accelerate or decelerate at different points, making animations feel more natural. For example, ease-in-out starts slow, speeds up in the middle, then slows down at the end, mimicking real-world physics where objects don't instantly reach full speed or stop abruptly.",
 				"diagram": "Timing Functions & Animation Pacing\n\nLinear progress over time:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nTime:     0%    25%   50%   75%   100%\nProgress: 0%    25%   50%   75%   100%\nSpeed:    ═══════════════════════════ constant\n\nEase-in (accelerate):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nTime:     0%    25%   50%   75%   100%\nProgress: 0%    6%    25%   56%   100%\nSpeed:    ─────────────────────────▶ speeds up\n          slow                   fast\n\nEase-out (decelerate):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nTime:     0%    25%   50%   75%   100%\nProgress: 0%    44%   75%   94%   100%\nSpeed:    ◀─────────────────────────  slows down\n          fast                   slow\n\nEase-in-out (accelerate then decelerate):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nTime:     0%    25%   50%   75%   100%\nProgress: 0%    10%   50%   90%   100%\nSpeed:    ─────▶━━━━━━◀─────  natural motion\n          slow  fast    slow\n\nBézier curve visualization:\n\n  1 ┤                        ╭──── ease-out\n    │                    ╭───╯     (fast start)\n    │               ╭────╯\n0.5 ┤          ╭────╯────  ease-in-out\n    │      ╭───╯              (smooth)\n    │  ╭───╯\n  0 ┤──╯─────────────────── linear\n    └──┬────┬────┬────┬────  ease-in\n       0   0.25 0.5 0.75  1  (slow start)\n           Time →\n\nCommon timing functions:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nlinear        cubic-bezier(0, 0, 1, 1)\nease          cubic-bezier(0.25, 0.1, 0.25, 1) [default]\nease-in       cubic-bezier(0.42, 0, 1, 1)\nease-out      cubic-bezier(0, 0, 0.58, 1)\nease-in-out   cubic-bezier(0.42, 0, 0.58, 1)\n\nReal-world analogy:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nCar accelerating from stop sign:\n  ease-in → Pressing gas pedal gradually\n\nCar approaching red light:\n  ease-out → Braking smoothly to stop\n\nCar between two stop signs:\n  ease-in-out → Accelerate, cruise, brake"
 			},
 			"validations": [
@@ -82,7 +82,7 @@
 			"solution": "  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;",
 			"previewContainer": "preview-area",
 			"concept": {
-				"explanation": "Keyframe animations define multiple snapshots (keyframes) of property values at specific points in time, and the browser interpolates smoothly between them. Unlike transitions which only animate from one state to another, keyframes let you define complex multi-step animations with precise control over intermediate states. Each keyframe is marked with a percentage (0% is the start, 100% is the end, 50% is halfway), and you can define as many keyframes as needed. The browser calculates the timing between keyframes: in a 1s animation with keyframes at 0%, 50%, and 100%, the animation spends 0.5s transitioning from 0% to 50%, then another 0.5s from 50% to 100%. The 'infinite' keyword makes the animation loop continuously, restarting from 0% each time it completes.",
+				"explanation": "Keyframe animations define multiple snapshots (keyframes) of property values at specific percentages (0% is start, 100% is end, 50% is halfway), and the browser interpolates smoothly between them. Unlike transitions which only animate from one state to another, keyframes let you define complex multi-step animations with precise control—the browser automatically calculates timing between each keyframe. The 'infinite' keyword makes the animation loop continuously, restarting from 0% each time it completes.",
 				"diagram": "Keyframe Animation Timeline & Interpolation\n\n@keyframes bounce {\n  0%   { transform: translateY(0px); }   ← implicit start\n  50%  { transform: translateY(-20px); } ← explicit midpoint\n  100% { transform: translateY(0px); }   ← implicit end\n}\n\nanimation: bounce 1s infinite;\n\nTimeline breakdown (1 second duration):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n0.0s  (0%)    ●───────────────────  translateY(0px)\n              │ interpolate         [starting position]\n              │ over 0.5s\n              ↓\n0.5s  (50%)   ●───────────────────  translateY(-20px)\n              │ interpolate         [peak - 20px up]\n              │ over 0.5s\n              ↓\n1.0s  (100%)  ●───────────────────  translateY(0px)\n              ↓ infinite loop       [back to start]\n0.0s  restart ●\n\nVisual representation:\n\n    -20px ↑  ●  ← 50% keyframe (peak)\n          │ ╱ ╲\n          │╱   ╲\n     0px  ●─────●  ← 0% and 100% keyframes\n          ↑     ↑\n         0s    1s\n\nInterpolation between keyframes:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nFrom 0% to 50% (0s to 0.5s):\nStart: translateY(0px)\nEnd:   translateY(-20px)\n\nAt 0.25s (halfway between 0% and 50%):\nprogress = 0.25 / 0.5 = 0.5\nvalue = 0 + (-20 - 0) × 0.5 = -10px\nResult: translateY(-10px) ✓\n\nFrom 50% to 100% (0.5s to 1s):\nStart: translateY(-20px)\nEnd:   translateY(0px)\n\nAt 0.75s (halfway between 50% and 100%):\nprogress = (0.75 - 0.5) / 0.5 = 0.5\nvalue = -20 + (0 - (-20)) × 0.5 = -10px\nResult: translateY(-10px) ✓\n\nKeyframes vs Transitions:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nTransitions:\n  A → B (one state change)\n  Triggered by hover/focus/class change\n  Example: button:hover { color: red; }\n\nKeyframes:\n  A → B → C → D... (multiple states)\n  Runs automatically when element exists\n  Example: loading spinner, bounce effect\n  Can loop infinitely\n\nImplicit keyframes:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nIf you don't define 0% or 100%, browser uses\ncurrent computed values:\n\n@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n↓ Browser expands to:\n@keyframes bounce {\n  0%   { transform: translateY(0px); } ← added\n  50%  { transform: translateY(-20px); }\n  100% { transform: translateY(0px); } ← added\n}"
 			},
 			"validations": [
@@ -126,7 +126,7 @@
 			"solution": "  animation-name: pulse;\n  animation-duration: 2s;\n  animation-delay: 1s;\n  animation-iteration-count: 2;\n  animation-fill-mode: forwards;",
 			"previewContainer": "preview-area",
 			"concept": {
-				"explanation": "Animation properties give you precise control over playback timing and behavior. Animation-delay postpones the start of the animation by a specified time, useful for choreographing multiple animations or waiting for user attention. Animation-iteration-count determines how many times the animation repeats (1 for once, 2 for twice, 'infinite' for forever). Animation-fill-mode controls what styles apply before and after the animation: 'none' (default) removes animation styles when not playing, 'forwards' keeps the final keyframe (100%) styles after completion, 'backwards' applies the first keyframe (0%) styles during the delay period, and 'both' combines forwards and backwards. These properties give you fine-grained control over exactly when animations start, how long they run, and what happens before/after playback.",
+				"explanation": "Animation properties give you precise control over playback timing and behavior. Animation-delay postpones the animation start (useful for choreographing sequences), while animation-iteration-count determines how many times it repeats (1, 2, or 'infinite'). Animation-fill-mode controls styles before/after playback: 'none' removes animation styles when not playing, 'forwards' keeps the final keyframe styles after completion, 'backwards' applies starting styles during delay, and 'both' combines both behaviors. These properties control exactly when animations start, how long they run, and what happens before and after playback.",
 				"diagram": "Animation Properties & Timeline Control\n\nanimation-name: pulse;\nanimation-duration: 2s;\nanimation-delay: 1s;\nanimation-iteration-count: 2;\nanimation-fill-mode: forwards;\n\nComplete timeline:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n0s          1s          3s          5s\n│───────────│───────────│───────────│\n│   DELAY   │ ITERATION │ ITERATION │  END\n│  (wait)   │     #1    │     #2    │ (hold)\n│           │           │           │\n│  ●●●●●●●  │ ▶────────▶│ ▶────────▶│  ████\n│  waiting  │  playing  │  playing  │ frozen\n│           │   (2s)    │   (2s)    │  at\n│           │           │           │ 100%\n\nElement state at each phase:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nBefore delay (0s - 1s):\n  background: black  ← original CSS\n  (animation hasn't started yet)\n\nDuring iteration 1 (1s - 3s):\n  0%:  background: black\n  50%: background: white\n  100%: background: limegreen\n  (animating through keyframes)\n\nDuring iteration 2 (3s - 5s):\n  Repeats: black → white → limegreen\n  (second playthrough)\n\nAfter animation (5s+):\n  background: limegreen ← fill-mode: forwards\n  (stuck at 100% keyframe)\n\nanimation-fill-mode explained:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nnone (default):\n  Before: original CSS ●●●●●●●\n  During: animation   ▶────▶\n  After:  original CSS ●●●●●●●\n\nforwards:\n  Before: original CSS ●●●●●●●\n  During: animation   ▶────▶\n  After:  100% keyframe ████████ ← stays!\n\nbackwards:\n  Before: 0% keyframe ████████ ← applies!\n  During: animation   ▶────▶\n  After:  original CSS ●●●●●●●\n\nboth:\n  Before: 0% keyframe ████████ ← applies!\n  During: animation   ▶────▶\n  After:  100% keyframe ████████ ← stays!\n\nanimation-iteration-count:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n1        ▶────▶           (play once)\n2        ▶────▶ ▶────▶    (play twice)\n3        ▶────▶ ▶────▶ ▶────▶\ninfinite ▶────▶ ▶────▶ ▶────▶... (loop forever)\n2.5      ▶────▶ ▶────▶ ▶── (2.5 times)\n\nanimation-delay use cases:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nStaggered animations (cascade effect):\n  .item:nth-child(1) { animation-delay: 0s; }\n  .item:nth-child(2) { animation-delay: 0.1s; }\n  .item:nth-child(3) { animation-delay: 0.2s; }\n\n  Result: items animate one after another ↓\n\nNegative delay (start mid-animation):\n  animation-delay: -1s; ← starts 1s into animation\n  Useful for randomizing loop positions\n\nShorthand syntax:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nanimation: pulse 2s 1s 2 forwards;\n           │     │  │  │  └─ fill-mode\n           │     │  │  └──── iteration-count\n           │     │  └─────── delay\n           │     └────────── duration\n           └──────────────── name"
 			},
 			"validations": [

lessons/08-responsive.json

@@ -19,7 +19,7 @@
 			"solution": "@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;\n  }\n}",
 			"previewContainer": "preview-area",
 			"concept": {
-				"explanation": "Media queries are conditional CSS rules that the browser evaluates continuously as the viewport changes. When you write @media (max-width: 600px), the browser checks if the viewport width is 600 pixels or less—if true, it applies the enclosed styles; if false, it ignores them. The browser re-evaluates this condition every time the window is resized, instantly applying or removing styles based on the current viewport size. This runtime evaluation makes responsive design possible without JavaScript. Common media features include width, height, orientation (portrait/landscape), and prefers-color-scheme (light/dark mode). The cascade still applies—media query styles override earlier styles when the condition matches, following normal CSS specificity rules.",
+				"explanation": "Media queries are conditional CSS rules that the browser evaluates continuously as the viewport changes. When you write @media (max-width: 600px), the browser checks if the viewport width is 600 pixels or less—if true, it applies the enclosed styles; if false, it ignores them. The browser re-evaluates this condition on every resize, instantly applying or removing styles based on viewport size, making responsive design possible without JavaScript. Common media features include width, height, orientation (portrait/landscape), and prefers-color-scheme (light/dark mode).",
 				"diagram": "Media Query Evaluation Process\n\nHow @media (max-width: 600px) works:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nBrowser checks viewport width continuously:\n\nViewport: 800px wide\n┌─────────────────────────────────┐\n│  @media (max-width: 600px)     │\n│  Is 800px ≤ 600px?             │\n│  NO → Styles NOT applied       │\n│                                 │\n│  .panel { background: lightblue; }\n└─────────────────────────────────┘\n         (default style)\n\nUser resizes window → 500px wide\n┌────────────────────────┐\n│  @media (max-width: 600px)  │\n│  Is 500px ≤ 600px?          │\n│  YES → Styles applied       │\n│                              │\n│  .panel { background: lightcoral; }\n└────────────────────────┘\n      (media query style wins)\n\nBreakpoint Behavior:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n    0px                600px              ∞\n     ├──────────────────┼─────────────────►\n     lightcoral         │  lightblue\n     (max-width)        │  (default)\n                        ↑\n                   breakpoint\n                   (600px)\n\nCascade with Media Queries:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nCSS source order:\n.panel {\n  background: lightblue;     /* 1. Base style */\n}\n\n@media (max-width: 600px) {\n  .panel {\n    background: lightcoral;  /* 2. Override when\n  }                               condition matches */\n}\n\nWhen viewport ≤ 600px:\n  Both rules have same specificity (0,0,1,0)\n  Media query comes later → wins cascade\n  Result: lightcoral\n\nWhen viewport > 600px:\n  Media query condition false → ignored\n  Only base style applies\n  Result: lightblue\n\nCommon Media Features:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n@media (max-width: 600px)      Viewport ≤ 600px\n@media (min-width: 768px)      Viewport ≥ 768px\n@media (orientation: portrait)  Height > Width\n@media (prefers-color-scheme: dark)  OS dark mode\n@media (hover: hover)          Device has hover",
 				"containerVsItem": ""
 			},
@@ -58,7 +58,7 @@
 			"solution": "  font-size: 5vw;",
 			"previewContainer": "preview-area",
 			"concept": {
-				"explanation": "Viewport units (vw, vh, vmin, vmax) are relative units that scale proportionally with the browser window size. The vw unit means \"viewport width\"—1vw equals 1% of the viewport's width, so 5vw on a 1000px-wide screen calculates to 50px (5% of 1000px). As the user resizes the window, the browser recalculates the font size in real-time: on a 600px screen, 5vw becomes 30px; on a 1400px screen, it becomes 70px. This creates truly fluid typography that adapts smoothly without media query breakpoints. However, pure vw units can become too small on mobile or too large on wide screens, so production sites often combine vw with clamp() or calc() to set minimum and maximum bounds (e.g., clamp(16px, 5vw, 48px) keeps text readable across all devices).",
+				"explanation": "Viewport units (vw, vh, vmin, vmax) scale proportionally with the browser window—1vw equals 1% of viewport width, so 5vw on a 1000px screen equals 50px. As the user resizes, the browser recalculates in real-time: 5vw becomes 30px on a 600px screen or 70px on a 1400px screen, creating truly fluid typography without media query breakpoints. However, pure vw units can become too small on mobile or too large on wide screens. Production sites often use clamp(16px, 5vw, 48px) to set minimum and maximum bounds for readability.",
 				"diagram": "Viewport Width Units (vw)\n\nHow 5vw calculates across screen sizes:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nMobile (375px wide):\n1vw = 375px / 100 = 3.75px\n5vw = 3.75px × 5 = 18.75px\n┌──────────┐\n│   Text   │ 18.75px font\n└──────────┘\n  375px\n\nTablet (768px wide):\n1vw = 768px / 100 = 7.68px\n5vw = 7.68px × 5 = 38.4px\n┌─────────────────────┐\n│       Text          │ 38.4px font\n└─────────────────────┘\n      768px\n\nDesktop (1440px wide):\n1vw = 1440px / 100 = 14.4px\n5vw = 14.4px × 5 = 72px\n┌───────────────────────────────────────┐\n│              Text                     │ 72px font\n└───────────────────────────────────────┘\n              1440px\n\nViewport Unit Reference:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nvw   = 1% of viewport width\nvh   = 1% of viewport height\nvmin = 1% of viewport's smaller dimension\nvmax = 1% of viewport's larger dimension\n\nExample with 800px × 600px viewport:\n  1vw   = 8px   (1% of 800px)\n  1vh   = 6px   (1% of 600px)\n  1vmin = 6px   (1% of smaller: 600px)\n  1vmax = 8px   (1% of larger: 800px)\n\nProblem: Unbounded Scaling\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nPure vw can be too small or too large:\n\nMobile (320px):  font-size: 5vw → 16px   ✓ OK\nTablet (768px):  font-size: 5vw → 38px   ✓ OK\nDesktop (2560px): font-size: 5vw → 128px ✗ TOO BIG!\n\nSolution: Combine with clamp() or calc()\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nBetter approach:\nfont-size: clamp(16px, 5vw, 48px);\n                 ↓    ↓    ↓\n              minimum fluid maximum\n\nResult across viewports:\n320px  → 5vw = 16px  → clamped to 16px (min)\n768px  → 5vw = 38px  → 38px (in range)\n2560px → 5vw = 128px → clamped to 48px (max)\n\nWhen to Use Fluid Typography:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nGood: Hero headings, banners, display text\nAvoid: Body text, UI elements (use rem instead)",
 				"containerVsItem": ""
 			},
@@ -80,7 +80,7 @@
 			"solution": "  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;",
 			"previewContainer": "preview-area",
 			"concept": {
-				"explanation": "The auto-fit keyword combined with minmax() creates intrinsically responsive grids that adapt without media queries. The pattern repeat(auto-fit, minmax(200px, 1fr)) tells the browser: \"Create as many columns as will fit, where each column is at least 200px but can grow to fill available space (1fr).\" The browser calculates how many 200px columns fit in the container width, then distributes any extra space equally using the 1fr maximum. As the viewport shrinks, columns automatically reflow: 4 columns become 3, then 2, then 1—all without breakpoints. This is more flexible than fixed media queries because it adapts to the actual container size, not just the viewport (especially powerful with container queries). The key difference: auto-fit collapses empty columns to zero width, while auto-fill preserves empty column tracks.",
+				"explanation": "The auto-fit keyword combined with minmax() creates intrinsically responsive grids that adapt without media queries. The pattern repeat(auto-fit, minmax(200px, 1fr)) tells the browser to create as many columns as will fit, where each is at least 200px but can grow to 1fr. The browser calculates how many 200px columns fit, distributes extra space equally, and automatically reflows columns as the viewport shrinks (4 → 3 → 2 → 1)—all without breakpoints. The key difference: auto-fit collapses empty columns to zero width, while auto-fill preserves empty column tracks.",
 				"diagram": "Auto-Fit with Minmax: Responsive Grid Without Media Queries\n\nHow repeat(auto-fit, minmax(200px, 1fr)) works:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nContainer: 900px wide (4 items)\n\nStep 1: Calculate how many 200px columns fit\n900px ÷ 200px = 4.5 → fits 4 columns\n\nStep 2: Distribute extra space with 1fr\n900px - (4 × 200px) = 100px extra\n100px ÷ 4 columns = 25px each\nFinal: 225px per column\n\n┌──────┬──────┬──────┬──────┐\n│  1   │  2   │  3   │  4   │\n└──────┴──────┴──────┴──────┘\n 225px  225px  225px  225px\n\nResponsive Behavior Across Viewports:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nWide (900px): 4 columns\n┌─────┬─────┬─────┬─────┐\n│  1  │  2  │  3  │  4  │\n└─────┴─────┴─────┴─────┘\n 225px each (200px + extra space)\n\nMedium (650px): 3 columns\n┌──────┬──────┬──────┐\n│  1   │  2   │  3   │\n├──────┴──────┴──────┤\n│  4   │              │ ← grows to fill\n└──────┴──────────────┘\n 216px each (200px + extra)\n\nNarrow (450px): 2 columns\n┌──────────┬──────────┐\n│    1     │    2     │\n├──────────┼──────────┤\n│    3     │    4     │\n└──────────┴──────────┘\n  225px each\n\nMobile (250px): 1 column\n┌────────────────────┐\n│         1          │\n├────────────────────┤\n│         2          │\n├────────────────────┤\n│         3          │\n├────────────────────┤\n│         4          │\n└────────────────────┘\n   250px (fills width)\n\nAuto-Fit vs Auto-Fill:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nWith 3 items in 900px container:\n\nauto-fit: Collapses empty tracks to zero\n┌────────────┬────────────┬────────────┐\n│     1      │     2      │     3      │\n└────────────┴────────────┴────────────┘\n   300px        300px        300px\n   ↑ Items expand to fill empty space\n\nauto-fill: Preserves empty tracks\n┌─────┬─────┬─────┬─────┐\n│  1  │  2  │  3  │empty│ ← ghost column\n└─────┴─────┴─────┴─────┘\n 225px  225px  225px  0px (collapsed)\n\nBreakpoint Calculation:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nNatural breakpoints occur when columns reflow:\n4→3 columns: 600px (3 × 200px)\n3→2 columns: 400px (2 × 200px)\n2→1 column:  200px (1 × 200px)\n\nNo media queries needed—grid adapts automatically!",
 				"containerVsItem": "display: grid, grid-template-columns, and gap are CONTAINER properties. The auto-fit and minmax() functions define how the grid automatically creates responsive columns without requiring item-level overrides."
 			},
@@ -117,7 +117,7 @@
 			"solution": "@media (min-width: 768px) {\n  .sidebar {\n    width: 250px;\n  }\n}",
 			"previewContainer": "preview-area",
 			"concept": {
-				"explanation": "Mobile-first design means writing base CSS for mobile devices first, then using min-width media queries to progressively enhance for larger screens. This approach has three key advantages: (1) Mobile users download less CSS since desktop styles are in media queries they never trigger; (2) It forces you to prioritize core content and functionality since mobile screens have limited space; (3) The CSS cascade works in your favor—base styles apply everywhere, and larger screens simply add enhancements rather than overriding. Using @media (min-width: 768px) means \"on screens 768px or wider, add these styles\"—the opposite of max-width which removes styles as screens get smaller. This progressive enhancement pattern aligns with how users actually browse: most traffic comes from mobile, so optimize for that experience first, then layer on desktop features for users with more screen real estate.",
+				"explanation": "Mobile-first design means writing base CSS for mobile devices first, then using min-width media queries to progressively enhance for larger screens. This approach has key advantages: mobile users download less CSS (desktop styles are in media queries they never trigger), it forces content prioritization for limited mobile screens, and the CSS cascade works in your favor—base styles apply everywhere while larger screens simply add enhancements. Using @media (min-width: 768px) means \"on screens 768px or wider, add these styles\"—the opposite of max-width which removes styles as screens shrink. This progressive enhancement pattern aligns with how users browse: most traffic is mobile, so optimize for that first, then layer on desktop features.",
 				"diagram": "Mobile-First vs Desktop-First Design\n\nMobile-First (Recommended):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nBase styles (mobile):\n.sidebar {\n  width: 100%;        /* Full width on mobile */\n  padding: 1rem;\n}\n\nEnhancement for tablet+:\n@media (min-width: 768px) {\n  .sidebar {\n    width: 250px;     /* Fixed sidebar on desktop */\n    float: left;\n  }\n}\n\nFlow: Mobile → Tablet → Desktop\n      (add features as space increases)\n\n    0px              768px            1024px\n     ├────────────────┼─────────────────┼──────►\n     Base styles      + Tablet styles   + Desktop\n     (mobile)                            styles\n\nDesktop-First (Not Recommended):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nBase styles (desktop):\n.sidebar {\n  width: 250px;       /* Desktop default */\n  float: left;\n}\n\nOverrides for mobile:\n@media (max-width: 767px) {\n  .sidebar {\n    width: 100%;      /* Undo desktop styles */\n    float: none;      /* More overrides needed */\n  }\n}\n\nFlow: Desktop → Tablet → Mobile\n      (remove features as space decreases)\n\n    0px              767px            1024px\n     ├────────────────┼─────────────────┼──────►\n     Mobile overrides │  Base styles\n     (undo desktop)   │  (desktop)\n\nPerformance Benefits:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nMobile-First CSS (320px phone):\n✓ Base styles:    2KB (downloaded)\n✗ @min-width 768: 1KB (ignored, not parsed)\n✗ @min-width 1024: 1KB (ignored)\n  Total parsed:   2KB\n\nDesktop-First CSS (320px phone):\n✓ Base styles:    3KB (downloaded)\n✓ @max-width 767: 1KB (downloaded & parsed)\n  Total parsed:   4KB (2x more!)\n\nMobile users save bandwidth and parsing time.\n\nCommon Mobile-First Breakpoints:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n/* Base: Mobile (0-767px) */\n/* Full-width, stacked layout */\n\n@media (min-width: 768px) {\n  /* Tablet: Side-by-side for some elements */\n}\n\n@media (min-width: 1024px) {\n  /* Desktop: Multi-column layouts */\n}\n\n@media (min-width: 1280px) {\n  /* Large desktop: Max widths, more spacing */\n}\n\nContent Prioritization:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nMobile forces you to answer:\n\"What's ESSENTIAL for this page?\"\n\nMobile (320px):        Desktop (1280px):\n┌──────────────┐       ┌─────┬──────────┬─────┐\n│    Header    │       │ Ad  │  Header  │ User│\n├──────────────┤       ├─────┴──────────┴─────┤\n│   Content    │       │ Side │  Content │ Side│\n│   (core)     │       │ bar  │  (core)  │ bar │\n├──────────────┤       │      ├──────────┤     │\n│    Footer    │       │      │ Related  │     │\n└──────────────┘       └──────┴──────────┴─────┘\n                       ↑ Extra features added\n  Core only           when space allows\n\nWhy Min-Width Is Better:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n✓ Less CSS for mobile (faster page loads)\n✓ Progressive enhancement (build up, not tear down)\n✓ Aligns with CSS cascade (adds, not overrides)\n✓ Encourages content-first thinking\n✓ Easier to maintain (fewer conflicting rules)",
 				"containerVsItem": ""
 			},