:root {
  --bg: #0b0b0b;
  --fg: #e8e8e5;
  --muted: #92928d;
  --dim: #62625e;
  --line: #292929;
  --green: #b8f397;
  --orange: #ffb52e;
  --blue: #327dff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
header { height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 32px; gap: 30px; }
.brand { font-weight: bold; letter-spacing: .12em; color: var(--fg); text-decoration: none; }
.brand img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.brand span { color: var(--dim); font-weight: normal; letter-spacing: 0; }
nav { display: flex; gap: 22px; margin-left: auto; }
nav a, .version { color: var(--muted); text-decoration: none; font-size: 12px; }
nav a:hover, .version:hover { color: var(--fg); }
.version { border: 1px solid var(--line); padding: 4px 8px; color: var(--fg); }
.layout { display: grid; grid-template-columns: 220px minmax(0, 840px); gap: 70px; max-width: 1180px; margin: auto; padding: 0 32px; }
aside { border-right: 1px solid var(--line); padding: 38px 28px 40px 0; position: sticky; top: 0; max-height: 100vh; overflow: auto; }
.aside-title, .tag, .num { font-size: 10px; letter-spacing: .12em; color: var(--dim); }
aside > a { display: block; color: var(--muted); text-decoration: none; padding: 7px 0; font-size: 12px; }
aside > a:hover { color: var(--fg); }
.aside-foot { margin-top: 30px; color: var(--dim); font-size: 10px; line-height: 2; }
.aside-foot a { color: var(--dim); text-decoration: none; }
.aside-foot span { color: var(--green); }
main { min-width: 0; }
.intro { padding: 100px 0 110px; border-bottom: 1px solid var(--line); }
h1 { font-size: 58px; line-height: 1.05; letter-spacing: -.07em; font-weight: 500; margin: 24px 0; }
.intro p { color: var(--muted); max-width: 600px; font-size: 16px; }
.badges { display: flex; gap: 8px; margin-top: 28px; }
.badges span { border: 1px solid var(--line); padding: 5px 8px; color: var(--dim); font-size: 10px; }
.badges span:first-child { color: var(--green); border-color: #40553a; }
section:not(.intro) { display: grid; grid-template-columns: 50px 1fr; gap: 22px; padding: 68px 0; border-bottom: 1px solid var(--line); }
section > div:last-child { min-width: 0; }
h2 { font-size: 22px; font-weight: 500; margin: 0 0 20px; letter-spacing: -.03em; }
p { color: var(--muted); max-width: 680px; }
code, pre { font-family: inherit; }
pre { border: 1px solid var(--line); padding: 18px; color: var(--green); overflow: auto; margin: 25px 0; max-width: 650px; }
.dim { color: var(--dim); }
.table { border-top: 1px solid var(--line); max-width: 760px; }
.tr { display: grid; grid-template-columns: 70px 130px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.tr.head { color: var(--dim); font-size: 10px; }
.tr span:nth-child(1) { color: var(--orange); }
.tr span:nth-child(2) { color: var(--fg); }
.rules { border-top: 1px solid var(--line); max-width: 720px; }
.rules p { border-bottom: 1px solid var(--line); padding: 10px 0; margin: 0; }
.rules b { display: inline-block; width: 65px; color: var(--orange); font-weight: normal; }
.link { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--fg); }
.link:hover { color: var(--green); border-color: var(--green); }
.status { line-height: 2.2; color: var(--muted); margin: 15px 0; }
.green { color: var(--green); }
.orange { color: var(--orange); }
.blue { color: var(--blue); }
.disclaimer { border-left: 2px solid var(--line); padding-left: 14px; margin-top: 30px; color: var(--dim); font-size: 11px; }
footer { border-top: 1px solid var(--line); padding: 20px 32px; color: var(--dim); font-size: 10px; display: flex; justify-content: space-between; letter-spacing: .08em; }

@media (max-width: 800px) {
  header { padding: 0 20px; }
  nav { display: none; }
  .layout { display: block; padding: 0 20px; }
  aside { display: none; }
  .intro { padding: 75px 0; }
  .intro h1 { font-size: 44px; }
  section:not(.intro) { grid-template-columns: 35px minmax(0, 1fr); padding: 52px 0; }
  pre { max-width: 100%; }
  .tr { grid-template-columns: 45px 95px 1fr; gap: 8px; }
  footer { padding: 18px 20px; display: block; }
  footer span + span { display: block; margin-top: 8px; }
}