@font-face {
  font-family: PP Mori;
  src: url("/fonts/PPMori-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: PP Mori;
  src: url("/fonts/PPMori-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: Iosevka Extended;
  src: url("/fonts/Iosevka-Extended.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: Iosevka Extended;
  src: url("/fonts/Iosevka-ExtendedItalic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: Iosevka Extended;
  src: url("/fonts/Iosevka-ExtendedBold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  --md-custom-seed: #7bd675;
  --md-primary-palette-key-color: #54824f;
  --md-secondary-palette-key-color: #6b7c66;
  --md-tertiary-palette-key-color: #517e83;
  --md-neutral-palette-key-color: #747870;
  --md-neutral-variant-palette-key-color: #73796f;
  --md-error-palette-key-color: #de3730;
  --md-background: light-dark(#f7fbf1, #10140f);
  --md-on-background: light-dark(#191d17, #e0e4da);
  --md-surface: light-dark(#f7fbf1, #10140f);
  --md-surface-dim: light-dark(#d8dbd2, #10140f);
  --md-surface-bright: light-dark(#f7fbf1, #363a34);
  --md-surface-container-lowest: light-dark(#fff, #0b0f0a);
  --md-surface-container-low: light-dark(#f2f5eb, #191d17);
  --md-surface-container: light-dark(#ecefe6, #1d211b);
  --md-surface-container-high: light-dark(#e6e9e0, #272b25);
  --md-surface-container-highest: light-dark(#e0e4da, #323630);
  --md-on-surface: light-dark(#191d17, #e0e4da);
  --md-surface-variant: light-dark(#dee5d8, #424940);
  --md-on-surface-variant: light-dark(#424940, #c2c8bd);
  --md-inverse-surface: light-dark(#2d322b, #e0e4da);
  --md-inverse-on-surface: light-dark(#eff2e9, #2d322b);
  --md-outline: light-dark(#73796f, #8c9388);
  --md-outline-variant: light-dark(#c2c8bd, #424940);
  --md-shadow: #000;
  --md-scrim: #000;
  --md-surface-tint: light-dark(#3c6839, #a2d399);
  --md-primary: light-dark(#3c6839, #a2d399);
  --md-primary-dim: light-dark(#305c2e, #bdf0b3);
  --md-on-primary: light-dark(#fff, #0c390e);
  --md-primary-container: light-dark(#bdf0b3, #255023);
  --md-on-primary-container: light-dark(#255023, #bdf0b3);
  --md-primary-fixed: #bdf0b3;
  --md-primary-fixed-dim: #a2d399;
  --md-on-primary-fixed: #002203;
  --md-on-primary-fixed-variant: #255023;
  --md-inverse-primary: light-dark(#a2d399, #3c6839);
  --md-secondary: light-dark(#53634f, #baccb3);
  --md-secondary-dim: light-dark(#475743, #d6e8ce);
  --md-on-secondary: light-dark(#fff, #253423);
  --md-secondary-container: light-dark(#d6e8ce, #3b4b38);
  --md-on-secondary-container: light-dark(#3b4b38, #d6e8ce);
  --md-secondary-fixed: #d6e8ce;
  --md-secondary-fixed-dim: #baccb3;
  --md-on-secondary-fixed: #111f0f;
  --md-on-secondary-fixed-variant: #3b4b38;
  --md-tertiary: light-dark(#38656a, #a0cfd4);
  --md-tertiary-dim: light-dark(#2c595e, #bcebf0);
  --md-on-tertiary: light-dark(#fff, #00363b);
  --md-tertiary-container: light-dark(#bcebf0, #1e4d52);
  --md-on-tertiary-container: light-dark(#1e4d52, #bcebf0);
  --md-tertiary-fixed: #bcebf0;
  --md-tertiary-fixed-dim: #a0cfd4;
  --md-on-tertiary-fixed: #002022;
  --md-on-tertiary-fixed-variant: #1e4d52;
  --md-error: light-dark(#ba1a1a, #ffb4ab);
  --md-error-dim: light-dark(#a80710, #ff554a);
  --md-on-error: light-dark(#fff, #690005);
  --md-error-container: light-dark(#ffdad6, #93000a);
  --md-on-error-container: light-dark(#93000a, #ffdad6);
  --md-custom-comment: light-dark(#296b2a, #91d888);
  --md-custom-property: light-dark(#00668a, #7cd0ff);
  --md-custom-string: light-dark(#934b00, #ffb783);
  --md-custom-punctuation: light-dark(#834790, #f4aeff);
}

:root {
  --theme-selection-bg: var(--md-secondary-container);
  --theme-selection-text: var(--md-on-secondary-container);
  --theme-toggle-selected-bg: var(--md-primary);
  --theme-toggle-selected-text: var(--md-on-primary);
  --theme-details-circle: var(--md-surface);
  --theme-link: var(--md-primary);
  --theme-redact-bg: var(--md-inverse-surface);
  --theme-redact-text: var(--md-inverse-on-surface);
  --theme-header-bg: var(--md-background);
  --theme-header-text: var(--md-on-background);
  --theme-sidebar-bg: var(--md-surface);
  --theme-sidebar-text: var(--md-on-surface);
  --theme-header-card: rgb(from var(--md-outline-variant) r g b / 8%);
  --theme-header-hover: rgb(from var(--md-primary) r g b / 12%);
  --theme-button-bg: var(--md-primary-container);
  --theme-button-text: var(--md-on-primary-container);
  --theme-text: var(--md-on-surface);
  --theme-infobox: light-dark(var(--md-secondary-container), var(--md-secondary-container));
  --theme-infobox-text: light-dark(var(--md-on-secondary-container), var(--md-on-secondary-container));
  --theme-code: var(--md-surface-container-high);
  --theme-shadow: var(--md-shadow);
  --theme-scrim: var(--md-scrim);
  --theme-page-bg: var(--md-background);
  --theme-page-text: var(--md-on-background);
  --theme-scrollbar: var(--md-primary);
  --theme-accent: var(--md-primary);
  --theme-accent2: var(--md-primary-fixed-dim);
  --theme-accent3: var(--md-tertiary-container);
  --theme-logo-text: var(--md-on-background);
  --theme-emphasis-text: var(--md-custom-emphasis);
  --theme-divider: var(--md-outline-variant);
  --theme-divider-decorative: var(--md-surface-container-highest);
  --theme-border: var(--md-outline);
  --theme-border-faint: rgb(from var(--md-outline) r g b / 16%);
  --theme-bullet-bg: var(--md-tertiary-container);
  --theme-bullet-text: var(--md-on-tertiary-container);
  --theme-photo: light-dark(var(--md-primary-container), var(--md-primary-fixed-dim));
  --theme-image: var(--md-surface-container-lowest);
  --theme-box: var(--md-surface-container);
  --theme-icon-badge: var(--md-primary-container);
  --theme-icon-badge-text: var(--md-on-primary-container);
  --theme-icon-button-badge: var(--md-surface-container-highest);
  --theme-icon-button-badge-text: var(--md-on-surface);
  --theme-card: light-dark(var(--md-surface-container), var(--md-surface-container-low));
  --theme-hover: rgb(from currentColor r g b / 6%);
  --theme-press: rgb(from currentColor r g b / 8%);
  --theme-focus-outline: 2px solid currentColor;
  --theme-focus-outline-offset: -4px;
  --syntax-background: var(--md-surface-container-low);
  --syntax-border: transparent;
  --syntax-text: var(--theme-text);
  --syntax-keyword: var(--theme-text);
  --syntax-comment: var(--md-custom-comment);
  --syntax-property: var(--md-custom-property);
  --syntax-string: var(--md-custom-string);
  --syntax-punctuation: var(--md-custom-punctuation);

  &[data-theme="light"] {
    color-scheme: light;
  }

  &[data-theme="dark"] {
    color-scheme: dark;
  }
}

:root {
  --font-fallback-main: system-ui, sans-serif;
  --font-fallback-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", "Menlo", "Monaco",
    "Consolas", "Liberation Mono", "Courier New", monospace;
  --font-body: "PP Mori", var(--font-fallback-main);
  --font-heading: var(--font-body);
  --font-mono: "Iosevka Extended", var(--font-fallback-mono);
  --tracking-label: .01em;
  --infobox-gap: 8px;
  --connected-gap: 2px;
  --card-gap: 2px;
  --button-group-gap: 12px;
  --font-size-h1: 3rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-base: 1.25rem;
  --font-size-small: 1rem;
  --font-size-code: 1rem;
  --cursor-zoom-in: url("/cursors/zoom-in.svg") 12 12, zoom-in;
  --list-inset: 24px;
  --rounded-xsmall: 4px;
  --rounded-small: 8px;
  --rounded-medium: 12px;
  --rounded-large: 16px;
  --rounded-xlarge: 32px;
  --rounded-pill: 9999px;
  --motion-duration-short3: .15s;
  --motion-duration-short4: .2s;
  --motion-duration-medium1: .25s;
  --motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-easing-standard-accelerate: cubic-bezier(.3, 0, 1, 1);
  --motion-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
  --motion-easing-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15);
  --divider-size: 8px;
  --divider-thickness: 1px;
  --width-copy: 50rem;
  --width-heading: 50rem;
  --header-height: 72px;
  --sidebar-width: 18rem;
  --link-underline-offset: calc(1em / 8);
  --link-underline-thickness: 1px;
  --link-underline-thickness-hover: calc(var(--link-underline-thickness) + 0px);

  @media (resolution >= 1.5x) {
    --link-underline-thickness: 1.5px;
  }

  @media (width < 40rem) {
    --font-size-h1: round(2rem, 1px);
    --font-size-h2: round(1.5rem, 1px);
    --font-size-h3: round(1.25rem, 1px);
    --font-size-base: round(1.15rem, 1px);
    --font-size-small: round(1rem, 1px);
  }
}

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

* {
  scroll-padding-top: 1em;
}

:root {
  -webkit-font-smoothing: antialiased;
  scrollbar-gutter: stable;
  color-scheme: light dark;
  scrollbar-color: var(--theme-scrollbar) transparent;
  font-synthesis: small-caps;
  background: var(--theme-page-bg);
  color: var(--theme-page-text);
  margin: 0;
  padding: 0;
}

:where(:root[data-figure-viewer] :is(figure, p)) img {
  cursor: var(--cursor-zoom-in);
}

body {
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  flex-direction: column;
  gap: 0;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  display: flex;
}

::selection {
  background-color: var(--theme-selection-bg);
  color: var(--theme-selection-text);
  text-shadow: none;
}

main {
  flex: auto;
}

a {
  color: var(--theme-link);
  border-radius: var(--rounded-small);
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
  outline-offset: 2px;
}

a:where(:hover, :active) {
  --link-underline-thickness: var(--link-underline-thickness-hover);
}

a:where(:focus-visible, :hover) {
  background: var(--theme-hover);
}

a:where(:active) {
  background: var(--theme-press);
}

a:where(:focus-visible, :hover, :active) {
  text-decoration-line: none;
}

:is(input, select, button, textarea) {
  font: inherit;
}

:is(em, i) {
  letter-spacing: .015625em;
  font-style: normal;
  font-variant-caps: small-caps;
}

:is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

:is(h1, h2, h3) {
  line-height: 1.25;
}

.paragraph, p {
  margin-block: 1.5rem;
}

h1 {
  font-size: var(--font-size-h1);
  font-family: var(--font-heading);
  margin-block: 4rem 1.5rem;
  font-weight: 900;
}

h1:after {
  content: " /";
  color: var(--theme-accent2);
  font-size: .5em;
  font-weight: normal;
}

h2 {
  font-size: var(--font-size-h2);
  font-family: var(--font-heading);
  margin-block: 4rem .5rem;
}

h2:after {
  content: " //";
  color: var(--theme-accent2);
  font-size: .5em;
  font-weight: normal;
}

h3 {
  font-family: inherit;
  font-size: var(--font-size-h3);
  margin-block: 4rem .5rem;
}

h3:where(:not(:has(a))):after {
  content: " ///";
  color: var(--theme-accent2);
  font-size: .5em;
  text-decoration: none;
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-code);
  font-variant-ligatures: none;
  white-space: pre-wrap;
  font-style: normal;
  overflow-x: auto;
}

:not(pre) > code {
  background: var(--theme-code);
  border-radius: .5em;
  padding: 0 .25em;
  font-size: smaller;
  font-weight: 500;
}

.description {
  margin-top: 8px;
}

.post-description {
  font-size: var(--font-size-small);
}

.spoiler {
  background-color: var(--theme-redact-bg);
  color: #0000;
  cursor: default;
  box-decoration-break: clone;
  border-radius: var(--rounded-xsmall);
  padding-inline: .25ch;
}

@media (hover) {
  .spoiler:hover:where(:not(:focus)) {
    opacity: .8;
  }
}

.spoiler:focus {
  color: var(--theme-redact-text);
}

.spoiler:focus-visible {
  box-shadow: 0 0 0 6px var(--theme-page-bg);
  outline: 2px solid var(--theme-text);
  outline-offset: 2px;
}

main :is(blockquote, ul, ol, dl, p) {
  margin-block: 1.5rem;
}

main ul {
  padding-left: 2.5rem;
  list-style-type: none;
}

main :is(ol, ul) ul {
  padding-left: 2.5rem;
}

main ul:not(.card, .infobox, .inline-menu) > li {
  position: relative;
}

.inline-menu {
  gap: var(--button-group-gap);
  flex-flow: wrap;
  padding: 0;
  list-style: none;
  display: flex;

  & li {
    display: flex;
  }

  & a {
    color: var(--theme-infobox-text);
    background-color: var(--theme-infobox);
    letter-spacing: var(--tracking-label);
    border-radius: var(--rounded-pill);
    padding: 4px 12px;
    font-weight: 600;
    line-height: 1.15;
    text-decoration-line: none;

    &:focus-visible {
      outline: var(--theme-focus-outline);
      outline-offset: var(--theme-focus-outline-offset);
    }

    &:where(:hover:not(:active)) {
      background-image: radial-gradient(var(--theme-hover));
    }

    &:active, &:focus-visible {
      background-image: radial-gradient(var(--theme-press));
    }
  }
}

main ol, main :is(ol, ul) ol {
  padding-left: 2.5rem;
}

main :is(ul, ol) :is(ul, ol) {
  margin-block: 0;
}

main {
  flex: auto;
  min-height: 50vh;
  padding-bottom: 3rem;
}

canvas, img, video {
  display: block;
}

.border, .frame {
  background: var(--theme-card);
  border: 2px solid var(--theme-border);
  border-radius: 0;
  padding: 1px;
}

.sharp {
  border-radius: 0;
}

.playdate {
  filter: contrast(70%);
}

.tcg {
  border-radius: 4.75% / 3.5%;
}

.max-content {
  max-width: max-content;
}

article header :is(h1, h2, h3) {
  margin-bottom: 0;
}

article header small {
  font-style: normal;
  font-weight: normal;
  font-size: var(--font-size-small);
  vertical-align: middle;
}

:where(:focus-visible) {
  outline: var(--theme-focus-outline);
  outline-offset: 4px;
  text-decoration-line: none;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.photo-grid {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem 1rem;
  display: grid;
}

.photo-grid > * {
  max-width: initial !important;
  margin-block: 0 !important;
}

.column-span {
  grid-column: 1 / -1;
}

img[data-aspect="square"] {
  object-fit: cover;
  aspect-ratio: 1;
}

img[data-position] {
  --img-position-x: 50%;
  --img-position-y: 50%;
  object-position: var(--img-position-x) var(--img-position-y);
}

img[data-position~="top"] {
  --img-position-y: 0%;
}

img[data-position~="bottom"] {
  --img-position-y: 100%;
}

img[data-position~="left"] {
  --img-position-x: 0%;
}

img[data-position~="right"] {
  --img-position-x: 100%;
}

@media (width >= 30rem) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.layout-col2 {
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  display: grid;
}

@media (width <= 30rem) {
  .layout-col2 {
    grid-template-columns: 1fr;
    display: grid;
  }
}

.layout-col2 > * {
  margin: 0 !important;
}

.layout-col3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem;
  display: grid;
}

@media (width <= 50rem) {
  .layout-col3 {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
}

@media (width <= 30rem) {
  .layout-col3 {
    grid-template-columns: 1fr;
    display: grid;
  }
}

.gap1 {
  gap: .25rem;
}

.gap2 {
  gap: .5rem;
}

.gap3 {
  gap: 1rem;
}

.clearfix {
  clear: both;
}

@media (resolution = 1x), (resolution = 2x), (resolution = 3x) {
  .pixelated {
    image-rendering: pixelated;
  }
}

ol > li {
  list-style-type: none;
  position: relative;
}

main ul:not(.card, .infobox, .inline-menu) > li:before, ol > li:before {
  --size: 2rem;
  left: calc(-1 * (var(--size) + .5rem));
  width: var(--size);
  height: 1.5rem;
  font-size: var(--font-size-small);
  background: var(--theme-bullet-bg);
  color: var(--theme-bullet-text);
  border-radius: var(--rounded-pill);
  justify-content: center;
  align-items: center;
  font-weight: bold;
  line-height: 1;
  display: flex;
  position: absolute;
  top: 2px;
}

main ul:not(.card, .infobox, .inline-menu) > li:before {
  content: "•";
}

ol > li:before {
  content: counter(list-item) "";
}

li > :is(h2, h3) {
  margin-top: 8px;
}

dl > dt {
  font-weight: bold;
}

dl > dd {
  margin: 0;
}

dl > dd + dd {
  margin-top: .5rem;
}

dl > dd > ul {
  margin: 0;
}

dl > dd + dt {
  margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

[data-media="print"] {
  display: hidden;
}

.page-footer--congrats {
  margin-top: 64px;
  margin-bottom: -16px;
}

pre:has( > code) {
  background: var(--syntax-background);
  color: var(--syntax-text);
  border-radius: var(--rounded-medium);
  border: 1px solid #0000;
  margin-block: 1.5rem;
  padding: 1rem;
  overflow-x: auto;
}

.token.script {
  color: var(--syntax-default);
}

.token.comment, .token.prolog, .token.doctype, .token.cdata {
  color: var(--syntax-comment);
  font-style: italic;
  font-weight: 400;
}

.token.punctuation {
  color: var(--syntax-punctuation);
}

.token.attr-value, .token.selector, .token.string, .token.char, .token.boolean, .token.number, .token.regex, .token.inserted {
  color: var(--syntax-string);
}

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
  color: var(--syntax-punctuation);
}

.token.atrule, .token.function, .token.class-name {
  color: var(--syntax-property);
}

.token.tag, .token.tag > .token.class-name {
  color: var(--syntax-keyword);
}

.token.keyword {
  color: var(--syntax-keyword);
  font-weight: bold;
}

.language-css .token.property, .token.attr-name, .token.variable, .token.constant, .token.symbol, .token.deleted, .token.important {
  color: var(--syntax-property);
}

.token.important, .token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
  font-weight: 400;
}

.token.entity {
  cursor: help;
}

.avatar-wrapper {
  background: var(--theme-photo);
  --avatar-size: 175px;
  --avatar-padding: 0px;
  float: right;
  margin: 1rem;
  padding: var(--avatar-padding);
  border-radius: var(--rounded-pill);
  margin-top: .5rem;
  margin-right: 0;
  display: flex;
  position: relative;
}

.avatar {
  border-radius: inherit;
  width: var(--avatar-size);
  height: var(--avatar-size);
  box-sizing: content-box;
  outline: none;
}

@media (width <= 50rem) {
  .avatar {
    --avatar-size: 100px;
  }
}

hr, .divider-wavy {
  background: var(--theme-divider-decorative);
  width: 100%;
  height: 8px;
  mask-image: var(--mask-wavy-h);
  border: 0;
  display: block;
  mask-size: 32px 8px;
  mask-repeat: repeat-x;
}

.divider-wavy-vertical {
  background: var(--theme-divider-decorative);
  width: 8px;
  height: 100%;
  mask-image: var(--mask-wavy-v);
  display: block;
  mask-size: 8px 32px;
  mask-repeat: repeat-y;
}

.skip-link {
  z-index: 100;
  background: var(--theme-button-bg);
  color: var(--theme-button-text);
  border-radius: var(--rounded-pill);
  transition: translate var(--motion-duration-short3)
    var(--motion-easing-standard);
  padding: 8px 16px;
  font-weight: bold;
  text-decoration-line: none;
  position: absolute;
  translate: 16px -100%;

  &:focus {
    outline-offset: -4px;
    translate: 16px 16px;
  }

  @media (width < 70rem) {
    display: none;
  }
}

.page-shell {
  flex-direction: column;
  flex: 1;
  display: flex;

  @media (width >= 70rem) {
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr;
    display: grid;
  }

  @media (width >= 110rem) {
    grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
  }
}

.page-shell .content {
  flex-direction: column;
  flex: 1;
  display: flex;

  @media (width >= 70rem) {
    padding-top: 0;
    width: 100%;
    max-width: var(--width-heading);
    margin-inline: auto;
    padding-inline: 0;
  }
}

.page-shell .main {
  flex: 1;
}

html:has(.nav-menu[open]) {
  overflow: hidden;
}

.header + hr {
  margin-block: -4px -8px;

  @media (width >= 70rem) {
    display: none;
  }
}

.header {
  background: var(--theme-header-bg);
  color: var(--theme-header-text);
  justify-content: center;
  padding-inline: 16px;
  display: flex;

  @media (width >= 70rem) {
    display: none;
  }
}

.header-content {
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-block: 16px;
  display: flex;
}

.header .logo {
  align-items: center;
  display: grid;
}

.header .logo a {
  pointer-events: initial;
  outline-offset: 4px;
  border-radius: var(--rounded-small);
  width: 100%;
  height: 24px;
  color: var(--theme-accent);
  line-height: 1;
  display: flex;
  position: relative;

  @media (width >= 70rem) {
    height: 32px;
  }
}

.header .logo a:hover:not(:focus-visible):after {
  content: "";
  width: 100%;
  left: 0;
  bottom: calc(-1 * (var(--link-underline-offset) + var(--link-underline-thickness-hover)));
  height: var(--link-underline-thickness-hover);
  background: currentColor;
  position: absolute;
}

@media (width < 40rem) {
  .header {
    padding-top: 0;
  }
}

.header .nav {
  fill: currentColor;
  stroke: currentColor;
  align-items: center;
  gap: 12px;
  display: flex;
}

.header .nav .hamburger {
  box-sizing: border-box;
  border-radius: var(--rounded-pill);
  background: var(--theme-icon-button-badge);
  width: 40px;
  height: 40px;
  color: var(--theme-icon-button-badge-text);
  stroke: currentColor;
  pointer-events: auto;
  box-shadow: none;
  border: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;

  @media (hover) {
    &:hover {
      background-image: radial-gradient(var(--theme-hover));
    }
  }

  &:active, &:focus-visible {
    background-image: radial-gradient(var(--theme-press));
  }

  &:focus-visible {
    outline: var(--theme-focus-outline);
    outline-offset: var(--theme-focus-outline-offset);
  }

  @media (width >= 70rem) {
    display: none;
  }
}

.nav-menu {
  box-sizing: border-box;
  background: var(--theme-sidebar-bg);
  width: min(360px, 100%);
  height: 100%;
  color: var(--theme-sidebar-text);
  overscroll-behavior: contain;
  max-width: 18rem;
  max-height: none;
  box-shadow: 0 0 16px rgb(from var(--theme-shadow) r g b / 40%),
    0 0 32px rgb(from var(--theme-shadow) r g b / 20%);
  transition: translate var(--motion-duration-medium1) var(--motion-easing-standard),
    overlay var(--motion-duration-medium1) var(--motion-easing-standard)
      allow-discrete,
    display var(--motion-duration-medium1) var(--motion-easing-standard)
      allow-discrete;
  border: none;
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0 0 0 auto;
  overflow-y: auto;
  translate: 100%;

  &[open] {
    translate: 0;

    @starting-style {
      translate: 100%;
    }
  }
}

.nav-menu::backdrop {
  background: rgb(from var(--theme-scrim) r g b / 50%);
  opacity: 0;
  transition: opacity var(--motion-duration-medium1) var(--motion-easing-standard),
    overlay var(--motion-duration-medium1) var(--motion-easing-standard)
      allow-discrete,
    display var(--motion-duration-medium1) var(--motion-easing-standard)
      allow-discrete;
}

.nav-menu[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .nav-menu[open]::backdrop {
    opacity: 0;
  }
}

.nav-menu-content {
  padding: 16px;

  & > nav {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
    display: flex;
  }
}

.nav-menu-toolbar {
  z-index: 1;
  background: linear-gradient(var(--theme-sidebar-bg), transparent);
  pointer-events: none;
  justify-content: flex-end;
  margin-bottom: -24px;
  padding: 16px 16px 24px;
  display: flex;
  position: sticky;
  top: 0;
}

.nav-menu-close {
  box-sizing: border-box;
  border-radius: var(--rounded-pill);
  background: var(--theme-icon-button-badge);
  width: 40px;
  height: 40px;
  color: var(--theme-icon-button-badge-text);
  stroke: currentColor;
  pointer-events: auto;
  box-shadow: none;
  border: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;

  @media (hover) {
    &:hover {
      background-image: radial-gradient(var(--theme-hover));
    }
  }

  &:active, &:focus-visible {
    background-image: radial-gradient(var(--theme-press));
  }

  &:focus-visible {
    outline: var(--theme-focus-outline);
    outline-offset: var(--theme-focus-outline-offset);
  }
}

.sidebar {
  display: none;

  @media (width >= 70rem) {
    box-sizing: border-box;
    max-height: 100vh;
    color: var(--theme-page-text);
    grid-template-columns: minmax(0, 1fr) auto;
    display: grid;
    position: sticky;
    top: 0;
  }
}

.sidebar-inner {
  box-sizing: border-box;
  overscroll-behavior: contain;
  flex-direction: column;
  gap: 24px;
  max-height: 100vh;
  padding: 24px;
  display: flex;
  overflow: hidden auto;
}

.sidebar-divider {
  display: none;

  @media (width >= 70rem) {
    display: block;
  }
}

.sidebar-divider-stroke {
  stroke: var(--theme-divider-decorative);
}

.sidebar nav {
  flex-direction: column;
  gap: 24px;
  display: flex;
}

.sidebar-top {
  border-radius: var(--rounded-pill);
  color: var(--theme-logo-text);
  padding: 8px;
  display: flex;

  & svg {
    width: auto;
    height: 28px;
  }

  @media (hover) {
    &:hover:where(:not(:active)) {
      background-image: radial-gradient(var(--theme-hover));
    }
  }

  &:active, &:focus-visible {
    background-image: radial-gradient(var(--theme-press));
  }

  &:focus-visible {
    outline: var(--theme-focus-outline);
    outline-offset: var(--theme-focus-outline-offset);
  }
}

html:has(.theme-select-dialog[open]) {
  overflow: hidden;
}

wavebeem-theme-select {
  display: flex;
}

.theme-select-trigger {
  box-sizing: border-box;
  border-radius: var(--rounded-pill);
  background: var(--theme-icon-button-badge);
  width: 40px;
  height: 40px;
  color: var(--theme-icon-button-badge-text);
  font: inherit;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  padding: 0;
  display: flex;

  @media (hover) {
    &:hover {
      background-image: radial-gradient(var(--theme-hover));
    }
  }

  &:active, &:focus-visible {
    background-image: radial-gradient(var(--theme-press));
  }

  &:focus-visible {
    outline: var(--theme-focus-outline);
    outline-offset: var(--theme-focus-outline-offset);
  }
}

.theme-select-dialog {
  box-sizing: border-box;
  background: var(--theme-page-bg);
  width: fit-content;
  min-width: 280px;
  max-width: min(560px, 100vw - 32px);
  color: var(--theme-page-text);
  box-shadow: 0 0 32px rgb(from var(--theme-shadow) r g b / 20%);
  border: none;
  border-radius: 28px;
  flex-direction: column;
  gap: 24px;
  padding: 24px;

  &:focus-visible {
    outline-offset: -4px;
  }

  &[open] {
    display: flex;
  }

  &::backdrop {
    background: var(--theme-scrim);
    opacity: .3;
    transition: opacity var(--motion-duration-short3)
      var(--motion-easing-standard);

    @starting-style {
      opacity: 0;
    }
  }
}

.theme-select-options {
  flex-direction: row;
  gap: 2px;
  display: flex;
}

.theme-select-done {
  align-self: flex-end;
}

.theme-select-option {
  border-radius: var(--rounded-large);
  background: var(--theme-infobox);
  color: inherit;
  font: inherit;
  letter-spacing: var(--tracking-label);
  text-align: center;
  transition-property: border-radius;
  transition-duration: var(--motion-duration-short3);
  transition-timing-function: var(--motion-easing-standard);
  border: 0;
  flex: 1;
  padding: 8px 16px;
  font-weight: 600;

  :where(&) + &:not([aria-pressed="true"]) {
    border-top-left-radius: var(--rounded-small);
    border-bottom-left-radius: var(--rounded-small);
  }

  &:has( + &):not([aria-pressed="true"]) {
    border-top-right-radius: var(--rounded-small);
    border-bottom-right-radius: var(--rounded-small);
  }

  @media (hover) {
    &:hover {
      background-image: radial-gradient(var(--theme-hover));
    }
  }

  &:active, &:focus-visible {
    background-image: radial-gradient(var(--theme-press));
  }

  &:focus-visible {
    outline: var(--theme-focus-outline);
    outline-offset: var(--theme-focus-outline-offset);
    z-index: 1;
  }

  &[aria-pressed="true"] {
    border-radius: var(--rounded-xlarge);
    background-color: var(--theme-toggle-selected-bg);
    color: var(--theme-toggle-selected-text);
  }
}

.footer {
  padding: 5rem 1rem 1rem;
  padding-bottom: calc(1rem + env(safe-area-max-inset-bottom, 1rem));
  color: var(--theme-bullet);
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  display: flex;
}

.footer .divider-wavy {
  margin-bottom: 1.5rem;

  @media (width < 40rem) {
    width: calc(100% + 2rem);
    margin-inline: -1rem;
  }

  @media (width >= 70rem) {
    display: none;
  }
}

.footer > :not(.divider-wavy) {
  max-width: none;
  margin-inline: 0;
}

.footer > .footer-menu {
  max-width: var(--width-heading);
  margin-bottom: 2.5rem;
  display: grid;

  @media (width >= 70rem) {
    display: none;
  }

  & ul {
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
    gap: 4px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;

    @media (width <= 21rem) {
      grid-template-columns: 1fr;
    }
  }

  & a {
    color: var(--theme-link);
    font-size: var(--font-size-small);
    padding: 4px 8px;
    text-decoration-line: none;
    display: block;
  }
}

article:where(.page) {
  & > header, & > section, & > footer {
    margin-inline: auto;
    padding-inline: 1rem;

    & :is(p, ul, ol, dl, figcaption, details):not(.card, .infobox) {
      max-width: var(--width-copy);
    }
  }

  & > header {
    & > h1 {
      margin-block: 4rem 1.5rem;
    }

    & > small {
      margin-block: .5rem 1.5rem;
      display: block;
    }
  }

  & p:has(img, video) + p:has(strong) {
    margin-top: -16px;
    line-height: 1.25;

    & strong {
      font-weight: normal;
      font-size: var(--font-size-small);
    }
  }

  & > :where(section, header, footer) {
    & video, & img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    & p:has(img, video) {
      max-width: var(--width-heading);
      display: flex;
    }

    & hr {
      color: inherit;
      max-width: var(--width-copy);
      margin-block: 1.5rem;
      margin-inline: 0;

      @media (width < 40rem) {
        width: calc(100% + 32px);
        margin-inline: -16px;
      }
    }

    & :where(.paragraph), & blockquote, & ul, & ol, & dl, & p, & figure {
      margin: 1.5rem 0;
    }

    & ul ul, & li > p {
      margin-block: .5rem;
    }

    & figure {
      max-width: var(--width-copy);
      flex-direction: column;
      gap: 8px;
      display: flex;

      & img, & video {
        &:where(:not([data-background="transparent"])) {
          background-color: var(--theme-image);
          border-radius: var(--rounded-large);
        }
      }
    }

    & figcaption {
      font-size: var(--font-size-small);
      text-wrap: pretty;
      margin-top: -4px;
    }

    & figure[data-size="large"] figcaption {
      font-size: var(--font-size-base);
      margin-top: 0;
    }

    & blockquote, & aside {
      border-left: 4px solid #0000;
      max-width: max-content;
      padding-inline: 1rem;
      position: relative;

      &:after {
        content: "";
        background: var(--theme-accent3);
        border-radius: var(--rounded-pill);
        width: 4px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -4px;
      }

      & h3 {
        margin-top: 1.5rem;
      }
    }
  }
}

:where(.page.post) {
  & p > img:where(:not([data-background="transparent"])) {
    background-color: var(--theme-image);
    border-radius: var(--rounded-large);
  }
}

.card {
  color: inherit;
  border-radius: var(--rounded-large);
  background: var(--theme-card);
  outline-offset: -1px;
  gap: 8px;
  margin-block: 16px;
  padding: 16px;
  text-decoration-line: none;
  display: grid;

  &:where(ul) {
    background: var(--theme-page-bg);
    gap: var(--card-gap);
    padding: 0;
    list-style: none;

    & li {
      background: var(--theme-card);
      border-radius: var(--rounded-large);
      padding: 8px 16px;
    }

    & :where(li) + li {
      border-top-left-radius: var(--rounded-small);
      border-top-right-radius: var(--rounded-small);
    }

    & li:has( + li) {
      border-bottom-left-radius: var(--rounded-small);
      border-bottom-right-radius: var(--rounded-small);
    }
  }

  &:where(dl) {
    background: var(--theme-page-bg);
    gap: 0;
    padding: 0;

    & dl, & dt {
      margin: 0;
    }

    & > :is(dd, dt) {
      background: var(--theme-card);
      padding-inline: 16px;

      & a:focus-visible {
        z-index: 1;
        position: relative;
      }
    }

    & > dt {
      border-top-left-radius: var(--rounded-small);
      border-top-right-radius: var(--rounded-small);
      margin: 0;
      padding-block: 16px 0;
    }

    & > dt:first-child {
      border-top-left-radius: var(--rounded-large);
      border-top-right-radius: var(--rounded-large);
    }

    & > dt + dt {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      padding-block-start: 0;
    }

    & > dd {
      border-bottom-left-radius: var(--rounded-small);
      border-bottom-right-radius: var(--rounded-small);
      padding-block: 0 16px;
    }

    & > dd:has( + dd) {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    & > dd:last-child {
      border-bottom-left-radius: var(--rounded-large);
      border-bottom-right-radius: var(--rounded-large);
    }

    & > dd + dt {
      margin-top: var(--card-gap);
    }

    & > dd + dd {
      margin-top: 0;
    }

    @media (width >= 40rem) {
      &[data-layout="wide"] {
        gap: var(--card-gap);
        grid-template-columns: auto 1fr;
        display: grid;

        & > :is(dd, dt) {
          border-radius: var(--rounded-small);
          margin: 0;
          padding: 8px 16px;

          &:first-child {
            border-top-left-radius: var(--rounded-large);
          }

          &:nth-child(2) {
            border-top-right-radius: var(--rounded-large);
          }

          &:nth-last-child(2) {
            border-bottom-left-radius: var(--rounded-large);
          }

          &:last-child {
            border-bottom-right-radius: var(--rounded-large);
          }
        }
      }
    }
  }

  & .heading {
    text-wrap: balance;
    color: inherit;
    text-underline-offset: var(--link-underline-offset);
    margin: 0;
    font-weight: bold;
    line-height: 1.25;
  }

  & .description {
    font-size: var(--font-size-small);
    margin: 0;
  }

  &:focus-visible {
    outline: var(--theme-focus-outline);
    outline-offset: var(--theme-focus-outline-offset);
  }
}

.infobox:where(a) {
  color: var(--theme-infobox-text);
  outline-offset: -1px;
  background: var(--theme-infobox);
  border-radius: var(--rounded-large);
  gap: 8px;
  margin-block: 16px;
  padding: 16px;
  text-decoration-line: none;
  display: grid;

  & + & {
    margin-top: calc(var(--infobox-gap) - 16px);
  }

  &:hover:where(:not(:active)) {
    background-image: radial-gradient(var(--theme-hover));
  }

  &:active, &:focus-visible {
    background-image: radial-gradient(var(--theme-press));
  }

  & .heading {
    text-wrap: balance;
    color: inherit;
    text-underline-offset: var(--link-underline-offset);
    margin: 0;
    font-weight: bold;
    line-height: 1.25;
  }

  & .description {
    margin: 0;
  }

  &:hover {
    text-decoration-line: none;
  }

  &:focus-visible {
    outline: var(--theme-focus-outline);
    outline-offset: var(--theme-focus-outline-offset);
  }
}

.infobox:where(ul) {
  gap: var(--connected-gap);
  background: var(--theme-page-bg);
  color: inherit;
  padding: 0;
  list-style-type: none;
  display: grid;
  position: relative;

  & a {
    color: inherit;
    line-height: 1.25;
    font-size: var(--font-size-base);
    outline-offset: var(--theme-focus-outline-offset);
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-decoration-line: none;
    display: flex;

    &:hover:where(:not(:active)) {
      background-image: radial-gradient(var(--theme-hover));
    }

    &:active, &:focus-visible {
      background-image: radial-gradient(var(--theme-press));
    }
  }

  & li {
    & a {
      color: var(--theme-infobox-text);
      background: var(--theme-infobox);
      border-radius: var(--rounded-large);
      padding: 8px 16px;
    }

    :where(&) + & {
      & a {
        border-top-left-radius: var(--rounded-small);
        border-top-right-radius: var(--rounded-small);
      }
    }

    &:has( + &) {
      & a {
        border-bottom-left-radius: var(--rounded-small);
        border-bottom-right-radius: var(--rounded-small);
      }
    }
  }
}

:where(main details) {
  color: var(--theme-card-text);
  background: var(--theme-card);
  --details-radius-top: var(--rounded-large);
  --details-radius-bottom: var(--rounded-large);
  border-radius: var(--details-radius-top) var(--details-radius-top)
    var(--details-radius-bottom) var(--details-radius-bottom);
  interpolate-size: allow-keywords;
  margin: 1.5rem 0;
  padding-inline: 16px;
  display: grid;

  &::details-content {
    height: 0;
    transition: height var(--motion-duration-medium1) var(--motion-easing-standard),
      content-visibility var(--motion-duration-medium1)
        var(--motion-easing-standard) allow-discrete;
    overflow: clip;
  }

  &[open]::details-content {
    height: auto;
  }

  & + & {
    --details-radius-top: var(--rounded-small);
    margin-top: calc(var(--connected-gap) - 1.5rem);
  }

  &:has( + &) {
    --details-radius-bottom: var(--rounded-small);
  }

  :where(&:hover) {
    z-index: 100;
  }
}

:where(main summary) {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  margin-inline: -16px;
  padding-block: 8px;
  padding-inline: 16px;
  position: relative;
}

:where(main details) {
  :where(& summary) {
    border-radius: var(--details-radius-top) var(--details-radius-top)
      var(--details-radius-bottom) var(--details-radius-bottom);
    transition-property: border-radius;
    transition-duration: var(--motion-duration-short4);
    transition-timing-function: var(--motion-easing-standard);
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    display: flex;

    :where(&:focus-visible) {
      outline: var(--theme-focus-outline);
      outline-offset: var(--theme-focus-outline-offset);
    }

    @media (hover) {
      :where(&:hover:not(:active)) {
        background-image: radial-gradient(var(--theme-hover));
      }
    }

    :where(&:active, &:focus-visible) {
      background-image: radial-gradient(var(--theme-press));
    }
  }

  :where(& summary):after {
    content: "";
    --details-circle: var(--theme-details-circle);
    aspect-ratio: 1;
    border-radius: var(--rounded-pill);
    background: var(--details-circle);
    height: 24px;
  }

  :where(& summary):before {
    content: "";
    --details-text: var(--theme-text);
    background: var(--details-text);
    width: 24px;
    height: 24px;
    mask-image: var(--mask-chevron-down);
    transition: rotate var(--motion-duration-short4)
      var(--motion-easing-standard);
    position: absolute;
    top: 50%;
    right: 16px;
    translate: 0 -50%;
    mask-position: center;
    mask-size: 14px 14px;
    mask-repeat: no-repeat;
  }

  :where(&[open] summary):before {
    rotate: 180deg;
  }

  :where(&[open] > summary) {
    border-end-end-radius: var(--rounded-small);
    border-end-start-radius: var(--rounded-small);
    margin-bottom: -.5rem;
  }
}

.button {
  font: inherit;
  text-align: center;
  letter-spacing: var(--tracking-label);
  border-radius: var(--rounded-pill);
  text-decoration-line: none;
  text-decoration-thickness: var(--link-underline-thickness);
  background: var(--theme-button-bg);
  color: var(--theme-button-text);
  background-origin: border-box;
  border: 2px solid #0000;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  font-weight: 600;
  line-height: 1.25;
  display: inline-flex;

  &:hover:where(:not(:active)) {
    background-image: radial-gradient(var(--theme-hover));
  }

  &:active, &:focus-visible {
    background-image: radial-gradient(var(--theme-press));
  }

  &:focus-visible {
    outline: var(--theme-focus-outline);
    outline-offset: var(--theme-focus-outline-offset);
  }

  &:where([data-size="small"]) {
    border-radius: var(--rounded-pill);
    font-size: var(--font-size-small);
    padding: 4px 12px;
  }
}

label:has( > input[type="checkbox"]:first-child) {
  user-select: none;
  gap: .5rem;
  display: flex;

  & input[type="checkbox"] {
    accent-color: var(--theme-toggle-selected-bg);
    width: 1.5rem;
    height: 1.5rem;
    margin: 4px 0 0;
  }
}

.segmented {
  border: 0;
  flex-direction: row;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;

  & > label {
    border-radius: var(--rounded-large);
    background: var(--theme-infobox);
    color: inherit;
    letter-spacing: var(--tracking-label);
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition-property: border-radius;
    transition-duration: var(--motion-duration-short3);
    transition-timing-function: var(--motion-easing-standard);
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    font-weight: 600;
    display: flex;
    position: relative;

    & input {
      clip-path: inset(50%);
      width: 1px;
      height: 1px;
      margin: -1px;
      position: absolute;
      overflow: hidden;
    }

    :where(&) + &:not(:has( > input:checked)) {
      border-top-left-radius: var(--rounded-small);
      border-bottom-left-radius: var(--rounded-small);
    }

    &:has( + &):not(:has( > input:checked)) {
      border-top-right-radius: var(--rounded-small);
      border-bottom-right-radius: var(--rounded-small);
    }

    @media (hover) {
      &:hover {
        background-image: radial-gradient(var(--theme-hover));
      }
    }

    &:has(:active, :focus-visible) {
      background-image: radial-gradient(var(--theme-press));
    }

    &:has(:focus-visible) {
      z-index: 1;
      outline: var(--theme-focus-outline);
      outline-offset: var(--theme-focus-outline-offset);
      position: relative;
    }

    &:has( > input:checked) {
      border-radius: var(--rounded-xlarge);
      background-color: var(--theme-toggle-selected-bg);
      color: var(--theme-toggle-selected-text);
    }
  }
}

.crime-frame {
  display: flex;
  position: relative;
  overflow: hidden;
}

.crime-frame > * {
  max-width: initial !important;
  width: 100% !important;
}

.crime-frame :where(details, summary), .details-reset :where(details, summary) {
  all: initial;
  font: inherit;
  color: inherit;
  display: block;
}

.crime-frame :where(details, summary):after, .details-reset :where(details, summary):after, .crime-frame :where(details, summary):before, .details-reset :where(details, summary):before {
  content: none;
}

.menu {
  gap: var(--card-gap);
  display: grid;

  & > a {
    border-radius: var(--rounded-large);
    background: var(--theme-card);
    color: var(--theme-link);
    line-height: 1.25;
    font-size: var(--font-size-base);
    letter-spacing: var(--tracking-label);
    outline-offset: var(--theme-focus-outline-offset);
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    font-weight: bold;
    text-decoration-line: none;
    display: flex;

    &:hover {
      text-decoration-line: none;
    }

    @media (hover) {
      &:hover:not(:active) {
        background-image: radial-gradient(var(--theme-hover));
      }
    }

    &:active, &:focus-visible {
      background-image: radial-gradient(var(--theme-press));
    }

    &:focus-visible {
      outline: var(--theme-focus-outline);
      outline-offset: var(--theme-focus-outline-offset);
    }
  }

  & :where(a) + a {
    border-top-left-radius: var(--rounded-small);
    border-top-right-radius: var(--rounded-small);
  }

  & a:has( + a) {
    border-bottom-left-radius: var(--rounded-small);
    border-bottom-right-radius: var(--rounded-small);
  }
}

.nav-group {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.nav-link {
  border-radius: var(--rounded-pill);
  color: var(--theme-link);
  font-size: var(--font-size-base);
  letter-spacing: var(--tracking-label);
  align-items: center;
  gap: 16px;
  padding: 8px 16px 8px 8px;
  font-weight: bold;
  text-decoration-line: none;
  display: flex;

  &:hover {
    text-decoration-line: none;
  }

  @media (hover) {
    &:hover:where(:not(:active)) {
      background-image: radial-gradient(var(--theme-hover));

      & .nav-link-icon {
        background-image: radial-gradient(var(--theme-hover));
      }
    }
  }

  &:active, &:focus-visible {
    background-image: radial-gradient(var(--theme-press));

    & .nav-link-icon {
      background-image: radial-gradient(var(--theme-press));
    }
  }

  &:focus-visible {
    outline: var(--theme-focus-outline);
    outline-offset: var(--theme-focus-outline-offset);
  }
}

.nav-link-icon {
  box-sizing: border-box;
  border-radius: var(--rounded-pill);
  background: var(--theme-icon-badge);
  width: 40px;
  height: 40px;
  color: var(--theme-icon-badge-text);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

main table {
  border-collapse: collapse;
  max-width: var(--width-copy);
  margin-block: 1.5rem;
  display: block;
  overflow-x: auto;
}

main :is(th, td) {
  text-align: left;
  padding: 8px 16px;
}

main th {
  font-weight: bold;
}

main thead {
  border-bottom: 1px solid var(--theme-border);
}

main tbody tr {
  border-bottom: 1px solid var(--theme-divider);
}

main tbody tr:last-child {
  border-bottom: none;
}

/*# sourceMappingURL=base.css.map */