:root {
  --qr-bg: #ffffff;
  --qr-surface: #ededed;
  --qr-text: #808080;
  --qr-title: #4c6084;
  --qr-rail: #4c6084;
  --qr-topbar: #4c6084;
  --qr-accent: #cdb266;
  --qr-line: #808080;
  --qr-title-font: "IBM Plex Mono", monospace;
  --qr-body-font: "IBM Plex Mono", monospace;
  --qr-ui-font: "JetBrains Mono", monospace;
  --qr-rail-width: 194px;
  --qr-main-width: 940px;
  --qr-summary-width: 320px;
  --qr-gap: 40px;
  --qr-topbar-height: 44px;
  --qr-border: 1px solid var(--qr-line);
  --qr-radius: 0;
  --qr-shadow: none;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--qr-bg);
  color: var(--qr-text);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: var(--qr-topbar-height);
  background: var(--qr-bg);
  color: var(--qr-text);
  font-family: var(--qr-body-font);
  font-size: 14px;
  line-height: 1.66;
}

.hub-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  height: var(--qr-topbar-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 28px;
  background: var(--qr-topbar);
}

.hub-topbar-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--qr-ui-font);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hub-topbar-separator {
  color: rgba(255, 255, 255, 0.58);
}

.hub-topbar-links a,
.hub-topbar-links span {
  color: inherit;
  text-decoration: none;
}

.hub-topbar-links a:hover {
  color: var(--qr-bg);
  text-decoration: underline;
  text-decoration-color: var(--qr-accent);
  text-underline-offset: 0.18em;
}

a {
  color: var(--qr-title);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--qr-accent);
  text-underline-offset: 0.18em;
}

p,
ul,
ol,
blockquote,
table {
  margin: 0;
}

ul,
ol {
  padding-left: 1.2rem;
}

li + li {
  margin-top: 0.4rem;
}

code {
  padding: 0.08em 0.32em;
  border: 1px solid color-mix(in srgb, var(--qr-title) 16%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--qr-title) 8%, #ffffff);
  font-family: var(--qr-ui-font);
  font-size: 0.88em;
  color: var(--qr-title);
  overflow-wrap: anywhere;
  word-break: break-word;
}

hr {
  border: 0;
  border-top: var(--qr-border);
}

.hub-shell {
  min-height: calc(100vh - var(--qr-topbar-height));
  display: grid;
  grid-template-columns: var(--qr-rail-width) minmax(0, var(--qr-main-width)) minmax(260px, var(--qr-summary-width));
}

.hub-shell--full {
  grid-template-columns: var(--qr-rail-width) minmax(0, 1200px);
}

.hub-shell--article {
  grid-template-columns: var(--qr-rail-width) minmax(0, 1020px) minmax(260px, 320px);
}

.hub-shell--article.hub-shell--full {
  grid-template-columns: var(--qr-rail-width) minmax(0, 1020px);
}

.hub-rail {
  position: sticky;
  top: var(--qr-topbar-height);
  height: calc(100vh - var(--qr-topbar-height));
  padding: 36px 24px;
  display: grid;
  align-content: start;
  gap: 18px;
  background: var(--qr-rail);
  color: var(--qr-bg);
}

.hub-mark,
.hub-mark:hover {
  color: var(--qr-bg);
  text-decoration: none;
}

.hub-mark {
  font-family: var(--qr-title-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.hub-rail-meta,
.hub-nav-link,
.hub-kicker,
.hub-card-meta,
.hub-panel-label,
.hub-meta-link,
.hub-source,
.hub-toc-link {
  font-family: var(--qr-ui-font);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-rail-meta {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--qr-accent);
  color: rgba(255, 255, 255, 0.85);
}

.hub-nav {
  display: grid;
  gap: 10px;
}

.hub-nav-link {
  display: block;
  padding: 0 0 10px;
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  text-align: right;
}

.hub-nav-link.is-active {
  color: var(--qr-accent);
}

.hub-main {
  min-width: 0;
  padding: 56px 72px 88px;
  display: grid;
  align-content: start;
  gap: var(--qr-gap);
}

.hub-shell--full .hub-main {
  max-width: 1020px;
}

.hub-shell--article .hub-main {
  max-width: 1020px;
}

.hub-summary {
  min-width: 0;
  padding: 56px 40px 88px 12px;
  display: grid;
  align-content: start;
  gap: 22px;
}

.hub-hero {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: var(--qr-border);
}

.hub-kicker {
  color: var(--qr-text);
}

.hub-hero h1 {
  margin: 0;
  max-width: 12ch;
  color: var(--qr-title);
  font-family: var(--qr-title-font);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.hub-shell--article .hub-hero h1 {
  max-width: 42ch;
  width: auto;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  overflow-wrap: anywhere;
  word-break: normal;
}

.hub-lead {
  max-width: 60ch;
}

.hub-shell--article .hub-lead {
  max-width: 72ch;
  font-family: var(--qr-ui-font);
  font-size: 16px;
  line-height: 1.58;
  color: #6f6f6f;
  letter-spacing: -0.01em;
}

.hub-article-date,
.hub-card-date {
  color: var(--qr-text);
  font-family: var(--qr-ui-font);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hub-article-date {
  margin-top: -4px;
}

.hub-section,
.hub-article {
  min-width: 0;
  display: grid;
  gap: 32px;
}

.hub-article img {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--qr-border);
}

.hub-article--markdown-reader {
  gap: 0;
}

.hub-md-window {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--qr-rail) 38%, transparent);
  background:
    linear-gradient(180deg, rgba(76, 96, 132, 0.08), transparent 160px),
    #fbfbf8;
  box-shadow: 0 18px 60px rgba(39, 46, 59, 0.08);
  overflow: hidden;
}

.hub-md-window-bar {
  min-height: 42px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: var(--qr-border);
  background: #eef1f5;
  color: var(--qr-title);
  font-family: var(--qr-ui-font);
  font-size: 12px;
  line-height: 1.3;
}

.hub-md-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--qr-accent);
  box-shadow:
    18px 0 0 rgba(76, 96, 132, 0.72),
    36px 0 0 rgba(132, 132, 132, 0.45);
  flex: 0 0 auto;
}

.hub-md-path {
  margin-left: 34px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-md-lines {
  padding: 24px 0;
  display: grid;
  font-family: var(--qr-ui-font);
  font-size: 14px;
  line-height: 1.7;
  color: #4c4f55;
}

.hub-md-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  padding: 0 24px 0 0;
}

.hub-md-line:hover {
  background: rgba(76, 96, 132, 0.06);
}

.hub-md-line-number {
  color: rgba(76, 96, 132, 0.42);
  text-align: right;
  user-select: none;
}

.hub-md-code {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hub-md-line.is-heading .hub-md-code {
  color: var(--qr-title);
  font-weight: 700;
}

.hub-md-line.is-title {
  padding-top: 4px;
  padding-bottom: 8px;
}

.hub-md-line.is-title .hub-md-code {
  color: var(--qr-title);
  font-family: var(--qr-title-font);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.hub-md-line.is-meta .hub-md-code {
  color: var(--qr-title);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-md-line.is-list .hub-md-code {
  color: #5e5e5e;
}

.hub-md-line.is-quote .hub-md-code {
  max-width: 72ch;
  color: #6f6f6f;
  font-size: 16px;
  line-height: 1.58;
}

.hub-md-line.is-fence .hub-md-code {
  color: #9a6a1c;
}

.hub-md-line.is-figure {
  padding-top: 8px;
  padding-bottom: 10px;
}

.hub-md-line.is-figure:hover {
  background: transparent;
}

.hub-md-figure-preview {
  margin: 0;
  display: grid;
  width: min(100%, 920px);
  gap: 10px;
}

.hub-md-figure-preview img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--qr-rail) 28%, transparent);
  background: #fff;
}

.hub-md-figure-preview figcaption {
  max-width: none;
  color: var(--qr-text);
  font-size: 12px;
  line-height: 1.55;
}

.hub-figure {
  margin: 0;
  display: grid;
  gap: 10px;
}

.hub-figure figcaption {
  font-family: var(--qr-ui-font);
  font-size: 12px;
  line-height: 1.55;
  color: var(--qr-text);
}

.hub-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px;
  align-items: start;
}

.hub-index-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.hub-index-file .hub-md-window {
  height: 100%;
}

.hub-index-file .hub-md-window-bar {
  min-height: 34px;
}

.hub-index-file .hub-md-lines {
  padding: 14px 0 16px;
  font-size: 13px;
  line-height: 1.5;
}

.hub-index-file .hub-md-line {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  padding-right: 20px;
}

.hub-index-file .hub-md-line.is-title .hub-md-code {
  font-size: 22px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.hub-index-file .hub-md-line.is-quote .hub-md-code {
  max-width: none;
  font-size: 13px;
  line-height: 1.58;
}

.hub-index-file .hub-md-line.is-list .hub-md-code {
  max-width: 86ch;
  color: var(--qr-title);
}

.hub-card,
.hub-panel {
  min-width: 0;
  border: var(--qr-border);
  background: var(--qr-bg);
  padding: 22px 24px;
  display: grid;
  gap: 10px;
}

.hub-card h2 {
  margin: 0;
  color: var(--qr-title);
  font-family: var(--qr-title-font);
  font-size: 22px;
  line-height: 1.12;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hub-card h2 a {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hub-link-list {
  margin: 6px 0 0;
  padding-left: 1rem;
}

.hub-panel {
  gap: 12px;
}

.hub-panel-label {
  color: var(--qr-title);
}

.hub-panel > p:not(.hub-panel-label),
.hub-panel li {
  font-size: 14px;
  line-height: 1.58;
}

.hub-meta-link,
.hub-source,
.hub-toc-link {
  display: block;
}

.hub-source {
  color: var(--qr-text);
  text-transform: none;
  letter-spacing: 0;
}

.hub-toc-link.is-child {
  padding-left: 12px;
}

.hub-article > section {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.hub-article h2,
.hub-article h3 {
  margin: 0;
  color: var(--qr-title);
  font-family: var(--qr-title-font);
  font-weight: 600;
}

.hub-article h2 {
  font-size: 22px;
  line-height: 1.12;
  padding-top: 16px;
  border-top: var(--qr-border);
}

.hub-shell--article .hub-article > section:first-child h2 {
  padding-top: 16px;
  border-top: var(--qr-border);
}

.hub-article h3 {
  font-size: 18px;
  line-height: 1.18;
}

.hub-article blockquote {
  padding: 14px 16px;
  background: var(--qr-surface);
  border-left: 3px solid var(--qr-accent);
}

.hub-article table {
  width: 100%;
  border-collapse: collapse;
}

.hub-article th,
.hub-article td {
  border: var(--qr-border);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}

.hub-article th {
  color: var(--qr-title);
  font-family: var(--qr-ui-font);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-signature {
  margin-top: 12px;
  padding-top: 20px;
  border-top: var(--qr-border);
  display: grid;
  gap: 10px;
  max-width: none;
}

.hub-signature--compact {
  margin-top: 10px;
}

.hub-signature-name {
  color: var(--qr-title);
  font-family: var(--qr-title-font);
  font-size: 18px;
  line-height: 1.15;
  font-weight: 600;
}

.hub-signature-line {
  color: var(--qr-text);
  font-family: var(--qr-ui-font);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hub-signature-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--qr-text);
  font-family: var(--qr-ui-font);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.hub-signature-links a,
.hub-signature-links span {
  color: inherit;
}

@media (max-width: 1240px) {
  .hub-shell {
    grid-template-columns: var(--qr-rail-width) minmax(0, 1fr);
  }

  .hub-shell--full {
    grid-template-columns: var(--qr-rail-width) minmax(0, 1fr);
  }

  .hub-summary {
    grid-column: 2;
    padding: 0 72px 88px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 920px) {
  .hub-topbar {
    padding: 4px 16px;
    justify-content: center;
  }

  .hub-topbar-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 8px;
    align-content: center;
    text-align: center;
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }

  .hub-topbar-links a,
  .hub-topbar-links span {
    overflow-wrap: anywhere;
  }

  .hub-shell {
    min-height: auto;
    align-content: start;
    grid-template-columns: 1fr;
  }

  .hub-shell--article.hub-shell--full {
    grid-template-columns: 1fr;
  }

  .hub-rail {
    position: static;
    height: auto;
    align-self: start;
    padding: 24px 28px;
  }

  .hub-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
  }

  .hub-nav-link {
    padding-bottom: 6px;
  }

  .hub-main {
    padding: 32px 28px 40px;
  }

  .hub-shell--article .hub-hero h1 {
    max-width: none;
  }

  .hub-summary {
    display: none;
  }

  .hub-card-grid {
    grid-template-columns: 1fr;
  }

  .hub-md-lines {
    font-size: 13px;
  }

  .hub-md-line {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding-right: 16px;
  }
}

@media (max-width: 640px) {
  .hub-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .hub-hero h1 {
    max-width: none;
  }

  .hub-shell--article .hub-hero h1 {
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.02;
  }

  .hub-signature-line {
    white-space: normal;
  }

  .hub-md-window-bar {
    padding: 0 14px;
  }

  .hub-index-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hub-index-file {
    min-width: 0;
  }

  .hub-index-file .hub-md-line {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding-right: 12px;
  }

  .hub-md-lines {
    padding: 18px 0;
    font-size: 12px;
    line-height: 1.62;
  }

  .hub-md-line {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding-right: 12px;
  }
}