:root {
  color-scheme: light;
  --ink: #2d2330;
  --muted: #6e626f;
  --paper: #fff9fc;
  --card: #ffffff;
  --accent: #ff6fae;
  --accent-soft: #ffe1ee;
  --line: #eedce5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, #ffe5f0 0, transparent 31rem),
    linear-gradient(180deg, var(--paper), #fff);
  font: 16px/1.68 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

header, main, footer { width: min(880px, calc(100% - 36px)); margin: 0 auto; }
header { padding: 54px 0 22px; }
main { padding-bottom: 54px; }
footer { padding: 24px 0 40px; color: var(--muted); border-top: 1px solid var(--line); }

.eyebrow { color: var(--accent); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
h1 { margin: 8px 0 10px; font-size: clamp(2rem, 7vw, 3.7rem); line-height: 1.05; letter-spacing: -.04em; }
h2 { margin: 2.2rem 0 .6rem; font-size: 1.35rem; }
p, li { color: #493d4a; }
a { color: #b72c6b; }
nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
nav a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); text-decoration: none; }
.card { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 16px 45px rgba(103, 61, 82, .08); }
.note { padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); }
.lang { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
ul { padding-left: 1.25rem; }

@media (max-width: 520px) {
  header { padding-top: 36px; }
  .card { padding: 19px; border-radius: 18px; }
}