:root{--bg:#fff;--fg:#000;--muted:#6b6b6b;--card:#fff;--card-border:#e6e6e6;--disabled-bg:#f2f2f2}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;-webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center}
.wrap{width:100%;max-width:420px;padding:clamp(16px,6vw,32px)}
.cards{display:flex;flex-direction:column;gap:16px}
.card{display:block;background:var(--card);border:1px solid var(--card-border);padding:clamp(14px,4vw,20px);border-radius:12px;text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease}
.card:hover{transform:translateY(-3px)}
.card h2{margin:0 0 .4em;font-size:clamp(18px,4.2vw,20px)}
.card p{margin:0;color:var(--muted);font-size:clamp(14px,3.6vw,16px);line-height:1.35}
.card.disabled{background:var(--disabled-bg);color:var(--muted);opacity:0.9;cursor:not-allowed}
.card.disabled:hover{transform:none}
@media (prefers-reduced-motion:reduce){.card{transition:none}}
@media (min-height:800px){.wrap{padding:40px}}

/* H1 styled like a card but without border, centered both axes */
.card.h1{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--card);
  padding:clamp(14px,4vw,20px);
  border-radius:12px;
  border:none;
  color:inherit;
  font-size:clamp(28px,5vw,32px);
  font-weight:600;
}
.card.h1:hover{transform:none}