*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Inter','Segoe UI',sans-serif;line-height:1.6;background-color:#e6f0fa;color:#1c1c1c;padding:20px}
.lesson-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding-top:20px}
.lesson{width:49%;background-color:#ffffff;border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 4px 12px rgba(42,140,255,0.1);transition:transform 0.2s, box-shadow 0.2s}
.lesson:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(42,140,255,0.2)}
.lesson img{display:block;width:100%;max-width:150px;height:auto;margin:0 auto 12px auto;border-radius:8px;object-fit:contain;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.2s ease-in-out}
.lesson h2{font-size:1.8rem;color:#111827;margin-bottom:12px}
.lesson p{margin-bottom:12px;font-size:1rem;color:#1e1e1e}
.lesson ul{margin:12px 0 12px 20px;list-style-type:disc;color:#1e1e1e}
.lesson ul li{margin-bottom:8px}
.lesson a{color:#0088cc;text-decoration:none}
.lesson a:hover{text-decoration:underline}
.lessons-wrapper{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:20px}
.nav-button{padding:10px 20px;font-size:16px;background-color:#0088cc;color:white;border:none;border-radius:8px;cursor:pointer;text-decoration:none;transition:0.2s}
.nav-button:hover{background-color:#006699}
code{background-color:rgba(0,136,204,0.1);color:#0088cc;padding:2px 6px;border-radius:4px;font-family:'Fira Code',monospace}
@media(max-width:768px){body{font-size:15px;padding:16px}.lesson{padding:16px;width:100%}.lesson h2{font-size:1.6rem}}
@media(prefers-color-scheme:dark){body{background-color:#131d2c;color:#e0e0e0}.lesson{background-color:#1f2a3a;box-shadow:0 4px 12px rgba(42,140,255,0.2)}.lesson h2{color:#ffffff}.lesson p{color:#bbb}.lesson ul{color:#bbb}.lesson a{color:#4dabff}.lesson a:hover{color:#82b1ff}.lesson img{border-radius:8px}}