:root {
  --bg-top: #0B0C18;
  --bg-bottom: #120A1F;
  --surface: #181A2E;
  --stroke: #2C2F4A;
  --text: #F4F5FF;
  --muted: #A7A9C9;
  --dim: #6E7090;
  --violet: #9D7BFF;
  --pink: #FF5C8A;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.65;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 56px 22px 80px; }
.brand {
  font-size: 30px; font-weight: 800; letter-spacing: -0.5px;
  text-decoration: none; display: inline-block; margin-bottom: 8px;
}
.brand .mine { background: linear-gradient(120deg, var(--violet), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .dopa { color: #fff; }
h1 { font-size: 30px; font-weight: 800; margin: 18px 0 4px; }
.updated { color: var(--dim); font-size: 14px; margin-bottom: 32px; }
h2 { font-size: 19px; font-weight: 700; margin: 30px 0 6px; color: var(--text); }
p { color: var(--muted); margin: 0 0 12px; }
a { color: var(--violet); }
a:focus-visible {
  outline: 2px solid #d7c8ff;
  outline-offset: 3px;
  border-radius: 4px;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 4px; }
.button {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center;
  border-radius: 999px; padding: 10px 18px; text-decoration: none;
  background: linear-gradient(120deg, var(--violet), var(--pink));
  color: #fff; font-size: 14px; font-weight: 700;
}
.button.secondary { background: transparent; border: 1px solid var(--stroke); color: var(--text); }
.nav { margin-top: 8px; display: flex; gap: 18px; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.nav a:hover { color: #fff; }
.card {
  background: rgba(24,26,46,0.6); border: 1px solid var(--stroke);
  border-radius: 18px; padding: 22px; margin-top: 24px;
}
footer { margin-top: 48px; color: var(--dim); font-size: 13px;
  border-top: 1px solid var(--stroke); padding-top: 20px; }
.lead { color: var(--text); font-size: 18px; }
@media (max-width: 480px) {
  .wrap { padding-top: 36px; }
  .actions { display: grid; }
  .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}