.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.card{padding:15px;border:1px solid #ddd;border-radius:8px;cursor:pointer;background:#fff;transition:.2s;text-align:center;box-shadow:0 2px 6px #00000014}.card:hover{background:#f9f9f9;transform:scale(1.03)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-in-out}.modal{background:#fff;padding:15px 20px;border-radius:12px;max-width:300px;width:85%;text-align:center;box-shadow:0 6px 20px #0003;animation:scaleIn .25s ease-in-out;position:relative}.modal h2{margin-bottom:10px;font-size:1.2rem}.modal p{font-size:.95rem;color:#555;margin-bottom:15px}.modal button{background:#007bff;color:#fff;border:none;border-radius:6px;padding:8px 15px;cursor:pointer;transition:background .2s}.modal button:hover{background:#0056b3}.modal .close-btn{position:absolute;top:8px;right:10px;font-size:18px;cursor:pointer;color:#666}.modal .close-btn:hover{color:#000}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.box-grid{display:flex;flex-direction:column;gap:15px;margin:20px 0;align-items:center}.box{width:100%;max-width:80%;padding:10px;border:2px solid #ddd;border-radius:10px;cursor:pointer;transition:.2s;background:#f9f9f9;font-size:1.5rem;font-weight:700;text-align:center}.box:hover{background:#e6f0ff;border-color:#007bff}.box.selected{background:#007bff;color:#fff;border-color:#0056b3;transform:scale(1.05)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}