/* Reading typography and proportions adapted from:
   https://blog.fqzlr.top/posts/tech/music-dock-three-states/
   Fonts downloaded from that page and served locally. Site chrome stays independent. */
@font-face{font-family:"Fqzlr Outfit";src:url("/assets/fonts/fqzlr-reading/14637153c8739868.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fqzlr Yozai";src:url("/assets/fonts/fqzlr-reading/3156591c22a1d91b.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:500}
@font-face{font-family:"Fqzlr Mono";src:url("/assets/fonts/fqzlr-reading/cc5f60fd46e42cc9.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Fqzlr Mono";src:url("/assets/fonts/fqzlr-reading/9161ee1cbda9cef9.woff2") format("woff2");font-display:swap;font-style:italic;font-weight:400}

body:has(.fq-article-card) {
  --fq-font:"Fqzlr Outfit","Fqzlr Yozai",system-ui,sans-serif;
  --fq-ink:#1b1b1b; --fq-text:#374151; --fq-muted:#626262;
  --fq-card:rgb(247 247 247 / .94); --fq-soft:#ededed; --fq-line:#d3d3d3; --fq-active:#dedede;
}
html.dark body:has(.fq-article-card) {
  --fq-ink:#ededed; --fq-text:#d2d4d8; --fq-muted:#aaa;
  --fq-card:rgb(31 31 31 / .95); --fq-soft:#2c2c2c; --fq-line:#454545; --fq-active:#444;
}
html body:has(#post-container) #post-container.fq-article-card,
html body .reference-site--article .reference-content.fq-article-card {
  box-sizing:border-box; min-width:0; padding:24px 36px 20px!important;
  border:0!important; border-radius:16px!important; background:var(--fq-card)!important;
  color:var(--fq-text); font-family:var(--fq-font)!important; box-shadow:none!important;
  backdrop-filter:blur(16px); overflow-wrap:anywhere;
}
html body:has(.fq-article-card) .reference-site--article #reference-main { width:calc(100% - 32px); max-width:96rem; }
html body:has(.fq-article-card) #main-grid { max-width:96rem!important; }
html body:has(#post-container) #post-container.fq-article-card .reading-heading { margin:0 0 12px; }
html body:has(#post-container) #post-container.fq-article-card [data-pagefind-meta="title"],
.fq-article-card .fq-article-title {
  position:relative; margin:0 0 16px; color:var(--fq-ink)!important;
  font-family:var(--fq-font)!important; font-size:clamp(26px,2.5vw,36px)!important;
  font-weight:700!important; line-height:1.25!important; letter-spacing:0!important; white-space:normal!important;
}
.fq-article-card .fq-article-title::before {
  content:""; position:absolute; left:-18px; top:.3em; width:4px; height:.65em;
  border-radius:2px; background:var(--fq-ink);
}
.fq-article-header { margin-bottom:24px; }
.fq-article-cover { display:block; width:100%; aspect-ratio:1.8; object-fit:cover; border-radius:12px; margin-top:24px; }
.fq-article-meta { margin:0; color:var(--fq-muted); font:14px/1.8 var(--fq-font); }
html body:has(#post-container) #post-container.fq-article-card .reading-byline { flex-wrap:wrap; overflow:visible; border:0; margin-bottom:16px; padding-bottom:0; gap:8px 16px; }
html body:has(#post-container) #post-container.fq-article-card .reading-byline :is(span,a,.text-sm,.meta-icon) { color:var(--fq-muted)!important; }
html body:has(#post-container) #post-container.fq-article-card .reading-deck { font:16px/1.75 var(--fq-font); color:var(--fq-muted); }
html body:has(#post-container) #post-container.fq-article-card .night-article-cover { aspect-ratio:1.8; border:0; border-radius:12px; margin:0 0 28px; }
html body .fq-article-card .fq-article-body,
html body:has(#post-container) #post-container.fq-article-card .fq-article-body {
  max-width:none; padding:0!important; margin:0 0 24px;
  font:400 16px/1.75 var(--fq-font)!important; color:var(--fq-text)!important; letter-spacing:0!important;
}
html body .fq-article-card .fq-article-body :is(p,li),
html body:has(#post-container) #post-container.fq-article-card .fq-article-body :is(p,li) { color:var(--fq-text)!important; font-family:inherit!important; }
html body .fq-article-card .fq-article-body p,
html body:has(#post-container) #post-container.fq-article-card .fq-article-body p { margin:0 0 20px; line-height:1.75; }
html body .fq-article-card .fq-article-body :is(h2,h3,h4),
html body:has(#post-container) #post-container.fq-article-card .fq-article-body :is(h2,h3,h4) {
  color:var(--fq-ink)!important; font-family:var(--fq-font)!important; border:0; padding:0;
  font-weight:700; line-height:1.35; scroll-margin-top:100px;
}
html body .fq-article-card .fq-article-body h2,
html body:has(#post-container) #post-container.fq-article-card .fq-article-body h2 { font-size:24px; margin:32px 0 8px; }
html body .fq-article-card .fq-article-body h3,
html body:has(#post-container) #post-container.fq-article-card .fq-article-body h3 { font-size:20px; margin:24px 0 8px; }
html body .fq-article-card .fq-article-body h4 { font-size:18px; margin:20px 0 8px; }
.fq-article-body > :first-child, .fq-article-body > section:first-child > :first-child { margin-top:0!important; }
html body .fq-article-card .fq-article-body strong { color:var(--fq-ink)!important; }
html body .fq-article-card .fq-article-body a { color:var(--fq-ink); text-decoration:underline; text-underline-offset:3px; }
html body .fq-article-card .fq-article-body :is(ul,ol) { padding-inline-start:1.6em; margin-block:16px; }
html body .fq-article-card .fq-article-body blockquote,
html body:has(#post-container) #post-container.fq-article-card .fq-article-body blockquote {
  margin:24px 0; padding:16px 20px; border:0; border-inline-start:4px solid var(--fq-line);
  border-radius:0 12px 12px 0; background:var(--fq-soft); font-style:normal;
}
.fq-article-body blockquote > :last-child { margin-bottom:0!important; }
html body .fq-article-card .fq-article-body :is(pre,code) { font-family:"Fqzlr Mono",monospace!important; }
html body .fq-article-card .fq-article-body :not(pre) > code { border-radius:5px; padding:2px 5px; color:var(--fq-ink); background:var(--fq-soft); font-size:.9em; }
html body .fq-article-card .fq-article-body pre { font-size:14px; line-height:1.65; border-radius:14px; max-width:100%; overflow:auto; }
.fq-article-body .expressive-code { --ec-brdRad:14px; --ec-frm-edBg:var(--fq-soft); margin:20px 0; }
.fq-article-body .expressive-code pre code { background:transparent!important; padding:0!important; }
html body .fq-article-card .fq-article-body table { display:block; width:100%; max-width:100%; overflow:auto; border-collapse:collapse; margin:24px 0; }
.fq-article-body :is(th,td) { border-bottom:1px solid var(--fq-line); padding:10px 14px; text-align:start; }
.fq-article-body th { color:var(--fq-ink); background:var(--fq-soft); }
.fq-article-body img { max-width:100%; height:auto; border-radius:12px; }
html body .reference-site--article .reference-article-audio { padding:0 0 20px; }
html body:has(.fq-article-card) .fq-article-toc,
html body:has(.fq-article-card) .reference-reading-toc .fq-article-toc,
html body:has(.fq-article-card) #article-toc-container.fq-article-toc {
  padding:16px!important; border:0!important; border-radius:16px!important;
  background:var(--fq-card)!important; color:var(--fq-ink); box-shadow:none!important;
  font-family:var(--fq-font)!important; backdrop-filter:blur(16px);
}
.fq-article-toc :is(h2,h3) { color:var(--fq-ink); font-family:var(--fq-font)!important; }
.fq-article-toc a[data-fq-number] {
  display:flex!important; align-items:flex-start; gap:8px; padding:8px 12px!important;
  color:var(--fq-muted)!important; border-radius:24px!important; font-size:14px!important;
  line-height:1.5!important; text-decoration:none; transition:background .16s ease;
}
.fq-article-toc a[data-fq-number]::before {
  content:attr(data-fq-number); display:grid; place-items:center; flex:0 0 20px;
  height:20px; border-radius:7px; background:var(--fq-active); color:var(--fq-ink); font:600 12px/1 system-ui;
}
.fq-article-toc a[data-fq-level="H3"], .fq-article-toc a[data-fq-level="H4"] { font-size:12px!important; padding-inline-start:22px!important; }
.fq-article-toc a[data-fq-number]:hover, .fq-article-toc a[aria-current="location"] { background:var(--fq-active)!important; color:var(--fq-ink)!important; }
.fq-article-toc a[aria-current="location"]::before { background:var(--fq-ink); color:var(--fq-card); }
.fq-article-toc a:focus-visible { outline:2px solid var(--fq-ink); outline-offset:2px; }
/* The original contents component also has important declarations in this layer. */
@layer components {
  html body:has(#post-container.fq-article-card) #post-container.fq-article-card { background:var(--fq-card)!important; border-radius:16px!important; }
  html body:has(#post-container.fq-article-card) #article-toc-content a[data-fq-number] { display:flex!important; flex-direction:row!important; font-family:var(--fq-font)!important; border:0!important; border-radius:24px!important; background:transparent!important; box-shadow:none!important; }
  html body:has(#post-container.fq-article-card) #article-toc-content a[aria-current="location"] { background:var(--fq-active)!important; }
}
@media(max-width:767px) {
  html body:has(.fq-article-card) .reference-site--article #reference-main { width:calc(100% - 16px); }
  html body:has(#post-container) #post-container.fq-article-card,
  html body .reference-site--article .reference-content.fq-article-card { padding:20px!important; border-radius:14px!important; }
  html body:has(#post-container) #post-container.fq-article-card [data-pagefind-meta="title"], .fq-article-card .fq-article-title { font-size:26px!important; line-height:1.35!important; }
  .fq-article-card .fq-article-title::before { left:-12px; width:3px; }
  html body .fq-article-card .fq-article-body, html body:has(#post-container) #post-container.fq-article-card .fq-article-body { font-size:16px!important; }
  html body .fq-article-card .fq-article-body h2, html body:has(#post-container) #post-container.fq-article-card .fq-article-body h2 { font-size:22px; }
  html body .fq-article-card .fq-article-body pre { font-size:12px; }
  html body:has(#post-container) #post-container.fq-article-card .reading-byline .post-meta-root { flex-wrap:wrap!important; }
}
@media(prefers-reduced-motion:reduce) { .fq-article-toc a[data-fq-number] { transition:none; } }
@media print { html body .fq-article-card { background:white!important; color:#1b1b1b!important; backdrop-filter:none; } .fq-article-toc { display:none!important; } }