*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f5f7fa;padding:15px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.7}.container{background-color:#fff;border-radius:12px;max-width:900px;margin:0 auto;padding:25px;box-shadow:0 4px 15px #0000001a}h1{text-align:center;color:#2c3e50;margin-bottom:20px;font-size:2.2em}h2{color:#3498db;border-bottom:2px solid #3498db;margin:25px 0 15px;padding-bottom:5px}p{margin-bottom:15px}ul,ol{margin:15px 0;padding-left:30px}li{margin-bottom:10px}.example{background-color:#e8f4fd;border-left:4px solid #3498db;border-radius:0 8px 8px 0;margin:15px 0;padding:15px}.note{color:#7f8c8d;background-color:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;margin:20px 0;padding:12px;font-style:italic}.grid-example{grid-template-columns:repeat(4,1fr);max-width:450px;margin:20px auto;font-size:30px;display:grid}.cell{color:#000;background-color:#659120;border:1px solid #000;justify-content:center;align-items:center;font-size:1.2em;font-weight:700;display:flex}.empty{background-color:#000}@media (max-width:768px){.container{margin:10px;padding:20px}h1{font-size:1.8em}.grid-example{grid-template-columns:repeat(4,1fr);max-width:100%}.cell{height:50px;font-size:1em}}@media (max-width:480px){body{padding:10px}.container{padding:15px}h1{font-size:1.5em}.grid-example{grid-template-columns:repeat(4,minmax(0,1fr))}.cell{height:40px;font-size:.9em}}