:root { --bg:#fff8e7; --ink:#2b2d42; --c1:#ff6b6b; --c2:#4ecdc4; --c3:#ffd166; --c4:#6c63ff; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; font-family:"Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); padding:24px 16px; text-align:center; }
header h1 { font-size:clamp(2rem,6vw,3.5rem); margin:8px 0; }
header p { font-size:1.2rem; margin:0 0 24px; }
.back { text-align:left; max-width:900px; margin:0 auto 8px; }
.back a { color:var(--c4); font-weight:bold; text-decoration:none; font-size:1.1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; max-width:900px; margin:0 auto; }
.card { display:block; background:#fff; border:4px solid var(--c2); border-radius:24px; padding:28px 16px;
  color:inherit; text-decoration:none; box-shadow:0 6px 0 var(--c2); transition:transform .1s; }
.card:hover, .card:focus { transform:translateY(-4px); }
.card .icon { font-size:4rem; }
.card-title { font-size:1.6rem; font-weight:bold; margin-top:8px; }
.card-desc { margin-top:6px; opacity:.75; }
footer { margin-top:40px; opacity:.5; }