:root {
  --color-cobalt: #1464f4;
  --color-cobalt-dark: #0c46b7;
  --color-cyan: #42d5ff;
  --color-ink: #151923;
  --color-ink-soft: #4b5565;
  --color-paper: #ffffff;
  --color-mist: #f4f7fb;
  --color-line: #dce3ee;
  --color-night: #0a1020;
  --color-night-soft: #151e35;
  --color-positive: #087150;
  --color-white: #ffffff;
  --color-white-94: rgba(255, 255, 255, 0.94);
  --color-white-76: rgba(255, 255, 255, 0.76);
  --color-white-72: rgba(255, 255, 255, 0.72);
  --color-white-66: rgba(255, 255, 255, 0.66);
  --color-white-18: rgba(255, 255, 255, 0.18);
  --color-white-14: rgba(255, 255, 255, 0.14);
  --color-hero-top: rgba(3, 11, 28, 0.78);
  --color-hero-middle: rgba(8, 29, 73, 0.38);
  --color-hero-bottom: rgba(4, 11, 25, 0.84);
  --color-cobalt-28: rgba(20, 100, 244, 0.28);
  --color-cobalt-24: rgba(20, 100, 244, 0.24);
  --color-cobalt-09: rgba(20, 100, 244, 0.09);
  --color-cyan-04: rgba(66, 213, 255, 0.04);
  --color-positive-10: rgba(8, 113, 80, 0.1);

  --type-display: clamp(3rem, 8vw, 7rem);
  --type-hero-subtitle: clamp(1.45rem, 4vw, 3.4rem);
  --type-section: clamp(2rem, 4vw, 3.25rem);
  --type-subsection: clamp(1.25rem, 2.4vw, 1.75rem);
  --type-lead: clamp(1.1rem, 1.8vw, 1.35rem);
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-overline: 0.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-control: 999px;
  --radius-media: 0.75rem;
  --shadow-media: 0 20px 55px rgba(30, 70, 140, 0.16);
  --shadow-button: 0 10px 24px rgba(7, 20, 48, 0.2);
  --shadow-title: 0 0.1em 0.35em rgba(3, 11, 28, 0.3);
  --focus-ring: 0 0 0 3px rgba(66, 213, 255, 0.65);
  --transition-micro: 160ms ease-out;
  --transition-standard: 240ms ease-in-out;
  --transition-emphasis: 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

figure,
pre {
  margin: 0;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero.is-fullheight {
  min-height: 100dvh;
}

.hero-body {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
}

.container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.navbar,
.navbar-menu,
.navbar-end,
.navbar-item,
.button,
.icon {
  display: flex;
  align-items: center;
}

.navbar-menu {
  flex: 1;
}

.navbar-end {
  justify-content: flex-end;
  margin-inline-start: auto;
}

.navbar-item {
  gap: var(--space-2);
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}

.button {
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.icon {
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.tabs {
  overflow: hidden;
}

.tabs ul {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs li {
  display: block;
}

.tabs.is-fullwidth li {
  flex: 1 0 0;
  text-align: center;
}

.tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--type-body);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-cobalt);
}

a:hover {
  color: var(--color-cobalt-dark);
}

a:focus-visible,
button:focus-visible,
video:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

img,
video {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  color: var(--color-night);
  background: var(--color-cyan);
  border-radius: var(--radius-control);
  transform: translateY(-180%);
  transition: transform var(--transition-micro);
}

.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  transform: translateY(0);
}

.project-hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-night);
}

.project-hero .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-hero .hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-hero .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--color-hero-top) 0%, var(--color-hero-middle) 42%, var(--color-hero-bottom) 100%),
    linear-gradient(110deg, var(--color-cobalt-24), var(--color-cyan-04));
}

.project-hero .hero-head,
.project-hero .hero-body,
.project-hero .hero-foot {
  position: relative;
  z-index: 2;
}

.project-hero .hero-head {
  padding-block-start: var(--space-4);
}

.project-hero .navbar {
  background: transparent;
}

.project-hero .navbar-menu {
  background: transparent;
  box-shadow: none;
}

.project-hero .navbar-item,
.project-hero .navbar-item:hover {
  color: var(--color-white);
  background: transparent;
}

.project-hero .navbar-item > a,
.project-hero .navbar-item.button {
  min-height: 2.75rem;
}

.project-hero .hero-body {
  align-items: center;
  padding: var(--space-16) var(--space-6);
}

.hero-content {
  max-width: 1180px;
  margin-inline: auto;
  text-align: center;
  animation: hero-arrive var(--transition-emphasis) both;
}

@keyframes hero-arrive {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--type-display);
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 0.9;
  text-shadow: var(--shadow-title);
}

.project-subtitle {
  max-width: 1050px;
  margin: var(--space-8) auto var(--space-4);
  color: var(--color-white);
  font-size: var(--type-hero-subtitle);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.project-venue {
  margin: var(--space-4) 0 0;
  color: var(--color-white);
  font-size: var(--type-lead);
  font-style: italic;
  opacity: 0.84;
}

.project-authors,
.project-affiliations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  text-shadow: var(--shadow-title);
}

.project-authors {
  margin-block-start: var(--space-8);
  font-size: var(--type-lead);
  font-weight: 600;
}

.project-affiliations {
  margin-block-start: var(--space-3);
  font-size: var(--type-small);
  color: var(--color-white-94);
}

.project-authors span,
.project-affiliations span {
  white-space: nowrap;
}

.project-authors sup,
.project-affiliations sup {
  margin-inline-start: 0.15em;
  font-size: 0.65em;
}

.resource-pending {
  gap: var(--space-2);
  cursor: default;
}

.resource-pending small {
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.8;
}

.resource-button.button:disabled {
  color: var(--color-white-76);
  background: var(--color-night-soft);
  transform: none;
  box-shadow: none;
}

.publication-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

.resource-button.button {
  min-height: 2.75rem;
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-weight: 700;
  transition:
    color var(--transition-micro),
    background-color var(--transition-micro),
    border-color var(--transition-micro),
    transform var(--transition-micro);
}

.resource-button.button.is-dark {
  color: var(--color-white);
  background: var(--color-night);
  box-shadow: var(--shadow-button);
}

.resource-button.button.is-inverted {
  color: var(--color-night);
  background: var(--color-white);
}

.resource-button.button:hover {
  transform: translateY(-2px);
}

.resource-button.button:active {
  transform: translateY(0);
}

.resource-button.button[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

.resource-button .icon img {
  width: 1.1rem;
  height: 1.1rem;
}

.anchor-tabs {
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.anchor-tabs::-webkit-scrollbar {
  display: none;
}

.anchor-tabs ul {
  min-width: max-content;
  border: 0;
}

.anchor-tabs a {
  min-height: 3.5rem;
  color: var(--color-white);
  border: 0;
  border-radius: 0;
  font-weight: 600;
  transition:
    color var(--transition-micro),
    background-color var(--transition-micro);
}

.anchor-tabs li.is-active a,
.anchor-tabs a:hover,
.anchor-tabs a:focus-visible {
  color: var(--color-white);
  background: var(--color-white-14);
}

.document-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: none;
  background: var(--color-white-94);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(12px);
}

.document-nav .anchor-tabs a {
  color: var(--color-ink-soft);
}

.document-nav .anchor-tabs li.is-active a,
.document-nav .anchor-tabs a:hover,
.document-nav .anchor-tabs a:focus-visible {
  color: var(--color-cobalt-dark);
  background: var(--color-mist);
}

.section-shell {
  padding: var(--space-24) var(--space-6);
}

.section-shell.is-compact {
  padding-block: var(--space-16);
}

.section-shell.is-mist {
  background: var(--color-mist);
}

.section-shell.is-night {
  color: var(--color-white);
  background:
    radial-gradient(circle at 80% 20%, var(--color-cobalt-28), transparent 38%),
    var(--color-night);
}

.editorial-container {
  width: min(100%, 960px);
  margin-inline: auto;
}

.wide-container {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.overview-lead {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--type-lead);
  line-height: 1.65;
  text-align: left;
}

.overview-lead + .overview-lead {
  margin-block-start: var(--space-6);
}

.overview-lead strong {
  color: var(--color-ink);
}

.section-heading {
  max-width: 780px;
  margin: 0 auto var(--space-12);
  text-align: center;
}

.section-heading.is-left {
  margin-inline: 0;
  text-align: left;
}

.section-kicker {
  margin: 0 0 var(--space-3);
  color: var(--color-cobalt);
  font-size: var(--type-overline);
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.is-night .section-kicker {
  color: var(--color-cyan);
}

.section-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--type-section);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.is-night .section-title {
  color: var(--color-white);
}

.section-deck {
  margin: var(--space-4) auto 0;
  color: var(--color-ink-soft);
  font-size: var(--type-lead);
  line-height: 1.55;
}

.is-night .section-deck {
  color: var(--color-white-76);
}

.media-frame {
  overflow: hidden;
  margin: 0;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-media);
}

.media-frame img,
.media-frame picture,
.media-frame video {
  width: 100%;
  height: auto;
}

.vector-figure-link {
  position: relative;
  display: block;
  color: inherit;
  cursor: zoom-in;
}

.vector-figure-link:visited {
  color: inherit;
}

.vector-figure-action {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-cobalt-dark);
  background: var(--color-mist);
  font-size: var(--type-small);
  font-weight: 700;
  line-height: 1.4;
  text-align: end;
  transition: transform var(--transition-micro);
}

.vector-figure-link:hover .vector-figure-action,
.vector-figure-link:focus-visible .vector-figure-action {
  transform: translateY(-2px);
}

.media-frame video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-night);
}

.media-frame figcaption {
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--type-small);
  line-height: 1.5;
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
}

.media-frame.is-technical {
  padding: var(--space-4);
}

.media-frame.is-technical figcaption {
  margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
}

.system-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  margin-block-start: var(--space-12);
}

.system-step {
  padding-block-start: var(--space-6);
  border-top: 1px solid var(--color-white-18);
}

.system-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-block-end: var(--space-4);
  color: var(--color-night);
  background: var(--color-cyan);
  border-radius: var(--radius-control);
  font-weight: 800;
}

.system-step h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-white);
  font-size: var(--type-subsection);
  line-height: 1.25;
}

.system-step p {
  margin: 0;
  color: var(--color-white-72);
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-12) 0;
}

.metric-item {
  margin: 0;
  padding: var(--space-6);
  background: var(--color-mist);
  border-top: 3px solid var(--color-cobalt);
}

.metric-item dt {
  color: var(--color-ink-soft);
  font-size: var(--type-small);
  font-weight: 700;
  line-height: 1.4;
}

.metric-item dd {
  margin: var(--space-2) 0 0;
  color: var(--color-ink);
  font-size: clamp(1.65rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.metric-item.is-positive {
  border-color: var(--color-positive);
}

.task-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.task-card {
  overflow: hidden;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-media);
}

.motion-diversity {
  grid-column: 1 / -1;
}

.task-card .task-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-night);
}

.task-card .task-media img,
.task-card .task-media picture,
.task-card .task-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.demo-slide {
  height: 100%;
}

.demo-slide[hidden],
.carousel-controls[hidden] {
  display: none;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-block-end: 1px solid var(--color-line);
}

.carousel-arrow {
  flex: 0 0 2.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: 1.35rem;
  cursor: pointer;
}

.carousel-arrow:hover {
  color: var(--color-cobalt-dark);
  border-color: var(--color-cobalt);
  background: var(--color-mist);
}

.carousel-status {
  color: var(--color-ink-soft);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.task-card .task-media picture {
  display: block;
}

.task-card .task-media picture img {
  object-fit: cover;
}

.task-card .task-body {
  padding: var(--space-6);
}

.task-card h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--type-subsection);
  line-height: 1.25;
}

.task-result {
  display: inline-block;
  margin-block-start: var(--space-3);
  padding: var(--space-1) var(--space-3);
  color: var(--color-cobalt-dark);
  background: var(--color-cobalt-09);
  border-radius: var(--radius-control);
  font-size: var(--type-small);
  font-weight: 800;
}

.task-result.is-positive {
  color: var(--color-positive);
  background: var(--color-positive-10);
}

.task-card p {
  margin: var(--space-4) 0 0;
  color: var(--color-ink-soft);
}

.paper-copy {
  color: var(--color-ink-soft);
}

.flow-offset {
  margin-block-start: var(--space-12);
}

.paper-copy p {
  margin-block: 0 var(--space-4);
}

.paper-copy strong {
  color: var(--color-ink);
}

.bibtex {
  position: relative;
  overflow-x: auto;
  margin: 0;
  padding: var(--space-6);
  color: var(--color-white);
  background: var(--color-night-soft);
  border: 1px solid var(--color-white-14);
  border-radius: var(--radius-media);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: var(--type-small);
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.site-footer {
  padding: var(--space-12) var(--space-6);
  color: var(--color-white-66);
  background: var(--color-night);
  font-size: var(--type-small);
  text-align: center;
}

.site-footer a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.showcase-shell {
  min-height: 100dvh;
  padding: var(--space-16) var(--space-6);
  background: var(--color-mist);
}

.showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  width: min(100%, 960px);
  margin-inline: auto;
}

.showcase-panel {
  padding: var(--space-8);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-media);
}

.showcase-panel h2 {
  margin-top: 0;
}

.showcase-dark-surface {
  margin-block-start: var(--space-6);
  padding: var(--space-4);
  color: var(--color-white);
  background: var(--color-night);
  border-radius: var(--radius-media);
}

.showcase-links-left {
  justify-content: flex-start;
}

.showcase-panel.is-wide {
  grid-column: 1 / -1;
}

.showcase-task {
  margin-block-start: var(--space-6);
}

@media screen and (min-width: 769px) {
  .document-nav {
    display: block;
  }

  .system-copy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metric-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

@media screen and (max-width: 768px) {
  .project-hero .hero-head {
    display: none;
  }

  .project-hero .hero-body {
    padding: var(--space-16) var(--space-4) var(--space-8);
  }

  .project-title {
    letter-spacing: -0.055em;
  }

  .project-subtitle {
    margin-block-start: var(--space-6);
  }

  .project-venue {
    font-size: 1rem;
  }

  .project-hero .hero-foot {
    margin-block-start: auto;
  }

  .section-shell,
  .section-shell.is-compact {
    padding: var(--space-16) var(--space-4);
  }

  .section-heading {
    margin-block-end: var(--space-8);
  }

  .media-frame.is-technical {
    padding: var(--space-2);
  }

  .media-frame.is-technical figcaption {
    margin: 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-2));
  }

  .metric-item {
    padding: var(--space-4);
  }

  .showcase-panel {
    padding: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .resource-button.button:hover,
  .vector-figure-link:hover .vector-figure-action,
  .vector-figure-link:focus-visible .vector-figure-action {
    transform: none;
  }
}