:root {
  color-scheme: light dark;
  --surface: #f6f6f3;
  --raised: #ffffff;
  --text: #171717;
  --muted: #6d6d66;
  --border: #deded8;
  --accent: #d9ff68;
  font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 24px 10px; background: var(--surface); color: var(--text); }
h1, p, blockquote { margin: 0; }
a { color: inherit; }
.frame { width: min(100%, 520px); margin: 0 auto; }
header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
header > span:last-child, .example > span, .example > p, footer { color: var(--muted); }
.brand, h1 { font-size: 18px; font-weight: 400; }
.intro { display: grid; gap: 8px; padding: 28px 0 18px; }
.intro p { color: var(--muted); max-width: 460px; }
.example { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--raised); }
blockquote { font-size: 18px; }
ol { display: grid; gap: 0; margin: 18px 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); }
li > span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--raised); }
strong { font-weight: 500; }
.privacy { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.privacy p { color: var(--muted); }
.button { display: grid; min-height: 44px; place-items: center; margin-top: 10px; border: 1px solid color-mix(in srgb, var(--accent), #000 18%); border-radius: 10px; background: var(--accent); color: #171717; text-decoration: none; }
footer { display: flex; justify-content: center; gap: 18px; padding: 20px 0 4px; font-size: 12px; }
@media (prefers-color-scheme: dark) {
  :root { --surface: #212121; --raised: #2f2f2f; --text: #f2f2f2; --muted: #b4b4b4; --border: #4a4a4a; }
}