@font-face {
  font-family: "netfyr sans";
  src: url("fonts/0.507/netfyrsans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "netfyr sans";
  src: url("fonts/0.507/netfyrsans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "netfyr sans";
  src: url("fonts/0.507/netfyrsans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "netfyr sans";
  src: url("fonts/0.507/netfyrsans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "netfyr sans";
  src: url("fonts/0.507/netfyrsans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "netfyr mono";
  src: url("fonts/0.507/netfyrmono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "netfyr mono";
  src: url("fonts/0.507/netfyrmono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "netfyr mono";
  src: url("fonts/0.507/netfyrmono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --canvas: light-dark(#faf8f4, #211c19);
  --surface: light-dark(#fffdf9, #292420);
  --lane: light-dark(#f3f0ea, #1c1815);
  --text: light-dark(#211c19, #f7f2ea);
  --muted: light-dark(#716b62, #b7aca0);
  --border: light-dark(#e3ded6, #443b34);
  --hover: light-dark(#eeebe5, #352e28);
  --accent: light-dark(#af4d10, #ff9b53);
  --accent-soft: light-dark(#ffeadb, #442b1c);
}
body, .page-changes .diff {
  font-family: "netfyr sans", sans-serif;
  font-synthesis: none;
}
code, pre, kbd, samp, .count, .card-meta, .resource-version {
  font-family: "netfyr mono", monospace;
  font-synthesis: none;
}
::selection { background: #ffc99f; color: #211c19; }
.app-header { border-top: 3px solid #ff7a1a; }
.brand { gap: 10px; letter-spacing: -.025em; }
.brand img { width: 30px; height: 30px; }
.primary, .new > summary {
  background: #ff7a1a;
  border-color: #af4d10;
  color: #211c19;
}
.primary:hover, .new > summary:hover { background: #ff9b53; }
.card { box-shadow: none; }
.card:hover { border-color: var(--accent); }
.app-footer { flex-wrap: wrap; gap: 12px 20px; }
.app-footer .attribution { margin-right: auto; }