:root{
  --bg1:#ffd6e8;         /* soft pink 1 */
  --bg2:#ffe6f2;         /* soft pink 2 */
  --card:#fff0f6;        /* light pink card */
  --text:#4a2b3f;        /* warm mauve text */
  --accent:#ff4da6;      /* bright accent pink */
  --border:#ffcade;      /* gentle border pink */
  --shadow:rgba(255,128,170,.22);
  --shadow-lg:rgba(255,128,170,.30);
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  display:flex;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{
  margin:auto;
  max-width:980px;
  width:100%;
  padding:40px 20px;
  text-align:center;
}

h1{
  font-size:clamp(28px,4vw,42px);
  margin:0 0 28px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--accent);
  text-shadow:1px 1px 4px rgba(255,77,166,.28);
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

@media (max-width:700px){
  .grid{ grid-template-columns:1fr }
}

.card{
  display:block;
  padding:28px 22px;
  background:var(--card);
  border-radius:20px;
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--border);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 4px 10px var(--shadow);
  outline:none;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px var(--shadow-lg);
  border-color:#ff99cc;
}

.card:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

.label{
  font-size:20px;
  font-weight:800;
  color:var(--accent);
  letter-spacing:.2px;
}

.footnote{
  margin-top:22px;
  opacity:.75;
  font-size:.9rem;
}

code{
  background:#fff;
  padding:.15rem .35rem;
  border-radius:8px;
  border:1px solid var(--border);
}

/* accessibility helpers */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important }
}