:root {
  --ink: #eaf2ff;
  --ink-muted: #a9b9d0;
  --page: #ffffff;
  --page-soft: #f5f7fb;
  --page-deep: #eaf0f8;
  --text: #142033;
  --text-muted: #5d6b80;
  --line: #dce4ef;
  --navy: #07111f;
  --navy-soft: #0c1b30;
  --cyan: #70899d;
  --blue: #3f5f7a;
  --violet: #6f8090;
  --pink: #87939e;
  --green: #60786b;
  --radius: 18px;
  --shadow: 0 18px 45px rgba(21, 35, 58, 0.1);
}

html {
  scroll-behavior: smooth;
  background: var(--page);
}

body {
  color: var(--text);
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}

p {
  orphans: 2;
  text-wrap: pretty;
  widows: 2;
}

h1,
h2,
h3,
.title-sub,
.section-heading,
.video-showcase-header h3 {
  text-wrap: balance;
}

main {
  display: flex;
  flex-direction: column;
}

#top { order: 0; }
#tasks { order: 1; }
#interactive { order: 2; }
#contributions { order: 3; }
#method { order: 4; }
#results { order: 5; }
#abstract { order: 6; }
#citation { order: 7; }

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

.container.is-max-desktop {
  max-width: 1080px !important;
}

.section {
  padding: 6rem 1.5rem;
}

.section.is-soft {
  background:
    radial-gradient(circle at 14% 8%, rgba(80, 105, 126, 0.07), transparent 24rem),
    radial-gradient(circle at 92% 85%, rgba(101, 116, 130, 0.06), transparent 26rem),
    var(--page-soft);
}

.section-kicker {
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.section-mark {
  display: block;
  height: 4.75rem;
  margin: 0 auto 0.8rem;
  width: 4.75rem;
}

.section-heading {
  color: var(--text);
  font-size: clamp(1.9rem, 3vw, 2.7rem) !important;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin-bottom: 1.25rem !important;
}

.section-intro {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0 auto 3rem;
  max-width: 760px;
}

.method-container,
.results-container {
  margin: 0 auto;
  max-width: 1380px;
}

.paper-figure {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  margin: 0;
  overflow: hidden;
  padding: 0.55rem;
}

.paper-figure img {
  border-radius: 14px;
  display: block;
  height: auto;
  width: 100%;
}

.paper-figure figcaption {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 0.85rem 0.85rem 0.45rem;
  text-align: center;
}

.pipeline-figure {
  margin-bottom: 2rem;
}

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

.method-copy {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(30, 52, 83, 0.055);
  padding: 1.45rem;
}

.method-copy-index {
  align-items: center;
  background: #536d82;
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 800;
  height: 2.15rem;
  justify-content: center;
  margin-bottom: 0.9rem;
  width: 2.15rem;
}

.method-copy h3 {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.55rem;
}

.method-copy p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.feedback-banner {
  background:
    linear-gradient(110deg, rgba(77, 103, 124, 0.09), rgba(104, 117, 130, 0.07)),
    #f8fbff;
  border: 1px solid rgba(79, 124, 255, 0.2);
  border-radius: 14px;
  color: #42536a;
  font-size: 0.9rem;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  text-align: center;
}

.feedback-banner strong {
  color: #1c3151;
}

.hero-main {
  align-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(100, 122, 139, 0.12), transparent 30rem),
    radial-gradient(circle at 78% 68%, rgba(79, 94, 108, 0.11), transparent 34rem),
    linear-gradient(145deg, #090d12 0%, #101820 48%, #0d131a 100%);
  color: var(--ink);
  display: flex;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.hero-main::before {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 52px 52px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, black 15%, transparent 92%);
  position: absolute;
  z-index: -3;
}

.fiber-field {
  inset: -10%;
  pointer-events: none;
  position: absolute;
  opacity: 0.42;
  z-index: 3;
}

.fiber {
  border: 1px solid rgba(157, 174, 188, 0.24);
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(109, 133, 151, 0.12));
  height: 120%;
  left: var(--x);
  position: absolute;
  top: var(--y);
  transform: rotate(var(--r)) scaleX(var(--s));
  width: 30%;
}

.fiber:nth-child(2n) {
  border-color: rgba(136, 151, 164, 0.22);
  filter: drop-shadow(0 0 18px rgba(91, 108, 122, 0.1));
}

.hero-glow {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  height: 160%;
  left: -35%;
  position: absolute;
  top: -30%;
  transform: rotate(17deg);
  width: 22%;
  animation: heroSweep 10s ease-in-out infinite;
}

@keyframes heroSweep {
  0%, 18% { transform: translateX(0) rotate(17deg); opacity: 0; }
  40% { opacity: 1; }
  70%, 100% { transform: translateX(720%) rotate(17deg); opacity: 0; }
}

.hero-main .hero-body {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 6.5rem 1.25rem 5.5rem;
  width: 100%;
}

.hero-content {
  margin: 0 auto;
  max-width: 1380px;
  text-align: center;
  width: 100%;
}

.hero-mark {
  height: 5.2rem;
  margin: -0.15rem auto 0.45rem;
  width: 5.2rem;
}

.hero-mark svg {
  display: block;
  filter: drop-shadow(0 8px 22px rgba(1, 5, 12, 0.5));
  height: 100%;
  overflow: visible;
  width: 100%;
}

.mark-sphere {
  fill: rgba(149, 166, 179, 0.1);
  stroke: rgba(221, 229, 235, 0.62);
  stroke-width: 1.6;
}

.mark-orbit {
  fill: none;
  stroke: rgba(181, 198, 210, 0.34);
  stroke-width: 1;
}

.mark-orbit.is-tilted {
  transform: rotate(62deg);
  transform-origin: 64px 64px;
}

.mark-fiber {
  animation: markFlow 8s linear infinite;
  fill: none;
  stroke: #c4d2dc;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.mark-fiber.f2,
.mark-fiber.f4 {
  animation-direction: reverse;
  stroke: #819bad;
}

.mark-fiber.f3 { animation-delay: -2s; }
.mark-fiber.f4 { animation-delay: -4s; }
.mark-fiber.f5 { animation-delay: -6s; }

.mark-node {
  fill: #d8e2e9;
}

@keyframes markFlow {
  to { stroke-dashoffset: -72; }
}

.publication-title {
  color: #fff !important;
  letter-spacing: -0.055em;
  line-height: 0.96;
  margin-bottom: 1rem !important;
}

.title-main {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleFiberSheen 10s ease-in-out infinite;
  background-clip: text;
  background-image: linear-gradient(
    105deg,
    #f5f7f8 16%,
    #a8bbc8 38%,
    #f8fafb 52%,
    #8fa7b8 72%,
    #eef2f4 88%
  );
  background-position: 0% 50%;
  background-size: 220% 100%;
  color: #f2f4f6;
  display: block;
  font-size: clamp(4rem, 8vw, 7.2rem);
  font-weight: 800;
  isolation: isolate;
  letter-spacing: -0.08em;
  line-height: 0.82;
  margin-left: -0.07em;
  position: relative;
  z-index: 0;
}

.title-main::before,
.title-main::after {
  border-radius: 50%;
  content: "";
  height: 42%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 53%;
  width: min(34rem, 72vw);
  z-index: -1;
}

.title-main::before {
  animation: titleFiberOrbitA 8s ease-in-out infinite;
  border-top: 1px solid rgba(203, 216, 225, 0.34);
  transform: translate(-50%, -50%) rotate(-5deg);
}

.title-main::after {
  animation: titleFiberOrbitB 10s ease-in-out infinite;
  border-bottom: 1px solid rgba(125, 151, 169, 0.28);
  transform: translate(-50%, -50%) rotate(7deg);
}

@keyframes titleFiberSheen {
  0%, 18%, 100% { background-position: 0% 50%; }
  55%, 72% { background-position: 100% 50%; }
}

@keyframes titleFiberOrbitA {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) rotate(-5deg) scaleX(0.98); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) rotate(-2deg) scaleX(1.03); }
}

@keyframes titleFiberOrbitB {
  0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) rotate(7deg) scaleX(1.02); }
  50% { opacity: 0.75; transform: translate(-50%, -50%) rotate(4deg) scaleX(0.97); }
}

.title-sub {
  color: #e7eef9;
  display: block;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0.9rem auto 0;
  max-width: 900px;
}

.title-sub,
.publication-authors,
.publication-affiliations,
.publication-note,
.hero-summary {
  text-shadow: 0 2px 20px rgba(1, 5, 12, 0.82);
}

.publication-authors {
  color: #fff;
  font-size: 1.08rem;
  font-weight: 600;
  margin: 1rem 0 0.25rem;
}

.publication-authors a,
.publication-authors a:visited,
.publication-authors a:hover,
.publication-authors a:focus {
  color: #fff;
}

.publication-affiliations,
.publication-note {
  color: #8fa5bf;
  font-size: 0.86rem;
  margin-bottom: 0.35rem;
}

.publication-affiliations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  justify-content: center;
}

.publication-note {
  font-size: 0.76rem;
  margin-bottom: 1rem;
}

.hero-summary {
  color: #b8c7db;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  margin: 0 auto 1.25rem;
  max-width: 760px;
}

.publication-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin-bottom: 1.6rem;
}

.publication-links .button {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  display: inline-flex;
  font-weight: 700 !important;
  gap: 0.45rem;
  min-width: 8.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.publication-links .button:not([disabled]):hover {
  background: #fff !important;
  border-color: #fff !important;
  color: #07111f !important;
  transform: translateY(-2px);
}

.publication-links .button[disabled] {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #8297af !important;
  cursor: not-allowed;
  opacity: 1;
}

.hero-video-matrix {
  background: #1c2730;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  inset: 0;
  margin: 0;
  max-width: none;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  text-align: left;
  z-index: 0;
}

.hero-video-matrix::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(3, 8, 16, 0.72) 0%, rgba(4, 10, 18, 0.5) 36%, rgba(4, 10, 18, 0.18) 74%),
    linear-gradient(to bottom, rgba(4, 10, 18, 0.18), rgba(4, 10, 18, 0.34));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.hero-task-row {
  display: contents;
}

.hero-task-label {
  display: none;
}

.hero-task-videos {
  display: contents;
}

.hero-video-cell {
  background: #03070d;
  margin: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.hero-video-cell::before {
  background: rgba(2, 6, 23, 0.26);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-task-row:nth-child(1) .hero-video-cell::before {
  background: rgba(74, 91, 105, 0.06);
}

.hero-task-row:nth-child(2) .hero-video-cell::before {
  background: rgba(74, 91, 105, 0.06);
}

.hero-task-row:nth-child(3) .hero-video-cell::before {
  background: rgba(74, 91, 105, 0.06);
}

.hero-video-cell video {
  display: block;
  filter: saturate(0.72) contrast(0.98);
  height: 100%;
  min-height: 0;
  min-width: 0;
  object-fit: cover;
  opacity: 0.78;
  transition: filter 0.5s ease, opacity 0.5s ease;
  width: 100%;
}

.hero-video-matrix.is-playing .hero-video-cell video {
  filter: saturate(0.82) contrast(1);
  opacity: 1;
}

.hero-video-cell figcaption {
  backdrop-filter: blur(9px);
  background: rgba(4, 10, 18, 0.66);
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 999px;
  bottom: 0.55rem;
  color: #e8f2ff;
  display: none;
  font-size: 0.58rem;
  font-weight: 800;
  left: 0.55rem;
  letter-spacing: 0.08em;
  padding: 0.28rem 0.5rem;
  position: absolute;
  text-transform: uppercase;
  z-index: 3;
}

.hero-task-videos .hero-video-cell:first-child figcaption {
  display: block;
}

.hero-content > :not(.hero-video-matrix) {
  position: relative;
  z-index: 4;
}

.scroll-cue {
  align-items: center;
  bottom: 1.35rem;
  color: #7890aa;
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  gap: 0.45rem;
  left: 50%;
  letter-spacing: 0.14em;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scroll-cue::after {
  animation: scrollPulse 2s ease-in-out infinite;
  background: linear-gradient(var(--cyan), transparent);
  content: "";
  height: 42px;
  width: 1px;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.55); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

.outline-panel {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  display: flex;
  gap: 0.25rem;
  left: 50%;
  padding: 0.38rem;
  position: fixed;
  top: 0.8rem;
  transform: translateX(-50%);
  z-index: 30;
  backdrop-filter: blur(16px);
}

.outline-link {
  border-radius: 999px;
  color: #526176;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.5rem 0.8rem;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.outline-link:hover,
.outline-link.is-active {
  background: #0d1d31;
  color: #fff;
}

.contribution-grid,
.task-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contribution-card,
.task-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(30, 52, 83, 0.06);
  height: 100%;
  overflow: hidden;
  padding: 1.5rem;
  position: relative;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.contribution-card:hover,
.task-card:hover {
  border-color: rgba(79, 124, 255, 0.32);
  box-shadow: var(--shadow);
  transform: translateY(-5px);
}

.card-index {
  align-items: center;
  background: rgba(75, 99, 120, 0.1);
  border: 1px solid rgba(75, 99, 120, 0.18);
  border-radius: 12px;
  color: var(--blue);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  height: 2.35rem;
  justify-content: center;
  margin-bottom: 1.1rem;
  width: 2.35rem;
}

.contribution-card h3,
.task-card h3 {
  color: var(--text);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}

.contribution-card p,
.task-card p {
  color: var(--text-muted);
  font-size: 0.93rem;
}

.method-shell {
  background:
    radial-gradient(circle at 10% 0%, rgba(93, 116, 134, 0.11), transparent 25rem),
    radial-gradient(circle at 92% 100%, rgba(84, 99, 112, 0.09), transparent 24rem),
    #0d151d;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(7, 17, 31, 0.2);
  color: var(--ink);
  overflow: hidden;
  padding: 2rem;
  position: relative;
}

.method-flow {
  align-items: stretch;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr auto 1.2fr auto 1.2fr auto 1fr;
}

.method-node {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 155px;
  padding: 1.2rem;
}

.method-node.is-emphasis {
  background: linear-gradient(145deg, rgba(92, 117, 136, 0.11), rgba(86, 101, 114, 0.09));
  border-color: rgba(139, 158, 173, 0.24);
}

.method-node.is-policy {
  border-color: rgba(139, 158, 173, 0.24);
}

.method-label {
  color: #a9bdcc;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.method-node h3 {
  color: #f8fafc;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.45rem;
}

.method-node p {
  color: #9eb0c6;
  font-size: 0.82rem;
  line-height: 1.5;
}

.method-arrow {
  align-items: center;
  color: #6f88a6;
  display: flex;
  font-size: 1.45rem;
  justify-content: center;
}

.latent-knots {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.latent-knots span {
  background: #7f96a8;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(94, 115, 132, 0.22);
  height: 0.72rem;
  opacity: var(--o);
  width: 0.72rem;
}

.feedback-loop {
  align-items: center;
  border-top: 1px dashed rgba(125, 211, 252, 0.25);
  color: #8ba3bd;
  display: flex;
  font-size: 0.78rem;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.feedback-loop strong {
  color: #c8d8ea;
}

.task-visual {
  background: #091526;
  border-radius: 13px;
  height: 9rem;
  margin: -0.2rem -0.2rem 1.2rem;
  overflow: hidden;
  position: relative;
}

.task-visual::before,
.task-visual::after {
  content: "";
  position: absolute;
}

.task-visual::before {
  background:
    radial-gradient(circle at 25% 35%, var(--task-a) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 38%, var(--task-b) 0 4px, transparent 5px),
    linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.08) 20.5% 21%, transparent 21.5% 55%, rgba(255, 255, 255, 0.07) 55.5% 56%, transparent 56.5%);
  inset: 0;
}

.task-visual::after {
  border: 1px solid var(--task-a);
  border-radius: 50%;
  box-shadow:
    38px 9px 0 -7px var(--task-b),
    73px -16px 0 -4px var(--task-a),
    110px 20px 0 -8px var(--task-b);
  height: 70px;
  left: 25%;
  opacity: 0.65;
  top: 25%;
  transform: rotate(-16deg);
  width: 150px;
}

.task-card:nth-child(1) { --task-a: #71889a; --task-b: #9aa8b3; }
.task-card:nth-child(2) { --task-a: #71889a; --task-b: #9aa8b3; }
.task-card:nth-child(3) { --task-a: #71889a; --task-b: #9aa8b3; }

.task-meta {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.demo-split-heading {
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
}

.demo-split-heading h3 {
  color: var(--text);
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.demo-split-heading p:last-child {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.single-policy-note {
  align-items: center;
  background: #081525;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 14px;
  color: #9eb0c6;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 2rem auto 0;
  max-width: 720px;
  padding: 0.9rem 1.1rem;
  text-align: center;
}

.single-policy-note strong {
  color: #e8f2ff;
  flex: 0 0 auto;
  white-space: nowrap;
}

.video-reels {
  display: grid;
  gap: 1.35rem;
  margin-top: 2.4rem;
}

.video-reel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(30, 52, 83, 0.06);
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.video-reel:hover {
  border-color: rgba(77, 103, 125, 0.32);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.video-reel-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.2rem 1.35rem 1rem;
}

.demo-index {
  color: var(--blue);
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.video-reel h3 {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.video-reel-header p {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
  max-width: 680px;
}

.demo-count {
  background: rgba(79, 124, 255, 0.08);
  border: 1px solid rgba(79, 124, 255, 0.15);
  border-radius: 999px;
  color: #47628f;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 750;
  padding: 0.38rem 0.62rem;
  white-space: nowrap;
}

.video-reel-grid {
  background: #07101b;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 1px;
}

.video-reel-grid-five {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.video-reel-grid-five .video-tile {
  grid-column: span 2;
}

.video-reel-grid-five .video-tile:nth-last-child(-n + 2) {
  grid-column: span 3;
}

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

.video-reel-grid-single {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

.video-tile {
  background: #07101b;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.video-tile video {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 50% 35%, rgba(148, 163, 184, 0.08), transparent 60%),
    #050b14;
  cursor: pointer;
  display: block;
  object-fit: cover;
  opacity: 0.84;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.35s ease;
  width: 100%;
}

.video-tile:hover video,
.video-tile:focus-within video,
.video-tile.is-playing video {
  opacity: 1;
}

.video-tile:hover video {
  transform: scale(1.015);
}

.video-tile video:focus-visible {
  box-shadow: inset 0 0 0 3px #d7e0e7;
  outline: none;
}

.video-tile figcaption {
  align-items: center;
  background: linear-gradient(180deg, rgba(4, 10, 18, 0), rgba(4, 10, 18, 0.9));
  bottom: 0;
  color: #eef3f6;
  display: flex;
  font-size: 0.66rem;
  font-weight: 720;
  justify-content: space-between;
  left: 0;
  letter-spacing: 0.025em;
  padding: 1.6rem 0.65rem 0.48rem;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.video-tile-state {
  align-items: center;
  color: #aebbc5;
  display: inline-flex;
  font-size: 0.58rem;
  font-weight: 650;
  gap: 0.32rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.video-tile-state::before {
  background: #788b99;
  border-radius: 50%;
  content: "";
  height: 0.38rem;
  width: 0.38rem;
}

.video-tile.is-playing .video-tile-state::before,
.chain-media.is-playing .video-tile-state::before {
  animation: videoLivePulse 1.8s ease-in-out infinite;
  background: #d8e2e8;
  box-shadow: 0 0 0 3px rgba(216, 226, 232, 0.12);
}

@keyframes videoLivePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.video-showcase-note {
  color: #718096;
  font-size: 0.76rem;
  margin-top: 1.2rem;
  text-align: center;
}

.evaluation-scope {
  align-items: center;
  background: #081525;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 16px;
  color: #9eb0c6;
  display: flex;
  gap: 1rem;
  margin: 0 auto 1.2rem;
  max-width: 760px;
  padding: 1rem 1.2rem;
}

.evaluation-scope > strong {
  color: #7dd3fc;
  font-size: 2.8rem;
  letter-spacing: -0.06em;
  line-height: 1;
}

.evaluation-scope span {
  color: #f1f7ff;
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.evaluation-scope p {
  font-size: 0.74rem;
  margin-top: 0.12rem;
}

.result-summary {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
}

.fiber-result,
.baseline-results {
  border-radius: 18px;
  min-width: 0;
  padding: 1.35rem 1.5rem;
}

.fiber-result {
  background:
    radial-gradient(circle at 88% 10%, rgba(93, 113, 129, 0.14), transparent 16rem),
    #101a23;
  border: 1px solid rgba(130, 149, 164, 0.2);
  color: #eaf2ff;
}

.fiber-result > strong {
  color: #c3d0da;
  display: block;
  font-size: clamp(3.2rem, 6vw, 5rem);
  letter-spacing: -0.07em;
  line-height: 1;
  margin: 0.65rem 0 0.45rem;
}

.fiber-result p {
  color: #9eb0c6;
  font-size: 0.84rem;
}

.result-eyebrow {
  color: #9eb0c6;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.baseline-results {
  background: #f3f6fa;
  border: 1px solid var(--line);
}

.baseline-results > div {
  align-items: center;
  border-top: 1px solid #dce4ef;
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
}

.baseline-results > div span {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.baseline-results > div strong {
  color: #31415b;
  font-size: 1.25rem;
}

.results-separation-note {
  color: #718096;
  font-size: 0.75rem;
  margin-top: 0.75rem;
  text-align: center;
}

.method-tag {
  background: #edf1f6;
  border-radius: 999px;
  color: #66758a;
  display: inline-block;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-left: 0.3rem;
  padding: 0.16rem 0.35rem;
  text-transform: uppercase;
  vertical-align: 0.12rem;
}

.method-tag.is-fiber {
  background: rgba(79, 124, 255, 0.13);
  color: #315eea;
}

.results-table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 38px rgba(30, 52, 83, 0.07);
  margin-top: 2.1rem;
  overflow-x: auto;
}

.results-table {
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 840px;
  width: 100%;
}

.results-table th,
.results-table td {
  border-bottom: 1px solid #e8edf4;
  padding: 0.85rem 0.7rem;
  text-align: center;
  vertical-align: middle;
}

.results-table th:first-child,
.results-table td:first-child {
  padding-left: 1.15rem;
  text-align: left;
}

.results-table thead th {
  background: #0a1728;
  color: #e5eefb;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.results-table .group-row td {
  background: #f0f4f9;
  color: #4f5f75;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding-bottom: 0.52rem;
  padding-top: 0.52rem;
  text-transform: uppercase;
}

.results-table .ours-row td {
  background: rgba(79, 124, 255, 0.065);
  color: #17233a;
}

.results-table .best {
  color: inherit;
  font-weight: 850;
}

.results-table .second {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
}

.results-table tbody tr:last-child td {
  border-bottom: 0;
}

.table-note {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 0.8rem;
  text-align: center;
}

.simulation-chains {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 38px rgba(30, 52, 83, 0.07);
  margin: 3.5rem 0 0;
  overflow: hidden;
}

.simulation-chains-heading {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.4rem 1.6rem;
}

.simulation-chains-heading h3 {
  color: var(--text);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-bottom: 0.65rem;
}

.simulation-chains-heading p:last-child {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.chain-examples {
  background: var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chain-example {
  background: #fff;
  min-width: 0;
}

.chain-example h4 {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 750;
  padding: 0.8rem 1rem;
}

.chain-example h4 span {
  color: var(--blue);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-right: 0.45rem;
}

.chain-media {
  aspect-ratio: 16 / 9;
  background: #07101b;
  overflow: hidden;
  position: relative;
}

.chain-sky {
  cursor: pointer;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.chain-sky:focus-visible {
  outline: 3px solid #d7e0e7;
  outline-offset: -3px;
}

.chain-play-state {
  background: rgba(5, 11, 20, 0.78);
  border-radius: 6px;
  color: #eef3f6;
  left: 0.9rem;
  padding: 0.3rem 0.55rem;
  pointer-events: none;
  position: absolute;
  top: 0.9rem;
}

.chain-sky-label {
  background: rgba(5, 11, 20, 0.78);
  border-radius: 6px;
  bottom: 0.9rem;
  color: #eef3f6;
  font-size: 0.7rem;
  font-weight: 750;
  left: 0.9rem;
  padding: 0.3rem 0.55rem;
  pointer-events: none;
  position: absolute;
}

.chain-fpv-label {
  background: rgba(5, 11, 20, 0.78);
  border-radius: 5px;
  color: #eef3f6;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.2rem 0.4rem;
  pointer-events: none;
  position: absolute;
  right: 0.9rem;
  top: 0.9rem;
}

.analysis-block {
  align-items: center;
  background: var(--page-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2.5rem;
  padding: 1.3rem;
}

.analysis-copy {
  margin: 0 auto;
  max-width: 900px;
  padding: 0.5rem 0.8rem 0;
  text-align: center;
}

.analysis-copy h3 {
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.analysis-copy p:last-child {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.sf-visual {
  background:
    radial-gradient(circle at 15% 10%, rgba(90, 113, 131, 0.1), transparent 15rem),
    radial-gradient(circle at 88% 90%, rgba(84, 99, 112, 0.08), transparent 16rem),
    #0d161e;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 17px;
  color: #e8f2ff;
  display: grid;
  gap: 0.65rem 0.85rem;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 0.72fr);
  padding: 1.1rem;
}

.sf-formula {
  color: #e8f2ff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 0;
  text-align: center;
}

.sf-formula .katex-display {
  margin: 0;
}

.sf-formula .katex {
  font-size: 1.22rem;
}
.sf-formula,
.sf-shared,
.sf-split {
  grid-column: 1;
}

.sf-exact-chart {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.sf-exact-values {
  grid-column: 2;
}

.sf-output,
.sf-metrics {
  grid-column: 1 / -1;
}

.sf-exact-chart {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: .45rem .65rem .35rem;
}
.sf-exact-chart svg { display:block; width:100%; height:auto; max-height:210px; }
.sf-exact-chart p { color:#8fa5bf; font-size:.6rem; text-align:center; }
.sf-chart-legend { display:flex; gap:1rem; justify-content:flex-end; color:#c8d8ea; font-size:.65rem; margin-bottom:-.25rem; }
.sf-chart-legend i { display:inline-block; width:1.5rem; border-top:2px solid #7895aa; margin-right:.3rem; vertical-align:.2rem; }
.sf-chart-legend .is-gamma-high { border-color:#d0d7dd; border-top-style:dashed; }
.sf-exact-values { margin-top:.65rem; font-size:.58rem; color:#c8d8ea; }
.sf-exact-values > div { display:grid; grid-template-columns:1.25fr repeat(6,1fr); text-align:center; padding:.24rem; border-top:1px solid rgba(255,255,255,.08); }
.sf-exact-values strong { text-align:left; }

.sf-shared {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  text-align: center;
  padding: 0.9rem;
}

.sf-shared > span {
  color: #9eb0c6;
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sf-shared > strong {
  color: #b5c6d2;
  display: block;
  font-size: 1.45rem;
  margin: 0.18rem 0 0.55rem;
}

.sf-state-sequence {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  justify-content: center;
}

.sf-state-sequence i {
  background: rgba(96, 119, 137, 0.08);
  border: 1px solid rgba(139, 158, 173, 0.16);
  border-radius: 8px;
  color: #c8d8ea;
  font-size: 0.68rem;
  font-style: normal;
  padding: 0.35rem 0.48rem;
}

.sf-state-sequence b {
  color: #6f88a6;
  font-weight: 600;
}

.sf-split {
  color: #8fa5bf;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  padding: 0.25rem 0;
  text-align: center;
  text-transform: uppercase;
}

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

.sf-branch {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  min-width: 0;
  padding: 0.8rem;
}

.sf-branch > span {
  color: #9eb0c6;
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.sf-density {
  color: #7895aa;
  height: 3.4rem;
  position: relative;
}

.sf-branch.is-high .sf-density {
  color: #aeb9c2;
}

.sf-branch.is-high .sf-density-line {
  stroke-dasharray: 6 4;
}

.sf-density svg {
  display: block;
  height: 100%;
  overflow: visible;
  width: 100%;
}

.sf-density-area {
  fill: currentColor;
  opacity: 0.22;
}

.sf-density-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.sf-time-axis {
  border-top: 1px solid #6f88a6;
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 0.65rem;
  padding-top: 0.25rem;
  position: relative;
}

.sf-time-axis::after {
  color: #6f88a6;
  content: "state in time →";
  font-size: 0.48rem;
  position: absolute;
  right: 0;
  top: -0.95rem;
}

.sf-time-axis i {
  color: #8fa5bf;
  font-size: 0.5rem;
  font-style: normal;
  text-align: center;
}

.sf-branch strong,
.sf-branch small {
  display: block;
}

.sf-branch strong {
  color: #e8f2ff;
  font-size: 0.76rem;
}

.sf-branch small {
  color: #8fa5bf;
  font-size: 0.62rem;
  margin-top: 0.18rem;
}

.sf-output {
  align-items: center;
  background: linear-gradient(110deg, rgba(91, 114, 132, 0.09), rgba(91, 105, 118, 0.07));
  border: 1px solid rgba(139, 158, 173, 0.18);
  border-radius: 11px;
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding: 0.65rem 0.8rem;
}

.sf-output strong {
  color: #e8f2ff;
  font-size: 0.72rem;
}

.sf-output span {
  color: #8fa5bf;
  font-size: 0.64rem;
}

.sf-metrics {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.sf-metrics div {
  background: rgba(255, 255, 255, 0.045);
  border-radius: 9px;
  padding: 0.58rem 0.45rem;
  text-align: center;
}

.sf-metrics strong,
.sf-metrics span {
  display: block;
}

.sf-metrics strong {
  color: #b7c7d2;
  font-size: 0.88rem;
}

.sf-metrics span {
  color: #8fa5bf;
  font-size: 0.58rem;
  margin-top: 0.16rem;
}

.analysis-table {
  grid-column: 1 / -1;
}

.compact-table-wrap {
  margin-top: 0;
}

.compact-table {
  min-width: 620px;
}

.compact-table th,
.compact-table td {
  padding: 0.68rem 0.55rem;
}

.abstract-copy {
  color: #334155;
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0 auto;
  max-width: 840px;
  text-align: justify;
}

.bibtex-shell {
  background: #07111f;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(7, 17, 31, 0.18);
  overflow: hidden;
}

.bibtex-header {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
}

.bibtex-header span {
  color: #9eb0c6;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.copy-bibtex {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #dbe8f8;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.78rem;
}

.copy-bibtex:hover,
.copy-bibtex.is-copied {
  background: rgba(91, 115, 134, 0.15);
  border-color: rgba(118, 140, 157, 0.28);
  color: #c1d0da;
}

.bibtex-shell pre {
  background: transparent;
  color: #cbd9eb;
  font-size: 0.84rem;
  margin: 0;
  overflow-x: auto;
  padding: 1.3rem;
}

.footer {
  background: #050b14 !important;
  color: #8397af;
  padding: 3rem 1.5rem !important;
  text-align: center;
}

.footer p {
  font-size: 0.8rem;
  margin: 0 auto;
  max-width: 680px;
}

.footer a {
  color: #a9c8ed;
}

.scroll-to-top {
  align-items: center;
  background: #0d1d31;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  bottom: 1.2rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  height: 2.8rem;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 1.2rem;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: 2.8rem;
  z-index: 40;
}

.scroll-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

@media screen and (max-width: 900px) {
  .outline-panel {
    max-width: calc(100vw - 1rem);
    overflow-x: auto;
  }

  .contribution-grid,
  .task-grid,
  .result-summary,
  .method-copy-grid {
    grid-template-columns: 1fr;
  }

  .analysis-block {
    grid-template-columns: 1fr;
  }

  .method-flow {
    grid-template-columns: 1fr;
  }

  .method-arrow {
    transform: rotate(90deg);
  }

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

  .video-reel-grid-five .video-tile {
    grid-column: auto;
  }

  .video-reel-grid-three .video-tile:last-child,
  .video-reel-grid-five .video-tile:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.5px);
  }

  .video-reel-grid-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .chain-examples {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (min-width: 701px) {
  .section-heading {
    white-space: nowrap;
  }
}

@media screen and (max-width: 699px) {
  .hero-video-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .hero-task-videos .hero-video-cell:nth-child(n + 3) {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .section {
    padding: 4.5rem 1rem;
  }

  .hero-main .hero-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .outline-link {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .title-main {
    font-size: 4.65rem;
  }

  .method-shell {
    padding: 1rem;
  }

  .video-reel-header {
    padding: 1.15rem;
  }

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

  .video-reel-grid-three .video-tile:last-child,
  .video-reel-grid-five .video-tile:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.5px);
  }

  .video-reel-grid-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .single-policy-note {
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
  }

  .evaluation-scope {
    align-items: flex-start;
  }

  .simulation-chains-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.15rem;
  }

  .sf-state-sequence {
    flex-wrap: wrap;
  }

  .sf-branches {
    grid-template-columns: 1fr;
  }

  .sf-visual {
    grid-template-columns: 1fr;
  }

  .sf-formula,
  .sf-shared,
  .sf-split,
  .sf-exact-chart,
  .sf-exact-values,
  .sf-output,
  .sf-metrics {
    grid-column: 1;
    grid-row: auto;
  }

  .sf-output {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

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

  .abstract-copy {
    text-align: left;
  }
}

/* Simulation comparison: all primary tasks visible together. */
.success-chart { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 38px rgba(30,52,83,.07); margin: 2.1rem 0 0; padding: 1.6rem; }
.success-chart-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.success-chart-header h3 { font-size: 1.2rem; font-weight: 800; color: #17233a; }
.success-chart-header p { font-size: .8rem; color: #596a80; margin-top: .3rem; }
.chart-legend { display: flex; align-items: center; gap: .5rem; color: #315eea; font-size: .8rem; font-weight: 700; }
.chart-legend i { background: #4f7cff; width: 12px; height: 12px; border-radius: 3px; }
.task-chart-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.2rem; margin-top: 1.5rem; }
.task-chart h4 { font-weight: 800; color: #17233a; font-size: .95rem; margin-bottom: .5rem; }
.task-chart-axis { display: flex; justify-content: space-between; font-size: .65rem; color: #7b8a9e; margin-bottom: .6rem; }
.task-bar-row { padding: .5rem 0; }
.task-bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; margin-bottom: .3rem; color: #506077; font-size: .72rem; }
.task-bar-label strong { color: inherit; font-size: .72rem; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.task-bar-track { position: relative; height: 15px; background: repeating-linear-gradient(to right,#edf1f6 0,#edf1f6 1px,transparent 1px,transparent 50%); border-right: 1px solid #edf1f6; }
.task-bar-fill { display: block; height: 100%; background: #aab9cb; border-radius: 0 3px 3px 0; }
.task-bar-error { position: absolute; top: 6px; height: 3px; background: #34445b; min-width: 1px; }
.task-bar-error::before, .task-bar-error::after { content: ''; position: absolute; top: -3px; height: 9px; width: 1px; background: #34445b; }
.task-bar-error::before { left: 0; } .task-bar-error::after { right: 0; }
.task-bar-row.is-fiber { background: #f0f4ff; border-radius: 6px; margin: 0 -.4rem; padding: .5rem .4rem; }
.task-bar-row.is-fiber .task-bar-fill { background: #4f7cff; }
.task-bar-row.is-fiber .task-bar-label { color: #315eea; font-weight: 800; }
.success-chart figcaption { color: #687990; font-size: .75rem; margin-top: 1.2rem; }
@media (min-width: 701px) and (max-width: 1000px) { .task-chart-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .success-chart { padding: 1rem; } .task-chart-grid { grid-template-columns: 1fr; gap: 1.5rem; } .task-bar-label, .task-bar-label strong { font-size: .8rem; } }

.task-chart-method-group { margin-top: .9rem; }
.task-chart-method-group h5 { min-height: 2.5em; color: #687990; font-size: .62rem; font-weight: 800; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; padding-bottom: .4rem; border-bottom: 1px solid #e6ecf4; margin-bottom: .3rem; }

.fiber-playground-shell { position: relative; height: 720px; background: #0e1725; border-radius: 18px; overflow: hidden; border: 1px solid #26394e; margin-top: 2rem; box-shadow: 0 18px 50px rgba(10,25,45,.15); }
.fiber-playground-shell iframe { border: 0; width: 100%; height: 100%; }
.fiber-playground-cover { position: absolute; inset: 0; display: flex; align-items: center; padding: clamp(1.5rem, 5vw, 4rem); color: #fff;
  background: linear-gradient(90deg, rgba(10,18,30,.98) 0%, rgba(10,18,30,.95) 36%, rgba(10,18,30,.55) 49%, rgba(10,18,30,0) 62%), url("../images/playground-cover.webp?v=8") right center / auto 100% no-repeat, #e1e3e7; }
.fiber-playground-cover[hidden] { display: none; }
.fiber-playground-cover-copy { max-width: 470px; text-align: left; }
.fiber-playground-cover span { color: #9cbcff; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fiber-playground-cover h3 { color: #fff; font-size: clamp(1.9rem,4vw,3rem); font-weight: 800; line-height: 1.08; margin: .8rem 0 .9rem; letter-spacing: -.04em; }
.fiber-playground-cover p { color: #b9c9dc; font-size: .95rem; line-height: 1.55; }
.fiber-playground-tasks { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; padding: 0; }
.fiber-playground-tasks li { font-size: .78rem; color: #dbe6f5; background: rgba(120,160,220,.12); border: 1px solid rgba(140,175,230,.28); border-radius: 999px; padding: .3rem .7rem; }
.fiber-playground-cover button { background: #4f7cff; color: #fff; padding: .9rem 1.3rem; border: 0; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; margin: 1.5rem 0 1rem; }
.fiber-playground-cover small { display: block; color: #8aa0bd; font-size: .74rem; line-height: 1.5; margin-top: .45rem; }
.fiber-playground-cover small.fiber-playground-caveat { color: #c8d4e4; border-left: 2px solid #e0a458; padding-left: .6rem; }
@media (max-width: 850px) { .fiber-playground-cover { align-items: flex-end; background: linear-gradient(0deg, rgba(10,18,30,1) 0%, rgba(10,18,30,.97) 58%, rgba(10,18,30,.2) 80%, rgba(10,18,30,0) 100%), url("../images/playground-cover.webp?v=6") center top / 100% auto no-repeat, #9fb3cc; } }
main > section[id] { scroll-margin-top: 72px; }
.fiber-playground-links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .75rem; margin-top: .8rem; color: #687990; }
@media(max-width:850px) { .fiber-playground-shell { height: 850px; } }


/* Animated FIBER overview. */
.fiber-overview { border:1px solid #dce4ef; border-radius:22px; background:#fff; padding:2rem; margin:2.5rem 0; box-shadow:0 12px 36px rgba(30,48,70,.045); }
.fiber-overview-header { margin-bottom:1.75rem; }
.fiber-overview-header .section-kicker { margin-bottom:.5rem; }
.fiber-overview-header h3 { font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:750; color:#20364d; letter-spacing:-.035em; line-height:1.3; max-width:47rem; }
.fiber-overview-answer { font-size:clamp(1.5rem,3vw,2.15rem); font-weight:750; color:#527faf; letter-spacing:-.035em; margin-top:.5rem; }
.fiber-mini-legend { display:flex; gap:.55rem; font-size:.58rem; color:#7b8da1; }
.fiber-mini-legend span::before { content:''; display:inline-block; width:12px; border-top:2px dashed #42576e; vertical-align:middle; margin-right:3px; }
.fiber-mini-legend span:last-child::before { border-top-style:solid; border-color:#bd8157; }
.fiber-state-feedback { display:flex; align-items:center; color:#7896b3; gap:.6rem; margin-top:.7rem; }
.fiber-state-feedback svg { width:85px; height:20px; }
.fiber-policy { white-space:nowrap; }
.fiber-overview-controls { display:flex; gap:.5rem; margin-top:1.2rem; align-items:center; }
.fiber-overview-controls button { font-family:inherit; font-size:.76rem; font-weight:650; padding:.55rem .85rem; border-radius:20px; border:1px solid #e2e9f1; background:#f5f8fc; color:#6c8198; cursor:pointer; }
.fiber-overview button:focus-visible { outline:2px solid #527faf; outline-offset:3px; }
.fiber-overview-description { color:#526c85; margin-top:.9rem; }
.fiber-overview figcaption { font-size:.69rem; color:#8596a7; line-height:1.65; border-top:1px solid #e8eef5; padding-top:.8rem; margin-top:.6rem; }
@media(max-width:800px) { .fiber-overview { padding:1.2rem; } }


/* A physical workspace and a persistent view of projection, training, and execution. */
.fiber-workbench {background:#faf9f6;border:1px solid #e9e5de;border-radius:12px;overflow:hidden;}
.fiber-workbench-heading {display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.35rem 1.5rem 0;}
.fiber-workbench-heading > span:first-child {font-size:1rem;font-weight:650;color:#293d4a;}
.fiber-schematic-label {font-size:.65rem;color:#94958e;white-space:nowrap;}
.fiber-workbench svg {width:100%;height:auto;display:block;}
.fiber-workbench-detail {font-size:.85rem;line-height:1.7;color:#65717a;margin:0;padding:.85rem 1.5rem;box-sizing:content-box;min-height:5.1em;display:flex;align-items:center;}
.fiber-workbench-detail > span {display:block;max-width:760px;}
.fiber-workbench-detail .katex {font-size:1.08em;line-height:1;}
.fiber-workbench svg text {font-family:inherit;}
@media(max-width:600px) {.fiber-workbench-heading{padding:1rem 1rem 0;align-items:flex-start;} .fiber-workbench-heading > span:first-child{font-size:.86rem;} .fiber-schematic-label{display:none;} .fiber-workbench-detail{font-size:.78rem;padding:.75rem 1rem;min-height:8.5em;} .fiber-workbench svg{margin:.7rem 0;}}
.fiber-film-controls { display:flex; gap:1rem; align-items:center; margin-top:1rem; }
.fiber-film-controls button { border:1px solid #dce5ef; border-radius:20px; background:#f4f7fb; color:#486988; padding:.5rem 1rem; cursor:pointer; font:inherit; font-size:.8rem; }
.fiber-film-controls input { flex:1; min-width:0; accent-color:#527faf; cursor:ew-resize; }
.fiber-film-chapters { display:flex; justify-content:space-between; gap:.4rem; margin:.8rem 0; flex-wrap:wrap; }
.fiber-film-chapters button { border:0; border-bottom:2px solid transparent; background:none; font:inherit; font-size:.72rem; color:#8596a7; padding:.4rem .1rem; cursor:pointer; }
.fiber-film-chapters button[aria-current=true] { color:#486988; border-color:#527faf; }
@media(max-width:600px) { .fiber-film-chapters {justify-content:flex-start;gap:.35rem .8rem;} }
/* SVG motion is controlled explicitly; global reduced-motion transition rules
   must not create fresh CSS transitions for every attribute update. */
.fiber-workbench svg, .fiber-workbench svg * { transition: none !important; }


/* Animated 2D flow schematic (replaces the earlier SVG/3D versions). */
.fiber-flow-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1100 / 470;
  min-height: 240px;
  margin: .4rem 0 .2rem;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(125% 135% at 50% 6%, #f3f6f8 0%, #e6ecef 62%, #dce4e8 100%);
  box-shadow: inset 0 0 0 1px #dbe2e6;
}
.fiber-flow-stage canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; }
@media (max-width: 620px) { .fiber-flow-stage { min-height: 0; margin: .2rem 0 .1rem; border-radius: 8px; } }

/* KaTeX overlay for formulas inside the animated overview canvas */
.fiber-math-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fiber-math { position: absolute; left: 0; top: 0; display: none; opacity: 0; white-space: nowrap; line-height: 1; will-change: transform, opacity; transform-origin: 0 50%; }
.fiber-math .katex { font-size: 1em; line-height: 1; }

/* ---------- Simulation studio (MuJoCo rollouts, clean-studio renders) ---------- */
.sim-studio { margin: 4.5rem 0 0; }
.sim-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: 1.6rem; }
.sim-head h3 { color: var(--text); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.sim-head > p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.sim-media { position: relative; aspect-ratio: 16 / 9; background: #e3e5e9; border-radius: 12px; overflow: hidden; }
.sim-media video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.sim-media video:focus-visible { outline: 3px solid #4f7cff; outline-offset: -3px; }
.sim-media .video-tile-state { position: absolute; left: 0.7rem; top: 0.7rem; background: rgba(7, 17, 31, 0.72); color: #eef3f8; border-radius: 6px; padding: 0.28rem 0.5rem; pointer-events: none; }
.sim-media.is-playing .video-tile-state::before { animation: videoLivePulse 1.8s ease-in-out infinite; background: #d8e2e8; }
.sim-feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem; box-shadow: 0 12px 38px rgba(30, 52, 83, 0.07); margin: 0 0 2.2rem; }
.sim-feature figcaption { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; padding: 1rem 0.4rem 0.3rem; }
.sim-feature h4 { color: var(--text); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.sim-feature p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; max-width: 560px; }
.sim-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; }
.sim-tabs button { font: inherit; font-size: 0.84rem; font-weight: 700; color: #4b5d74; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 0.95rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.sim-tabs button small { font-size: 0.68rem; font-weight: 750; color: #8a99ab; }
.sim-tabs button:hover { border-color: #b8c6d8; }
.sim-tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sim-tabs button[aria-selected="true"] small { color: #9fb2cc; }
.sim-tabs button:focus-visible { outline: 2px solid #4f7cff; outline-offset: 2px; }
.sim-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; }
.sim-feature .sim-prompt { margin: 0; flex: 0 0 auto; }
.sim-prompt-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-right: 0.3rem; }
.sim-pill { display: inline-flex; align-items: center; background: var(--navy); color: #fff; font-size: 0.8rem; font-weight: 650; border-radius: 999px; padding: 0.36rem 0.75rem; white-space: nowrap; }
.sim-pill.is-way { background: #e9efff; color: #2f56c9; border: 1px solid #c9d7ff; }
.sim-prompt-note { color: var(--text-muted); font-size: 0.8rem; margin-left: 0.4rem; }
.sim-grid { display: grid; gap: 1rem; }
.sim-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sim-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sim-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sim-grid--1 { grid-template-columns: minmax(0, 1fr); }
.sim-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0.55rem; min-width: 0; transition: border-color 0.24s ease, box-shadow 0.24s ease; }
.sim-card:hover { border-color: rgba(77, 103, 125, 0.32); box-shadow: 0 10px 28px rgba(30, 52, 83, 0.08); }
.sim-card figcaption { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.65rem 0.35rem 0.25rem; }
.sim-card figcaption strong { color: var(--text); font-size: 0.9rem; font-weight: 750; }
.sim-card figcaption span { color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; }
.sim-panel[hidden] { display: none; }
.sim-note { color: var(--text-muted); font-size: 0.78rem; line-height: 1.6; margin-top: 1.3rem; text-align: center; }
@media (max-width: 900px) {
  .sim-head { grid-template-columns: 1fr; gap: 0.8rem; }
  .sim-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-feature figcaption { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .sim-grid--3, .sim-grid--2, .sim-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Animated overview (rendered video, reference-style a/b/c panels) ---------- */
.ov-player { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #e3e8ef; background: #fff; aspect-ratio: 16 / 9; }
.ov-player video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.ov-player video:focus-visible { outline: 3px solid #4f7cff; outline-offset: -3px; }
.ov-player .video-tile-state { position: absolute; right: 0.8rem; bottom: 0.8rem; background: rgba(7, 17, 31, 0.72); color: #eef3f8; border-radius: 6px; padding: 0.28rem 0.5rem; pointer-events: none; }
.ov-player.is-playing .video-tile-state::before { animation: videoLivePulse 1.8s ease-in-out infinite; background: #d8e2e8; }
.ov-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.8rem; }
.ov-chapters button { position: relative; overflow: hidden; font: inherit; font-size: 0.8rem; font-weight: 650; color: #50657e; background: #f5f8fc; border: 1px solid #e2e9f1; border-radius: 12px; padding: 0.65rem 0.8rem; text-align: left; cursor: pointer; }
.ov-chapters button b { color: #0f1b2d; margin-right: 0.3rem; }
.ov-chapters button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--ov-progress, 0%); background: #4f7cff; }
.ov-chapters button.is-active { background: #fff; border-color: #c9d7ff; color: #2f56c9; }
.ov-chapters button:focus-visible { outline: 2px solid #4f7cff; outline-offset: 2px; }
@media (max-width: 700px) { .ov-chapters { grid-template-columns: 1fr; } }