:root{--bg:#eef6ff;--ink:#22304a;--shadow:0 6px 0 rgba(0,0,0,.12)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:700 clamp(22px,5vw,32px)/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:900px;margin:0 auto;padding:24px 16px 40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:240px;border-radius:32px;color:#fff;text-decoration:none;box-shadow:var(--shadow);-webkit-tap-highlight-color:transparent;transition:transform .1s}
.tile:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.tile:focus-visible{outline:6px solid var(--ink);outline-offset:4px}
.tile .pic{font-size:clamp(90px,22vw,130px);line-height:1}
.tile:nth-child(4n+1){background:#ff8a65}.tile:nth-child(4n+2){background:#4db6ac}
.tile:nth-child(4n+3){background:#7986cb}.tile:nth-child(4n+4){background:#f2a93b}