:root {
  --rose: #C25B6E;
  --rose-deep: #A04258;
  --ink: #1C1518;
  --slate: #6B5C60;
  --paper-top: #F7F2ED;
  --paper-bottom: #EADFD3;
  --surface: #ffffff;
  --stroke: rgba(216, 200, 188, 0.7);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
  min-height: 100vh;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 22px 80px; }
header.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.logo {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, #CE6678, var(--rose-deep));
  position: relative;
}
.logo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 32% 42%, #faf3ec 5.5px, transparent 6px),
    radial-gradient(circle at 50% 42%, #faf3ec 5.5px, transparent 6px),
    radial-gradient(circle at 68% 42%, #faf3ec 5.5px, transparent 6px),
    radial-gradient(circle at 50% 66%, transparent 3px, #faf3ec 3.2px, #faf3ec 5.5px, transparent 6px);
}
.brand h1 { font-size: 20px; margin: 0; letter-spacing: -0.2px; }
.brand .sub { color: var(--slate); font-size: 13px; }
h2 { font-size: 28px; letter-spacing: -0.4px; margin: 28px 0 6px; }
h3 { font-size: 18px; margin: 28px 0 6px; color: var(--rose-deep); }
.updated { color: var(--slate); font-size: 14px; margin-bottom: 8px; }
.card {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: 20px; padding: 22px 24px; margin-top: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}
a { color: var(--rose); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.muted { color: var(--slate); font-size: 14px; }
.pill {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--rose);
  background: rgba(194,91,110,0.12); border-radius: 999px; padding: 4px 12px;
}
nav.links { margin-top: 30px; font-size: 14px; }
nav.links a { margin-right: 16px; text-decoration: none; font-weight: 600; }
footer { margin-top: 48px; color: var(--slate); font-size: 13px; }