/* Hardhacker palette: https://github.com/hardhackerlabs/theme */
:root {
  --bg: #282433;
  --bg-deep: #1f1c29;
  --line: #3f3951;
  --fg: #eee9fc;
  --comment: #938aad;
  --red: #e965a5;
  --green: #b1f2a7;
  --yellow: #ebde76;
  --blue: #b1baf4;
  --purple: #e192ef;
  --cyan: #b3f4f3;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-800-normal.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-400-italic.woff2) format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
/* Without JS, browsers that support it cross-fade between pages instead of flashing. */
@view-transition { navigation: auto; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-deep);
  color: var(--fg);
  font: 400 15px/1.75 var(--mono);
}
::selection { background: var(--line); }

.window {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top);
  min-height: 40px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--comment);
  white-space: nowrap;
}
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.dots i:nth-child(1) { background: var(--red); }
.dots i:nth-child(2) { background: var(--yellow); }
.dots i:nth-child(3) { background: var(--green); }
.tabs {
  align-self: stretch;
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--comment);
  text-decoration: none;
  border-right: 1px solid var(--line);
  border-top: 2px solid transparent;
  white-space: nowrap;
}
.tab:first-child { border-left: 1px solid var(--line); }
.tab:hover { color: var(--fg); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.tab.active {
  color: var(--fg);
  background: var(--bg);
  border-top-color: var(--purple);
  margin-bottom: -1px;
}
.crumbs { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.crumbs:empty { display: none; }

.md { flex: 1; width: 100%; max-width: 920px; padding: 36px clamp(16px, 5vw, 64px) 48px; }
.md > :first-child { margin-top: 0; }

.md h1, .md h2, .md h3 { line-height: 1.3; text-wrap: balance; scroll-margin-top: 16px; }
.md h1 { font-size: clamp(24px, 5vw, 30px); font-weight: 800; color: var(--purple); margin: 0 0 18px; }
.md h2 { font-size: 19px; font-weight: 800; color: var(--red); margin: 40px 0 12px; }
.md h3 { font-size: 16px; font-weight: 600; color: var(--blue); margin: 28px 0 8px; }
.md .hash { color: var(--comment); text-decoration: none; opacity: .55; font-weight: 400; }
.md .hash:hover { opacity: 1; }

.md p { margin: 0 0 14px; }
.md em { color: var(--comment); }
.md strong { color: var(--yellow); font-weight: 600; }
.md strong::before, .md strong::after { content: "**"; color: var(--comment); opacity: .45; font-weight: 400; }
.md code { color: var(--green); background: var(--bg-deep); padding: 1px 6px; border-radius: 4px; }

.md a { color: var(--cyan); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cyan) 40%, transparent); text-underline-offset: 3px; }
.md a:hover { color: var(--red); text-decoration-color: var(--red); }
.md strong a { color: inherit; }

.md ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
.md li { position: relative; padding-left: 22px; margin: 6px 0; }
.md li::before { content: "-"; position: absolute; left: 4px; color: var(--purple); }

.md hr { border: 0; margin: 40px 0; text-align: center; height: 1.75em; }
.md hr::before { content: "---"; color: var(--comment); opacity: .6; }

.md table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.md th, .md td { text-align: left; padding: 8px 12px; border: 1px solid var(--line); vertical-align: top; }
.md td:first-child { white-space: nowrap; color: var(--comment); }
.md th { color: var(--blue); font-weight: 600; background: var(--bg-deep); }


@media (max-width: 520px) {
  .dots { display: none; }
  .tab { padding: 0 10px; }
  .crumbs { display: none; }
  .md table { font-size: 13px; }
  .md th, .md td { white-space: normal; padding: 6px 8px; }
}