:root {
  --ink: #1f1b3d; --ink-2: #2d2758; --violet: #6c47ff; --violet-dark: #5634e0;
  --tint: #f6f4ff; --line: #e2dcfa; --text: #25214a; --muted: #6f6a94;
  --ui: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--ui); background: var(--tint); color: var(--text); }
body { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--ink); color: #fff; padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; display: block; }
.brand strong { font-size: 19px; letter-spacing: -.01em; }
.open-tool {
  background: var(--violet); color: #fff; text-decoration: none; font: 600 12px var(--ui);
  padding: 9px 18px; border-radius: 999px;
}
.open-tool:hover { background: var(--violet-dark); }

main { flex: 1; width: 100%; max-width: 780px; margin: 0 auto; padding: 32px 18px 48px; }
article {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px;
  line-height: 1.75; font-size: 14.5px;
}
h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.updated { color: var(--muted); font-size: 12.5px; margin: 0 0 22px; }
h2 { font-size: 17px; margin: 28px 0 6px; color: var(--ink); }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 20px; }
li { margin-bottom: 6px; }
a { color: var(--violet-dark); }
.callout {
  background: #e9f9f6; border: 1px solid #c5efe8; color: #0b6b5e; border-radius: 10px;
  padding: 12px 16px; margin: 0 0 20px;
}
.mail { font-size: 17px; font-weight: 600; }

.footer {
  background: var(--ink); color: #b9b2ea; font-size: 12px; padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap;
}
.footer nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

a:focus-visible { outline: 2px solid #a998ff; outline-offset: 2px; border-radius: 3px; }
@media (max-width: 600px) { article { padding: 22px 18px; } h1 { font-size: 24px; } }