/* Shared lab chrome and a centered, readable article margin. */
.research-document.csl-article {
  --csl-header: 64px;
  --header-height: var(--csl-header);
  --lab-dock-height: calc(48px + env(safe-area-inset-bottom, 0px));
  --page-viewport: calc(100svh - var(--lab-dock-height));
  scroll-padding-top: var(--csl-header);
  scroll-padding-bottom: var(--lab-dock-height);
}
.research-page .csl-site-header { display: block; padding: 0; height: var(--csl-header); min-height: var(--csl-header); }
.research-page .csl-shell .csl-header-inner { height: var(--csl-header); }
.research-page .csl-shell svg { fill: none; stroke: currentColor; stroke-width: 2; }
.research-page .csl-shell .csl-lab-location-flag { stroke: none; }
.research-page .csl-shell [hidden] { display: none; }
.research-page .csl-shell .csl-search-dialog { max-height: calc(100svh - 48px); overflow-y: auto; }
.research-page .csl-shell .csl-mobile-nav { background: #fcfcfd; box-shadow: 0 16px 22px #2020200a; }
.research-page .csl-shell .csl-icon-button svg { width: 20px; height: 20px; }
.research-page .csl-shell .csl-wrap { margin-inline: auto; }
.research-page .csl-lab-footer { padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }

/* A small editorial credit, sharing KVarN's existing gem illustration. */
.csl-article .research-page .publication-venue:has(+ .publication-lineage) { margin-bottom: 2px; }
.csl-article .publication-lineage { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 0 0 calc(12 * var(--ui, 1px)); color: #767178; font: 400 clamp(10px, calc(11 * var(--ui, 1px)), 12px)/1.5 'Google Sans',Arial,sans-serif; }
.csl-article .publication-lineage a { display: inline-flex; align-items: center; gap: 4px; color: #65548b; font-weight: 600; text-decoration: none; text-underline-offset: 3px; }
.csl-article .publication-lineage img { width: 20px; height: 20px; transition: transform .25s ease; }
.csl-article .publication-lineage a:hover { color: #49366f; text-decoration: underline; }
.csl-article .publication-lineage a:hover img { transform: rotate(-9deg) scale(1.08); }
.csl-article .publication-lineage a:focus-visible { outline: 2px solid #bf2435; outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .csl-article .publication-lineage img { transition: none; transform: none !important; } }

/* Quiet desktop-window chrome with neutral controls on the right. */
.csl-article .integration-window {
  background: #151d20; border-color: #3b484b; border-radius: 17px;
  box-shadow: 0 18px 40px -24px #1b292e70, inset 0 1px 0 #ffffff0b;
}
.csl-article .integration-titlebar {
  display: flex; justify-content: space-between; padding-inline: calc(18 * var(--ui, 1px)) calc(12 * var(--ui, 1px));
  background: linear-gradient(115deg, #2b3438, #252e32); border-bottom: 1px solid #ffffff0b;
  color: #d4dfe1; letter-spacing: 0;
}
.csl-article .integration-window:is(:hover, :focus-within) { border-color: #777b84; box-shadow: 0 24px 44px -24px #1b292e80, inset 0 1px 0 #ffffff14; }
.csl-article .integration-window:is(:hover, :focus-within) .integration-titlebar { background: linear-gradient(115deg, #313d40, #2a3438); }
.csl-article .terminal-window-title { display: flex; align-items: center; gap: calc(8 * var(--ui, 1px)); font: 500 calc(11 * var(--ui, 1px))/1.4 'Google Sans',Arial,sans-serif; }
.csl-article .terminal-window-title svg { width: calc(16 * var(--ui, 1px)); height: calc(16 * var(--ui, 1px)); color: #c99a9f; }
.csl-article .integration-titlebar .terminal-window-controls { display: flex; align-items: center; gap: calc(17 * var(--ui, 1px)); margin-left: auto; padding-inline: 6px; color: #adbcc1; pointer-events: none; }
.csl-article .terminal-window-controls svg { width: calc(13 * var(--ui, 1px)); height: calc(13 * var(--ui, 1px)); }
.csl-article .integration-titlebar svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.csl-article :is(.integration-toolbar, .integration-step-tabs) { background: #1e282c; }
.csl-article .integration-copy { background: #ffffff06; border-color: #777b843b; border-radius: 8px; }
.csl-article .integration-tab-logo { background: #37393e; border-radius: 9px; }
.csl-article .integration-window-footer { background: #182125; border-top-color: #ffffff09; }
.csl-article .integration-panel pre { font-family: 'Cascadia Code','Noto Sans Mono',Consolas,monospace; }

/* A quiet typographic margin, part of the lab's editorial layout. */
.article-index { position: fixed; left: var(--article-rail-left, 24px); top: calc(var(--csl-header) + (100svh - var(--csl-header) - var(--lab-dock-height)) / 2); transform: translateY(-50%); z-index: 31; width: 160px; max-height: calc(100svh - var(--csl-header) - var(--lab-dock-height) - 48px); overflow-y: auto; padding: 4px 0; font: 400 14px/1.5 'Google Sans',Arial,sans-serif; }
.article-back-cue { display: inline-flex; align-items: center; justify-content: center; justify-self: center; gap: 9px; min-height: 24px; font: 500 11px/1.4 'Google Sans',Arial,sans-serif; color: #727680; }
.article-back-cue svg { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.article-back-cue:hover { color: #bf2435; }
.article-back-cue:hover svg { transform: translateX(-3px); }
.article-back-cue:focus-visible { outline: 2px solid #bf2435; outline-offset: 4px; border-radius: 4px; }
.article-index .article-category { margin: 0 0 4px; color: #797b7f; font-size: 11px; letter-spacing: .035em; }
.article-index .article-project { margin: 0 0 22px; font-size: 22px; font-weight: 500; color: #bf2435; }
.article-index nav { position: relative; display: grid; border-left: 1px solid #dcdde0; }
.article-index-marker { position: absolute; left: -1px; top: 0; width: 3px; height: 24px; border-radius: 3px; background: #bf2435; transform: translate3d(0, 11px, 0); pointer-events: none; }
.article-index nav a { position: relative; display: flex; align-items: center; min-height: 46px; padding: 10px 0 10px 17px; color: #77797f; transition: color .18s; }
.article-index nav a[aria-current], .article-index nav a:hover { color: #bf2435; }
.article-index a:focus-visible, .article-index button:focus-visible { outline: 2px solid #bf2435; outline-offset: 2px; }
.research-page .csl-site-header .article-contents-toggle, .article-index-close, .article-index-backdrop { display: none; }
.article-index-close svg, .article-contents-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@media (min-width: 901px) {
  .csl-article .research-page .research-intro { grid-template-rows: auto minmax(0, 1fr) auto; padding-top: 12px; row-gap: 12px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .csl-article .research-page .research-intro { padding-block: 8px; row-gap: 8px; }
  .csl-article .publication-introduction { margin-top: 10px; padding-top: 10px; }
  .csl-article .publication-abstract { margin-top: 9px; }
  .csl-article .publication-runtimes { margin-top: 8px; padding-top: 6px; }
}
@media (max-width: 900px) { .article-back-cue { display: flex; width: fit-content; min-height: 36px; margin: 0 auto 14px; } }
@media (min-width: 1280px) {
  .research-document.csl-article { --article-rail-left: clamp(24px, calc((100vw - 1920px) / 2), 48px); }
  .csl-article .research-page { background: #f5ecee; }
  .csl-article .research-page #main {
    position: relative; margin-left: calc(var(--article-rail-left) + 180px); margin-right: 24px;
    background: #fff; border-radius: 18px;
    box-shadow: 0 0 0 1px #e1e2e4, -8px 0 32px #3e22250b, 0 14px 44px #3e222510;
  }
  /* A fine torn-paper edge, outside the reading area and clear of the rail. */
  .csl-article .research-page #main::before {
    content: ''; position: absolute; left: -13px; top: 12px; bottom: 12px; width: 20px;
    background: url('/assets/article-paper-edge.svg?v=2') left top / 20px 100% no-repeat;
    filter: drop-shadow(-3px 1px 4px #3e222510);
    -webkit-mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 20px), transparent);
    pointer-events: none;
  }
  /* Mirror the same continuous contour on the outer right edge. */
  .csl-article .research-page #main::after {
    content: ''; position: absolute; right: -13px; top: 12px; bottom: 12px; width: 20px;
    background: url('/assets/article-paper-edge.svg?v=2') left top / 20px 100% no-repeat;
    transform: scaleX(-1); filter: drop-shadow(-3px 1px 4px #3e222510);
    -webkit-mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 20px), transparent);
    pointer-events: none;
  }
  .csl-article .research-page main > .container { width: min(calc(1360 * var(--ui, 1px)), calc(100% - 64px)); }
}
@media (min-width: 1280px) and (max-width: 1559px) {
  .csl-article .research-page .paper-masthead .publication-title { font-size: clamp(25px, 2.1vw, 31px); }
  .csl-article .paper-frontmatter { gap: 26px; }
}
@media (min-width: 1280px) and (max-width: 1559px) and (min-height: 721px) {
  .csl-article .method-story { padding: 22px 24px; }
  .csl-article .method-story h3 { font-size: 26px; margin-block: 10px 12px; }
  .csl-article .method-story > p { margin-bottom: 10px; }
  .csl-article .method-equation-link { margin-top: 12px; }
}
@media (max-width: 1279px) {
  .article-index { display: none; left: 0; top: var(--csl-header); bottom: var(--lab-dock-height); transform: none; max-height: none; width: min(270px, calc(100vw - 48px)); padding: 32px 24px; background: #fcfcfc; border-right: 1px solid #e3e4e6; box-shadow: 8px 0 28px #292a2d0d; z-index: 42; }
  .article-index.is-open { display: block; }
  .article-index nav a { min-height: 44px; }
  .article-index-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; color: #76797f; cursor: pointer; }
  .article-index-backdrop:not([hidden]) { display: block; position: fixed; inset: var(--csl-header) 0 var(--lab-dock-height); background: #2122251f; z-index: 41; }
  .research-page .csl-site-header .article-contents-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 10px; font: 500 12px/1.4 'Google Sans',Arial,sans-serif; border: 0; border-radius: 5px; background: transparent; color: #54575d; cursor: pointer; }
  .research-page .csl-site-header .article-contents-toggle:hover { background: #f5f0f0; }
  .research-page .csl-site-header .article-contents-toggle:focus-visible { outline: 2px solid #bf2435; outline-offset: 1px; }
  .research-page .csl-shell .csl-desktop-nav { display: none; }
  .research-page .csl-shell .csl-header-actions { margin-left: auto; }
  .research-page .csl-shell .csl-header-actions .csl-menu-button { display: inline-flex; }
  .research-page .csl-shell .csl-mobile-nav:not([hidden]) { display: block; }
}
@media (max-width: 600px) {
  .research-document.csl-article { --csl-header: 57px; --lab-dock-height: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .research-page .csl-shell .csl-header-github { display: none; }
  .research-page .csl-site-header .article-contents-toggle { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .article-index *, .article-back-cue svg { transition: none; } .article-back-cue:hover svg { transform: none; } }
@media print { .article-index, .article-contents-toggle { display: none !important; } .csl-article .research-page { background: #fff; } .csl-article .research-page #main { margin: 0; box-shadow: none; border-radius: 0; } .csl-article .research-page #main::before, .csl-article .research-page #main::after { display: none; } }

/* Free scrolling through the article; keep demo dimensions independent of
   chapter alignment, and retain just the final return-to-top link. */
.csl-article .research-page main > section[data-scroll-section] {
  min-height: 0;
  height: auto;
  padding-block: clamp(36px, 4vw, 64px);
}
@media (min-width: 901px) {
  .csl-article .research-page .research-intro {
    grid-template-rows: auto auto;
    padding-top: 16px;
  }
  .csl-article .research-page .paper-frontmatter {
    height: clamp(540px, calc(100svh - 180px), 680px);
  }
  .csl-article .research-page .examples-section.container {
    grid-template-rows: var(--examples-heading) var(--examples-height);
  }
}
.csl-article .research-page .reading-section { grid-template-rows: auto auto; }
.csl-article .research-page .reading-navigation { margin-top: 24px; }

/* The cover is one complete screen, without reintroducing scroll snapping.
   On small/short screens it may grow to keep every control readable. */
.csl-article .research-page main > .research-intro[data-scroll-section] {
  min-height: calc(100svh - var(--csl-header,64px) - var(--lab-dock-height,48px));
  align-content: center;
  justify-content: center;
  padding-block: 24px;
}
@media (min-width:901px) {
  .csl-article .research-page .paper-frontmatter {
    height: clamp(500px, calc(100svh - 210px), 680px);
  }
}

@media (min-width:901px) {
  .csl-article .research-page main > .research-intro[data-scroll-section] {
    grid-template-rows: auto 1fr;
    align-content: stretch;
  }
  .csl-article .research-page .article-back-cue { align-self: start; }
}