@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
:root {
  --bg: #f1f2ee;
  --card: #e8eae7;
  --ink: #181b22;
  --grey: #5c616b;
  --line: #d0d4d5;
  --line-strong: #aab1b9;
  --accent: #3155e7;
  --accent-dark: #2442bb;
  --ember: #a44828;
  --page-gutter: clamp(24px, 5vw, 88px);
  --page-width: 1600px;
  --display: 'Barlow Condensed', Inter, sans-serif;
}
html { scrollbar-gutter: stable; }
.art-treatment { position: absolute; pointer-events: none; }
.header { position: relative; background: transparent; border: 0; }
.header-inner { position: relative; max-width: var(--page-width); min-height: 80px; padding-inline: var(--page-gutter); gap: 44px; }
.header nav { gap: 28px; }
.header nav a, .header .login { display: inline-flex; align-items: center; min-height: 44px; }
.header nav a { color: var(--ink); font: 500 14px/1.5 var(--sans); }
.header nav a:nth-child(3) { border-left: 1px solid var(--line-strong); padding-left: 28px; margin-left: 8px; }
.header nav a:hover { color: var(--accent); }
.header nav a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.header .mark { font: 650 24px/1 var(--sans); letter-spacing: -.04em; gap: 9px; }
.header .mark img { width: 32px; height: 32px; }
.header .login { color: var(--ink); font-size: 13px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.btn { border-radius: 2px; box-shadow: none; padding: 14px 18px; min-height: 48px; font-size: 14px; }
.btn.go { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.btn.go:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.text-link { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.text-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.footer { max-width: var(--page-width); width: 100%; padding: 36px var(--page-gutter) 0; border-top: 1px solid #b4a79b; }
.footer-top { margin-bottom: 28px; }
/* Shared code blocks: the landing and reading pages use the same terminal treatment. */
.code-block { max-width: 880px; background: var(--ink); color: #eef0f4; border: 1px solid #303745; border-radius: 4px; margin: 24px 0; }
.code-head { padding: 8px 16px; border-bottom: 1px solid #424b5d; color: #bbc3d2; }
.code-block pre { padding: 20px; font-size: 13px; line-height: 1.8; overflow-x: auto; }
.code-block pre code { white-space: pre-wrap; overflow-wrap: anywhere; background: transparent; color: inherit; }
.copy-btn { flex-shrink: 0; min-width: 52px; min-height: 44px; color: #bbc3d2; border: 1px solid transparent; border-radius: 2px; }
.copy-btn:hover { background: #30394a; color: white; }
.code-block :focus-visible, .code-block .copy-btn:focus-visible { outline-color: #bbc6e8; }
@media (max-width: 780px) {
  .code-block pre { font-size: 12px; padding: 16px; }
  .code-head { padding-inline: 12px; }
  .header-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; gap: 6px 16px; padding-block: 12px; }
  .header .mark { grid-column: 1; grid-row: 1; font-size: 24px; }
  .header .account-nav { grid-column: 2; grid-row: 1; justify-self: end; width: auto; margin-left: 0; }
  .header nav { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 12px; justify-content: flex-start; flex-wrap: wrap; font-size: 12px; }
  .header nav a { font-size: 12px; }
  .header nav a:nth-child(3) { border-left: 0; margin-left: 0; padding-left: 0; }
  .header .login { font-size: 12px; white-space: nowrap; }
}
@media (max-width: 380px) {
  :root { --page-gutter: 20px; }
}