:root { --paper:#f8f8f2; --ink:#20201e; --muted:#77786f; --lilac:#dcd0f6; --coral:#ff775c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink);
  font: 16px/1.6 "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width:640px; margin:0 auto; padding:40px 16px 56px; }
a { color:var(--ink); text-decoration-color:var(--coral); text-underline-offset:3px; }
.brand { font-weight:700; font-size:34px; letter-spacing:-2px; margin:0 0 24px; }
.brand a { text-decoration:none; }
.brand span { color:var(--coral); }
.mascot { display:block; width:160px; height:160px; margin:0 auto 16px; }
.label { font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:12px; letter-spacing:.6px; margin:0 0 6px; }
h1 { font-size:26px; letter-spacing:-.8px; line-height:1.25; margin:0 0 8px; }
h2 { font-size:18px; letter-spacing:-.4px; margin:32px 0 6px; }
ul { padding-left:20px; }
li { margin-bottom:8px; }
.muted { color:var(--muted); font-size:14px; }
.card { position:relative; overflow:hidden; background:var(--lilac); border:1px solid #b9bdb0; border-radius:9px; padding:17px; margin:20px 0 8px; }
.card::before { content:""; position:absolute; top:0; right:0; width:140px; height:110px; pointer-events:none;
  background-image:radial-gradient(var(--ink) .65px, transparent .7px); background-size:5px 5px;
  -webkit-mask-image:radial-gradient(circle at top right, rgba(0,0,0,.18), transparent 70%);
  mask-image:radial-gradient(circle at top right, rgba(0,0,0,.18), transparent 70%); }
.card p { position:relative; margin:0 0 8px; }
.card p:last-child { margin:0; }