@import url("https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css") layer(prismjs);
@import url("fonts.css") layer(fonts);
@import url("themes.css") layer(themes);
@import url("elements.css") layer(elements);
@import url("nav.css") layer(nav);
@import url("nav-list.css") layer(nav);
@import url("syntax.css") layer(syntax);
@import url("footer.css") layer(footer);
@import url("subscription-form.css") layer(subscription-form);
@import url("tweet.css") layer(custom-elements);
:root {
  --letterboxed-width: 840px;
  --letterboxed-min-padding: 1.15rem;
  --letterboxed: max(calc(50% - var(--letterboxed-width) / 2), var(--letterboxed-min-padding));
  --text-line-breakpoint: 60ch;
  --ideal-width: calc(3em - (var(--text-line-breakpoint) - 100%));
  --dynamic-margin-inline: clamp(1em, var(--ideal-width), 3em);
}

main > header > h1 {
  margin: 0;
}

main > header {
  margin-block-end: 1.5rem;
}

.post-date {
  font-family: var(--font-main-nav-links);
  font-size: 0.75rem;
  font-weight: normal;
  margin: 0 0 12px 0;
  padding: 0;
}

.twitter-tweet {
  text-align: center;
}

.centered {
  display: flex;
  justify-content: center;
}

.attribution {
  margin-block-start: 5rem;
  font-size: 0.75rem;
}
.attribution * {
  font-size: inherit;
}

foot-notes, .foot-notes {
  display: block;
  margin-block: 4rem 0;
  margin-inline: 0;
  padding-block: 1rem 0;
  padding-inline: 0;
  border-top-style: dashed;
  border-width: 0.5px;
  border-color: color-mix(in oklab, var(--color) 40%, transparent);
  font-size: 0.75rem;
  counter-reset: top-level;
}
foot-notes *, .foot-notes * {
  font-size: inherit;
}
foot-notes > ul, .foot-notes > ul {
  list-style: lower-roman;
  padding: 0;
  margin: 0;
  margin-inline: 1em;
}
foot-notes > ul > li::marker, .foot-notes > ul > li::marker {
  color: var(--outline-focus);
}

.thoughts > nav {
  float: right;
}
.thoughts > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.thoughts > ul > li {
  margin-block: 0 2rem;
}
.thoughts > ul > li header {
  margin-block-end: 1.5rem;
}
.thoughts > ul > li h1 {
  margin: 0;
}

body > nav[data-id=secondary] {
  margin-bottom: 2em;
  text-transform: lowercase;
}
body > nav[data-id=secondary] > ol {
  display: flex;
  overflow: auto;
  margin: 0;
  padding-inline: var(--letterboxed);
  padding-block: 0.5rem;
  gap: 1rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  list-style: none;
  background-color: var(--background-color-contrast-1);
  transition: background-color 0.75s;
}
body > nav[data-id=secondary] > ol > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
body > nav[data-id=secondary] > ol > li.selected {
  font-weight: bold;
}

x-story {
  display: block;
  padding-block: 0.5em;
  padding-inline: var(--dynamic-margin-inline);
  margin: 1em 0;
  font-family: var(--font-main-nav-logo);
  background-color: var(--background-color-contrast-1);
}
x-story p {
  font-family: inherit;
}

x-highlight {
  color: var(--quote);
  display: block;
  position: relative;
  padding: 1em 0;
  margin-block: 1.5em;
  margin-inline: var(--dynamic-margin-inline);
}
x-highlight > :first-child {
  margin-block-start: 0;
}
x-highlight > :last-child {
  margin-block-end: 0;
}

x-highlight:before {
  content: "";
  position: absolute;
  color: var(--quote);
  left: 3em;
  right: 3em;
  top: 0;
  bottom: 0;
  border-block: 0.5px dashed color-mix(in oklab, var(--color), transparent);
  pointer-events: none;
}

interactive-script {
  display: flex;
  flex-direction: column;
  background: #272822;
  padding: 1em;
  gap: 1em;
}
interactive-script > *, interactive-script pre, interactive-script code {
  padding: 0;
  margin: 0;
}
interactive-script interactive-script-controls {
  display: flex;
  justify-content: end;
  padding: 0 1em 1em 1em;
}
interactive-script > pre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5em 0;
}
interactive-script > pre span {
  font-size: inherit;
}
interactive-script button {
  padding: 0.5em 1em;
}