@font-face { font-family: "JetBrains Mono"; src: url("JetBrainsMono.ttf") format("truetype"); font-weight: 100 800; }
:root { --bg: #fbfaf7; --ink: #1b1b1b; --muted: #5f5f6b; --line: #d9d6cf; --codebg: #eeebe3; --title: #06038d;
  --eth: #6a3fc9; --ens: #2f6fe0; --safe: #00838f; --sw: #d9730d; --boot: #d6246e; --co: #c62828; }
:root.dark { --bg: #12112a; --ink: #ececf4; --muted: #a6a6bd; --line: #33335a; --codebg: #1e1d40; --title: #ffffff;
  --eth: #b195ff; --ens: #6aa6ff; --safe: #4dd0e1; --sw: #ffa24d; --boot: #ff6fae; --co: #ff6b6b; }
@media (prefers-color-scheme: dark) { :root:not(.light) { --bg: #12112a; --ink: #ececf4; --muted: #a6a6bd; --line: #33335a; --codebg: #1e1d40; --title: #ffffff;
  --eth: #b195ff; --ens: #6aa6ff; --safe: #4dd0e1; --sw: #ffa24d; --boot: #ff6fae; --co: #ff6b6b; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 15px/1.6 "JetBrains Mono", ui-monospace, monospace; }
main { max-width: 860px; margin: 0 auto; padding: 40px 16px 64px; }
h1 { font-size: 30px; margin: 0 0 4px; color: var(--title); } h2 { font-size: 17px; margin: 36px 0 8px; color: var(--title); }
h2::before { content: "## "; color: var(--muted); }
p { margin: 8px 0; } a { color: inherit; text-underline-offset: 3px; }
pre { background: var(--codebg); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 10px 0; line-height: 1.5; }
.muted { color: var(--muted); } .eth { color: var(--eth); } .ens { color: var(--ens); } .safe { color: var(--safe); }
.sw { color: var(--sw); } .boot { color: var(--boot); font-weight: 700; } .co { color: var(--co); }
.keys { position: fixed; right: 12px; top: 10px; font-size: 12px; color: var(--muted); }
.keys b { border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--ink); }