:root { color-scheme: dark; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    background: #09090b;
    color: #d4d8df;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, monospace;
    font-size: 14px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  body { padding: 48px 24px 80px; }
  .wrap { max-width: 680px; margin: 0 auto; }

  h1 { font-size: 15px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: #eef0f3; margin-bottom: 6px; position: relative; padding-left: 14px; }
  h1::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; background: #90ecfc; }
  .updated { font-size: 11px; color: #828a98; letter-spacing: 0.12em; margin-bottom: 40px; padding-left: 14px; }

  h2 { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #eef0f3; margin: 32px 0 10px; }
  p { font-size: 13px; color: #a8afba; margin-bottom: 12px; }
  p b { color: #eef0f3; font-weight: 600; }
  ul { padding-left: 20px; margin-bottom: 12px; }
  li { font-size: 13px; color: #a8afba; margin-bottom: 4px; }

  .highlight { background: #131418; border: 1px solid #20232a; border-radius: 7px; padding: 16px 20px; margin: 16px 0; }
  .highlight p { margin-bottom: 0; color: #d4d8df; }

  a { color: #90ecfc; text-decoration: none; }
  a:hover { text-decoration: underline; }

  footer { font-size: 11px; color: #828a98; letter-spacing: 0.12em; margin-top: 48px; padding-top: 20px; border-top: 1px solid #20232a; }