@layer quire, plugin, site;
/* --- scale --- */
@layer quire {
:root {
  --qr-text-root: 16px;
  --qr-col: 21rem;
  --qr-gutter: 1.5rem;
  --qr-measure: 744px;
  --qr-thumb: 4rem;
  --qr-nav-columns: 1fr auto 1fr;
  --qr-nav-links-column: 2;
  --qr-nav-end-column: 3;
  --qr-nav-justify: center;
  --qr-measure-wide: 1104px;
  --qr-bleed: calc(50% - 50cqw);
}
}

/* --- fonts --- */
@layer quire {
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_quire/fonts/inter-latin-ext.woff2?h=34b9c504cab7a73e37b746343a449132") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_quire/fonts/inter-latin.woff2?h=3100e775e8616cd2611beecfa23a4263") format("woff2");
  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: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/_quire/fonts/jetbrains-mono-latin-ext.woff2?h=79bfdab9ba467e26eea4122e6f2567e1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/_quire/fonts/jetbrains-mono-latin.woff2?h=18be452724bfdc236c074ca94a249a7f") format("woff2");
  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;
}

:root {
  --qr-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --qr-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
}

/* --- palette --- */
@layer quire {
:root {
  --qr-neutral-1: #111110;
  --qr-neutral-2: #191918;
  --qr-neutral-3: #222221;
  --qr-neutral-4: #2a2a28;
  --qr-neutral-5: #31312e;
  --qr-neutral-6: #3b3a37;
  --qr-neutral-7: #494844;
  --qr-neutral-8: #62605b;
  --qr-neutral-9: #6f6d66;
  --qr-neutral-10: #7c7b74;
  --qr-neutral-11: #b5b3ad;
  --qr-neutral-12: #eeeeec;
  --qr-neutral-contrast: #fff;
  --qr-accent-1: #17120e;
  --qr-accent-2: #1e160f;
  --qr-accent-3: #331e0b;
  --qr-accent-4: #462100;
  --qr-accent-5: #562800;
  --qr-accent-6: #66350c;
  --qr-accent-7: #7e451d;
  --qr-accent-8: #a35829;
  --qr-accent-9: #f76b15;
  --qr-accent-10: #ff801f;
  --qr-accent-11: #ffa057;
  --qr-accent-12: #ffe0c2;
  --qr-accent-contrast: #fff;
  --qr-spot-1: #14120b;
  --qr-spot-2: #1b180f;
  --qr-spot-3: #2d2305;
  --qr-spot-4: #362b00;
  --qr-spot-5: #433500;
  --qr-spot-6: #524202;
  --qr-spot-7: #665417;
  --qr-spot-8: #836a21;
  --qr-spot-9: #ffe629;
  --qr-spot-10: #ffff57;
  --qr-spot-11: #f5e147;
  --qr-spot-12: #f6eeb4;
  --qr-spot-contrast: #14120b;
  --qr-swatch1-1: #17120e;
  --qr-swatch1-2: #1e160f;
  --qr-swatch1-3: #331e0b;
  --qr-swatch1-4: #462100;
  --qr-swatch1-5: #562800;
  --qr-swatch1-6: #66350c;
  --qr-swatch1-7: #7e451d;
  --qr-swatch1-8: #a35829;
  --qr-swatch1-9: #f76b15;
  --qr-swatch1-10: #ff801f;
  --qr-swatch1-11: #ffa057;
  --qr-swatch1-12: #ffe0c2;
  --qr-swatch1-contrast: #fff;
  --qr-swatch2-1: #181111;
  --qr-swatch2-2: #1f1513;
  --qr-swatch2-3: #391714;
  --qr-swatch2-4: #4e1511;
  --qr-swatch2-5: #5e1c16;
  --qr-swatch2-6: #6e2920;
  --qr-swatch2-7: #853a2d;
  --qr-swatch2-8: #ac4d39;
  --qr-swatch2-9: #e54d2e;
  --qr-swatch2-10: #ec6142;
  --qr-swatch2-11: #ff977d;
  --qr-swatch2-12: #fbd3cb;
  --qr-swatch2-contrast: #fff;
  --qr-swatch3-1: #16120c;
  --qr-swatch3-2: #1d180f;
  --qr-swatch3-3: #302008;
  --qr-swatch3-4: #3f2700;
  --qr-swatch3-5: #4d3000;
  --qr-swatch3-6: #5c3d05;
  --qr-swatch3-7: #714f19;
  --qr-swatch3-8: #8f6424;
  --qr-swatch3-9: #ffc53d;
  --qr-swatch3-10: #ffd60a;
  --qr-swatch3-11: #ffca16;
  --qr-swatch3-12: #ffe7b3;
  --qr-swatch3-contrast: #16120c;
  --qr-swatch4-1: #12110f;
  --qr-swatch4-2: #1c1816;
  --qr-swatch4-3: #28211d;
  --qr-swatch4-4: #322922;
  --qr-swatch4-5: #3e3128;
  --qr-swatch4-6: #4d3c2f;
  --qr-swatch4-7: #614a39;
  --qr-swatch4-8: #7c5f46;
  --qr-swatch4-9: #ad7f58;
  --qr-swatch4-10: #b88c67;
  --qr-swatch4-11: #dbb594;
  --qr-swatch4-12: #f2e1ca;
  --qr-swatch4-contrast: #fff;
  --qr-red-1: #181111;
  --qr-red-2: #1f1513;
  --qr-red-3: #391714;
  --qr-red-4: #4e1511;
  --qr-red-5: #5e1c16;
  --qr-red-6: #6e2920;
  --qr-red-7: #853a2d;
  --qr-red-8: #ac4d39;
  --qr-red-9: #e54d2e;
  --qr-red-10: #ec6142;
  --qr-red-11: #ff977d;
  --qr-red-12: #fbd3cb;
  --qr-red-contrast: #fff;
  --qr-green-1: #0e1511;
  --qr-green-2: #141a15;
  --qr-green-3: #1b2a1e;
  --qr-green-4: #1d3a24;
  --qr-green-5: #25482d;
  --qr-green-6: #2d5736;
  --qr-green-7: #366740;
  --qr-green-8: #3e7949;
  --qr-green-9: #46a758;
  --qr-green-10: #53b365;
  --qr-green-11: #71d083;
  --qr-green-12: #c2f0c2;
  --qr-green-contrast: #fff;
  --qr-amber-1: #16120c;
  --qr-amber-2: #1d180f;
  --qr-amber-3: #302008;
  --qr-amber-4: #3f2700;
  --qr-amber-5: #4d3000;
  --qr-amber-6: #5c3d05;
  --qr-amber-7: #714f19;
  --qr-amber-8: #8f6424;
  --qr-amber-9: #ffc53d;
  --qr-amber-10: #ffd60a;
  --qr-amber-11: #ffca16;
  --qr-amber-12: #ffe7b3;
  --qr-amber-contrast: #16120c;
  color-scheme: dark;
}

[data-theme="light"] {
  --qr-neutral-1: #fdfdfc;
  --qr-neutral-2: #f9f9f8;
  --qr-neutral-3: #f1f0ef;
  --qr-neutral-4: #e9e8e6;
  --qr-neutral-5: #e2e1de;
  --qr-neutral-6: #dad9d6;
  --qr-neutral-7: #cfceca;
  --qr-neutral-8: #bcbbb5;
  --qr-neutral-9: #8d8d86;
  --qr-neutral-10: #82827c;
  --qr-neutral-11: #63635e;
  --qr-neutral-12: #21201c;
  --qr-accent-1: #fefcfb;
  --qr-accent-2: #fff7ed;
  --qr-accent-3: #ffefd6;
  --qr-accent-4: #ffdfb5;
  --qr-accent-5: #ffd19a;
  --qr-accent-6: #ffc182;
  --qr-accent-7: #f5ae73;
  --qr-accent-8: #ec9455;
  --qr-accent-9: #f76b15;
  --qr-accent-10: #ef5f00;
  --qr-accent-11: #cc4e00;
  --qr-accent-12: #582d1d;
  --qr-spot-1: #fdfdf9;
  --qr-spot-2: #fefce9;
  --qr-spot-3: #fffab8;
  --qr-spot-4: #fff394;
  --qr-spot-5: #ffe770;
  --qr-spot-6: #f3d768;
  --qr-spot-7: #e4c767;
  --qr-spot-8: #d5ae39;
  --qr-spot-9: #ffe629;
  --qr-spot-10: #ffdc00;
  --qr-spot-11: #9e6c00;
  --qr-spot-12: #473b1f;
  --qr-swatch1-1: #fefcfb;
  --qr-swatch1-2: #fff7ed;
  --qr-swatch1-3: #ffefd6;
  --qr-swatch1-4: #ffdfb5;
  --qr-swatch1-5: #ffd19a;
  --qr-swatch1-6: #ffc182;
  --qr-swatch1-7: #f5ae73;
  --qr-swatch1-8: #ec9455;
  --qr-swatch1-9: #f76b15;
  --qr-swatch1-10: #ef5f00;
  --qr-swatch1-11: #cc4e00;
  --qr-swatch1-12: #582d1d;
  --qr-swatch2-1: #fffcfc;
  --qr-swatch2-2: #fff8f7;
  --qr-swatch2-3: #feebe7;
  --qr-swatch2-4: #ffdcd3;
  --qr-swatch2-5: #ffcdc2;
  --qr-swatch2-6: #fdbdaf;
  --qr-swatch2-7: #f5a898;
  --qr-swatch2-8: #ec8e7b;
  --qr-swatch2-9: #e54d2e;
  --qr-swatch2-10: #dd4425;
  --qr-swatch2-11: #d13415;
  --qr-swatch2-12: #5c271f;
  --qr-swatch3-1: #fefdfb;
  --qr-swatch3-2: #fefbe9;
  --qr-swatch3-3: #fff7c2;
  --qr-swatch3-4: #ffee9c;
  --qr-swatch3-5: #fbe577;
  --qr-swatch3-6: #f3d673;
  --qr-swatch3-7: #e9c162;
  --qr-swatch3-8: #e2a336;
  --qr-swatch3-9: #ffc53d;
  --qr-swatch3-10: #ffba18;
  --qr-swatch3-11: #ab6400;
  --qr-swatch3-12: #4f3422;
  --qr-swatch4-1: #fefdfc;
  --qr-swatch4-2: #fcf9f6;
  --qr-swatch4-3: #f6eee7;
  --qr-swatch4-4: #f0e4d9;
  --qr-swatch4-5: #ebdaca;
  --qr-swatch4-6: #e4cdb7;
  --qr-swatch4-7: #dcbc9f;
  --qr-swatch4-8: #cea37e;
  --qr-swatch4-9: #ad7f58;
  --qr-swatch4-10: #a07553;
  --qr-swatch4-11: #815e46;
  --qr-swatch4-12: #3e332e;
  --qr-red-1: #fffcfc;
  --qr-red-2: #fff8f7;
  --qr-red-3: #feebe7;
  --qr-red-4: #ffdcd3;
  --qr-red-5: #ffcdc2;
  --qr-red-6: #fdbdaf;
  --qr-red-7: #f5a898;
  --qr-red-8: #ec8e7b;
  --qr-red-9: #e54d2e;
  --qr-red-10: #dd4425;
  --qr-red-11: #d13415;
  --qr-red-12: #5c271f;
  --qr-green-1: #fbfefb;
  --qr-green-2: #f5fbf5;
  --qr-green-3: #e9f6e9;
  --qr-green-4: #daf1db;
  --qr-green-5: #c9e8ca;
  --qr-green-6: #b2ddb5;
  --qr-green-7: #94ce9a;
  --qr-green-8: #65ba74;
  --qr-green-9: #46a758;
  --qr-green-10: #3e9b4f;
  --qr-green-11: #2a7e3b;
  --qr-green-12: #203c25;
  --qr-amber-1: #fefdfb;
  --qr-amber-2: #fefbe9;
  --qr-amber-3: #fff7c2;
  --qr-amber-4: #ffee9c;
  --qr-amber-5: #fbe577;
  --qr-amber-6: #f3d673;
  --qr-amber-7: #e9c162;
  --qr-amber-8: #e2a336;
  --qr-amber-9: #ffc53d;
  --qr-amber-10: #ffba18;
  --qr-amber-11: #ab6400;
  --qr-amber-12: #4f3422;
  color-scheme: light;
}
}

/* --- base.css --- */
@layer quire {


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --qr-bg: var(--qr-neutral-1);
  --qr-text-xl: 2.5rem;
  --qr-text-lg: 1.75rem;
  --qr-text-md: 1.125rem;
  --qr-text-sm: 0.9375rem;
  --qr-text-xs: 0.75rem;

  --qr-weight-medium: 500;
  --qr-weight-semibold: 600;
  --qr-weight-bold: 700;

  --qr-lead-tight: 1.2;
  --qr-lead-body: 1.6;

  --qr-track-display: -0.02em;
  --qr-track-label: 0.08em;

  --qr-space-1: 0.25rem;
  --qr-space-2: 0.5rem;
  --qr-space-3: 0.75rem;
  --qr-space-4: 1rem;
  --qr-space-5: 1.5rem;
  --qr-space-6: 2rem;
  --qr-space-7: 3rem;
  --qr-space-8: 4rem;

  
  --qr-section-gap: var(--qr-space-7);

  
  --qr-measure-text: 65ch;

  --qr-radius: 0.5rem;
  --qr-radius-s: 0.25rem;
  --qr-motion: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --qr-motion: 0s;
  }
}

html {
  font-size: var(--qr-text-root);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--qr-bg);
}

body {
  background: var(--qr-bg);
  color: var(--qr-neutral-12);
  font-family: var(--qr-font);
  font-size: var(--qr-text-sm);
  line-height: var(--qr-lead-body);
  
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

pre,
code {
  tab-size: 2;
  font-variant-ligatures: none;
}

main {
  flex: 1;
  container-type: inline-size;
}

a {
  color: var(--qr-accent-11);
  text-decoration: none;
}

a:hover {
  color: var(--qr-accent-12);
}

:focus-visible {
  outline: 2px solid var(--qr-accent-8);
  outline-offset: 2px;
}

}

/* --- toggle.css --- */
@layer quire {


.theme-toggle {
  display: inline-flex;
  width: var(--qr-space-6);
  height: var(--qr-space-6);
  align-items: center;
  justify-content: center;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  color: var(--qr-neutral-11);
  background: transparent;
  border: none;
  border-radius: var(--qr-radius-s);
  padding: 0;
}

.theme-toggle:hover {
  color: var(--qr-neutral-12);
  background: var(--qr-neutral-2);
}

.theme-toggle-light {
  display: none;
}

[data-theme="light"] .theme-toggle-dark {
  display: none;
}

[data-theme="light"] .theme-toggle-light {
  display: initial;
}

}

/* --- nav.css --- */
@layer quire {


html {
  scroll-padding-top: calc(var(--qr-space-8) * 2);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--qr-bg);
}

.site-nav {
  display: grid;
  grid-template-columns: var(--qr-nav-columns);
  align-items: center;
  border-bottom: 1px solid var(--qr-neutral-6);
  background: var(--qr-bg);
  padding: var(--qr-space-4) 0;
  margin-bottom: var(--qr-space-4);
}

.nav-links {
  grid-column: var(--qr-nav-links-column);
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: var(--qr-nav-justify);
  gap: var(--qr-space-5);
  overflow-x: auto;
  padding: var(--qr-space-2) var(--qr-space-5);
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-link {
  position: relative;
  color: var(--qr-neutral-11);
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
  white-space: nowrap;
  padding-bottom: var(--qr-space-1);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--qr-accent-9);
  transform: scaleX(0);
  transition: transform var(--qr-motion) ease;
}

.nav-link:hover {
  color: var(--qr-accent-11);
  transition: color var(--qr-motion) ease;
}

.nav-link:hover::after {
  transform: scaleX(0.5);
}

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

.nav-link--active::after,
.nav-link--active:hover::after {
  transform: scaleX(1);
}

.nav-end {
  grid-column: var(--qr-nav-end-column);
  justify-self: end;
  display: flex;
  align-items: center;
  padding: 0 var(--qr-space-3);
  position: relative;
}

.nav-end::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--qr-gutter));
  top: 0;
  bottom: 0;
  width: var(--qr-gutter);
  background: linear-gradient(to right, transparent, var(--qr-bg));
  pointer-events: none;
}

.nav-links {
  align-items: center;
}

.nav-brand {
  position: relative;
  top: -0.1em;
  margin-right: var(--qr-space-3);
  padding-bottom: var(--qr-space-1);
  font-size: var(--qr-text-md);
  font-weight: var(--qr-weight-bold);
  letter-spacing: var(--qr-track-display);
  color: var(--qr-neutral-12);
}

.nav-brand:hover {
  color: var(--qr-accent-11);
}
}

/* --- layout.css --- */
@layer quire {


.page {
  max-width: var(--qr-measure);
  margin: 0 auto;
  padding: var(--qr-space-6) var(--qr-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--qr-section-gap);
}

.page--wide {
  max-width: var(--qr-measure-wide, var(--qr-measure));
}

.page--full {
  max-width: var(--qr-measure-full, var(--qr-measure));
}

.home-sections,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--qr-col), 100%), 1fr));
  gap: var(--qr-gutter);
}

.home-section {
  padding: var(--qr-space-5);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
  background: var(--qr-neutral-3);
  font-weight: var(--qr-weight-semibold);
}

.home-section:hover {
  border-color: var(--qr-accent-8);
  color: var(--qr-accent-11);
  transition: border-color var(--qr-motion) ease, color var(--qr-motion) ease;
}

.page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qr-space-4);
}

.page-head:has(.page-meta) {
  padding-bottom: var(--qr-section-gap);
  border-bottom: 1px solid var(--qr-neutral-6);
}

.page h1 {
  font-size: var(--qr-text-xl);
  font-weight: var(--qr-weight-bold);
  letter-spacing: var(--qr-track-display);
  line-height: var(--qr-lead-tight);
}

.page h1 a {
  color: inherit;
}

.page h1 a:hover {
  color: var(--qr-neutral-11);
}

:where(.page h2, .page h3) {
  font-size: var(--qr-text-md);
  font-weight: var(--qr-weight-semibold);
  line-height: var(--qr-lead-tight);
}

.page-stats {
  color: var(--qr-neutral-10);
}

.header-badges:empty {
  display: none;
}

.page-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--qr-space-3);
  color: var(--qr-neutral-11);
}

.meta-separator {
  opacity: 0.5;
}

.page-intro,
.home-lede {
  max-width: 60ch;
  font-size: var(--qr-text-md);
  line-height: var(--qr-lead-body);
  color: var(--qr-neutral-11);
}

.kicker,
.card-kicker,
.entry-kicker,
.featured-badge,
.status-badge,
.toc-title {
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
}

.kicker,
.card-kicker,
.entry-kicker,
.featured-badge {
  color: var(--qr-accent-11);
}

.entries-list {
  border-top: 1px solid var(--qr-neutral-6);
}

.entry-item {
  display: flex;
  gap: var(--qr-space-5);
  align-items: flex-start;
  padding: var(--qr-space-5) 0;
  border-bottom: 1px solid var(--qr-neutral-6);
  color: inherit;
}

.entry-item:last-child {
  border-bottom: none;
}

.entry-item:hover {
  color: inherit;
}

.entry-item:hover .entry-title {
  color: var(--qr-accent-11);
  transition: color var(--qr-motion) ease;
}

.entry-kicker {
  display: block;
  opacity: 0.85;
}

.entry-kicker--draft {
  color: var(--qr-spot-11);
  opacity: 1;
}

.entry-context {
  color: var(--qr-neutral-11);
}

.site-footer {
  border-top: 1px solid var(--qr-neutral-6);
  padding: var(--qr-space-6) var(--qr-space-5);
  margin-top: auto;
}

.footer-inner {
  max-width: var(--qr-measure);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--qr-space-4);
  font-size: var(--qr-text-xs);
  color: var(--qr-neutral-10);
}

.footer-inner a {
  color: var(--qr-neutral-10);
}

.footer-inner a:hover {
  color: var(--qr-neutral-12);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qr-space-4);
}

.btn-primary {
  display: inline-block;
  padding: var(--qr-space-3) var(--qr-space-5);
  background: transparent;
  color: var(--qr-accent-11);
  font-weight: var(--qr-weight-semibold);
  border: 1px solid var(--qr-accent-8);
  border-radius: var(--qr-radius-s);
}

.btn-primary:hover {
  background: var(--qr-accent-9);
  color: var(--qr-accent-contrast);
  border-color: var(--qr-accent-9);
  transition: background var(--qr-motion) ease, color var(--qr-motion) ease, border-color var(--qr-motion) ease;
}

.btn-secondary {
  display: inline-block;
  padding: var(--qr-space-3) var(--qr-space-5);
  background: transparent;
  color: var(--qr-neutral-12);
  font-weight: var(--qr-weight-medium);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius-s);
}

.btn-secondary:hover {
  color: var(--qr-neutral-12);
  border-color: var(--qr-neutral-11);
  transition: border-color var(--qr-motion) ease;
}

.status-badge {
  display: inline-flex;
  padding: var(--qr-space-1) var(--qr-space-3);
  border-radius: var(--qr-radius-s);
  color: var(--qr-neutral-11);
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.status-badge--draft {
  background: var(--qr-spot-9);
  color: var(--qr-spot-contrast);
  font-weight: var(--qr-weight-bold);
  padding: var(--qr-space-1) var(--qr-space-3);
}

.tags-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--qr-space-2);
  padding: 0;
  margin-bottom: var(--qr-space-4);
}

.prose .tags-list,
.page-head .tags-list {
  margin: var(--qr-space-4) 0 0;
}

.prose .tags-list {
  margin: var(--qr-space-4) 0 var(--qr-space-6);
}

.tag {
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  letter-spacing: var(--qr-track-label);
  padding: var(--qr-space-1) var(--qr-space-3);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: var(--qr-radius-s);
  color: var(--qr-neutral-11);
  background: color-mix(in srgb, currentColor 16%, transparent);
}

li.tag {
  margin-bottom: 0;
}

.tag-more {
  font-size: var(--qr-text-xs);
  padding: var(--qr-space-1) var(--qr-space-2);
  color: var(--qr-neutral-10);
}

.forward-link {
  display: inline-flex;
  align-items: center;
  gap: var(--qr-space-1);
  font-weight: var(--qr-weight-medium);
}

.forward-link--accent {
  color: var(--qr-accent-11);
}

.forward-link--muted {
  color: var(--qr-neutral-10);
}

.forward-link--muted:hover {
  color: var(--qr-neutral-12);
}

.arrow {
  display: inline-block;
  transition: transform var(--qr-motion) ease;
}

.forward-link:hover .arrow,
.card:hover .arrow {
  transform: translateX(3px);
}

.back-link {
  padding-top: var(--qr-section-gap);
  border-top: 1px solid var(--qr-neutral-6);
}

.back-link a {
  color: var(--qr-neutral-10);
  font-weight: var(--qr-weight-medium);
}

.back-link a:hover {
  color: var(--qr-neutral-12);
}

.back-link:hover .arrow {
  transform: translateX(-3px);
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-6);
}

.figure,
.card-image,
.entry-thumb {
  margin: 0;
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
  background: var(--qr-neutral-2);
  overflow: hidden;
  line-height: 0;
}

.figure img,
.card-image img,
.entry-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.figure--bleed {
  margin-inline: var(--qr-bleed, 0px);
  width: calc(100% - 2 * var(--qr-bleed, 0px));
  border-inline: none;
  border-radius: 0;
}

.figure figcaption {
  line-height: var(--qr-lead-body);
  padding: var(--qr-space-3) var(--qr-space-4);
  color: var(--qr-neutral-11);
  font-size: var(--qr-text-xs);
}

.card-image {
  margin: calc(-1 * var(--qr-space-5)) calc(-1 * var(--qr-space-5)) 0;
  border: none;
  border-radius: var(--qr-radius) var(--qr-radius) 0 0;
  background: var(--qr-neutral-3);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-2);
  padding: var(--qr-space-5);
  background: var(--qr-neutral-2);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
  color: inherit;
}

.card:hover {
  color: inherit;
  border-color: var(--qr-accent-8);
  background: var(--qr-accent-3);
  transition: border-color var(--qr-motion) ease, background var(--qr-motion) ease;
}

.card-badges {
  display: flex;
  align-items: center;
  gap: var(--qr-space-3);
}

.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--qr-space-1);
}

.featured-badge svg {
  flex-shrink: 0;
}

.card-kicker {
  display: block;
}

.entry-body {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-2);
  min-width: 0;
}

.entry-thumb {
  display: block;
  flex: 0 0 auto;
  width: var(--qr-thumb);
  border-radius: var(--qr-radius-s);
}

.card-title {
  color: var(--qr-neutral-12);
}

.card-description {
  color: var(--qr-neutral-11);
}

.toc {
  background: var(--qr-neutral-2);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
  overflow: hidden;
}

.toc-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--qr-space-4) var(--qr-space-5);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--qr-neutral-12);
  list-style: none;
}

.toc-toggle::-webkit-details-marker {
  display: none;
}

.toc-toggle:hover {
  background: var(--qr-neutral-3);
}

.toc-title {
  color: var(--qr-neutral-11);
}

.toc-count {
  margin-left: auto;
  font-size: var(--qr-text-xs);
  color: var(--qr-neutral-10);
  padding-right: var(--qr-space-2);
}

.toc-icon {
  color: var(--qr-neutral-10);
  transition: transform var(--qr-motion) ease;
  flex-shrink: 0;
}

.toc[open] .toc-icon {
  transform: rotate(180deg);
}

.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-2);
  padding: var(--qr-space-2) var(--qr-space-5) var(--qr-space-4);
  margin: 0;
}

.toc-item--depth-3 {
  padding-left: var(--qr-space-4);
}

.toc-link {
  color: var(--qr-neutral-11);
  display: block;
}

.toc-link:hover {
  color: var(--qr-neutral-12);
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qr-space-4);
  padding-top: var(--qr-space-6);
  border-top: 1px solid var(--qr-neutral-6);
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-1);
  padding: var(--qr-space-4) var(--qr-space-5);
  font-weight: var(--qr-weight-semibold);
  color: var(--qr-neutral-12);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
}

.pager-link:hover {
  color: var(--qr-neutral-12);
  border-color: var(--qr-accent-8);
  background: var(--qr-accent-3);
}

.pager-link--next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}
}

/* --- prose.css --- */
@layer quire {


.prose {
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [text-start] min(100%, var(--qr-measure-text)) [text-end]
    1fr [full-end];
  row-gap: var(--qr-space-5);
  font-size: var(--qr-text-md);
  line-height: var(--qr-lead-body);
}

.prose > * {
  grid-column: text;
}

.prose > .figure,
.prose > .diagram {
  grid-column: full;
}

.prose h2,
.prose h3 {
  font-weight: var(--qr-weight-bold);
  line-height: var(--qr-lead-tight);
  color: var(--qr-neutral-12);
  scroll-margin-top: calc(var(--qr-space-8) * 2);
}

.prose h2 {
  font-size: var(--qr-text-lg);
  letter-spacing: var(--qr-track-display);
  text-transform: none;
  margin-top: var(--qr-space-5);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: var(--qr-text-md);
  margin-top: var(--qr-space-2);
}

.prose p,
.prose ul,
.prose ol {
  color: var(--qr-neutral-11);
}

.prose ul,
.prose ol {
  padding-left: var(--qr-space-5);
}

.prose li {
  margin-bottom: var(--qr-space-2);
}

.prose li:last-child {
  margin-bottom: 0;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose strong {
  font-weight: var(--qr-weight-semibold);
  color: var(--qr-neutral-12);
}

.prose code {
  font-family: var(--qr-font-mono);
  font-size: 0.9em;
  background: var(--qr-neutral-3);
  padding: 0.2em 0.4em;
  border-radius: var(--qr-radius-s);
}

.prose pre {
  background: var(--qr-neutral-2);
  padding: var(--qr-space-4);
  border-radius: var(--qr-radius);
  overflow-x: auto;
}

.prose pre code {
  background: none;
  padding: 0;
}

.callout {
  --callout-solid: var(--qr-accent-9);
  --qr-bg: var(--qr-accent-2);
  --callout-text: var(--qr-accent-11);
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-3);
  padding: var(--qr-space-4) var(--qr-space-5);
  border-left: 3px solid var(--callout-solid);
  border-radius: var(--qr-radius-s);
  background: var(--qr-bg);
}

.callout--tip { --callout-solid: var(--qr-green-9); --qr-bg: var(--qr-green-2); --callout-text: var(--qr-green-11); }
.callout--important { --callout-solid: var(--qr-spot-9); --qr-bg: var(--qr-spot-2); --callout-text: var(--qr-spot-11); }
.callout--warning { --callout-solid: var(--qr-amber-9); --qr-bg: var(--qr-amber-2); --callout-text: var(--qr-amber-11); }
.callout--caution { --callout-solid: var(--qr-red-9); --qr-bg: var(--qr-red-2); --callout-text: var(--qr-red-11); }

.prose .callout-title {
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
  color: var(--callout-text);
}

.diagram {
  margin: 0;
}

.pele {
  --pele-bg: var(--qr-bg);
  --pele-fg: var(--qr-neutral-12);
  --pele-muted: var(--qr-neutral-10);
  --pele-line: var(--qr-neutral-11);
  --pele-surface: var(--qr-accent-3);
  --pele-surface-alt: var(--qr-neutral-2);
  --pele-border: var(--qr-accent-7);
  --pele-accent: var(--qr-accent-9);
  --pele-critical: var(--qr-red-9);
  
  --pele-series-1: var(--qr-accent-9);
  --pele-series-2: var(--qr-spot-9);
  --pele-series-3: var(--qr-swatch2-9);
  --pele-series-4: var(--qr-swatch3-9);
  --pele-series-5: var(--qr-swatch4-9);
  --pele-series-6: var(--qr-green-9);
  --pele-series-7: var(--qr-red-9);
  --pele-series-8: var(--qr-swatch1-9);
  --pele-font: var(--qr-font);
  --pele-font-mono: var(--qr-font-mono);
  --pele-radius: var(--qr-radius-s);
}

.pele-cluster > rect { stroke: var(--qr-neutral-6); }

.pele-node.accent { --qr-node-fill: var(--qr-accent-3); --qr-node-line: var(--qr-accent-7); }
.pele-node.spot { --qr-node-fill: var(--qr-spot-3); --qr-node-line: var(--qr-spot-7); }
.pele-node.swatch1 { --qr-node-fill: var(--qr-swatch1-3); --qr-node-line: var(--qr-swatch1-7); }
.pele-node.swatch2 { --qr-node-fill: var(--qr-swatch2-3); --qr-node-line: var(--qr-swatch2-7); }
.pele-node.swatch3 { --qr-node-fill: var(--qr-swatch3-3); --qr-node-line: var(--qr-swatch3-7); }
.pele-node.swatch4 { --qr-node-fill: var(--qr-swatch4-3); --qr-node-line: var(--qr-swatch4-7); }
.pele-node.red { --qr-node-fill: var(--qr-red-3); --qr-node-line: var(--qr-red-7); }
.pele-node.green { --qr-node-fill: var(--qr-green-3); --qr-node-line: var(--qr-green-7); }
.pele-node.amber { --qr-node-fill: var(--qr-amber-3); --qr-node-line: var(--qr-amber-7); }

:is(.pele-node.accent, .pele-node.spot, .pele-node.swatch1, .pele-node.swatch2, .pele-node.swatch3, .pele-node.swatch4, .pele-node.red, .pele-node.green, .pele-node.amber) > :not(text) { stroke: var(--qr-node-line); }
:is(.pele-node.accent, .pele-node.spot, .pele-node.swatch1, .pele-node.swatch2, .pele-node.swatch3, .pele-node.swatch4, .pele-node.red, .pele-node.green, .pele-node.amber) > :not(text, [fill="none"]) { fill: var(--qr-node-fill); }

.prose pre.chroma {
  background: var(--qr-neutral-2);
}

.prose img,
.prose svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.palette {
  display: grid;
  grid-template-columns: max-content repeat(12, 1fr);
  gap: 3px;
  margin-block: var(--qr-space-5);
  font-family: var(--qr-font-mono);
  font-size: var(--qr-text-xs);
  color: var(--qr-neutral-11);
  text-align: center;
}

.palette > span:nth-child(13n + 1) {
  padding-right: var(--qr-space-3);
  text-align: left;
}

.palette > span[style] {
  min-height: 1.75rem;
  border-radius: var(--qr-radius-s);
}

.code {
  position: relative;
}

.code-copy {
  position: absolute;
  top: var(--qr-space-2);
  right: var(--qr-space-2);
  padding: var(--qr-space-1) var(--qr-space-2);
  font: inherit;
  font-size: var(--qr-text-xs);
  color: var(--qr-neutral-11);
  background: var(--qr-neutral-3);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius-s);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--qr-motion) ease;
}

.code-copy::before {
  content: "Copy";
}

.code-copy--done::before {
  content: "Copied";
}

.code:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .code-copy {
    opacity: 1;
  }
}

a.heading-anchor {
  margin-left: 0.4em;
  text-decoration: none;
  color: var(--qr-neutral-9);
  opacity: 0;
  transition: opacity var(--qr-motion) ease;
}

.heading-anchor::before {
  content: "#";
}

.heading-anchor:hover {
  color: var(--qr-accent-11);
}

:is(h1, h2, h3, h4, h5, h6):hover > .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}
}

/* --- highlight.css --- */
@layer quire {


.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt,
.chroma .ow { color: var(--qr-accent-11); }

.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sd,
.chroma .se, .chroma .sh, .chroma .si, .chroma .sr, .chroma .ss, .chroma .sx,
.chroma .dl { color: var(--qr-green-11); }

.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo, .chroma .il,
.chroma .l, .chroma .no, .chroma .ni { color: var(--qr-amber-11); }

.chroma .nf, .chroma .fm, .chroma .nd { color: var(--qr-swatch2-11); }

.chroma .nc, .chroma .nn, .chroma .ne, .chroma .nt { color: var(--qr-swatch3-11); }

.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm,
.chroma .na, .chroma .py, .chroma .nl { color: var(--qr-swatch1-11); }

.chroma .o, .chroma .or, .chroma .p,
.chroma .go { color: var(--qr-neutral-11); }

.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cp, .chroma .cpf, .chroma .cs,
.chroma .gp { color: var(--qr-neutral-10); }
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cs { font-style: italic; }

.chroma .gi { color: var(--qr-green-11); }
.chroma .gd, .chroma .gr, .chroma .gt, .chroma .err { color: var(--qr-red-11); }
.chroma .gh, .chroma .gu { color: var(--qr-accent-11); font-weight: bold; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: bold; }
}

/* --- breakpoint --- */
@layer quire {
@media (width < 744px) {
:root {
  --qr-text-xl: 2rem;
  --qr-text-lg: 1.5rem;
  --qr-nav-columns: minmax(0, 1fr) auto;
  --qr-nav-links-column: 1;
  --qr-nav-end-column: 2;
  --qr-nav-justify: flex-start;
}
}
}

/* --- search.css --- */
@layer plugin {
.search-box {
  position: relative;
  margin-right: var(--qr-space-3);
}

.search-input {
  width: min(14rem, 32vw);
  padding: var(--qr-space-2) var(--qr-space-3);
  font: inherit;
  font-size: var(--qr-text-xs);
  color: var(--qr-neutral-12);
  background: var(--qr-neutral-2);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius-s);
}

.search-input::placeholder {
  color: var(--qr-neutral-10);
}

.search-input:hover {
  border-color: var(--qr-neutral-8);
}

.search-live {
  display: none;
  position: absolute;
  top: calc(100% + var(--qr-space-2));
  right: 0;
  width: min(30rem, calc(100vw - 2 * var(--qr-space-4)));
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--qr-space-2);
  background: var(--qr-neutral-1);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
}

.search-box:focus-within .search-live:has(*) {
  display: block;
}

.search-hits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-1);
}

.search-hit {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-1);
  padding: var(--qr-space-3);
  border-radius: var(--qr-radius-s);
  color: inherit;
}

.search-hit:hover,
.search-hit:focus-visible,
.search-input:focus ~ .search-live li:first-child .search-hit {
  color: inherit;
  background: var(--qr-accent-3);
}

.search-hit-title {
  font-weight: var(--qr-weight-semibold);
  color: var(--qr-neutral-12);
}

.search-hit-sep {
  color: var(--qr-neutral-10);
  font-weight: normal;
}

.search-hit-text {
  font-size: var(--qr-text-xs);
  color: var(--qr-neutral-11);
  overflow-wrap: anywhere;
}

.search-hit-text mark {
  color: var(--qr-accent-12);
  background: var(--qr-accent-5);
  border-radius: 2px;
}

.search-none {
  padding: var(--qr-space-3);
  color: var(--qr-neutral-11);
}

.search-page .search-hits {
  gap: var(--qr-space-3);
}

.search-page .search-hit {
  border: 1px solid var(--qr-neutral-6);
}

.search-page .search-none {
  padding: 0;
}
}

/* --- site.css --- */
@layer site {
:root {
  --qr-nav-columns: minmax(0, 1fr) auto;
  --qr-nav-links-column: 1;
  --qr-nav-end-column: 2;
  --qr-nav-justify: flex-start;
}

.site-nav {
  padding-inline: max(0px, calc((100% - var(--qr-measure-wide)) / 2));
}

.site-repo {
  margin-right: var(--qr-space-4);
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
  color: var(--qr-neutral-11);
}

.site-repo:hover {
  color: var(--qr-accent-11);
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qr-space-5);
  padding: var(--qr-space-7) 0 var(--qr-space-5);
}

.home-hero h1 {
  max-width: 18ch;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.05;
}

.home-install {
  padding: var(--qr-space-3) var(--qr-space-4);
  font-family: var(--qr-font-mono);
  font-size: var(--qr-text-sm);
  color: var(--qr-neutral-11);
  background: var(--qr-neutral-2);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius-s);
  overflow-x: auto;
  max-width: 100%;
}

.home-install::before {
  content: "$ ";
  color: var(--qr-neutral-9);
}

.home-sample {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qr-gutter);
  align-items: center;
  padding-top: var(--qr-section-gap);
  border-top: 1px solid var(--qr-neutral-6);
}

.home-sample-words {
  flex: 1 1 var(--qr-col);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qr-space-4);
}

.home-sample-words h2 {
  font-size: var(--qr-text-lg);
}

.home-sample-words p {
  color: var(--qr-neutral-11);
}

.home-sample .prose {
  display: block;
  flex: 2 1 var(--qr-col);
  min-width: 0;
  font-size: var(--qr-text-sm);
}

.docs {
  gap: var(--qr-space-6);
}

.docs-menu {
  align-self: flex-start;
  padding: var(--qr-space-2) var(--qr-space-4);
  font: inherit;
  font-weight: var(--qr-weight-medium);
  color: var(--qr-neutral-12);
  background: var(--qr-neutral-2);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius-s);
  cursor: pointer;
}

.docs-nav {
  display: none;
  padding-top: var(--qr-space-4);
}

.docs-side--open .docs-nav {
  display: block;
}

.docs-label {
  margin-bottom: var(--qr-space-2);
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
  color: var(--qr-neutral-12);
}

.docs-nav ul {
  list-style: none;
  margin-bottom: var(--qr-space-5);
}

.docs-link {
  display: block;
  padding: var(--qr-space-1) var(--qr-space-4);
  border-left: 1px solid var(--qr-neutral-6);
  color: var(--qr-neutral-11);
}

.docs-link:hover {
  color: var(--qr-neutral-12);
  border-color: var(--qr-neutral-9);
}

.docs-link[aria-current] {
  color: var(--qr-accent-11);
  border-color: var(--qr-accent-9);
  font-weight: var(--qr-weight-medium);
}

.docs-main {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-6);
  min-width: 0;
}

.docs-main .prose {
  grid-template-columns: [full-start text-start] min(100%, var(--qr-measure-text)) [text-end] 1fr [full-end];
  font-size: 1rem;
}
}

/* --- site-wide.css --- */
@media (width >= 1104px) {
@layer site {
.docs {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  column-gap: var(--qr-space-7);
  align-items: start;
}

.docs-side {
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

.docs-menu {
  display: none;
}

.docs-nav {
  display: block;
  padding-top: 0;
}
}
}