:root[data-scheme="ultraviolet"] {
  --paper: light-dark(#fbfaf8, #100d1c);
  --paper-2: light-dark(#f2effb, #19152b);
  --paper-3: light-dark(#e9e5f6, #0a0814);
  --ink: light-dark(#18142b, #eeeaf8);
  --ink-2: light-dark(#4d4766, #b4adcf);
  --ink-3: light-dark(#6e6888, #8a83a6);
  --rule: light-dark(#e2ddf0, #2c2645);
  --rule-strong: light-dark(#18142b, #eeeaf8);
  --accent: light-dark(#5b2ee5, #a58cff);
  --accent-ink: light-dark(#3a1a9e, #d2c6ff);
  --field: light-dark(#4f24d8, #2a1878);
  --field-deep: light-dark(#3d18b8, #1f1160);
  --accent-tint: light-dark(#ece6ff, #221b42);
  --on-field-2: light-dark(#dcd2ff, #c9bcff);
  --highlight: #f2c14e;
  --marker: light-dark(
    color-mix(in oklab, #f2c14e 55%, transparent),
    color-mix(in oklab, #f2c14e 38%, transparent)
  );
  --marker-on-field: color-mix(in oklab, #f2c14e 62%, transparent);
  --spark: light-dark(#f0603f, #ff7a5c);
  --note: light-dark(#2f5bd8, #8fa8ff);
  --tip: light-dark(#0d7a5a, #6fd6b0);
  --warn: light-dark(#8a5a00, #f2c14e);
  --danger: light-dark(#c2361b, #ff8466);
  --on-danger: light-dark(#fbfaf8, #100d1c);
  --code-bg: light-dark(#1b1533, #0a0814);
  --code-ink: #eae6f7;
  --code-rule: light-dark(transparent, #2c2645);
  --code-comment: #8c86a8;
  --code-string: #f2c14e;
  --code-number: #ff9c85;
  --code-keyword: #b8a6ff;
  --code-function: #8fd9c3;
  --code-type: #9ec5ff;
  --code-btn: #241d42;
  --code-btn-rule: #3a3358;
  --code-btn-ink: #dcd2ff;
  --code-btn-hover: #a58cff;
  --on-highlight: #18142b;
  --backdrop: rgb(16 13 28 / 0.45);
  --scribble-light: url(../scribble-ultraviolet-light.svg);
  --scribble-dark: url(../scribble-ultraviolet-dark.svg);
}
@supports not (color: light-dark(#000, #fff)) {
  :root[data-scheme="ultraviolet"] {
    --paper: #fbfaf8;
    --paper-2: #f2effb;
    --paper-3: #e9e5f6;
    --ink: #18142b;
    --ink-2: #4d4766;
    --ink-3: #6e6888;
    --rule: #e2ddf0;
    --rule-strong: #18142b;
    --accent: #5b2ee5;
    --accent-ink: #3a1a9e;
    --field: #4f24d8;
    --field-deep: #3d18b8;
    --accent-tint: #ece6ff;
    --on-field-2: #dcd2ff;
    --marker: color-mix(in oklab, #f2c14e 55%, transparent);
    --spark: #f0603f;
    --note: #2f5bd8;
    --tip: #0d7a5a;
    --warn: #8a5a00;
    --danger: #c2361b;
    --on-danger: #fbfaf8;
    --code-bg: #1b1533;
    --code-rule: transparent;
  }
}
:root[data-scheme="pine"] {
  --paper: light-dark(#faf9f6, #0e1512);
  --paper-2: light-dark(#eef2ee, #16201b);
  --paper-3: light-dark(#e3eae4, #0a0f0d);
  --ink: light-dark(#14201b, #e8eeea);
  --ink-2: light-dark(#44524b, #aebbb3);
  --ink-3: light-dark(#64716a, #87958d);
  --rule: light-dark(#dce3dd, #26332d);
  --rule-strong: light-dark(#14201b, #e8eeea);
  --accent: light-dark(#1f7a57, #6cc79d);
  --accent-ink: light-dark(#135c40, #a9e2c6);
  --field: light-dark(#1e4d3b, #173a2d);
  --field-deep: light-dark(#163b2d, #102a20);
  --accent-tint: light-dark(#e3f0e9, #18291f);
  --on-field-2: light-dark(#cfe3d8, #bfd8cb);
  --highlight: #e3bc6e;
  --marker: light-dark(
    color-mix(in oklab, #e3bc6e 55%, transparent),
    color-mix(in oklab, #e3bc6e 38%, transparent)
  );
  --marker-on-field: color-mix(in oklab, #e3bc6e 62%, transparent);
  --spark: light-dark(#d9775b, #f09a80);
  --note: light-dark(#2f6690, #8db8e0);
  --tip: light-dark(#1f7a57, #6cc79d);
  --warn: light-dark(#8a6200, #e3bc6e);
  --danger: light-dark(#b23a26, #f08a70);
  --on-danger: light-dark(#faf9f6, #0e1512);
  --code-bg: light-dark(#14201b, #0a0f0d);
  --code-ink: #e4ece7;
  --code-rule: light-dark(transparent, #26332d);
  --code-comment: #82938a;
  --code-string: #e3bc6e;
  --code-number: #f09a80;
  --code-keyword: #8fd3b2;
  --code-function: #a8d8ea;
  --code-type: #c9dda0;
  --code-btn: #1e2c25;
  --code-btn-rule: #33443b;
  --code-btn-ink: #cfe3d8;
  --code-btn-hover: #6cc79d;
  --on-highlight: #14201b;
  --backdrop: rgb(14 21 18 / 0.45);
  --scribble-light: url(../scribble-pine-light.svg);
  --scribble-dark: url(../scribble-pine-dark.svg);
}
@supports not (color: light-dark(#000, #fff)) {
  :root[data-scheme="pine"] {
    --paper: #faf9f6;
    --paper-2: #eef2ee;
    --paper-3: #e3eae4;
    --ink: #14201b;
    --ink-2: #44524b;
    --ink-3: #64716a;
    --rule: #dce3dd;
    --rule-strong: #14201b;
    --accent: #1f7a57;
    --accent-ink: #135c40;
    --field: #1e4d3b;
    --field-deep: #163b2d;
    --accent-tint: #e3f0e9;
    --on-field-2: #cfe3d8;
    --marker: color-mix(in oklab, #e3bc6e 55%, transparent);
    --spark: #d9775b;
    --note: #2f6690;
    --tip: #1f7a57;
    --warn: #8a6200;
    --danger: #b23a26;
    --on-danger: #faf9f6;
    --code-bg: #14201b;
    --code-rule: transparent;
  }
}
:root[data-scheme="midnight"] {
  --paper: light-dark(#fafaf9, #0c111c);
  --paper-2: light-dark(#eef2f7, #141b2a);
  --paper-3: light-dark(#e3e9f1, #080c14);
  --ink: light-dark(#111827, #e7ecf4);
  --ink-2: light-dark(#455063, #aab4c5);
  --ink-3: light-dark(#5f6b80, #8590a3);
  --rule: light-dark(#dde3ec, #232d40);
  --rule-strong: light-dark(#111827, #e7ecf4);
  --accent: light-dark(#2563c9, #7faaf5);
  --accent-ink: light-dark(#1a4795, #b9d0fa);
  --field: light-dark(#1c2b4a, #17233d);
  --field-deep: light-dark(#142038, #101a2e);
  --accent-tint: light-dark(#e4edfa, #172238);
  --on-field-2: light-dark(#c9d5ea, #b8c6de);
  --highlight: #f5b82e;
  --marker: light-dark(
    color-mix(in oklab, #f5b82e 55%, transparent),
    color-mix(in oklab, #f5b82e 38%, transparent)
  );
  --marker-on-field: color-mix(in oklab, #f5b82e 62%, transparent);
  --spark: light-dark(#4f8fe8, #8db9f7);
  --note: light-dark(#2563c9, #7faaf5);
  --tip: light-dark(#16805a, #6fcf9f);
  --warn: light-dark(#8a5a00, #f5b82e);
  --danger: light-dark(#b8361e, #f08a70);
  --on-danger: light-dark(#fafaf9, #0c111c);
  --code-bg: light-dark(#111827, #080c14);
  --code-ink: #e5eaf2;
  --code-rule: light-dark(transparent, #232d40);
  --code-comment: #7d889b;
  --code-string: #f2b48c;
  --code-number: #f08a70;
  --code-keyword: #93b8f7;
  --code-function: #7fd1c2;
  --code-type: #c3b5f5;
  --code-btn: #1a2336;
  --code-btn-rule: #2e3a52;
  --code-btn-ink: #c9d5ea;
  --code-btn-hover: #7faaf5;
  --on-highlight: #111827;
  --backdrop: rgb(12 17 28 / 0.45);
  --scribble-light: url(../scribble-midnight-light.svg);
  --scribble-dark: url(../scribble-midnight-dark.svg);
}
@supports not (color: light-dark(#000, #fff)) {
  :root[data-scheme="midnight"] {
    --paper: #fafaf9;
    --paper-2: #eef2f7;
    --paper-3: #e3e9f1;
    --ink: #111827;
    --ink-2: #455063;
    --ink-3: #5f6b80;
    --rule: #dde3ec;
    --rule-strong: #111827;
    --accent: #2563c9;
    --accent-ink: #1a4795;
    --field: #1c2b4a;
    --field-deep: #142038;
    --accent-tint: #e4edfa;
    --on-field-2: #c9d5ea;
    --marker: color-mix(in oklab, #f5b82e 55%, transparent);
    --spark: #4f8fe8;
    --note: #2563c9;
    --tip: #16805a;
    --warn: #8a5a00;
    --danger: #b8361e;
    --on-danger: #fafaf9;
    --code-bg: #111827;
    --code-rule: transparent;
  }
}
@font-face {
  font-family: InterVariable;
  src: url(../fonts/InterVariable-4.1-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC,
    U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20AB, U+20AC,
    U+20AD-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F,
    U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: InterVariable;
  src: url(../fonts/InterVariable-4.1-symbols.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0300-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+2100-2112,
    U+2114-2121, U+2123-214F, U+2190, U+2192, U+2194-21FF, U+2200-2211,
    U+2213-2214, U+2216-22FF, U+25A0-25FF;
}
@font-face {
  font-family: InterVariable;
  src: url(../fonts/InterVariable-Italic-4.1-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC,
    U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20AB, U+20AC,
    U+20AD-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F,
    U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: InterVariable;
  src: url(../fonts/InterVariable-Italic-4.1-symbols.woff2) format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range:
    U+0300-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+2100-2112,
    U+2114-2121, U+2123-214F, U+2190, U+2192, U+2194-21FF, U+2200-2211,
    U+2213-2214, U+2216-22FF, U+25A0-25FF;
}
@font-face {
  font-family: JetBrains Mono;
  src: url(../fonts/JetBrainsMono-2.304.woff2) format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter Fallback;
  src: local("Arial");
  size-adjust: 107.89%;
  ascent-override: 89.79%;
  descent-override: 22.36%;
  line-gap-override: 0%;
}
:root {
  color-scheme: light dark;
  --sans: InterVariable, "Inter Fallback", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: clamp(1.0625rem, 0.95rem + 0.3vw, 1.375rem);
  --t-display: clamp(3.5rem, 1rem + 9vw, 13rem);
  --t-hero: clamp(3.2rem, 0.8rem + 7vw, 10.5rem);
  --t-post: clamp(2.6rem, 0.8rem + 5.6vw, 8.5rem);
  --t-section: clamp(2rem, 1rem + 3vw, 5rem);
  --t-heading: clamp(1.75rem, 1rem + 1.9vw, 3.25rem);
  --t-subheading: clamp(1.3rem, 1rem + 0.8vw, 1.9rem);
  --t-item: clamp(1.15rem, 0.95rem + 0.6vw, 1.65rem);
  --t-lead: clamp(1.15rem, 0.9rem + 0.75vw, 1.9rem);
  --t-small: calc(var(--body) * 0.88);
  --t-meta: calc(var(--body) * 0.8);
  --t-small-ui: 0.75rem;
  --t-ui: max(1rem, calc(var(--body) * 0.9));
  --t-input: 1.25rem;
  --t-code: clamp(0.82rem, 0.75rem + 0.2vw, 1rem);
  --t-wordmark: 1.85rem;
  --t-wordmark-foot: 1.5rem;
  --t-h4: calc(var(--body) * 1.05);
  --t-prose-lead: calc(var(--body) * 1.2);
  --t-chart: 14px;
  --t-diagram: 16px;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-strong: 650;
  --w-bold: 700;
  --w-heading: 750;
  --w-heavy: 800;
  --lh-display: 0.95;
  --lh-tight: 1;
  --lh-heading: 1.15;
  --lh-snug: 1.35;
  --lh-text: 1.45;
  --lh-h2: 1.5;
  --lh-body: 1.6;
  --lh-code: 1.65;
  --track-display: -0.045em;
  --track-heading: -0.025em;
  --track-text: -0.015em;
  --track-wide: 0.08em;
  --ul-thick: 1.5px;
  --ul-thick-hover: var(--line-3);
  --ul-offset: 0.2em;
  --ul-offset-nav: 0.45em;
  --g: clamp(1.25rem, 3.6vw, 4.5rem);
  --col-gap: clamp(1rem, 2vw, 2.5rem);
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-band: clamp(2.5rem, 5vw, 5rem);
  --s-content: clamp(2rem, 4vw, 4rem);
  --s-section: clamp(3.5rem, 6vw, 7rem);
  --flow: 1.35em;
  --flow-block: 2em;
  --measure: 44em;
  --measure-desc: 38em;
  --measure-intro: 34em;
  --flow-tight: 0.6em;
  --h2-space: 1.1em 0 0.75em;
  --h3-space: 1.75em 0 0.5em;
  --h4-space: 1.4em 0 0.6em;
  --chip-pad: 0.1em 0.35em;
  --label-pad: 0.3em 0.6em;
  --corner-tab: 1.75rem;
  --tape-h: 2.5rem;
  --line: 1px;
  --line-2: 2px;
  --line-3: 3px;
  --line-4: 4px;
  --ul-mid: var(--line-2);
  --focus-ring: var(--line-3);
  --focus-inset: calc(-1 * var(--focus-ring));
  --control: 2.75rem;
  --control-md: 2.5rem;
  --control-sm: 2.25rem;
  --control-xs: 2rem;
  --icon-sm: 1.05rem;
  --icon: 1.15rem;
  --toggle: 1.5rem;
  --strip: 4.25rem;
  --portrait: 34rem;
  --portrait-stacked: 20rem;
  --portrait-fill: 84%;
  --portrait-fill-stacked: 70%;
  --marks-bleed: 22.2222%;
  --portrait-lift: clamp(0px, 4vw - var(--s-4), var(--s-4));
  --mole: 5.5rem;
  --notfound: 8rem;
  --stop: 1rem;
  --stop-here: 1.35rem;
  --tail-w: 12px;
  --tail-h: 14px;
  --mark-h: 0.42em;
  --squiggle-pen: 0.11em;
  --tick-w: 0.55em;
  --tick-h: 0.95em;
  --tick-gap: 0.75em;
  --chart-h: 18rem;
  --dialog-w: 42rem;
  --dialog-h: 36rem;
  --dialog-max: 85dvh;
  --dialog-top: 10vh;
  --table-min: 34rem;
  --diagram-min: 40rem;
  --table-img: 4.5rem;
  --cue-w: var(--s-4);
  --cell-min: 1rem;
  --cell-gap: 0.1875rem;
  --heat-label: 1.5rem;
  --pop: 0.6s;
  --stroke-bold: 0.035em;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --confetti-reach: 34px;
  --ghost: 3.5rem;
  --switch-w: 3rem;
  --switch-h: 1.625rem;
  --switch-pad: 0.1875rem;
  --switch-knob: calc(var(--switch-h) - 2 * var(--switch-pad));
  --switch-ease: 0.18s ease-out;
  --pumpkin: 4.5rem;
  --logo-h: 1.75rem;
  --marquee-gap: var(--s-band);
  --marquee-duration: 90s;
  --marquee-fade: 12%;
  --mask-solid: #000;
  --figure-min: 16rem;
  --copy-room: 5rem;
  --toggle-bar: 0.65rem;
  --list-indent: 1.2em;
  --squiggle-h: 0.3em;
  --squiggle-room: 0.4em;
  --cover-feature: clamp(6rem, 18vw, 9rem);
  --nav-gap: clamp(1.1rem, 2vw, 1.75rem);
  --dialog-shadow: 0 30px 80px -20px var(--shadow);
  --cue-on-paper: color-mix(in oklab, var(--ink) 9%, transparent);
  --cue-on-code: color-mix(in oklab, var(--code-ink) 8%, transparent);
  --heat-0: var(--paper-2);
  --heat-0b: color-mix(in oklab, var(--ink) 6%, var(--paper-2));
  --heat-1: color-mix(in oklab, var(--accent) 38%, var(--paper));
  --heat-2: color-mix(in oklab, var(--accent) 68%, var(--paper));
  --heat-3: var(--accent);
  --on-field: #ffffff;
  --on-field-rule: rgb(255 255 255 / 0.2);
  --on-field-hover: rgb(255 255 255 / 0.12);
  --code-hl: rgb(255 255 255 / 0.08);
  --shadow: rgb(0 0 0 / 0.45);
  --letterbox: #000;
  --emboss-lo: rgb(0 0 0 / 0.18);
  --emboss-ring: rgb(0 0 0 / 0.08);
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
:root {
  --scribble: var(--scribble-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scribble: var(--scribble-dark);
  }
}
:root[data-theme="dark"] {
  --scribble: var(--scribble-dark);
}
@supports not (color: light-dark(#000, #fff)) {
  :root,
  :root[data-theme="dark"] {
    --scribble: var(--scribble-light);
    color-scheme: light;
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
  border-radius: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: var(--s-5);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings:
    "liga" 1,
    "calt" 1,
    "cv05" 1,
    "cv08" 1,
    "ss03" 1;
  font-size: var(--body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img,
video,
iframe {
  max-width: 100%;
}
img,
video {
  height: auto;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}
body {
  overflow-wrap: anywhere;
}
time {
  font-variant-numeric: tabular-nums;
}
code,
pre,
kbd {
  font-family: var(--mono);
  font-feature-settings: normal;
  font-variant-ligatures: none;
}
button {
  font: inherit;
}
::selection {
  background: color-mix(in oklab, var(--accent) 28%, transparent);
}
::target-text,
mark {
  background: var(--marker);
  color: inherit;
}
.band ::target-text,
.band ::selection {
  background: var(--marker-on-field);
}
.icon {
  display: inline-flex;
  vertical-align: -0.15em;
}
.icon svg {
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  fill: currentColor;
}
.skip,
.marquee-pause {
  position: absolute;
  left: -100vw;
}
.skip:focus,
.marquee-pause:focus-visible {
  left: var(--s-4);
  top: var(--s-4);
  z-index: 10;
  background: var(--paper);
  padding: var(--s-2) var(--s-4);
}
.marquee-pause {
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.nobr {
  white-space: nowrap;
}
.visually-hidden {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:where(ul[class], ol[class]) {
  list-style: none;
  margin: 0;
  padding: 0;
}
:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: var(--focus-ring);
}
:is(.band, .profiles-band) :focus-visible {
  outline-color: var(--highlight);
}
:is(.profiles a, .project-grid a, #search .hit-title):focus-visible,
.post-side :focus-visible {
  outline-offset: var(--focus-inset);
}
.meta {
  font-size: var(--t-meta);
  font-weight: var(--w-medium);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.item-title {
  font-size: var(--t-item);
  font-weight: var(--w-heading);
  letter-spacing: var(--track-heading);
  line-height: var(--lh-heading);
}
.item-desc {
  margin: 0;
  font-size: var(--t-small);
  line-height: var(--lh-text);
  color: var(--ink-2);
}
.sec-title {
  font-size: var(--t-section);
  font-weight: var(--w-heavy);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
}
.display {
  font-size: var(--t-display);
  font-weight: var(--w-heavy);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  overflow-wrap: anywhere;
}
.site-nav a,
.item-title a,
.foot-links a,
.foot-profiles a,
.crumbs a,
.series-box a,
.timeline-title,
.tag-index a,
#search .hit-title,
.now-title a {
  text-decoration: none;
}
@media (hover: hover) {
  .site-nav a:hover,
  .item-title a:hover,
  .foot-links a:hover,
  .foot-profiles a:hover,
  .crumbs a:hover,
  .series-box a:hover,
  a.timeline-title:hover,
  .tag-index a:hover,
  #search .hit-title:hover,
  .project-grid a:hover .item-title,
  .now-title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: var(--ul-mid);
    text-underline-offset: var(--ul-offset);
  }
  .band .crumbs a:hover {
    text-decoration-color: var(--highlight);
  }
}
.more,
.prose a,
.intro a,
button.link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: var(--ul-thick);
  text-underline-offset: var(--ul-offset);
  font-weight: inherit;
}
.more {
  font-weight: var(--w-strong);
}
@media (hover: hover) {
  .more:hover,
  .prose a:hover,
  .intro a:hover,
  button.link:hover {
    color: var(--accent-ink);
    text-decoration-thickness: var(--ul-thick-hover);
  }
}
button.link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.tag,
#search form button,
.highlight .copy,
a.button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.highlight .copy,
#search form button {
  font: var(--w-semibold) var(--t-small-ui)/var(--lh-tight) var(--sans);
  min-height: var(--control-xs);
  padding: 0 var(--s-3);
  border: var(--line) solid;
}
@media (hover: hover) {
  .tag:hover,
  #search form button:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}
.gutter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding-inline: var(--g);
}
.gutter > * {
  grid-column: 1 / -1;
  min-width: 0;
}
.profiles,
.foot-links,
.foot-profiles,
.project-grid,
.tag-index,
.timeline,
.book-grid,
.now-reading,
.figures,
.chart-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
.band {
  background: var(--field);
  color: var(--on-field);
}
.band a {
  color: var(--on-field);
}
.marker {
  position: relative;
  z-index: 0;
  white-space: nowrap;
  padding-inline: 0.04em;
}
.marker:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.08em;
  right: -0.12em;
  bottom: -0.02em;
  height: var(--mark-h);
  background: var(--highlight);
  -webkit-mask: url(../highlight.svg) center / 100% 100% no-repeat;
  mask: url(../highlight.svg) center / 100% 100% no-repeat;
}
.site-header {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding-block: var(--s-4);
  background: linear-gradient(var(--rule), var(--rule)) center bottom /
    calc(100% - 2 * var(--g)) var(--line) no-repeat;
}
.wordmark {
  position: relative;
  display: inline-block;
  font-weight: var(--w-heavy);
  font-size: var(--t-wordmark);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  text-decoration: none;
  color: var(--ink);
  padding-bottom: var(--s-1);
}
.wordmark .squiggle {
  position: absolute;
  left: -2%;
  bottom: -0.12em;
  width: 104%;
  height: var(--mark-h);
  color: var(--accent);
  overflow: visible;
}
.wordmark .squiggle path {
  stroke-width: var(--squiggle-pen);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  margin-left: auto;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control);
  font-weight: var(--w-semibold);
  font-size: var(--t-ui);
  color: var(--ink-2);
}
.site-nav a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: var(--ul-mid);
  text-underline-offset: var(--ul-offset-nav);
}
.tools {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}
.icon-btn {
  --icon-size: var(--icon-sm);
  display: grid;
  place-items: center;
  min-width: var(--s-5);
  height: var(--control);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}
.icon-btn .icon {
  display: flex;
}
@media (hover: hover) {
  .icon-btn:hover {
    color: var(--accent);
  }
}
.when-light {
  display: contents;
}
.when-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .when-dark {
    display: contents;
  }
  :root:not([data-theme="light"]) .when-light {
    display: none;
  }
}
:root[data-theme="dark"] .when-dark {
  display: contents;
}
:root[data-theme="dark"] .when-light {
  display: none;
}
[data-theme-toggle] {
  position: relative;
}
:is([data-theme-toggle], [data-season-toggle]).pop .icon svg {
  animation: theme-spin var(--pop) var(--ease-pop);
}
@keyframes theme-spin {
  0% {
    transform: rotate(-150deg) scale(0.3);
    opacity: 0;
  }
  60% {
    transform: rotate(18deg) scale(1.2);
    opacity: 1;
  }
  to {
    transform: none;
  }
}
.confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  background: var(--color);
  pointer-events: none;
}
.confetti.plus {
  clip-path: polygon(
    38% 0,
    62% 0,
    62% 38%,
    100% 38%,
    100% 62%,
    62% 62%,
    62% 100%,
    38% 100%,
    38% 62%,
    0 62%,
    0 38%,
    38% 38%
  );
}
.confetti.twinkle {
  clip-path: polygon(
    50% 0,
    61% 39%,
    100% 50%,
    61% 61%,
    50% 100%,
    39% 61%,
    0 50%,
    39% 39%
  );
}
.confetti.leaf {
  clip-path: polygon(50% 0, 84% 22%, 97% 58%, 50% 100%, 3% 58%, 16% 22%);
}
@media (prefers-reduced-motion: reduce) {
  :is([data-theme-toggle], [data-season-toggle]).pop .icon svg {
    animation: none;
  }
}
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--control);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.switch[hidden] {
  display: none;
}
.switch-track {
  position: relative;
  display: block;
  width: var(--switch-w);
  height: var(--switch-h);
  background: var(--field);
  transition: background-color var(--switch-ease);
}
.switch-knob {
  --icon-size: calc(var(--switch-knob) * 0.6);
  position: absolute;
  top: var(--switch-pad);
  left: var(--switch-pad);
  display: grid;
  place-items: center;
  width: var(--switch-knob);
  height: var(--switch-knob);
  color: var(--field-deep);
  background: var(--on-field);
  box-shadow:
    0 var(--line) var(--line-2) var(--emboss-lo),
    0 0 0 var(--line) var(--emboss-ring);
  transition: left var(--switch-ease);
}
.switch-knob .icon {
  display: flex;
}
.switch[aria-checked="true"] .switch-track {
  background: var(--highlight);
}
.switch[aria-checked="true"] .switch-knob {
  left: calc(var(--switch-w) - var(--switch-knob) - var(--switch-pad));
}
.season-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.leaf {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--size);
  color: var(--c);
  opacity: var(--o, 0.9);
  animation: leaf-fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.leaf-sway {
  animation: leaf-sway var(--sway-dur) ease-in-out var(--delay) infinite
    alternate;
}
.leaf-flip {
  animation: leaf-flip var(--flip-dur) ease-in-out var(--delay) infinite
    alternate;
}
.leaf svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: leaf-turn var(--turn-dur) linear var(--delay) infinite;
}
.leaf .vein {
  stroke: var(--field-deep);
  stroke-opacity: 0.4;
}
@keyframes leaf-fall {
  0% {
    transform: translateY(-10vh);
  }
  to {
    transform: translateY(110vh);
  }
}
@keyframes leaf-sway {
  0% {
    transform: translate(calc(-1 * var(--sway)));
  }
  to {
    transform: translate(var(--sway));
  }
}
@keyframes leaf-turn {
  to {
    transform: rotate(var(--turn));
  }
}
@keyframes leaf-flip {
  0% {
    transform: perspective(200px) rotateX(-55deg) rotateY(-20deg);
  }
  to {
    transform: perspective(200px) rotateX(55deg) rotateY(20deg);
  }
}
.ghost {
  position: absolute;
  bottom: -10vh;
  width: var(--ghost);
  opacity: 0;
  will-change: transform, opacity;
}
.ghost svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ghost .sheet {
  fill: var(--on-field);
  stroke: var(--on-field);
}
.ghost .ink {
  color: var(--ink-3);
}
.ghost .face {
  fill: var(--field-deep);
}
.ghost .glint {
  fill: var(--on-field);
}
.ghost-sway {
  animation: ghost-sway var(--sway-dur, 3.6s) ease-in-out infinite alternate;
}
@keyframes ghost-sway {
  0% {
    transform: translate(calc(-1 * var(--sway, 14px))) rotate(-4deg);
  }
  to {
    transform: translate(var(--sway, 14px)) rotate(4deg);
  }
}
.mk-pumpkin {
  display: none;
  position: absolute;
  z-index: 2;
  left: calc(-1 * var(--pumpkin) - var(--s-2));
  bottom: 0;
  width: var(--pumpkin);
  height: auto;
  overflow: visible;
}
:root[data-season="spooky"]:not(.season-off) .mk-pumpkin {
  display: block;
}
@media (max-width: 860px) {
  .mk-pumpkin {
    left: auto;
    right: calc(-1 * var(--pumpkin) - var(--s-6));
    width: calc(var(--pumpkin) * 0.8);
  }
}
.mk-pumpkin {
  color: var(--highlight);
}
@media (prefers-reduced-motion: reduce) {
  .season-layer {
    display: none;
  }
}
.site-footer {
  margin-top: var(--s-section);
  padding-block: var(--s-content);
  background: var(--paper-3);
  row-gap: var(--s-6);
  align-items: start;
}
main:has(.keep-reading) + .site-footer {
  margin-top: 0;
}
.foot-id {
  grid-column: 1 / span 4;
  display: grid;
  gap: var(--s-2);
}
.foot-id .wordmark {
  justify-self: start;
  font-size: var(--t-wordmark-foot);
  margin-bottom: var(--s-2);
}
.foot-id p {
  margin: 0;
  color: var(--ink-2);
  font-weight: var(--w-semibold);
  font-size: var(--t-small);
}
.foot-id :is(.foot-copyright, .foot-signoff) {
  font-weight: var(--w-medium);
}
.foot-id .foot-copyright {
  font-variant-numeric: tabular-nums;
}
.foot-pages {
  grid-column: 6 / span 3;
}
.foot-elsewhere {
  grid-column: 9 / span 4;
}
.foot-links,
.foot-profiles {
  --cols: 2;
  gap: var(--s-2) var(--col-gap);
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
}
.foot-links a,
.foot-profiles a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--control-xs);
  color: var(--ink);
}
.foot-profiles .icon {
  color: var(--accent);
}
.page-head,
.post-head {
  padding-block: var(--s-band);
}
.has-tape {
  --stuck: var(--tape-h);
}
.tapes-2 {
  --stuck: calc(2 * var(--tape-h));
}
.tape + .tape {
  top: var(--tape-h);
}
.tape-draft {
  --tape-a: var(--danger);
  --tape-b: var(--paper);
  --tape-ink: var(--on-danger);
}
.tape-thinking {
  --tape-a: var(--highlight);
  --tape-b: var(--on-highlight);
  --tape-ink: var(--on-highlight);
}
.tape {
  --tape-w: calc(var(--tape-h) / 1.41421);
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  height: var(--tape-h);
  margin: 0;
  overflow: hidden;
}
.tape span {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding-inline: calc(var(--tape-h) + var(--s-4));
  background: var(--tape-a);
  color: var(--tape-ink);
  font-size: var(--t-meta);
  font-weight: var(--w-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.tape span:before,
.tape span:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
}
.tape span:before {
  right: calc(100% - var(--tape-h));
  background: repeating-linear-gradient(
    -45deg,
    var(--tape-a) 0 var(--tape-w),
    var(--tape-b) var(--tape-w) calc(2 * var(--tape-w))
  );
}
.tape span:after {
  left: calc(100% - var(--tape-h));
  background: repeating-linear-gradient(
    135deg,
    var(--tape-a) 0 var(--tape-w),
    var(--tape-b) var(--tape-w) calc(2 * var(--tape-w))
  );
}
html:has(.has-tape) {
  scroll-padding-top: calc(var(--s-5) + var(--tape-h));
}
html:has(.tapes-2) {
  scroll-padding-top: calc(var(--s-5) + 2 * var(--tape-h));
}
.page-head .hash {
  color: var(--highlight);
}
:is(.tag-index, .tag) .hash {
  color: var(--ink-3);
}
.crumbs {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-weight: var(--w-strong);
  color: var(--on-field-2);
}
.crumbs a {
  color: var(--on-field-2);
}
.post-title {
  font-size: var(--t-post);
}
.post-desc {
  margin: var(--s-5) 0 0;
  max-width: var(--measure-desc);
  color: var(--on-field-2);
  font-size: var(--t-lead);
  line-height: var(--lh-text);
  letter-spacing: var(--track-text);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s-2);
  margin: var(--s-6) 0 0;
  font-weight: var(--w-semibold);
  color: var(--on-field-2);
}
.post-meta > * {
  line-height: var(--lh-heading);
}
.post-meta > * + *:before {
  content: "";
  display: inline-block;
  vertical-align: -0.12em;
  width: var(--tick-w);
  height: var(--tick-h);
  margin-inline: var(--tick-gap);
  background: var(--highlight);
  -webkit-mask: url(../tick.svg) center / contain no-repeat;
  mask: url(../tick.svg) center / contain no-repeat;
}
.post-meta > :first-child,
.post-meta em {
  color: var(--on-field);
  font-style: normal;
}
.hero {
  padding-block: var(--s-band) calc(var(--s-band) * 1.4);
  align-items: center;
  row-gap: var(--s-6);
  overflow: clip;
}
.hero-text {
  grid-column: 1 / span 7;
}
.hello {
  margin: 0 0 var(--s-4);
  font-size: var(--t-subheading);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-text);
  color: var(--on-field-2);
}
.hero .display {
  font-size: var(--t-hero);
}
.intro {
  margin-top: var(--s-6);
  max-width: var(--measure-intro);
  font-size: var(--t-lead);
  line-height: var(--lh-text);
  letter-spacing: var(--track-text);
  color: var(--on-field-2);
}
.intro .lead {
  display: none;
}
.intro p {
  margin: 0 0 var(--flow-tight);
}
.intro p:last-child {
  margin-bottom: 0;
}
.intro a {
  color: var(--on-field);
  font-weight: var(--w-strong);
  text-decoration-color: var(--highlight);
}
@media (hover: hover) {
  .intro a:hover {
    color: var(--on-field);
  }
}
.intro strong {
  font-weight: inherit;
}
.portrait {
  grid-column: 8 / span 5;
  margin: 0;
  position: relative;
  justify-self: center;
  width: min(var(--portrait-fill), var(--portrait));
  isolation: isolate;
}
.portrait img {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}
.marks {
  position: absolute;
  inset: calc(-1 * var(--marks-bleed));
  width: calc(100% + 2 * var(--marks-bleed));
  height: calc(100% + 2 * var(--marks-bleed));
  overflow: visible;
  pointer-events: none;
}
.marks.under {
  z-index: 0;
}
.marks.over {
  z-index: 2;
}
.mk-highlight {
  color: var(--highlight);
}
.mk-spark {
  color: var(--spark);
  transform-origin: 0 0;
  transform: scale(var(--ss, 1));
}
.mk-spark > g {
  transform: translate(var(--x), var(--y)) rotate(var(--r));
}
.star-big {
  --x: -40px;
  --y: -2px;
  --r: -12deg;
}
.star-small {
  --x: -30px;
  --y: 46px;
  --r: 15deg;
}
.star-tiny {
  --x: 18px;
  --y: -32px;
  --r: 20deg;
}
.profiles-band {
  background: var(--field-deep);
  color: var(--on-field);
}
.profiles {
  --cols: 6;
  --icon-size: var(--icon);
}
.profiles li + li {
  border-left: var(--line) solid var(--on-field-rule);
}
.profiles a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--strip);
  text-decoration: none;
  font-weight: var(--w-strong);
  font-size: var(--t-ui);
  color: var(--on-field);
}
@media (hover: hover) {
  .profiles a:hover {
    background: var(--on-field-hover);
  }
}
.profiles .icon {
  color: var(--highlight);
}
.seen-at {
  position: relative;
  padding-block: var(--s-6);
  align-items: center;
  border-bottom: var(--line) solid var(--rule);
}
.seen-title,
.stat-chart .sec-title,
.heat .sec-title {
  font-size: var(--t-subheading);
  line-height: var(--lh-heading);
}
.seen-title {
  grid-column: 1 / span 2;
}
.marquee {
  grid-column: 3 / -1;
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    var(--mask-solid) var(--marquee-fade),
    var(--mask-solid) calc(100% - var(--marquee-fade)),
    transparent
  );
  mask: linear-gradient(
    90deg,
    transparent,
    var(--mask-solid) var(--marquee-fade),
    var(--mask-solid) calc(100% - var(--marquee-fade)),
    transparent
  );
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}
@media (hover: hover) {
  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}
.marquee.paused .marquee-track,
.seen-at:focus-within .marquee-track {
  animation-play-state: paused;
}
.marquee-set {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
}
.marquee-set li {
  display: flex;
}
.logo {
  display: block;
  height: calc(var(--logo-h) * var(--scale, 1));
  aspect-ratio: var(--ratio, 1);
  background: var(--ink-3);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
@keyframes marquee {
  to {
    transform: translate(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask: none;
    mask: none;
  }
  .marquee-track {
    animation: none;
    width: auto;
  }
  .marquee-set {
    flex-wrap: wrap;
    padding: 0;
    row-gap: var(--s-4);
  }
  .marquee-set[aria-hidden],
  .marquee-set li[aria-hidden],
  .marquee-pause {
    display: none;
  }
}
.section {
  padding-top: var(--s-section);
}
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-2);
  border-bottom: var(--line-3) solid var(--rule-strong);
}
.sec-head .meta,
.year .meta {
  font-size: var(--t-ui);
  font-weight: var(--w-semibold);
}
.listing {
  padding-top: var(--s-content);
}
.page-intro {
  grid-column: 1 / span 8;
  max-width: var(--measure);
  color: var(--ink-2);
  margin-bottom: var(--s-content);
}
.page-intro p {
  margin: 0 0 var(--s-3);
}
.post-list,
.year-group {
  display: grid;
  grid-template-columns: subgrid;
}
.year-group + .year-group {
  border-top: var(--line-3) solid var(--rule-strong);
}
.year {
  grid-column: 1 / span 2;
  grid-row: 1 / span 999;
  align-self: start;
  position: sticky;
  top: var(--s-5);
  padding-top: var(--s-5);
}
.year .sec-title {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.year .meta {
  margin: var(--s-2) 0 0;
}
.year-group .post-list {
  grid-column: 3 / -1;
}
.post-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: var(--s-5);
  border-bottom: var(--line) solid var(--rule);
}
.year-group .post-row:last-child {
  border-bottom: 0;
}
.post-row > time {
  grid-column: 1 / span 2;
}
.post-row .item-title {
  grid-column: 3 / span 5;
}
.post-row .item-desc {
  grid-column: 8 / -1;
}
.year-group .post-row .item-title {
  grid-column: 1 / span 5;
}
.year-group .post-row .item-desc {
  grid-column: 6 / -1;
}
.year-group .post-row > time {
  grid-column: 1 / -1;
  margin-bottom: var(--s-1);
}
.project-grid {
  --cols: 4;
  margin: var(--s-4) 0 0;
  grid-auto-rows: 1fr;
  border: var(--line) solid var(--rule);
  overflow: hidden;
}
.project-grid li {
  margin: 0 calc(-1 * var(--line)) calc(-1 * var(--line)) 0;
  border-right: var(--line) solid var(--rule);
  border-bottom: var(--line) solid var(--rule);
}
.project-grid a {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-5);
  text-decoration: none;
}
.project-grid a:has(.badge-external) {
  padding-bottom: calc(var(--corner-tab) + var(--s-2));
}
.project-grid .badge-external {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: var(--corner-tab);
  height: var(--corner-tab);
  padding: 0;
}
@media (hover: hover) {
  .project-grid a:hover {
    background: var(--paper-2);
  }
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.tag {
  min-height: var(--control-sm);
  padding: 0 var(--s-2);
  border: var(--line) solid var(--rule);
  font-size: var(--t-meta);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
}
.tag-index {
  --cols: 4;
  column-gap: var(--col-gap);
}
.tag-index li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--line) solid var(--rule);
}
.tag-index a {
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.post-grid {
  padding-top: var(--s-content);
  align-items: start;
}
.prose {
  grid-column: 4 / span 8;
  grid-row: 1;
  max-width: var(--measure);
}
.prose-wide {
  grid-column: 1 / span 9;
}
.post-side {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  position: sticky;
  top: calc(var(--s-5) + var(--stuck, 0px));
  display: grid;
  align-content: start;
  gap: 0;
  font-size: var(--t-small);
  max-height: calc(100vh - 2 * var(--s-5) - var(--stuck, 0px));
  max-height: calc(100dvh - 2 * var(--s-5) - var(--stuck, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.post-side::-webkit-scrollbar {
  display: none;
}
.side-label {
  display: block;
  font-size: var(--t-meta);
  font-weight: var(--w-bold);
  color: var(--ink);
}
.side-group {
  padding-block: var(--s-3);
  border-top: var(--line-2) solid var(--rule-strong);
}
.side-group > :not(summary, .side-head) {
  margin-top: var(--s-3);
}
.side-group > summary,
.side-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--control-md);
  margin: 0;
}
.side-group > summary {
  list-style: none;
  cursor: pointer;
}
.side-group > summary::-webkit-details-marker {
  display: none;
}
.side-group > summary:after {
  content: "";
  flex: none;
  margin-left: auto;
  width: var(--toggle);
  height: var(--toggle);
  border: var(--line) solid var(--rule);
  background:
    linear-gradient(var(--accent), var(--accent)) center / var(--toggle-bar)
      var(--line-2) no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / var(--line-2)
      var(--toggle-bar) no-repeat;
}
.side-group[open] > summary:after {
  background: linear-gradient(var(--accent), var(--accent)) center /
    var(--toggle-bar) var(--line-2) no-repeat;
}
@media (hover: hover) {
  .side-group > summary:hover:after {
    border-color: var(--accent);
  }
}
.comments {
  grid-column: 4 / span 8;
  max-width: var(--measure);
  margin-top: var(--s-6);
}
.comments .utterances {
  max-width: none;
  margin: 0;
  width: 100%;
}
.toc ul,
.series-box ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: var(--line-2) solid var(--rule);
}
.toc ul ul {
  border: 0;
}
.toc a,
.series-box li {
  display: block;
  min-height: var(--control-sm);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  margin-left: calc(-1 * var(--line-2));
  border-left: var(--line-2) solid transparent;
  line-height: var(--lh-snug);
  color: var(--ink-2);
  text-decoration: none;
}
.toc ul ul a {
  padding-left: var(--s-6);
}
.series-box a {
  color: var(--ink-2);
}
@media (hover: hover) {
  .toc a:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
}
.toc a.active,
.series-box li[aria-current] {
  border-left-color: var(--accent);
  background: var(--paper-2);
  color: var(--ink);
  -webkit-text-stroke: var(--stroke-bold) currentColor;
}
.prose > * {
  margin-block: 0 var(--flow);
}
.prose > :first-child,
:is(.callout-body, .mole .bubble) > :first-child {
  margin-top: 0;
}
.prose > :last-child,
:is(.prose blockquote, .callout-body, .mole .bubble) > :last-child {
  margin-bottom: 0;
}
.prose > img {
  display: block;
}
.prose
  > :is(
    img,
    .highlight,
    pre,
    figure,
    .table-wrap,
    .callout,
    .mole,
    .video,
    .embed,
    .quote,
    .mermaid,
    .chart,
    .katex-display
  ),
.prose > p:has(> img:only-child),
.prose > p:has(> .katex-display) {
  margin-block: var(--flow-block);
}
.prose > :is(h2, h3, h4, h5, h6) + * {
  margin-top: 0;
}
.prose li > :is(.highlight, pre, figure) {
  margin-block: var(--flow);
}
.prose li > p {
  margin-block: 0 var(--s-2);
}
.prose li > :is(ul, ol) {
  margin-top: var(--s-2);
}
.prose strong {
  font-weight: var(--w-bold);
}
.prose :where(ul, ol):not([class]) {
  padding-left: var(--list-indent);
}
.prose li {
  margin-bottom: var(--s-2);
}
.prose li::marker {
  color: var(--accent);
}
.prose > h2 {
  margin: var(--h2-space);
  font-size: var(--t-heading);
  font-weight: var(--w-heavy);
  letter-spacing: var(--track-display);
  line-height: var(--lh-h2);
}
.prose > h2 .h-text {
  padding-bottom: var(--squiggle-room);
  background: var(--scribble) left bottom / auto var(--squiggle-h) repeat-x;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.prose > h3 {
  margin: var(--h3-space);
  font-size: var(--t-subheading);
  font-weight: var(--w-heading);
  letter-spacing: var(--track-heading);
  line-height: var(--lh-heading);
}
.prose > :is(h4, h5, h6) {
  margin: var(--h4-space);
  font-size: var(--t-h4);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}
.prose .anchor {
  margin-left: 0.25em;
  font-weight: inherit;
  text-decoration: none;
  color: var(--ink-3);
  opacity: 0;
}
.prose .anchor:before {
  content: "#";
}
.prose :is(h2, h3, h4, h5, h6):hover .anchor,
.prose .anchor:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .prose .anchor {
    display: none;
  }
}
.prose :not(pre) > code {
  font-size: var(--t-small);
  font-weight: var(--w-regular);
  background: var(--accent-tint);
  color: var(--accent-ink);
  padding: var(--chip-pad);
  overflow-wrap: anywhere;
}
.prose blockquote {
  margin-inline: 0;
  padding-left: var(--s-5);
  border-left: var(--line-3) solid var(--accent);
  color: var(--ink-2);
}
.prose hr {
  border: 0;
  border-top: var(--line) solid var(--rule);
  margin: var(--flow-block) 0;
}
.prose .lead {
  font-size: var(--t-prose-lead);
}
.prose .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.25em;
}
.prose svg:not(.icon svg) {
  margin-inline: 0 !important;
}
.prose kbd {
  font-size: var(--t-small);
  padding: var(--chip-pad);
  border: var(--line) solid var(--rule);
  border-bottom-width: var(--line-2);
  background: var(--paper-2);
}
.prose :is(h2, h3, h4, h5, h6, .lead) :is(code, kbd) {
  font-size: 0.88em;
}
.prose figure {
  margin-inline: 0;
}
.prose .fig {
  display: table;
  min-width: min(100%, var(--figure-min));
  border: var(--line) solid var(--rule);
}
.prose .fig > a {
  display: block;
}
.prose .fig img {
  display: block;
  margin-inline: auto;
}
.prose .fig.fig-small img {
  margin-block: var(--s-5);
}
.prose figcaption {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  line-height: var(--lh-text);
  color: var(--ink-2);
}
.prose .fig > figcaption {
  display: table-caption;
  caption-side: bottom;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--paper-2);
  border: var(--line) solid var(--rule);
  border-top: 0;
}
.image-left,
.image-right {
  max-width: 50%;
  margin-top: 0.4em !important;
}
.highlight {
  position: relative;
}
.highlight pre {
  margin: 0;
  padding-right: var(--copy-room);
}
.prose pre {
  --cue-bg: var(--code-bg);
  --cue: var(--cue-on-code);
  padding: var(--s-5);
  overflow-x: auto;
  color: var(--code-ink);
  border: var(--line) solid var(--code-rule);
  font-size: var(--t-code);
  line-height: var(--lh-code);
  tab-size: 2;
}
.highlight code {
  background: none;
  color: inherit;
  padding: 0;
}
.highlight .copy {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  border-color: var(--code-btn-rule);
  background: var(--code-btn);
  color: var(--code-btn-ink);
  opacity: 0;
}
.highlight:hover .copy,
.highlight .copy:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .highlight .copy {
    opacity: 1;
  }
}
@media (hover: hover) {
  .highlight .copy:hover {
    border-color: var(--code-btn-hover);
    color: var(--code-btn-hover);
  }
}
.chroma :is(.c, .c1, .ch, .cm, .cp, .cpf, .cs) {
  color: var(--code-comment);
  font-style: italic;
}
.chroma
  :is(.s, .s1, .s2, .sa, .sb, .sc, .sd, .se, .sh, .si, .sr, .ss, .sx, .dl) {
  color: var(--code-string);
}
.chroma :is(.m, .mb, .mf, .mh, .mi, .il, .mo) {
  color: var(--code-number);
}
.chroma :is(.k, .kc, .kd, .kn, .kp, .kr, .nt, .ow) {
  color: var(--code-keyword);
}
.chroma :is(.nf, .fm, .nb, .bp, .nd, .nv) {
  color: var(--code-function);
}
.chroma :is(.kt, .nc, .nn, .na, .nl, .no) {
  color: var(--code-type);
}
.chroma .hl {
  display: block;
  background: var(--code-hl);
}
.chroma .lnt,
.chroma .ln {
  color: var(--code-comment);
  margin-right: var(--s-4);
  user-select: none;
}
.table-wrap {
  overflow-x: auto;
  border: var(--line) solid var(--rule);
}
.table-wrap table {
  width: 100%;
  min-width: var(--table-min);
  border-collapse: collapse;
  font-size: var(--t-small);
  overflow-wrap: normal;
}
.table-wrap th {
  text-align: left;
  font-weight: var(--w-bold);
  background: var(--paper-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--line-2) solid var(--rule-strong);
  white-space: nowrap;
}
.table-wrap td {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--line) solid var(--rule);
  vertical-align: middle;
}
.table-wrap :is(th, td) + :is(th, td) {
  border-left: var(--line) solid var(--rule);
}
.table-wrap tr:last-child td {
  border-bottom: 0;
}
.table-wrap td code {
  white-space: nowrap;
  overflow-wrap: normal;
}
.table-wrap td img {
  max-height: var(--table-img);
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.table-wrap,
.prose pre,
.mermaid,
.heat-wrap {
  background:
    linear-gradient(
        90deg,
        var(--cue-bg, var(--paper)) var(--cue-w),
        transparent calc(2 * var(--cue-w))
      )
      left / calc(2 * var(--cue-w)) 100% no-repeat local,
    linear-gradient(
        270deg,
        var(--cue-bg, var(--paper)) var(--cue-w),
        transparent calc(2 * var(--cue-w))
      )
      right / calc(2 * var(--cue-w)) 100% no-repeat local,
    linear-gradient(90deg, var(--cue, var(--cue-on-paper)), transparent) left /
      var(--cue-w) 100% no-repeat scroll,
    linear-gradient(270deg, var(--cue, var(--cue-on-paper)), transparent)
      right / var(--cue-w) 100% no-repeat scroll,
    var(--cue-bg, var(--paper));
}
.callout {
  --c: var(--note);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-5);
  background: color-mix(in oklab, var(--c) 8%, var(--paper));
  border-left: var(--line-3) solid var(--c);
}
.callout > .icon {
  color: var(--c);
  align-self: start;
  margin-top: 0.25em;
}
.callout-tip {
  --c: var(--tip);
}
.callout-warn {
  --c: var(--warn);
}
.callout-danger {
  --c: var(--danger);
}
.prose > .mole {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
}
.mole-face {
  flex: none;
  width: var(--mole);
  height: auto;
  display: block;
}
.mole .bubble {
  flex: 1;
  min-width: 0;
  position: relative;
  background: var(--accent-tint);
  color: var(--ink);
  padding: var(--s-5);
}
.mole .bubble:before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--tail-w));
  bottom: 0;
  width: var(--tail-w);
  height: var(--tail-h);
  background: var(--accent-tint);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.prose .quote {
  border: var(--line) solid var(--rule);
}
.quote blockquote {
  margin: 0;
  padding: var(--s-5);
  border-left: 0;
  color: var(--ink);
}
.prose .quote blockquote > :first-child {
  margin-top: 0;
}
.prose .quote blockquote > :last-child,
.prose .quote blockquote > :last-child > li:last-child {
  margin-bottom: 0;
}
.quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  margin: 0;
  padding: var(--s-3) var(--s-5);
  background: var(--paper-2);
  border-top: var(--line) solid var(--rule);
}
.quote-by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  min-width: 0;
}
.quote-author {
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.quote cite {
  font-style: normal;
}
.prose .quote-source {
  font-weight: var(--w-medium);
  overflow-wrap: anywhere;
}
.mermaid {
  padding: var(--s-5);
  border: var(--line) solid var(--rule);
  text-align: center;
  overflow-x: auto;
}
.chart canvas {
  max-width: 100%;
}
.video video:not([width]) {
  width: 100%;
}
.video video {
  display: block;
  background: var(--letterbox);
}
.embed-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.embed iframe {
  display: block;
}
a.button {
  gap: var(--s-2);
  min-height: var(--control);
  padding: 0 var(--s-4);
  background: var(--field);
  color: var(--on-field);
}
@media (hover: hover) {
  a.button:hover {
    background: var(--field-deep);
    color: var(--on-field);
  }
}
.button p {
  margin: 0;
}
.footnotes {
  margin-top: var(--flow-block);
  padding-top: var(--s-4);
  border-top: var(--line) solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.footnotes hr {
  display: none;
}
.footnotes li:target,
.prose sup:target {
  background: var(--marker);
}
.notfound img {
  width: var(--notfound);
  height: auto;
  margin-bottom: var(--s-5);
}
.keep-reading {
  margin-top: var(--s-section);
  background: var(--paper-2);
  padding-block: var(--s-band);
  align-items: start;
}
.timeline {
  --cols: 5;
  column-gap: var(--col-gap);
  position: relative;
}
.timeline li {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-top: calc(var(--stop) + var(--s-3));
}
.timeline li:before {
  content: "";
  position: absolute;
  top: calc((var(--stop) - var(--line-2)) / 2);
  left: 0;
  right: calc(-1 * var(--col-gap));
  height: 0;
  border-top: var(--line-2) solid var(--rule-strong);
}
.timeline li:last-child:before {
  right: 0;
  width: var(--stop);
}
.timeline .stop {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: var(--stop);
  height: var(--stop);
  background: var(--paper-2);
  border: var(--line-2) solid var(--rule-strong);
}
.timeline .meta {
  font-weight: var(--w-semibold);
}
.timeline .timeline-title {
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}
.timeline .here .stop {
  width: var(--stop-here);
  height: var(--stop-here);
  top: calc((var(--stop) - var(--stop-here)) / 2);
  background: var(--accent);
  border-color: var(--accent);
}
.timeline .here .meta {
  color: var(--accent);
}
.timeline .here .timeline-title {
  color: var(--ink);
}
.books .shelf + .shelf {
  margin-top: var(--s-section);
}
.book-grid {
  --cols: 6;
  margin: var(--s-4) 0 0;
  gap: var(--s-6) var(--col-gap);
}
.book {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-snug);
}
:is(.book, .now-book) :is(img, .cover-missing) {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--paper-2);
  border: var(--line) solid var(--rule);
}
.book .cover {
  position: relative;
  margin-bottom: var(--s-3);
}
:is(.book, .now-book) .cover-missing {
  display: grid;
  place-items: center;
  padding: var(--s-4);
  text-align: center;
  color: var(--ink-3);
}
.book .item-title {
  font-size: var(--t-ui);
}
.book .item-desc {
  margin: var(--s-2) 0 var(--s-3);
}
.badge {
  display: inline-block;
  padding: var(--label-pad);
  background: var(--highlight);
  color: var(--on-highlight);
  font-size: var(--t-meta);
  font-weight: var(--w-bold);
  line-height: var(--lh-heading);
  letter-spacing: normal;
  white-space: nowrap;
}
.badge-draft {
  background: var(--danger);
  color: var(--on-danger);
}
.item-title .badge {
  margin-left: var(--s-2);
  vertical-align: 0.2em;
}
.book .badge-must {
  position: absolute;
  left: 0;
  bottom: 0;
}
.book-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-2);
  margin: auto 0 0;
  padding-top: var(--s-2);
  border-top: var(--line) solid var(--rule);
  font-size: var(--t-meta);
}
.rating {
  color: var(--accent);
  letter-spacing: var(--track-wide);
  white-space: nowrap;
}
.rating .off {
  color: var(--ink-3);
}
.book-foot time {
  white-space: nowrap;
}
.now-reading {
  --cols: 2;
  margin: var(--s-4) 0 0;
  gap: var(--s-6) var(--col-gap);
}
.now-book {
  display: grid;
  grid-template-columns: var(--cover-feature) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: center;
  padding: var(--s-5);
  background: var(--accent-tint);
}
.now-title {
  font-size: var(--t-heading);
  font-weight: var(--w-heavy);
  letter-spacing: var(--track-display);
  line-height: var(--lh-heading);
  overflow-wrap: anywhere;
}
.now-author {
  margin: var(--s-2) 0 0;
  font-size: var(--body);
  color: var(--ink-2);
}
.now-book .meta {
  margin: var(--s-3) 0 0;
}
.figures {
  --cols: 3;
  gap: var(--col-gap);
  margin: 0 0 var(--s-section);
  padding-top: var(--s-4);
  border-top: var(--line-3) solid var(--rule-strong);
}
.figures dt {
  font-weight: var(--w-bold);
}
.figures dd {
  margin: var(--s-1) 0 0;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.figures dd .figure-note {
  display: block;
  margin: var(--s-1) 0 0;
  font-size: var(--body);
  font-weight: var(--w-regular);
  letter-spacing: normal;
  line-height: var(--lh-body);
  color: var(--ink-3);
  font-variant-numeric: normal;
  text-wrap: pretty;
}
.heat-years {
  display: grid;
  gap: var(--s-6);
  margin: var(--s-4) 0 var(--s-section);
}
.heat {
  margin: 0;
  min-width: 0;
}
.heat-wrap {
  overflow-x: auto;
  padding-bottom: var(--s-1);
}
.heat-months,
.heat-grid {
  display: grid;
  grid-template-columns: var(--heat-label) repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--cell-gap);
  min-width: calc(var(--heat-label) + var(--cols) * var(--cell-min));
}
.heat-months {
  margin-bottom: var(--s-1);
  font-size: var(--t-meta);
  font-weight: var(--w-medium);
  line-height: var(--lh-heading);
  color: var(--ink-3);
}
.heat-months span {
  grid-column: var(--col) / span 4;
  grid-row: 1;
  white-space: nowrap;
  overflow: hidden;
}
.heat-grid {
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
  row-gap: var(--cell-gap);
}
.heat-grid .day {
  grid-column: 1;
  grid-row: var(--row);
  align-self: center;
  padding-right: var(--s-2);
  font-size: var(--t-meta);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  color: var(--ink-3);
  white-space: nowrap;
}
.heat-grid i {
  display: block;
  aspect-ratio: 1;
  background: var(--heat-0);
}
.heat-grid .alt {
  background: var(--heat-0b);
}
.heat-grid .pad {
  background: none;
}
.heat-grid .l1 {
  background: var(--heat-1);
}
.heat-grid .l2 {
  background: var(--heat-2);
}
.heat-grid .l3 {
  background: var(--heat-3);
}
.chart-grid {
  --cols: 2;
  gap: var(--s-section) var(--col-gap);
}
.stat-chart {
  margin: 0;
}
.stat-chart.wide {
  grid-column: 1 / -1;
}
.chart-box {
  position: relative;
  height: var(--chart-h);
  margin-top: var(--s-4);
}
#search {
  width: min(var(--dialog-w), 100% - 2 * var(--s-4));
  max-height: min(var(--dialog-h), var(--dialog-max));
  margin: var(--dialog-top) auto auto;
  padding: 0;
  border: 0;
  border-top: var(--line-4) solid var(--field);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--dialog-shadow);
}
#search::backdrop {
  background: var(--backdrop);
}
#search form {
  display: flex;
  align-items: center;
  border-bottom: var(--line-2) solid var(--rule);
}
#search form:focus-within {
  border-bottom-color: var(--accent);
}
#search input {
  flex: 1;
  font: var(--w-medium) var(--t-input) var(--sans);
  padding: var(--s-4) var(--s-5);
  border: 0;
  background: none;
  color: inherit;
  outline: 0;
}
#search input::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
#search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
#search form button {
  color: var(--ink-3);
  background: none;
  border-color: var(--rule);
  margin-right: var(--s-4);
}
#search [role="status"] {
  margin: 0;
  padding: var(--s-3) var(--s-5);
}
#search ol {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0;
  overflow: auto;
}
#search .hit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: var(--line) solid var(--rule);
}
#search .hit-title {
  font-weight: var(--w-strong);
}
#search .hit .meta {
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .post-row .item-title,
  .post-row .item-desc {
    grid-column: 3 / -1;
  }
  .post-row .item-desc {
    margin-top: var(--s-2);
  }
  .year-group .post-row .item-title,
  .year-group .post-row .item-desc {
    grid-column: 1 / -1;
  }
  .profiles {
    --cols: 3;
  }
  .profiles li:nth-child(4) {
    border-left: 0;
  }
  .profiles li:nth-child(n + 4) {
    border-top: var(--line) solid var(--on-field-rule);
  }
  .project-grid,
  .tag-index {
    --cols: 2;
  }
  .book-grid {
    --cols: 4;
  }
  .now-reading {
    --cols: 1;
  }
  .mk-spark {
    --ss: 0.8;
  }
}
@media (max-width: 860px) {
  .foot-id,
  .foot-pages,
  .foot-elsewhere,
  .hero-text,
  .portrait,
  .post-side,
  .prose,
  .comments,
  .page-intro {
    grid-column: 1 / -1;
  }
  .portrait {
    width: min(var(--portrait-fill-stacked), var(--portrait-stacked));
    order: -1;
    margin: calc(var(--s-6) + var(--portrait-lift)) 0 var(--s-4);
    justify-self: start;
  }
  .mk-spark {
    --ss: 1;
  }
  .star-big {
    --x: 42px;
    --y: -46px;
  }
  .star-small {
    --x: 92px;
    --y: -24px;
  }
  .star-tiny {
    --x: 0px;
    --y: -22px;
  }
  .post-row > time,
  .post-row .item-title,
  .post-row .item-desc {
    grid-column: 1 / -1;
  }
  .seen-title,
  .marquee {
    grid-column: 1 / -1;
  }
  .seen-at {
    row-gap: var(--s-4);
  }
  .post-row > time {
    margin-bottom: var(--s-1);
  }
  .year {
    grid-column: 1 / -1;
    grid-row: auto;
    position: static;
  }
  .year-group .post-list {
    grid-column: 1 / -1;
  }
  .post-side {
    grid-row: auto;
    position: static;
    max-height: none;
    margin-top: var(--s-content);
  }
  .post-side .toc {
    display: none;
  }
  .timeline {
    --cols: 1;
    row-gap: var(--s-5);
    --rail: calc(var(--stop) + var(--s-4));
    padding-left: var(--rail);
  }
  .timeline li {
    padding-top: 0;
  }
  .timeline li:before {
    top: calc((var(--stop) - var(--line-2)) / 2);
    bottom: calc(-1 * var(--s-5) - (var(--stop) - var(--line-2)) / 2);
    left: calc(-1 * var(--rail) + (var(--stop) - var(--line-2)) / 2);
    right: auto;
    width: 0;
    height: auto;
    border-top: 0;
    border-left: var(--line-2) solid var(--rule-strong);
  }
  .timeline li:last-child:before {
    display: none;
  }
  .timeline .stop {
    left: calc(-1 * var(--rail));
    top: var(--s-1);
  }
  .timeline .here .stop {
    left: calc(-1 * var(--rail) + (var(--stop) - var(--stop-here)) / 2);
    top: calc(var(--s-1) + (var(--stop) - var(--stop-here)) / 2);
  }
  .profiles {
    --cols: 2;
  }
  .profiles li,
  .profiles li + li {
    border-left: 0;
    border-top: var(--line) solid var(--on-field-rule);
  }
  .profiles li:nth-child(2n) {
    border-left: var(--line) solid var(--on-field-rule);
  }
  .profiles li:nth-child(-n + 2) {
    border-top: 0;
  }
  .figures,
  .chart-grid {
    --cols: 1;
  }
  .book-grid {
    --cols: 3;
  }
  .mermaid svg {
    min-width: var(--diagram-min);
  }
  .site-header {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .site-header {
    row-gap: 0;
  }
  .site-header .tools {
    order: 1;
    margin-left: auto;
  }
  .site-nav {
    order: 2;
    flex-basis: 100%;
    margin-left: 0;
  }
  .project-grid,
  .tag-index {
    --cols: 1;
  }
  .book-grid {
    --cols: 2;
  }
  .book-foot {
    flex-direction: column;
  }
  .heat-months span {
    grid-column: var(--col) / span 13;
  }
  .heat-months span:not(:nth-child(3n + 1)) {
    display: none;
  }
  .post-meta {
    flex-direction: column;
  }
  .post-meta > * + *:before {
    display: none;
  }
  .image-left,
  .image-right {
    float: none !important;
    max-width: 100% !important;
    margin: var(--flow-block) 0 !important;
  }
  #search .hit {
    flex-direction: column;
    align-items: start;
    gap: var(--s-1);
  }
}
@media (max-width: 480px) {
  :root {
    --nav-gap: 0.9rem;
    --t-wordmark: 1.4rem;
    --mole: 4rem;
  }
  .tools {
    gap: var(--s-3);
  }
  .prose > .mole {
    gap: var(--s-3);
  }
}
@media (max-width: 360px) {
  :root {
    --nav-gap: 0.75rem;
  }
  .wordmark {
    flex-basis: 100%;
  }
  .site-nav {
    order: 2;
    flex-basis: auto;
  }
  .site-header .tools {
    order: 3;
    gap: var(--s-2);
  }
  .icon-btn {
    min-width: var(--icon-sm);
  }
}
@media print {
  .season-layer,
  .switch,
  .mk-pumpkin {
    display: none !important;
  }
  :root,
  :root[data-theme="dark"] {
    color-scheme: light;
  }
  .site-header .tools,
  .site-footer,
  .keep-reading,
  .post-side,
  .comments,
  #search,
  .highlight .copy,
  .marquee-pause {
    display: none;
  }
  .band {
    background: none;
    color: inherit;
  }
  .band a,
  .crumbs,
  .crumbs a,
  .post-desc,
  .post-meta,
  .post-meta > :first-child,
  .post-meta em,
  .hello,
  .intro,
  .intro a {
    color: inherit;
  }
  .prose,
  .comments {
    grid-column: 1 / -1;
  }
  .prose pre {
    background: none;
    color: var(--ink);
    border-color: var(--rule);
  }
  .prose .chroma span {
    color: inherit;
  }
}
@media (forced-colors: active) {
  .logo,
  .post-meta > * + *:before {
    background: CanvasText;
    forced-color-adjust: none;
  }
  .side-group > summary:after {
    forced-color-adjust: none;
    border-color: CanvasText;
    background:
      linear-gradient(CanvasText, CanvasText) center / var(--toggle-bar)
        var(--line-2) no-repeat,
      linear-gradient(CanvasText, CanvasText) center / var(--line-2)
        var(--toggle-bar) no-repeat;
  }
  .side-group[open] > summary:after {
    background: linear-gradient(CanvasText, CanvasText) center /
      var(--toggle-bar) var(--line-2) no-repeat;
  }
  .toc a.active,
  .toc [aria-current] {
    text-decoration: underline;
  }
  .rating .off {
    color: GrayText;
  }
  .mole .bubble {
    border: var(--line) solid CanvasText;
  }
}

:root[data-scheme="ultraviolet"],
:root[data-scheme="pine"],
:root[data-scheme="midnight"] {
  --accent: light-dark(#7a1018, #d97880);
  --accent-ink: light-dark(#5b0b12, #f0a4a9);
  --field: light-dark(#5b1018, #3b1018);
  --field-deep: light-dark(#450c13, #280a0e);
  --accent-tint: light-dark(#f5e4e5, #301519);
  --on-field-2: light-dark(#e8bfc2, #f0c9cb);
  --code-btn-hover: #d97880;
}
@supports not (color: light-dark(#000, #fff)) {
  :root[data-scheme="ultraviolet"],
  :root[data-scheme="pine"],
  :root[data-scheme="midnight"] {
    --accent: #7a1018;
    --accent-ink: #5b0b12;
    --field: #5b1018;
    --field-deep: #450c13;
    --accent-tint: #f5e4e5;
    --on-field-2: #e8bfc2;
    --code-btn-hover: #7a1018;
  }
}