/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}:root,:host{--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-semibold:600;--tracking-tight:-.025em;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.\!visible{visibility:visible!important}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mt-0{margin-top:0}.mt-20{margin-top:calc(var(--spacing) * 20)}.mr-\[0\.35rem\]{margin-right:.35rem}.ml-\[0\.35rem\]{margin-left:.35rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.min-h-0{min-height:0}.min-h-dvh{min-height:100dvh}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.gap-\[0\.6rem\]{gap:.6rem}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) * .8)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-\[color\:var\(--tufte-rule\)\]{border-color:var(--tufte-rule)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--background)}.bg-card{background-color:var(--card)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:#0000}.p-6{padding:calc(var(--spacing) * 6)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-\[0\.35rem\]{padding-inline:.35rem}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-\[0\.35rem\]{padding-block:.35rem}.pt-0{padding-top:0}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-6{padding-top:calc(var(--spacing) * 6)}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.95rem\]{font-size:.95rem}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-none{--tw-leading:1;line-height:1}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.02em\]{--tw-tracking:.02em;letter-spacing:.02em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.\!text-\[var\(--ascii-muted\)\]{color:var(--ascii-muted)!important}.text-\[var\(--ascii-ink\)\]{color:var(--ascii-ink)}.text-card-foreground{color:var(--card-foreground)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.italic{font-style:italic}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-\[color\,background-color\,outline-color\,outline-offset\]{transition-property:color,background-color,outline-color,outline-offset;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (hover:hover){.hover\:bg-\[var\(--ascii-fill-hover\)\]:hover{background-color:var(--ascii-fill-hover)}.hover\:\!text-\[var\(--ascii-ink\)\]:hover{color:var(--ascii-ink)!important}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:outline:focus-visible,.focus-visible\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-offset-3:focus-visible{outline-offset:3px}.focus-visible\:outline-\[var\(--ascii-ink\)\]:focus-visible{outline-color:var(--ascii-ink)}:root{--radius:0;--ascii-ink:#111;--ascii-muted:#777;--ascii-paper:#fffff8;--ascii-fill:#1111110d;--ascii-fill-hover:#1111111a;--ascii-border:#11111121;--background:var(--ascii-paper);--foreground:var(--ascii-ink);--card:#f7f7ef;--card-foreground:var(--ascii-ink);--muted:var(--ascii-muted);--muted-foreground:var(--ascii-muted);--primary:var(--ascii-ink);--primary-foreground:var(--ascii-paper);--secondary:#f0f0e8;--secondary-foreground:var(--ascii-ink);--accent:var(--ascii-fill-hover);--accent-foreground:var(--ascii-ink);--border:var(--ascii-border);--ring:var(--ascii-ink);--input:#11111138}:root.dark{--ascii-ink:#e9e6dd;--ascii-muted:#8f8c83;--ascii-paper:#11110f;--ascii-fill:#e9e6dd0d;--ascii-fill-hover:#e9e6dd1a;--ascii-border:#e9e6dd21;--background:var(--ascii-paper);--foreground:var(--ascii-ink);--card:#191918;--card-foreground:var(--ascii-ink);--muted:var(--ascii-muted);--muted-foreground:var(--ascii-muted);--primary:var(--ascii-ink);--primary-foreground:var(--ascii-paper);--secondary:#1d1d1b;--secondary-foreground:var(--ascii-ink);--accent:var(--ascii-fill-hover);--accent-foreground:var(--ascii-ink);--border:var(--ascii-border);--ring:var(--ascii-ink);--input:#e9e6dd38}@layer base{html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-size:15px;overflow-x:clip}html.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--ascii-paper);color:var(--ascii-ink);-webkit-font-smoothing:antialiased;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:15px;line-height:1.6;overflow-x:clip}a{color:inherit}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

@charset "UTF-8";

/* Self-hosted EB Garamond variable faces. The Vietnamese subset is kept
   separate so English pages do not download those extra glyphs. */
@font-face {
  font-family: "EB Garamond Variable";
  src: url("eb-garamond/eb-garamond-latin-wght-normal.woff2")
    format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+1-FF, 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: "EB Garamond Variable";
  src: url("eb-garamond/eb-garamond-vietnamese-wght-normal.woff2")
    format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "EB Garamond Variable";
  src: url("eb-garamond/eb-garamond-latin-wght-italic.woff2")
    format("woff2-variations");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  unicode-range:
    U+1-FF, 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: "EB Garamond Variable";
  src: url("eb-garamond/eb-garamond-vietnamese-wght-italic.woff2")
    format("woff2-variations");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* Tufte CSS styles */
html {
  font-size: 15px;
}

body {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12.5%;
  font-family:
    "EB Garamond Variable", Palatino, "Palatino Linotype", "Palatino LT STD",
    "Book Antiqua", Georgia, serif;
  background-color: #fffff8;
  color: #111;
  max-width: 1400px;
  counter-reset: sidenote-counter;
}

/* Soft navigation focuses the replaced article outlet programmatically.
   Keep that focus accessible without showing a ring; keyboard focus still
   remains visible through :focus-visible. */
[data-soft-nav-outlet]:focus:not(:focus-visible) {
  outline: none;
}

[data-soft-nav-outlet][data-soft-nav-programmatic-focus]:focus {
  outline: none;
}

.soft-nav-focus-target {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h1 {
  font-weight: 400;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  font-size: 3.2rem;
  line-height: 1;
}

h2 {
  font-style: italic;
  font-weight: 400;
  margin-top: 2.1rem;
  margin-bottom: 1.4rem;
  font-size: 2.2rem;
  line-height: 1;
}

h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  margin-top: 2rem;
  margin-bottom: 1.4rem;
  line-height: 1;
}

hr {
  display: block;
  height: 1px;
  width: 55%;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

p.entry-date {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #777;
  display: block;
  line-height: 1.25;
}

.numeral {
  font-family: "EB Garamond Variable";
  font-variant-numeric: oldstyle-nums;
}

.danger {
  color: red;
}

article {
  padding: 3rem 0rem;
}

section {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

p,
dl,
ol,
ul {
  font-size: 1.4rem;
  line-height: 2rem;
}

p {
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  padding-right: 0;
  vertical-align: baseline;
}

sup {
  line-height: 0;
}

/* Chapter Epigraphs */
div.epigraph {
  margin: 5em 0;
}

div.epigraph > blockquote {
  margin-top: 3em;
  margin-bottom: 3em;
}

div.epigraph > blockquote,
div.epigraph > blockquote > p {
  font-style: italic;
}

div.epigraph > blockquote > footer {
  font-style: normal;
}

div.epigraph > blockquote > footer > cite {
  font-style: italic;
}
/* end chapter epigraphs styles */

blockquote {
  font-size: 1.4rem;
}

blockquote p {
  width: 55%;
  margin-right: 40px;
}

blockquote footer {
  width: 55%;
  font-size: 1.1rem;
  text-align: right;
}

section > p,
section > footer,
section > table {
  width: 55%;
}

/* 50 + 5 == 55, to be the same width as paragraph */
section > dl,
section > ol,
section > ul {
  width: 50%;
  -webkit-padding-start: 5%;
}

dt:not(:first-child),
li:not(:first-child) {
  margin-top: 0.25rem;
}

figure {
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  max-width: 55%;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  margin: 0 0 3em 0;
}

figcaption {
  float: right;
  clear: right;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  vertical-align: baseline;
  position: relative;
  max-width: 40%;
}

figure.fullwidth figcaption {
  margin-right: 24%;
}

a:link,
a:visited {
  color: inherit;
  text-underline-offset: 0.1em;
  text-decoration-thickness: 0.05em;
}

/* Sidenotes, margin notes, figures, captions */
img {
  max-width: 100%;
  height: auto;
}

figure.fullwidth img {
  width: 100%;
}

.sidenote,
.marginnote {
  float: right;
  clear: right;
  margin-right: -60%;
  width: 50%;
  margin-top: 0.3rem;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  vertical-align: baseline;
  position: relative;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
  font-family: "EB Garamond Variable";
  position: relative;
  vertical-align: baseline;
}

.sidenote-number:after {
  content: counter(sidenote-counter);
  font-size: 1rem;
  top: -0.5rem;
  left: 0.1rem;
}

.sidenote:before {
  content: counter(sidenote-counter) " ";
  font-size: 1rem;
  top: -0.5rem;
}

blockquote .sidenote,
blockquote .marginnote {
  margin-right: -82%;
  min-width: 59%;
  text-align: left;
}

div.fullwidth,
table.fullwidth {
  width: 100%;
}

div.table-wrapper {
  overflow-x: auto;
  font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif;
}

.sans {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  letter-spacing: 0.03em;
}

code,
pre > code {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 1rem;
  line-height: 1.42;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
}

.sans > code {
  font-size: 1.2rem;
}

h1 > code,
h2 > code,
h3 > code {
  font-size: 0.8em;
}

.marginnote > code,
.sidenote > code {
  font-size: 1rem;
}

pre > code {
  font-size: 0.9rem;
  width: 52.5%;
  margin-left: 2.5%;
  overflow-x: auto;
  display: block;
}

pre.fullwidth > code {
  width: 90%;
}

.fullwidth {
  max-width: 90%;
  clear: both;
}

figure.mermaid-diagram {
  width: 90%;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

figure.mermaid-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

span.newthought {
  font-variant: small-caps;
  font-size: 1.2em;
}

input.margin-toggle {
  display: none;
}

label.sidenote-number {
  display: inline-block;
  max-height: 2rem; /* should be less than or equal to paragraph line-height */
}

label.margin-toggle:not(.sidenote-number) {
  display: none;
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 760px) {
  body {
    width: 84%;
    padding-left: 8%;
    padding-right: 8%;
  }

  hr,
  section > p,
  section > footer,
  section > table {
    width: 100%;
  }

  pre > code {
    width: 97%;
  }

  section > dl,
  section > ol,
  section > ul {
    width: 90%;
  }

  figure {
    max-width: 90%;
  }

  figcaption,
  figure.fullwidth figcaption {
    margin-right: 0%;
    max-width: none;
  }

  blockquote {
    margin-left: 1.5em;
    margin-right: 0em;
  }

  blockquote p,
  blockquote footer {
    width: 100%;
  }

  label.margin-toggle:not(.sidenote-number) {
    display: inline;
  }

  .sidenote,
  .marginnote {
    display: none;
  }

  .margin-toggle:checked + .sidenote,
  .margin-toggle:checked + .marginnote {
    display: block;
    float: left;
    left: 1rem;
    clear: both;
    width: 95%;
    margin: 1rem 2.5%;
    vertical-align: baseline;
    position: relative;
  }

  label {
    cursor: pointer;
  }

  img {
    width: 100%;
  }
}

:root {
  --ascii-paper: #fffff8;
  --ascii-ink: #111;
  --ascii-muted: #777;
  --ascii-fill-hover: rgba(17, 17, 17, 0.1);
  --ascii-border: rgba(17, 17, 17, 0.13);
  --tufte-paper: #fffff8;
  --tufte-ink: #111;
  --tufte-rule: #ccc;
}

:root.dark {
  --ascii-paper: #11110f;
  --ascii-ink: #e9e6dd;
  --ascii-muted: #8f8c83;
  --ascii-fill-hover: rgba(233, 230, 221, 0.1);
  --ascii-border: rgba(233, 230, 221, 0.13);
  --tufte-paper: var(--ascii-paper);
  --tufte-ink: var(--ascii-ink);
  --tufte-rule: var(--ascii-border);
}

body {
  box-sizing: content-box;
  background-color: var(--tufte-paper);
  color: var(--tufte-ink);
}

/* Leave room below floated sidenotes so the next article element does not
   sit directly against the note, especially around static diagrams. */
.sidenote {
  padding-bottom: 1.5rem;
}

hr {
  border-top-color: var(--tufte-rule);
}

/* Tables (the one addition to tufte-css's documented components) */
/* Constrain the table to the main column (same 55% as paragraphs): an
   over-wide table scrolls inside this box instead of spilling into the
   sidenote/marginnote gutter or past the page edge. Desktop only — tufte's
   own <=760px media query sizes .table-wrapper at 85%, which we let win. */
@media (min-width: 761px) {
  section > .table-wrapper {
    width: 55%;
  }
}
section > .table-wrapper {
  overflow-x: auto;
  margin: 1.4rem 0;
  font-size: 0.9em;
}

/* Obsidian callouts use the same restrained paper/ink palette as the rest of
   the article, with a simple title above the body. */
.callout {
  box-sizing: border-box;
  width: 55%;
  margin: 1.4rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ascii-border);
  border-left: 3px solid var(--ascii-muted);
  background: var(--ascii-fill-hover);
}

.callout-title {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.55rem;
  color: var(--ascii-ink);
  font-family: inherit;
  font-size: 1.55rem;
  font-weight: 600;
}

.callout > p {
  width: 100%;
  margin: 0.7rem 0;
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 2rem;
}

.callout > p:first-child {
  margin-top: 0;
}

.callout > p:last-child {
  margin-bottom: 0;
}

/* Keep inline code distinct from prose without turning it into a separate
   block. The existing fill token is darker than the paper in light mode and
   lighter than it in dark mode. */
code {
  padding: 0.08em 0.3em;
  border: 1px solid var(--ascii-border);
  border-radius: 0.2rem;
  background: var(--ascii-fill-hover);
}

/* Give fenced code a readable panel while preserving Tufte's narrow column
   and horizontal scrolling for long lines. */
pre > code {
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border-radius: 0.3rem;
  background: var(--ascii-fill-hover);
}

/* Full-width captions can wrap to several lines. Contain the floated
   caption so the following block starts after its full height. */
figure.fullwidth {
  display: flow-root;
}

/* Video embeds use the same outer geometry as Tufte full-width figures.
   Keep these rules on the article stylesheet so the player wrapper itself is
   constrained, without loading the landing-page application stylesheet. */
.media-chrome-player.media-video-main {
  display: flow-root;
  max-width: 55%;
  clear: both;
  margin: 0 0 3em 0;
}

.media-chrome-player.media-video-full {
  display: flow-root;
  width: 90%;
  max-width: 90%;
  clear: both;
  margin-bottom: 3em;
}

.media-chrome-player media-controller,
.media-chrome-player video {
  display: block;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 760px) {
  .media-chrome-player.media-video-main,
  .media-chrome-player.media-video-full {
    width: 100%;
    max-width: 100%;
  }
}

.article-home-nav {
  padding-top: 1.5rem;
}

.article-home-nav a {
  display: inline-block;
  text-decoration: none;
  line-height: 1.25;
}

.article-home-nav a:hover {
  text-decoration: underline;
}

figure.fullwidth figcaption {
  float: none;
  clear: both;
  width: calc(100% - 2rem);
  margin: 0 auto;
  max-width: none;
  text-align: center;
}

@media (min-width: 761px) {
  figure.fullwidth figcaption {
    max-width: 42rem;
  }
}

/* On small screens margin notes are collapsed behind their toggle labels.
   Keep the visible control compact, but give it a comfortable touch target
   without changing the surrounding paragraph's line-height. */
@media (max-width: 760px) {
  .callout {
    width: 100%;
  }

  label.margin-toggle:not(.sidenote-number) {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 0.15rem;
    border: 1px solid var(--tufte-rule);
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--tufte-ink) 6%, transparent);
    font-size: 0.9rem;
    line-height: 1;
    vertical-align: middle;
  }

  label.margin-toggle:not(.sidenote-number)::before {
    position: absolute;
    inset: -0.5rem;
    content: "";
  }

  /* Keep sidenote references in their usual superscript position, while
     giving the number itself the same compact button affordance. */
  label.sidenote-number::after {
    display: inline-block;
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid var(--tufte-rule);
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--tufte-ink) 6%, transparent);
    font-size: 0.9rem;
    line-height: 1.25rem;
    text-align: center;
    vertical-align: middle;
  }
}

.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
}
.table-wrapper table th,
.table-wrapper table td {
  padding: 0.3em 0.9em;
  border-top: 1px solid var(--tufte-rule);
  border-bottom: 1px solid var(--tufte-rule);
  text-align: left;
  vertical-align: baseline;
}
.table-wrapper table thead th {
  border-bottom-width: 2px;
}

/* Components requested by Markdown are resolved from the explicit registry
   at build time. Keep their base styling scoped so future entries do not
   change the rest of the Tufte document. */
.blog-component {
  box-sizing: border-box;
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tufte-rule);
  background: color-mix(in srgb, var(--tufte-ink) 5%, var(--tufte-paper));
}

/* Registered components can use the broad Tufte full-width area while keeping
   the same right-side breathing room as .fullwidth elements. */
@media (min-width: 761px) {
  .blog-component {
    width: 100%;
    max-width: 90%;
  }

  .blog-component[data-blog-component-client="ascii-duck"] {
    width: 55%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
}

@media (max-width: 760px) {
  .blog-component {
    width: 100%;
    max-width: 100%;
  }

  .blog-component[data-blog-component-client="ascii-duck"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}

.blog-component strong {
  display: block;
  margin-bottom: 0.35rem;
}

.blog-component p {
  margin: 0;
}

.blog-component-unknown {
  color: var(--tufte-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.talk-to-mori-component {
  overflow: hidden;
  padding: 0;
  background: var(--ascii-paper);
}

.talk-to-mori-loading {
  display: grid;
  min-height: 24rem;
  place-items: center;
  color: var(--ascii-muted);
  font-family: var(--ascii-font);
}