@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --fg: #282828;
  --fg1: #3c3836;
  --fg2: #504945;
  --fg3: #6b6866;
  --fg4: #676767;
  --hairline: color-mix(in srgb, var(--fg4) 10%, transparent);
  --hover: color-mix(in srgb, var(--fg2) 20%, transparent);
  --font-system-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-sans: "Space Grotesk", var(--font-system-sans);
  --font-serif: "Iowan Old Style", "Iowan Old Style BT", Georgia, serif;
  --font-heading: var(--font-serif);
  --font-logo: "Chakra Petch", "Avenir Next Condensed", "Arial Narrow", var(--font-sans);
  --font-text-variant: var(--font-sans);
  --site-header-height: 54px;
}

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

html {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-color: var(--fg4) var(--bg);
  scrollbar-width: thin;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

a:visited {
  color: inherit;
}

time {
  color: var(--fg4);
  min-width: 5rem;
}

::selection {
  background: rgba(0, 0, 0, 0.12);
}

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--site-header-height) 1rem 0;
  background: var(--bg);
  overflow-wrap: break-word;
}

#header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
}

.site-header {
  position: fixed;
  top: 0;
  left: 1rem;
  right: 1rem;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--site-header-height);
  padding: 0 0.33rem;
  background: var(--bg);
}

.navbar-logo {
  flex-shrink: 0;
}

.brand {
  display: inline-block;
  color: var(--fg4);
  font-family: var(--font-logo);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1.7px;
  line-height: 25px;
}

.logo-brand {
  display: flex;
  align-items: center;
  width: min(145px, 37vw);
  height: 33px;
  letter-spacing: 0;
}

.brand-logo {
  display: block;
  width: 100%;
  max-height: 26px;
  object-fit: contain;
  object-position: left center;
}

.brand:hover {
  opacity: 0.8;
}

.nav-group {
  display: flex;
  align-items: center;
}

.top-nav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  font-family: var(--font-sans);
}

.top-nav a {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--fg1);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.top-nav a[aria-current="page"] {
  color: var(--fg);
}

.top-nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--hover);
  text-underline-offset: 2px;
}

.hamburger {
  position: relative;
  display: none;
  width: 40px;
  height: 40px;
  margin-left: 0.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hamburger span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg3);
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease,
    bottom 0.25s ease;
}

.hamburger span:nth-child(1) {
  top: 12px;
}

.hamburger span:nth-child(2) {
  top: 19px;
}

.hamburger span:nth-child(3) {
  bottom: 12px;
}

.hamburger.is-active span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  top: 19px;
  bottom: auto;
  transform: rotate(-45deg);
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-menu-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: center;
}

.mobile-menu-nav a {
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 20px;
}

body.menu-open {
  overflow: hidden;
}

#main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: center;
  width: 100%;
  max-width: calc(660px + 3.2rem);
  margin: auto;
  padding: 1rem;
  animation: fade-in 0.6s ease-in-out;
}

.content,
.post-group {
  max-width: 660px;
  margin-right: 0;
  margin-left: 0;
}

.content {
  padding-top: 0.5rem;
  color: var(--fg4);
  font-family: var(--font-sans);
  font-size: 15px;
  font-style: normal;
}

.content p {
  margin-bottom: 1.333rem;
}

.content h1,
.content h2 {
  color: var(--fg);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

.content h1 {
  margin: 0 0 1rem;
  font-size: clamp(30px, 5vw, 42px);
}

.content h2 {
  margin: 1.6rem 0 0.55rem;
  font-size: 24px;
}

.post-group ul {
  padding-top: 1.6rem;
  list-style: none;
}

.post-group li {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 0.4rem;
}

.post-group li + li {
  padding-top: 0.4rem;
}

.post-group li + li::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 1px solid var(--hairline);
  content: "";
  pointer-events: none;
}

.post-item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  margin: 0 -1.5rem;
  padding: 1.2rem 1.5rem;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  line-height: 1.4;
}

.post-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.desktop-time,
.mobile-time,
.author-date {
  color: var(--fg4);
  font-family: var(--font-sans);
  font-size: 15px;
}

.desktop-time {
  text-align: left;
  white-space: nowrap;
}

.mobile-time {
  display: none;
}

.post-title {
  position: relative;
  display: inline-block;
  color: var(--fg);
  font-size: 17px;
  font-weight: 500;
}

.post-summary {
  max-width: 520px;
  margin-top: 0.2rem;
  color: var(--fg3);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
}

.post-item:hover .post-title {
  text-decoration: underline;
  text-decoration-color: var(--hover);
  text-underline-offset: 2px;
}

.post-item:hover .author-date,
.post-item:hover time {
  color: var(--fg3);
}

#main.home-page {
  max-width: calc(900px + 3.2rem);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(2.4rem, 7vh, 5rem);
}

#main.blog-index-page {
  padding-top: 2.25rem;
}

.home-copy {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.home-hero {
  padding-bottom: clamp(2.2rem, 5vw, 3.8rem);
  border-bottom: 1px solid var(--hairline);
}

.home-hero-copy {
  max-width: 760px;
  margin: 0 auto;
}

.home-logo-title {
  width: min(260px, 60vw);
  margin: 0 auto;
  line-height: 1;
}

.home-logo {
  display: block;
  width: 100%;
  height: auto;
}

.home-section .home-pitch {
  font-size: 20px;
  line-height: 1.42;
}

.home-section {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  padding: clamp(2rem, 4.6vw, 3.2rem) 0;
  border-bottom: 1px solid var(--hairline);
}

.home-section h2 {
  margin: 0;
  color: var(--fg2);
  font-family: var(--font-text-variant);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.home-section p {
  max-width: 760px;
  margin: 0;
  color: var(--fg1);
  font-family: var(--font-text-variant);
  font-size: 17px;
  line-height: 1.58;
}

.home-section p + p {
  margin-top: 1rem;
}

.home-thesis {
  display: block;
}

.home-thesis > div {
  max-width: 760px;
  margin: 0 auto;
}

.home-thesis-intro {
  color: var(--fg2);
}

.home-tailwinds {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
  list-style: none;
  counter-reset: tailwind;
}

.home-tailwinds li {
  counter-increment: tailwind;
}

.home-tailwinds li p {
  padding-left: 0;
}

.home-tailwinds li p::before {
  margin-right: 0.42rem;
  color: var(--fg4);
  content: "(" counter(tailwind) ")";
}

.home-capability-list {
  display: grid;
  gap: 0;
  max-width: 760px;
  list-style: none;
}

.home-capability-list li {
  display: grid;
  grid-template-columns: minmax(9rem, 0.36fr) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
  color: var(--fg1);
  font-family: var(--font-text-variant);
  font-size: 16px;
  line-height: 1.48;
}

.home-capability-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.home-capability-list strong {
  color: var(--fg2);
  font-weight: 500;
}

.home-capability-list span {
  color: var(--fg1);
}

.home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  justify-content: flex-start;
  padding-top: 1.4rem;
  color: var(--fg2);
  font-family: var(--font-text-variant);
  font-size: 16px;
}

.home-links a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg4) 34%, transparent);
  text-underline-offset: 3px;
}

.home-links a:hover {
  color: var(--fg);
  text-decoration-color: var(--fg2);
}

.blog-index-intro {
  max-width: 620px;
  color: var(--fg1);
  font-family: var(--font-text-variant);
  font-size: 17px;
  line-height: 1.55;
}

.blog-index-intro p {
  margin-bottom: 0;
}

.post-visual {
  width: 100%;
  max-width: 520px;
  margin-top: 1rem;
  border-top: 1px solid var(--hairline);
  padding-top: 0.8rem;
}

.post-visual svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--fg);
}

.grid-lines path,
.axis path {
  fill: none;
  stroke: color-mix(in srgb, var(--fg4) 22%, transparent);
  stroke-width: 1;
}

.path-set path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.path-a path {
  stroke: #2f6f73;
}

.path-b path {
  stroke: #9b5e3a;
  stroke-dasharray: 3 5;
}

.nodes circle {
  fill: var(--bg);
  stroke: var(--fg2);
  stroke-width: 1.6;
}

.bars rect {
  fill: color-mix(in srgb, #2f6f73 72%, white);
  opacity: 0.72;
}

.trace-line path {
  fill: none;
  stroke: #9b5e3a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.trace-points circle {
  fill: var(--bg);
  stroke: #9b5e3a;
  stroke-width: 1.8;
}

.labels text {
  fill: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 13px;
}

.pipeline-rails path,
.pipeline-grid path {
  fill: none;
  stroke: color-mix(in srgb, var(--fg4) 18%, transparent);
  stroke-width: 1;
}

.pipeline-path path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.pipeline-path.primary path {
  stroke: #2f6f73;
}

.pipeline-path.secondary path {
  stroke: #9b5e3a;
  stroke-dasharray: 4 6;
}

.motif-nodes circle {
  fill: var(--bg);
  stroke: var(--fg2);
  stroke-width: 1.8;
}

.stage-boxes rect {
  fill: color-mix(in srgb, #2f6f73 8%, transparent);
  stroke: color-mix(in srgb, var(--fg4) 22%, transparent);
  stroke-width: 1;
}

.pipeline-labels text,
.stage-labels text {
  fill: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 14px;
}

.stage-labels text {
  fill: var(--fg2);
  font-size: 15px;
  font-weight: 500;
}

.content-page {
  max-width: calc(660px + 3.2rem);
}

#main.article-page {
  --article-width: 720px;
  --article-side-rail: 292px;
  --toc-width: 190px;
  --toc-gap: 38px;
  --toc-marker-gutter: 1.2rem;
  --toc-start-offset: 12.2rem;
  --sidenote-width: 230px;
  --sidenote-gap: 48px;
  display: block;
  width: 100%;
  max-width: calc(
    var(--article-width) + var(--article-side-rail) + var(--article-side-rail) + 2rem
  );
  overflow: visible;
  counter-reset: sidenote-counter;
}

.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--article-width)) minmax(0, 1fr);
  align-items: start;
  width: 100%;
}

.article-content {
  grid-column: 2;
  width: 100%;
  max-width: var(--article-width);
  margin-right: auto;
  margin-left: auto;
}

.article-content [id] {
  scroll-margin-top: calc(var(--site-header-height) + 1rem);
}

.article-toc {
  position: sticky;
  top: calc(var(--site-header-height) + 2.1rem);
  grid-column: 1;
  justify-self: end;
  width: calc(var(--toc-width) + var(--toc-marker-gutter));
  max-height: calc(100vh - var(--site-header-height) - 3rem);
  margin: var(--toc-start-offset) var(--toc-gap) 0 0;
  padding: 0.15rem 0 0 var(--toc-marker-gutter);
  overflow-y: auto;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 12px;
  line-height: 1.35;
  scrollbar-width: none;
  transform: translateY(0.35rem);
  transition: opacity 0.18s ease;
  z-index: 2;
}

.article-toc::-webkit-scrollbar {
  display: none;
}

.article-toc ol {
  list-style: none;
}

.article-toc li {
  position: relative;
  margin-bottom: 0.65rem;
}

.article-toc a {
  display: block;
  color: inherit;
  opacity: 0.78;
  text-wrap: balance;
}

.article-toc a:hover,
.article-toc a[aria-current="location"] {
  color: var(--fg2);
  opacity: 1;
}

.article-toc a:hover {
  text-decoration: underline;
  text-decoration-color: var(--hover);
  text-underline-offset: 2px;
}

.article-toc.is-collision-hidden {
  opacity: 0;
  pointer-events: none;
}

.toc-active-marker {
  position: absolute;
  top: 0;
  left: calc((var(--toc-marker-gutter) - 4px) / 2);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--fg2);
  opacity: 0;
  transform: translate3d(0, calc(var(--toc-active-marker-y, 0px) - 50%), 0);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
}

.article-toc.has-active-marker .toc-active-marker {
  opacity: 1;
}

.article-content h1 {
  margin: 0 0 0.35rem;
  color: var(--fg);
  font-family: var(--font-heading);
  font-size: clamp(27px, 4vw, 34px);
  font-weight: 600;
  line-height: 1.15;
}

.article-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.65rem;
  color: var(--fg);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.article-content h3 {
  margin-top: 1.6rem;
  margin-bottom: 0.55rem;
  color: var(--fg2);
  font-family: var(--font-text-variant);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}

.article-content p {
  margin-bottom: 1.25rem;
  color: var(--fg1);
  font-family: var(--font-text-variant);
}

.article-content li {
  font-family: var(--font-text-variant);
}

.article-content p a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg4) 38%, transparent);
  text-underline-offset: 2px;
}

.article-content p a:hover {
  text-decoration-color: var(--fg2);
}

.article-content .katex {
  font-size: 100% !important;
  overflow: visible;
}

.article-content .katex-display {
  margin: 0;
  overflow-x: auto;
  overflow-y: visible;
}

.article-content .katex-display > .katex {
  overflow-x: auto;
  overflow-y: visible;
}

.margin-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.sidenote-number {
  counter-increment: sidenote-counter;
  pointer-events: none;
}

.sidenote-number::after,
.sidenote::before {
  position: relative;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 0.78rem;
  line-height: 1;
  vertical-align: baseline;
}

.sidenote-number::after {
  top: -0.48rem;
  padding-left: 0.08rem;
  content: counter(sidenote-counter);
}

.sidenote {
  position: relative;
  clear: right;
  float: right;
  width: var(--sidenote-width);
  margin: 0.2rem calc(0px - var(--sidenote-width) - var(--sidenote-gap)) 1.15rem
    var(--sidenote-gap);
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 12px;
  line-height: 1.45;
}

.sidenote::before {
  top: -0.36rem;
  padding-right: 0.24rem;
  content: counter(sidenote-counter);
}

.article-content .article-note {
  margin-top: -0.2rem;
  color: var(--fg4);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}

.article-content .article-pullquote {
  margin: 1.4rem 0 1.5rem;
  padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 2px solid var(--fg3);
  color: var(--fg1);
  font-family: var(--font-text-variant);
  font-size: 17px;
  font-style: italic;
  line-height: 1.6;
}

.article-content .article-pullquote p {
  margin: 0;
  color: inherit;
}

.article-content .article-meta {
  margin-bottom: 1.6rem;
  color: var(--fg4);
  font-family: var(--font-sans);
  font-size: 15px;
}

.back-link {
  display: inline-block;
  margin-bottom: 1.2rem;
  color: var(--fg4);
  font-family: var(--font-sans);
  font-size: 15px;
}

.back-link:hover {
  color: var(--fg2);
  text-decoration: underline;
  text-decoration-color: var(--hover);
  text-underline-offset: 2px;
}

.article-visual {
  margin: 2rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.article-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.article-image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin: 2rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.article-image-grid div {
  min-width: 0;
}

.article-image-grid img {
  display: block;
  width: 100%;
  height: 185px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  object-fit: cover;
  background: #ffffff;
}

.article-image-grid div:first-child img {
  object-position: center 44%;
}

.article-image-grid div:nth-child(2) img {
  object-fit: cover;
  object-position: left center;
  background: #ffffff;
}

.article-image-grid span {
  display: block;
  margin-top: 0.45rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 13px;
  line-height: 1.3;
}

.article-image-grid figcaption {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 14px;
  line-height: 1.45;
}

.article-wide-image {
  width: 100%;
  max-width: var(--article-width);
  margin: 2rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.article-wide-image img {
  display: block;
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #ffffff;
}

.article-wide-image figcaption {
  margin-top: 0.75rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 14px;
  line-height: 1.45;
}

.article-supplementary {
  width: 100%;
  max-width: var(--article-width);
  margin: 2.4rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.article-supplementary h2 {
  margin: 0 0 1rem;
  color: var(--fg2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.article-supplementary h3 {
  max-width: var(--article-width);
  margin: 1.5rem auto 0.55rem;
  color: var(--fg2);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.article-supplementary p {
  max-width: var(--article-width);
  margin-right: auto;
  margin-left: auto;
}

.article-supplementary pre {
  max-width: var(--article-width);
  margin: 0 auto 1.5rem;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #f8f8f6;
  color: var(--fg2);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
}

.article-supplementary pre code {
  font: inherit;
}

.article-supplementary .article-wide-image {
  width: 100%;
  margin: 1.4rem 0;
}

.article-supplementary .article-wide-image:last-child {
  margin-bottom: 0;
}

.article-citation {
  width: 100%;
  max-width: var(--article-width);
  margin: 2.4rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.article-citation h2 {
  margin: 0 0 1rem;
  color: var(--fg2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.article-citation p {
  max-width: var(--article-width);
  margin-right: auto;
  margin-left: auto;
}

.article-citation pre {
  max-width: var(--article-width);
  margin: 0.65rem auto 1.5rem;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #f8f8f6;
  color: var(--fg2);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
}

.article-citation pre:last-child {
  margin-bottom: 0;
}

.article-citation pre code {
  font: inherit;
}

.interactive-figure {
  margin: 2rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.interactive-figure canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--article-width);
  aspect-ratio: 660 / 371;
  touch-action: none;
  cursor: grab;
}

.graph-figure canvas {
  aspect-ratio: 660 / 330;
}

.zinc-figure canvas {
  aspect-ratio: 660 / 340;
}

.interactive-figure canvas:active {
  cursor: grabbing;
}

.interactive-figure canvas:focus-visible {
  outline: 2px solid color-mix(in srgb, #2f6f73 55%, transparent);
  outline-offset: 4px;
}

.interactive-figure figcaption {
  margin-top: 0.8rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 14px;
  line-height: 1.45;
}

.molstar-figure {
  margin: 2rem 0;
  padding: 0.35rem 0;
}

.motif-viewer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.motif-viewer-panel {
  min-width: 0;
}

.motif-viewer-label {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.55rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 13px;
  line-height: 1.25;
}

.motif-viewer-label span:first-child {
  color: var(--fg2);
}

.molstar-shell {
  position: relative;
  width: 100%;
  min-height: 360px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.molstar-viewer {
  position: relative;
  width: 100%;
  height: min(460px, 68vw);
  min-height: 360px;
  background: #ffffff;
}

.molstar-viewer .msp-plugin {
  font-family: var(--font-sans);
  background: #ffffff !important;
}

.molstar-viewer .msp-plugin-content {
  border: 0 !important;
}

.molstar-viewer .msp-viewport,
.molstar-viewer .msp-layout-region,
.molstar-viewer .msp-layout-static,
.molstar-viewer .msp-semi-transparent-background {
  background: #ffffff !important;
}

.molstar-shell .msp-viewport-controls,
.molstar-shell .msp-viewport-top-left-controls,
.molstar-shell .msp-logo {
  display: none !important;
}

.molstar-status {
  display: none;
}

.molstar-figure figcaption {
  margin-top: 0.8rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 14px;
  line-height: 1.45;
}

.motif-comparison,
.dataset-examples,
.fold-overlay-figure,
.singleton-overlay-figure,
.first-pass-with-viewer,
.fragment-comparison-figure {
  width: 100%;
  max-width: var(--article-width);
  margin-right: 0;
  margin-left: 0;
}

.dataset-examples {
  scroll-margin-top: calc(var(--site-header-height) + 1rem);
}

.dataset-example-row + .dataset-example-row {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

.dataset-row-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.dataset-row-heading h3 {
  margin: 0;
  color: var(--fg2);
  font-family: var(--font-text-variant);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.dataset-row-heading p {
  max-width: 460px;
  margin: 0;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}

.plddt-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 0.7rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 12px;
  line-height: 1.2;
}

.plddt-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}

.plddt-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

.plddt-very-high {
  background: #004cca;
}

.plddt-confident {
  background: #49c4ee;
}

.plddt-low {
  background: #ffd539;
}

.plddt-very-low {
  background: #ff7143;
}

.dataset-viewer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.dataset-viewer-panel {
  margin: 0;
  min-width: 0;
}

.dataset-viewer-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.2rem 0.75rem;
  min-height: 1.25rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 12px;
  line-height: 1.25;
}

.dataset-viewer-label span:first-child {
  color: var(--fg2);
  font-weight: 500;
}

.dataset-molstar-shell {
  min-height: 340px;
}

.dataset-structure-viewer {
  height: min(360px, 43vw);
  min-height: 340px;
}

.fold-overlay-chain-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 0 0 0.65rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 12px;
  line-height: 1.25;
}

.fold-overlay-chain-list span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.fold-overlay-chain-list code {
  color: var(--fg2);
}

.fold-overlay-shell {
  min-height: 430px;
}

.fold-overlay-viewer {
  height: min(520px, 58vw);
  min-height: 430px;
}

.singleton-overlay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.singleton-overlay-panel {
  min-width: 0;
}

.singleton-overlay-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.65rem;
  min-height: 2.2rem;
  margin-bottom: 0.45rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 12px;
  line-height: 1.25;
}

.singleton-overlay-label span:first-child {
  color: var(--fg2);
  font-weight: 500;
}

.singleton-overlay-shell {
  min-height: 300px;
}

.singleton-overlay-viewer {
  height: min(340px, 32vw);
  min-height: 300px;
}

.first-pass-with-viewer {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.35rem;
  margin: 2.4rem 0;
}

.first-pass-copy {
  min-width: 0;
}

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

.first-pass-fragment-figure {
  margin: 0;
}

.first-pass-fragment-figure .dataset-row-heading {
  align-items: flex-start;
}

.first-pass-fragment-figure .dataset-row-heading p {
  max-width: 380px;
}

.first-pass-fragment-shell {
  min-height: 380px;
}

.first-pass-fragment-viewer {
  height: min(460px, 58vw);
  min-height: 380px;
}

.fragment-color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 0.7rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 12px;
  line-height: 1.25;
}

.fragment-color-item {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}

.fragment-color-swatch {
  display: inline-block;
  width: 0.68rem;
  height: 0.68rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

.fragment-comparison-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.fragment-comparison-heading h3,
.fiedler-graph-heading h3 {
  margin: 0;
  font-family: var(--font-text-variant);
  font-size: 15px;
  line-height: 1.2;
}

.fragment-comparison-heading p,
.fiedler-graph-heading p {
  max-width: 520px;
  margin: 0.25rem 0 0;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 12px;
  line-height: 1.35;
}

.fragment-protein-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid rgba(31, 31, 31, 0.18);
  border-radius: 7px;
  overflow: hidden;
  background: #f8f6f1;
}

.fragment-protein-toggle button {
  border: 0;
  border-right: 1px solid rgba(31, 31, 31, 0.14);
  padding: 0.5rem 0.7rem;
  background: transparent;
  color: var(--fg3);
  font: 600 12px/1 var(--font-text-variant);
  cursor: pointer;
}

.fragment-protein-toggle button:last-child {
  border-right: 0;
}

.fragment-protein-toggle button[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
}

.fragment-example-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  margin-bottom: 1rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 12px;
  line-height: 1.35;
}

.fragment-example-summary strong {
  color: var(--fg2);
}

.fragment-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.fragment-method-panel {
  margin: 0;
  min-width: 0;
}

.fragment-method-panel figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 2.25rem;
  margin: 0 0 0.45rem;
  color: var(--fg2);
  font-family: var(--font-text-variant);
}

.fragment-method-panel figcaption span {
  font-size: 13px;
  font-weight: 650;
}

.fragment-method-panel figcaption small {
  max-width: 260px;
  color: var(--fg4);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
}

.fragment-method-shell {
  min-height: 345px;
}

.fragment-method-viewer {
  height: min(420px, 36vw);
  min-height: 345px;
}

.fragment-method-legend {
  min-height: 2.35rem;
}

.fiedler-explainer {
  margin-top: 2.2rem;
}

.fiedler-explainer h3 {
  margin-top: 1.35rem;
  margin-bottom: 0.55rem;
  font-family: var(--font-text-variant);
  font-size: 15px;
}

.equation {
  margin: 1.1rem 0;
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(31, 31, 31, 0.12);
  border-bottom: 1px solid rgba(31, 31, 31, 0.12);
  color: var(--fg2);
  font-size: 22px;
  line-height: 1.3;
  text-align: center;
}

.math-display {
  overflow-x: auto;
  overflow-y: visible;
}

.fiedler-graph-figure {
  border-top: 0;
  border-bottom: 0;
  padding: 0;
  overflow: hidden;
}

.fiedler-graph-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.fiedler-molstar-shell {
  min-height: 380px;
  background: transparent;
}

.fiedler-molstar-viewer {
  height: min(560px, 54vw);
  min-height: 380px;
}

.fiedler-vector-legend {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: center;
  width: min(440px, 100%);
  margin-top: 0.7rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 11px;
  line-height: 1.2;
}

.fiedler-vector-legend > span {
  grid-row: 1 / 3;
  color: var(--fg3);
  font-weight: 650;
}

.fiedler-vector-scale {
  height: 0.55rem;
  border: 1px solid rgba(31, 31, 31, 0.14);
  border-radius: 999px;
  background: linear-gradient(90deg, #337beb 0%, #f6f2eb 50%, #ce4e56 100%);
}

.fiedler-vector-ticks {
  display: flex;
  justify-content: space-between;
  color: var(--fg4);
  font-variant-numeric: tabular-nums;
}

.fiedler-graph-figure figcaption {
  margin-top: 0.85rem;
}

.dataset-molstar-shell .molstar-status[data-state="loaded"],
.fold-overlay-shell .molstar-status[data-state="loaded"],
.first-pass-fragment-shell .molstar-status[data-state="loaded"],
.fiedler-molstar-shell .molstar-status[data-state="loaded"],
.fragment-method-shell .molstar-status[data-state="loaded"] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.dataset-molstar-shell:hover .molstar-status[data-state="loaded"],
.fold-overlay-shell:hover .molstar-status[data-state="loaded"],
.first-pass-fragment-shell:hover .molstar-status[data-state="loaded"],
.fiedler-molstar-shell:hover .molstar-status[data-state="loaded"],
.fragment-method-shell:hover .molstar-status[data-state="loaded"] {
  opacity: 1;
  transform: translateY(0);
}

.map-rings circle,
.map-spokes path,
.plot-grid path,
.plot-axis path {
  fill: none;
  stroke: color-mix(in srgb, var(--fg4) 18%, transparent);
  stroke-width: 1;
}

.route path,
.plot-line path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.route-primary path,
.plot-line path {
  stroke: #2f6f73;
}

.route-secondary path {
  stroke: #9b5e3a;
  stroke-dasharray: 4 6;
}

.map-nodes circle,
.plot-points circle {
  fill: var(--bg);
  stroke: var(--fg2);
  stroke-width: 1.8;
}

.plot-bars rect {
  fill: color-mix(in srgb, #2f6f73 68%, white);
  opacity: 0.76;
}

.quality-axis path {
  fill: none;
  stroke: color-mix(in srgb, var(--fg4) 24%, transparent);
  stroke-width: 1;
}

.quality-bars rect {
  fill: color-mix(in srgb, #2f6f73 68%, white);
  opacity: 0.72;
}

.quality-line path {
  fill: none;
  stroke: #9b5e3a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.quality-points circle {
  fill: var(--bg);
  stroke: #9b5e3a;
  stroke-width: 1.8;
}

.quality-labels text {
  fill: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 14px;
}

.map-labels text {
  fill: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 14px;
}

.domain-cloud circle {
  fill: color-mix(in srgb, #2f6f73 18%, transparent);
  stroke: #2f6f73;
  stroke-width: 1.6;
}

.right-domain circle {
  fill: color-mix(in srgb, #9b5e3a 18%, transparent);
  stroke: #9b5e3a;
}

.linker-path {
  fill: none;
  stroke: var(--fg2);
  stroke-linecap: round;
  stroke-width: 8;
}

.linker-path.split {
  stroke-dasharray: 6 7;
}

.cut-mark {
  fill: none;
  stroke: #a03b36;
  stroke-linecap: round;
  stroke-width: 2.4;
}

.cluster-stats-table {
  width: 100%;
  margin: 1.4rem 0 1.5rem;
  border-collapse: collapse;
  color: var(--fg2);
  font-family: var(--font-text-variant);
  font-size: 13px;
  line-height: 1.35;
}

.cluster-stats-table caption {
  margin-bottom: 0.5rem;
  color: var(--fg4);
  font-size: 13px;
  text-align: left;
}

.cluster-stats-table th,
.cluster-stats-table td {
  padding: 0.55rem 0.45rem;
  border-bottom: 1px solid var(--hairline);
  text-align: right;
}

.cluster-stats-table th:first-child,
.cluster-stats-table td:first-child {
  padding-left: 0;
  text-align: left;
}

.cluster-stats-table th {
  color: var(--fg4);
  font-weight: 500;
}

.cluster-result-callout {
  margin: 1.7rem 0 1.4rem;
  padding: 1rem 0;
  border-top: 1px solid var(--fg2);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-text-variant);
}

.cluster-result-eyebrow {
  margin: 0 0 0.85rem;
  color: var(--fg4);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cluster-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.cluster-result-grid div {
  min-width: 0;
}

.cluster-result-value,
.cluster-result-label {
  display: block;
}

.cluster-result-value {
  color: var(--fg);
  font-family: var(--font-text-variant);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.15;
}

.cluster-result-label {
  margin-top: 0.35rem;
  color: var(--fg4);
  font-size: 13px;
  line-height: 1.35;
}

.sequence-example-table th:nth-child(2),
.sequence-example-table td:nth-child(2) {
  text-align: left;
}

.sampling-figure {
  font-family: var(--font-text-variant);
}

.sampling-consequence {
  display: block;
  margin: 0.75rem 0;
  color: var(--fg);
  font-weight: 600;
}

.sampling-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sampling-heading h3 {
  margin: 0;
  color: var(--fg2);
  font-size: 15px;
  font-weight: 500;
}

.sampling-heading p {
  margin: 0;
  color: var(--fg4);
  font-size: 13px;
  line-height: 1.35;
}

.sampling-controls {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.sampling-dataset-toggle {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}

.sampling-dataset-toggle button {
  padding: 0.42rem 0.65rem;
  border: 0;
  border-right: 1px solid var(--hairline);
  background: transparent;
  color: var(--fg3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.sampling-dataset-toggle button:last-child {
  border-right: 0;
}

.sampling-dataset-toggle button[aria-pressed="true"] {
  background: color-mix(in srgb, #2f6f73 10%, transparent);
  color: var(--fg1);
}

.sampling-slider {
  display: grid;
  gap: 0.35rem;
  color: var(--fg4);
  font-size: 13px;
}

.sampling-slider span {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.sampling-slider small {
  color: var(--fg4);
  font-size: 12px;
}

.sampling-slider output {
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
}

.sampling-slider input {
  width: 100%;
  accent-color: #2f6f73;
}

.sampling-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.2rem;
  margin-bottom: 1rem;
  color: var(--fg4);
  font-size: 13px;
}

.sampling-metrics strong {
  color: var(--fg2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sampling-bars {
  display: grid;
  gap: 0.85rem;
}

.sampling-bar-row {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr) 9.5rem;
  gap: 0.7rem;
  align-items: center;
}

.sampling-bar-label {
  color: var(--fg2);
  font-size: 13px;
}

.sampling-bar-track {
  position: relative;
  height: 32px;
  border-left: 1px solid color-mix(in srgb, var(--fg4) 22%, transparent);
  background:
    linear-gradient(to right, color-mix(in srgb, var(--fg4) 11%, transparent) 1px, transparent 1px)
      0 0 / 25% 100%;
}

.sampling-bar-track span {
  position: absolute;
  left: 0;
  display: block;
  height: 9px;
  min-width: 2px;
  transition: width 0.18s ease;
}

.dataset-share {
  top: 6px;
  width: var(--dataset-width);
  background: color-mix(in srgb, var(--fg4) 42%, transparent);
}

.sample-share {
  bottom: 6px;
  width: var(--sample-width);
  background: #2f6f73;
}

.sampling-bar-values {
  display: grid;
  gap: 0.12rem;
  color: var(--fg4);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.sample-value {
  color: #2f6f73;
}

.cluster-skew-figure {
  font-family: var(--font-text-variant);
}

.cluster-skew-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.58fr);
  gap: 1.4rem;
  align-items: start;
  margin-bottom: 1rem;
}

.cluster-skew-heading h3 {
  margin: 0;
  color: var(--fg2);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

.cluster-skew-heading p {
  margin: 0.35rem 0 0;
  color: var(--fg4);
  font-size: 13px;
  line-height: 1.35;
}

.cluster-skew-stats {
  display: grid;
  gap: 0.4rem;
  color: var(--fg4);
  font-size: 12px;
  line-height: 1.25;
}

.cluster-skew-stats strong {
  color: var(--fg2);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cluster-skew-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.cluster-skew-panel {
  width: 100%;
  min-width: 0;
}

.cluster-skew-panel-wide {
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.cluster-skew-panel h4 {
  margin: 0 0 0.45rem;
  color: var(--fg3);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.cluster-skew-panel svg {
  width: 100%;
  overflow: visible;
  background: #fff;
}

.cluster-skew-figure figcaption {
  margin-top: 0.75rem;
  color: var(--fg4);
  font-family: var(--font-text-variant);
  font-size: 13px;
  line-height: 1.45;
}

.simple-list {
  margin: 1.25rem 0 0 1.2rem;
  color: var(--fg1);
}

.simple-list li {
  margin-bottom: 0.45rem;
}

.tinker-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: 14px;
}

.tinker-panel span {
  min-height: 92px;
  display: flex;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(47, 111, 115, 0.1), transparent 48%),
    linear-gradient(20deg, rgba(155, 94, 58, 0.12), transparent 44%);
  color: var(--fg2);
}

#footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  color: var(--fg4);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
}

#footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#footer a {
  position: relative;
  color: var(--fg4);
}

#footer a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5px;
  background: var(--fg4);
  content: "";
  opacity: 1;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.2s ease-out, opacity 0.3s ease-in-out;
}

#footer a:hover {
  color: var(--fg3);
}

#footer a:hover::after {
  opacity: 0.5;
  transform: scaleX(1);
  transform-origin: bottom left;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 1320px) {
  #main {
    padding-right: 1.3rem;
    padding-left: 1.3rem;
  }

  #main.article-page {
    max-width: calc(var(--article-width) + 3.2rem);
  }

  .article-shell {
    display: block;
  }

  .article-toc {
    display: none;
  }

  .sidenote-number {
    pointer-events: auto;
    cursor: pointer;
  }

  .sidenote-number::after {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--fg4) 40%, transparent);
    text-underline-offset: 2px;
  }

  .sidenote {
    display: none;
    float: none;
    clear: both;
    width: auto;
    margin: 0.55rem 0 1.2rem;
    padding: 0.05rem 0 0.05rem 0.85rem;
    border-left: 1px solid var(--hairline);
    font-size: 13px;
  }

  .sidenote::before {
    display: none;
  }

  .margin-toggle:checked + .sidenote {
    display: block;
  }
}

@media (max-width: 768px) {
  :root {
    --site-header-height: 50px;
  }

  #wrapper {
    padding-top: var(--site-header-height);
    padding-right: 0.33rem;
    padding-left: 0.33rem;
  }

  .site-header {
    right: 0;
    left: 0;
    height: var(--site-header-height);
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 767px) {
  .motif-comparison,
  .dataset-examples,
  .fold-overlay-figure,
  .singleton-overlay-figure,
  .first-pass-with-viewer,
  .fragment-comparison-figure {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .motif-viewer-grid,
  .dataset-viewer-grid,
  .singleton-overlay-grid,
  .cluster-skew-grid,
  .cluster-result-grid,
  .first-pass-with-viewer,
  .fragment-method-grid {
    grid-template-columns: 1fr;
  }

  .article-image-grid {
    grid-template-columns: 1fr;
  }

  .article-image-grid img {
    height: min(250px, 58vw);
  }

  .article-wide-image {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .article-supplementary,
  .article-citation {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .motif-viewer-label,
  .dataset-row-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .dataset-row-heading p {
    text-align: left;
  }

  .dataset-viewer-label {
    font-size: 12px;
  }

  .cluster-stats-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .sampling-heading,
  .sampling-controls,
  .cluster-skew-heading,
  .fragment-comparison-heading,
  .fiedler-graph-heading {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .fragment-method-panel figcaption {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .fragment-method-panel figcaption small {
    max-width: none;
    text-align: left;
  }

  .sampling-bar-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .sampling-bar-values {
    grid-template-columns: repeat(2, max-content);
    gap: 0.65rem;
  }

  .dataset-structure-viewer {
    height: min(330px, 76vw);
    min-height: 250px;
  }

  .post-item {
    display: block;
    margin: 0 -1.6rem;
    padding: 1rem 1.6rem;
  }

  #main.home-page {
    padding-top: 1.4rem;
  }

  .home-section {
    grid-template-columns: 1fr;
  }

  .home-section {
    gap: 0.8rem;
  }

  .home-section p {
    font-size: 16px;
  }

  .home-capability-list li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .desktop-time {
    display: none;
  }

  .mobile-time {
    display: block;
  }

  .article-content h1 {
    font-size: 28px;
  }

  .tinker-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .top-nav {
    display: none;
  }

  .hamburger {
    display: inline-block;
  }

  .site-header {
    padding-right: 0.6rem;
  }

  .brand {
    font-size: 15px;
    letter-spacing: 1.5px;
    line-height: 21px;
  }

  .logo-brand {
    width: 123px;
    letter-spacing: 0;
  }

  #footer {
    align-items: flex-start;
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
  }

  #footer > div {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 1.25rem;
    text-align: left;
  }

  #footer > div > span {
    width: 100%;
  }

  .footer-separator {
    display: none;
  }
}

@media print {
  @page {
    margin: 0.65in;
    size: letter;
  }

  :root {
    --site-header-height: 0px;
  }

  html,
  body {
    overflow: visible;
    background: #ffffff;
  }

  body {
    color: var(--fg);
    font-size: 11.5pt;
    line-height: 1.45;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  #wrapper,
  #main,
  #main.article-page,
  .article-shell,
  .article-content {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  #header,
  #footer,
  .article-toc,
  .back-link,
  .mobile-menu-overlay,
  .hamburger {
    display: none !important;
  }

  .article-content {
    color: var(--fg1);
    font-family: var(--font-sans);
    font-size: 11.5pt;
  }

  .article-content h1 {
    max-width: 6.8in;
    margin: 0 0 0.15in;
    font-size: 25pt;
    line-height: 1.12;
  }

  .article-content h2 {
    margin: 0.34in 0 0.12in;
    font-size: 17pt;
    break-after: avoid;
  }

  .article-content h3,
  .dataset-row-heading h3,
  .fragment-comparison-heading h3,
  .fiedler-graph-heading h3,
  .sampling-heading h3,
  .cluster-skew-heading h3 {
    margin-top: 0.22in;
    font-size: 12pt;
    break-after: avoid;
  }

  .article-content p,
  .article-content li {
    orphans: 3;
    widows: 3;
  }

  .article-content p {
    margin-bottom: 0.13in;
  }

  .article-content .article-meta {
    margin-bottom: 0.28in;
  }

  .sidenote {
    display: block;
    float: none;
    clear: both;
    width: auto;
    margin: 0.04in 0 0.16in;
    padding: 0.04in 0 0.04in 0.12in;
    border-left: 1px solid var(--hairline);
    font-size: 9.5pt;
  }

  .sidenote-number {
    pointer-events: none;
  }

  .sidenote-number::after {
    top: -0.35em;
  }

  .margin-toggle {
    display: none;
  }

  .article-image-grid,
  .article-wide-image,
  .article-supplementary,
  .article-citation,
  .cluster-result-callout,
  .cluster-skew-figure,
  .sampling-figure,
  .interactive-figure,
  .fiedler-explainer,
  .fragment-comparison-figure,
  .first-pass-with-viewer,
  .fold-overlay-figure,
  .singleton-overlay-figure,
  .dataset-examples,
  .motif-comparison {
    width: auto;
    max-width: none;
    margin: 0.22in 0;
    break-inside: avoid;
  }

  .molstar-shell,
  .molstar-viewer,
  .molstar-status,
  .fragment-color-list,
  .fold-overlay-chain-list,
  .plddt-legend,
  .fiedler-vector-legend,
  .fragment-protein-toggle,
  .fragment-example-summary {
    display: none !important;
  }

  .dataset-viewer-grid,
  .fragment-method-grid,
  .singleton-overlay-grid,
  .motif-viewer-grid,
  .first-pass-with-viewer,
  .cluster-result-grid,
  .cluster-skew-grid,
  .sampling-controls,
  .sampling-metrics {
    display: block;
  }

  .article-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .article-image-grid img,
  .article-wide-image img {
    max-height: 4.5in;
    object-fit: contain;
  }

  .cluster-stats-table {
    display: table;
    width: 100%;
    font-size: 8.6pt;
    white-space: normal;
    break-inside: avoid;
  }

  .cluster-stats-table th,
  .cluster-stats-table td {
    padding: 0.08in 0.05in;
  }

  .equation {
    margin: 0.14in 0;
    padding: 0.08in 0;
    font-size: 15pt;
    break-inside: avoid;
  }

  .article-supplementary pre,
  .article-citation pre {
    max-width: none;
    white-space: pre-wrap;
    font-size: 8pt;
    break-inside: auto;
  }

  a {
    text-decoration-color: color-mix(in srgb, var(--fg4) 28%, transparent);
  }
}