@font-face {
  font-family: Barlow;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-700.woff2") format("woff2");
}
:root {
  --bg: #07090c;
  --panel: #0f141a;
  --line: #25303c;
  --txt: #e6e9ec;
  --mut: #8a97a5;
  --y: #ffe500;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 50% -10%, #1a1405 0%, transparent 60%),
    var(--bg);
  color: var(--txt);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}
a { color: var(--y); }
.wrap { width: min(720px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 48px; }
.top {
  display: flex; align-items: center; gap: 12px; padding: 18px 0 22px;
  border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.top img { width: 32px; height: 32px; }
.top .brand { font-family: Barlow, sans-serif; font-weight: 700; letter-spacing: .04em; color: var(--txt); text-decoration: none; }
.top small { display: block; color: var(--mut); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--y);
  padding: 18px 18px 22px;
}
h1 { font-family: Barlow, sans-serif; font-size: 22px; letter-spacing: .04em; margin-bottom: 14px; }
h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--y); margin: 18px 0 8px; }
p, li { color: #c5ced6; font-size: 14px; margin-bottom: 10px; }
ul { padding-left: 1.2em; margin-bottom: 12px; }
.nav { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 22px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav a { text-decoration: underline; text-underline-offset: 3px; }
.disc { margin-top: 18px; font-size: 12px; color: var(--mut); }
code { color: var(--txt); font-size: 0.92em; }