:root {
  --ink: #17191d;
  --paper: #f5f6f3;
  --white: #ffffff;
  --blue: #2854c5;
  --blue-dark: #183b91;
  --lime: #9ee34f;
  --line: #d6d9d5;
  --muted: #626870;
  --header-height: 72px;
  --page-pad: clamp(20px, 4vw, 64px);
  --font-sans: "Inter", "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { margin: 0; overflow-x: hidden; background: var(--paper); }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: var(--white);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: block;
  width: 100%;
  height: var(--header-height);
  border-bottom: 1px solid rgba(255,255,255,.22);
  color: var(--white);
  background: var(--ink);
}
.site-header-inner {
  display: grid;
  width: min(100%, var(--site-max, 1600px));
  height: 100%;
  grid-template-columns: 260px 1fr;
  margin-inline: auto;
}
.brand { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; }
.site-header-inner > .brand { padding: 0 var(--page-pad); border-right: 1px solid rgba(255,255,255,.22); }
.brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--ink);
  background: var(--lime);
  font-family: var(--font-mono);
  font-weight: 500;
}
.primary-nav { display: flex; align-items: stretch; justify-content: flex-end; }
.primary-nav a {
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 2vw, 32px);
  border-left: 1px solid rgba(255,255,255,.14);
  color: #d6d6d2;
  font-size: 14px;
  transition: color .2s, background .2s;
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--white); background: #24252a; }
.primary-nav a[aria-current="page"] { color: var(--ink); background: var(--lime); }
.menu-toggle { display: none; }

.section-rail {
  position: fixed;
  z-index: 45;
  top: calc(50% + var(--header-height) / 2);
  right: 16px;
  display: grid;
  width: 136px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  background: rgba(16,17,20,.92);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
}
.section-rail a {
  position: relative;
  display: grid;
  min-height: 44px;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: #aaaab0;
  transition: color .2s, background .2s;
}
.section-rail a:last-child { border-bottom: 0; }
.section-rail a:hover, .section-rail a:focus-visible { color: var(--white); background: #292a30; }
.section-rail a[aria-current="true"] { color: var(--ink); background: var(--lime); }
.rail-index { font-family: var(--font-mono); font-size: 10px; }
.rail-label { font-size: 12px; white-space: nowrap; }

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-height) - 40px);
  max-height: 860px;
  overflow: hidden;
  color: var(--white);
  background: #101114;
}
.quantum-canvas, .hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-grid {
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to right, transparent 8%, black 72%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(16,17,20,.98) 0%, rgba(16,17,20,.86) 39%, rgba(16,17,20,.14) 72%, rgba(16,17,20,.38) 100%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(780px, 66vw);
  min-height: calc(100svh - var(--header-height) - 40px);
  max-height: 860px;
  flex-direction: column;
  justify-content: center;
  padding: 56px var(--page-pad) 96px;
}
.eyebrow, .kicker {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 10px; color: #d6d6d2; }
.eyebrow span { width: 8px; height: 8px; background: var(--lime); }
h1, h2, h3, p { letter-spacing: 0; }
h1 {
  max-width: 750px;
  margin: 0;
  font-size: clamp(58px, 7.2vw, 116px);
  font-weight: 500;
  line-height: .97;
}
.hero-intro { max-width: 590px; margin: 34px 0 0; color: #c8c9c5; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 40px; }
.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  padding: 0 20px;
  font-weight: 500;
  transition: transform .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--blue); }
.button-primary:hover { background: #3969ff; }
.text-link { display: inline-flex; align-items: center; gap: 24px; font-size: 15px; }
.text-link span { transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }
.hero-status {
  position: absolute;
  z-index: 3;
  right: var(--page-pad);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 40px;
  color: #d6d6d2;
  font-size: 12px;
}
.hero-status > div { display: flex; align-items: center; gap: 8px; }
.hero-status code { font-family: var(--font-mono); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(185,255,87,.12); }

.signal-strip {
  display: grid;
  min-height: 40px;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--lime);
}
.signal-strip span { display: flex; align-items: center; padding: 0 20px; border-right: 1px solid rgba(16,17,20,.25); font-family: var(--font-mono); font-size: 11px; }

.section { padding: 120px var(--page-pad); }
.intro-section { display: grid; grid-template-columns: .25fr 1.25fr .7fr; gap: 48px; border-bottom: 1px solid var(--line); }
.section-index, .card-number { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.section-heading h2, .workflow-copy h2, .resource-title-row h2, .community-section h2 {
  margin: 0;
  font-size: clamp(38px, 4.7vw, 72px);
  font-weight: 500;
  line-height: 1.08;
}
.kicker { color: var(--blue); }
.section-lead { align-self: end; margin: 0 0 8px; color: var(--muted); font-size: 17px; line-height: 1.75; }

.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.capability-card {
  position: relative;
  display: flex;
  min-height: 560px;
  flex-direction: column;
  padding: 28px var(--page-pad) 36px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.capability-card h3 { margin: auto 0 14px; font-size: clamp(25px, 2.4vw, 36px); font-weight: 500; }
.capability-card p { max-width: 390px; min-height: 78px; margin: 0 0 30px; color: var(--muted); line-height: 1.7; }
.capability-card > a { display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.capability-card > a span { transition: transform .2s; }
.capability-card > a:hover span { transform: translateX(5px); }
.card-accent { background: #e8ecff; }
.card-dark { color: var(--white); background: var(--ink); }
.card-dark .card-number, .card-dark p { color: #a8a9ad; }
.card-dark > a { border-color: #3a3b40; }
.circuit-icon { position: absolute; top: 96px; right: var(--page-pad); left: var(--page-pad); height: 130px; }
.circuit-icon i { position: absolute; right: 0; left: 0; height: 1px; background: var(--line); }
.circuit-icon i:nth-child(1) { top: 10px; }
.circuit-icon i:nth-child(2) { top: 64px; }
.circuit-icon i:nth-child(3) { top: 118px; }
.circuit-icon::before, .circuit-icon::after { content: "H"; position: absolute; z-index: 1; top: -6px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--blue); color: var(--blue); background: var(--white); font-family: var(--font-mono); }
.circuit-icon::before { left: 12%; }
.circuit-icon::after { content: "X"; top: 102px; right: 16%; left: auto; }
.circuit-icon b { position: absolute; top: 58px; left: 55%; width: 13px; height: 13px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 8px rgba(37,87,246,.12); }
.metric-visual { position: absolute; top: 91px; right: var(--page-pad); left: var(--page-pad); display: grid; grid-template-columns: 1fr auto; align-items: end; }
.metric-visual span { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.metric-visual strong { color: var(--blue); font-family: var(--font-mono); font-size: 56px; font-weight: 400; }
.metric-visual div { display: flex; grid-column: 1 / -1; height: 66px; align-items: end; gap: 5px; margin-top: 16px; border-bottom: 1px solid var(--line); }
.metric-visual i { width: 19%; background: var(--blue); }
.metric-visual i:nth-child(1) { height: 100%; opacity: .25; }.metric-visual i:nth-child(2) { height: 82%; opacity: .4; }.metric-visual i:nth-child(3) { height: 65%; opacity: .55; }.metric-visual i:nth-child(4) { height: 52%; opacity: .7; }.metric-visual i:nth-child(5) { height: 38%; }
.topology-visual { position: absolute; top: 90px; right: var(--page-pad); left: var(--page-pad); height: 150px; background-image: linear-gradient(#33353a 1px, transparent 1px), linear-gradient(90deg, #33353a 1px, transparent 1px); background-size: 40px 40px; }
.topology-visual::before, .topology-visual::after { content: ""; position: absolute; top: 50%; left: 12%; width: 68%; height: 1px; background: var(--lime); transform: rotate(-16deg); transform-origin: left; }
.topology-visual::after { top: 19%; left: 34%; width: 49%; transform: rotate(36deg); }
.topology-visual i { position: absolute; z-index: 1; width: 13px; height: 13px; border: 2px solid var(--lime); border-radius: 50%; background: var(--ink); }
.topology-visual i:nth-child(1) { top: 64%; left: 8%; }.topology-visual i:nth-child(2) { top: 46%; left: 29%; }.topology-visual i:nth-child(3) { top: 28%; left: 50%; }.topology-visual i:nth-child(4) { top: 68%; left: 58%; }.topology-visual i:nth-child(5) { top: 59%; left: 80%; }.topology-visual i:nth-child(6) { top: 13%; left: 81%; }

.workflow-section { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--ink); color: var(--white); }
.workflow-copy { padding: 104px var(--page-pad); }
.workflow-copy > p:not(.kicker) { max-width: 510px; margin: 28px 0 56px; color: #a8a9ad; line-height: 1.75; }
.workflow-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid #393a3f; }
.workflow-steps li { border-bottom: 1px solid #393a3f; }
.workflow-steps button { width: 100%; padding: 20px 0; border: 0; text-align: left; color: #777980; background: transparent; cursor: pointer; transition: color .2s; }
.workflow-steps button span { display: inline-block; width: 54px; font-family: var(--font-mono); font-size: 11px; }
.workflow-steps li.is-active button, .workflow-steps button:hover { color: var(--white); }
.workflow-steps li.is-active button::after { content: "●"; float: right; color: var(--lime); }
.code-workbench { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 80px var(--page-pad); background: #1c1d22; }
.code-toolbar { display: flex; min-height: 52px; align-items: stretch; justify-content: space-between; border-bottom: 1px solid #42434a; }
.code-tabs { display: flex; gap: 28px; }
.code-tabs button, .copy-button { border: 0; color: #85878e; background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: 12px; }
.code-tabs button { position: relative; }
.code-tabs button.is-active { color: var(--white); }
.code-tabs button.is-active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--lime); }
.copy-button:hover { color: var(--white); }
pre { min-height: 420px; margin: 0; overflow: auto; padding: 40px 0; color: #e6e6e3; font-family: var(--font-mono); font-size: clamp(12px, 1vw, 15px); line-height: 1.8; tab-size: 2; }
.code-muted { color: #777980; }.code-keyword { color: #8eaeff; }.code-number { color: var(--lime); }.code-string { color: #f4b36a; }
.compile-result { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); border-top: 1px solid #42434a; color: #91939a; font-family: var(--font-mono); font-size: 10px; }
.compile-result span { padding: 16px 12px; border-right: 1px solid #42434a; }
.compile-result span:first-child { padding-left: 0; color: var(--white); }
.compile-result i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--lime); }
.compile-result strong { display: block; margin-top: 5px; color: var(--white); font-size: 14px; font-weight: 400; }

.stats-section { display: grid; grid-template-columns: 1.4fr repeat(3, .7fr); border-bottom: 1px solid var(--line); background: var(--white); }
.stats-intro, .stat { min-height: 250px; padding: 44px var(--page-pad); border-right: 1px solid var(--line); }
.stats-intro p:last-child { max-width: 480px; color: var(--muted); line-height: 1.7; }
.stat { display: flex; flex-direction: column; justify-content: space-between; }
.stat strong { font-family: var(--font-mono); font-size: clamp(38px, 3.8vw, 60px); font-weight: 400; }
.stat span { color: var(--muted); font-size: 14px; }

.resource-section { padding: 120px var(--page-pad); }
.resource-title-row { display: flex; align-items: end; justify-content: space-between; margin-bottom: 72px; }
.resource-title-row .text-link { margin-bottom: 8px; }
.resource-list { border-top: 1px solid var(--ink); }
.resource-list > a { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 24px; min-height: 124px; border-bottom: 1px solid var(--line); transition: background .2s, padding .2s; }
.resource-list > a:hover { padding: 0 18px; background: var(--white); }
.resource-type { font-family: var(--font-mono); font-size: 11px; }
.resource-list strong { display: block; margin-bottom: 8px; font-size: 21px; font-weight: 500; }
.resource-list small { color: var(--muted); font-size: 14px; }
.resource-list b { font-size: 24px; font-weight: 400; }

.community-section { position: relative; overflow: hidden; padding: 130px var(--page-pad); color: var(--white); background: var(--blue); }
.community-grid { position: absolute; inset: 0 0 0 52%; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 64px 64px; transform: skewX(-12deg) scale(1.2); }
.community-section > *:not(.community-grid) { position: relative; z-index: 1; }
.community-section .kicker { color: var(--lime); }
.community-section h2 { max-width: 920px; }
.community-section > p:not(.kicker) { max-width: 580px; margin: 28px 0 40px; color: #d8e0ff; line-height: 1.7; }
.button-light { color: var(--ink); background: var(--white); }

.site-footer { width: 100%; color: var(--white); background: var(--ink); }
.site-footer-inner { display: grid; width: min(100%, var(--content-max, 1440px)); grid-template-columns: 1fr 1fr; margin-inline: auto; padding: 72px var(--page-pad) 24px; }
.footer-brand p { max-width: 360px; margin-top: 24px; color: #92949a; line-height: 1.7; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-links div { display: flex; flex-direction: column; gap: 12px; }
.footer-links strong { margin-bottom: 8px; font-size: 13px; }
.footer-links a,
.footer-repository-button { color: #92949a; font-size: 13px; }
.footer-repository-button { align-self: flex-start; padding: 0; border: 0; background: transparent; cursor: pointer; }
.footer-links a:hover,
.footer-repository-button:hover { color: var(--white); }
.footer-bottom { display: flex; grid-column: 1 / -1; justify-content: space-between; margin-top: 72px; padding-top: 20px; border-top: 1px solid #33353a; color: #777980; font-family: var(--font-mono); font-size: 10px; }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

@media (max-width: 980px) {
  .site-header-inner { grid-template-columns: 1fr auto; }
  .site-header-inner > .brand { border-right: 0; }
  .menu-toggle { display: grid; width: 72px; height: 72px; place-content: center; gap: 7px; border: 0; border-left: 1px solid rgba(255,255,255,.2); background: transparent; cursor: pointer; }
  .menu-toggle span { width: 22px; height: 1px; background: var(--white); transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .primary-nav { position: fixed; top: var(--header-height); right: 0; bottom: 0; left: 0; display: none; flex-direction: column; justify-content: flex-start; padding: 32px var(--page-pad); background: var(--ink); }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { min-height: 68px; padding: 0; border-bottom: 1px solid #33353a; border-left: 0; font-size: 20px; }
  .section-rail {
    right: 10px;
    width: 44px;
    overflow: visible;
  }
  .section-rail a {
    min-height: 42px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding: 0;
  }
  .rail-label {
    position: absolute;
    right: calc(100% + 10px);
    padding: 7px 10px;
    visibility: hidden;
    color: var(--white);
    background: var(--ink);
    opacity: 0;
    transform: translateX(5px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .section-rail a:hover .rail-label,
  .section-rail a:focus-visible .rail-label {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }
  .section-rail a[aria-current="true"] .rail-label { color: var(--white); }
  .hero-copy { width: 80vw; }
  .intro-section { grid-template-columns: 50px 1fr; }
  .section-lead { grid-column: 2; max-width: 580px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 500px; border-right: 0; }
  .workflow-section { grid-template-columns: 1fr; }
  .workflow-copy { padding-bottom: 72px; }
  .code-workbench { padding-top: 56px; padding-bottom: 56px; }
  .stats-section { grid-template-columns: repeat(3, 1fr); }
  .stats-intro { grid-column: 1 / -1; min-height: auto; }
  .stats-intro, .stat { border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
  :root { --header-height: 64px; --page-pad: 20px; }
  .site-header, .menu-toggle { height: 64px; }
  .site-header-inner > .brand { padding: 0 20px; }
  .brand { font-size: 16px; }.brand-mark { width: 28px; height: 28px; }
  .section-rail { right: 0; width: 20px; border-right: 0; }
  .section-rail a { min-height: 36px; }
  .rail-index { display: grid; place-items: center; font-size: 0; }
  .rail-index::after { content: ""; width: 4px; height: 4px; background: #777980; transition: background .2s, transform .2s; }
  .section-rail a[aria-current="true"] .rail-index::after { background: var(--ink); transform: scale(1.5); }
  .hero { min-height: calc(100svh - var(--header-height) - 32px); }
  .hero-copy { width: 100%; min-height: calc(100svh - var(--header-height) - 32px); padding-top: 48px; padding-bottom: 110px; }
  .hero::after { background: linear-gradient(90deg, rgba(16,17,20,.94), rgba(16,17,20,.35)), linear-gradient(0deg, rgba(16,17,20,.8), transparent); }
  h1 { font-size: clamp(50px, 15vw, 72px); }
  .hero-intro { font-size: 15px; line-height: 1.65; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: 32px; }
  .button { width: 100%; }
  .hero-status { right: 20px; bottom: 22px; left: 20px; justify-content: space-between; }
  .hero-status code { display: none; }
  .signal-strip { grid-template-columns: repeat(2, 1fr); }
  .signal-strip span { min-height: 32px; padding: 0 10px; font-size: 9px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .intro-section { grid-template-columns: 1fr; gap: 24px; }
  .section-lead { grid-column: auto; margin-top: 16px; }
  .capability-card { min-height: 480px; }
  .workflow-copy { padding-top: 80px; }
  .workflow-copy h2, .resource-title-row h2, .community-section h2, .section-heading h2 { font-size: 38px; }
  .code-workbench { padding-right: 0; padding-left: 20px; }
  .code-toolbar, pre, .compile-result { margin-right: 20px; }
  pre { min-height: 390px; font-size: 11px; }
  .compile-result { grid-template-columns: 1fr 1fr; }
  .compile-result span:nth-child(3), .compile-result span:nth-child(4) { border-top: 1px solid #42434a; }
  .stats-section { grid-template-columns: 1fr; }
  .stat { min-height: 170px; }
  .resource-section { padding-top: 80px; padding-bottom: 80px; }
  .resource-title-row { align-items: flex-start; flex-direction: column; gap: 32px; margin-bottom: 48px; }
  .resource-list > a { grid-template-columns: 64px 1fr auto; gap: 10px; }
  .resource-list small { display: none; }
  .community-section { padding-top: 92px; padding-bottom: 92px; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 56px; }
  .footer-links { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Research modules */
.modules-page main { background: var(--paper); }
.modules-hero {
  display: grid;
  min-height: 340px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: end;
  gap: clamp(48px, 8vw, 140px);
  padding: 72px var(--page-pad);
  border-bottom: 1px solid #35363c;
  color: var(--white);
  background-color: var(--ink);
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
}
.modules-hero .kicker { color: var(--lime); }
.modules-hero h1 { font-size: clamp(52px, 6vw, 88px); line-height: 1; }
.modules-hero > p { max-width: 620px; margin: 0 0 5px; color: #b4b5ba; font-size: 16px; line-height: 1.8; }
.module-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 64px var(--page-pad) 112px;
}
.module-card {
  display: flex;
  min-width: 0;
  min-height: 610px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-right: 0;
  background: var(--white);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.module-card:last-child { border-right: 1px solid var(--line); }
.module-card:hover, .module-card:focus-within {
  z-index: 2;
  border-color: #8f9198;
  box-shadow: 0 22px 48px rgba(16,17,20,.12);
  transform: translateY(-6px);
}
.module-figure {
  position: relative;
  display: flex;
  height: 260px;
  flex: 0 0 260px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.contraction-figure {
  gap: clamp(24px, 3vw, 52px);
  background-color: #17181d;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 32px 32px;
}
.tensor-network-left, .contraction-tree { position: relative; display: block; width: 112px; height: 112px; }
.tensor-network-left::before, .tensor-network-left::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 13px;
  width: 86px;
  height: 66px;
  border-top: 1px solid #687390;
  border-bottom: 1px solid #687390;
  transform: rotate(28deg);
}
.tensor-network-left::after { transform: rotate(-27deg); }
.tensor-network-left i, .tensor-network-left b {
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 2px solid #8eaeff;
  background: #17181d;
  transform: rotate(45deg);
}
.tensor-network-left i:nth-child(1) { top: 8px; left: 10px; }
.tensor-network-left i:nth-child(2) { top: 12px; right: 12px; }
.tensor-network-left i:nth-child(3) { top: 48px; left: 47px; }
.tensor-network-left i:nth-child(4) { bottom: 10px; left: 10px; }
.tensor-network-left i:nth-child(5) { right: 12px; bottom: 8px; }
.tensor-network-left b { top: 48px; right: 4px; border-color: var(--lime); }
.figure-arrow { color: var(--lime); font-family: var(--font-mono); font-size: 26px; }
.contraction-tree::before, .contraction-tree::after {
  content: "";
  position: absolute;
  background: var(--lime);
}
.contraction-tree::before { top: 22px; bottom: 22px; left: 55px; width: 1px; }
.contraction-tree::after { top: 55px; right: 20px; left: 20px; height: 1px; }
.contraction-tree i, .contraction-tree b { position: absolute; z-index: 1; width: 13px; height: 13px; border: 1px solid var(--lime); background: #17181d; }
.contraction-tree i:nth-child(1) { top: 8px; left: 49px; }
.contraction-tree i:nth-child(2) { top: 49px; left: 14px; }
.contraction-tree i:nth-child(3) { top: 49px; right: 14px; }
.contraction-tree b { bottom: 8px; left: 49px; background: var(--lime); }
.learning-figure {
  flex-direction: column;
  gap: 38px;
  background: #e8ecff;
  background-image: linear-gradient(rgba(37,87,246,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(37,87,246,.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.learning-track { display: flex; align-items: center; justify-content: center; }
.learning-track i {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--blue);
  color: var(--blue);
  background: #f7f8ff;
  font-family: var(--font-mono);
  font-size: 18px;
  font-style: normal;
}
.learning-track i:not(:last-child) { margin-right: 28px; }
.learning-track i:not(:last-child)::after { content: "→"; position: absolute; left: calc(100% + 7px); color: var(--blue); font-size: 14px; }
.learning-track i:last-child { color: var(--white); background: var(--blue); }
.learning-backward {
  position: relative;
  width: min(292px, 78%);
  padding-top: 12px;
  border-top: 1px solid #778fdc;
  color: #4a5f9b;
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: center;
}
.learning-backward::before { content: "←"; position: absolute; top: -10px; left: -2px; color: var(--blue); font-size: 14px; background: #e8ecff; }
.upcoming-figure {
  background-color: #ecece8;
  background-image: linear-gradient(#d5d6d2 1px, transparent 1px), linear-gradient(90deg, #d5d6d2 1px, transparent 1px);
  background-size: 32px 32px;
}
.upcoming-figure > span { position: relative; display: block; width: 96px; height: 96px; border: 1px dashed #8c8d89; background: rgba(244,244,240,.7); }
.upcoming-figure i { position: absolute; top: calc(50% - 1px); left: 25%; width: 50%; height: 2px; background: #8c8d89; }
.upcoming-figure i:last-child { transform: rotate(90deg); }
.module-card-body { display: flex; flex: 1; flex-direction: column; padding: 30px clamp(24px, 2.4vw, 38px) 34px; }
.module-number { color: var(--blue); font-family: var(--font-mono); font-size: 10px; }
.module-card h2 { min-height: 72px; margin: 22px 0 14px; font-size: clamp(27px, 2.3vw, 36px); font-weight: 500; line-height: 1.18; }
.module-card-body > p { min-height: 78px; margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.module-keywords { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 28px; }
.module-keywords span { padding: 6px 8px; border: 1px solid var(--line); color: #55575e; font-family: var(--font-mono); font-size: 8px; }
.module-card-body > a, .module-pending { display: flex; min-height: 46px; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.module-card-body > a span { transition: transform .2s; }
.module-card-body > a:hover span { transform: translateX(5px); }
.module-pending { justify-content: flex-start; color: #777980; font-family: var(--font-mono); font-size: 10px; font-weight: 400; }

@media (max-width: 1080px) {
  .module-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-card:nth-child(2) { border-right: 1px solid var(--line); }
  .module-card:nth-child(3) { border-top: 0; }
}

@media (max-width: 700px) {
  .modules-hero { min-height: 330px; grid-template-columns: 1fr; gap: 30px; padding-top: 64px; padding-bottom: 54px; }
  .modules-hero h1 { font-size: 50px; }
  .modules-hero > p { font-size: 14px; }
  .module-gallery { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 72px; }
  .module-card { min-height: 570px; border-right: 1px solid var(--line); border-bottom: 0; }
  .module-card:last-child { border-bottom: 1px solid var(--line); }
  .module-card:nth-child(3) { border-top: 1px solid var(--line); }
  .module-card:hover, .module-card:focus-within { transform: translateY(-3px); }
  .module-figure { height: 230px; flex-basis: 230px; }
  .module-card h2 { min-height: 0; font-size: 30px; }
  .module-card-body > p { min-height: 0; }
}

/* System architecture shell */
.architecture-section {
  position: relative;
  color: var(--white);
  background: #121318;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.architecture-heading {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  padding: 120px var(--page-pad) 88px;
  border-bottom: 1px solid #34353b;
  background: rgba(18,19,24,.88);
}
.architecture-heading h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 500;
  line-height: 1.05;
}
.architecture-summary { align-self: end; }
.architecture-summary > p { max-width: 620px; margin: 0 0 34px; color: #afb0b5; font-size: 17px; line-height: 1.75; }
.architecture-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #3a3b41; border-bottom: 1px solid #3a3b41; }
.architecture-facts span { padding: 15px 10px 15px 0; color: #8c8e95; font-family: var(--font-mono); font-size: 10px; }
.architecture-facts b { display: block; margin-bottom: 5px; color: var(--white); font-size: 12px; font-weight: 500; }
.architecture-stage { position: relative; padding: 40px var(--page-pad) 64px; }
.architecture-stage-label { display: flex; justify-content: space-between; margin-bottom: 48px; color: #777980; font-family: var(--font-mono); font-size: 10px; }
.architecture-detail {
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  width: min(330px, 72vw);
  padding: 22px;
  visibility: hidden;
  border: 1px solid #c9cad0;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 24px 56px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.architecture-detail::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 18px; }
.detail-index { display: block; margin-bottom: 22px; color: var(--blue); font-family: var(--font-mono); font-size: 9px; }
.architecture-detail > strong { display: block; font-size: 20px; font-weight: 500; }
.architecture-detail p { min-height: 68px; margin: 12px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.architecture-detail a { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 500; }
.architecture-detail a span { transition: transform .2s; }.architecture-detail a:hover span { transform: translate(3px,-3px); }

/* Architecture documentation placeholder */
.docs-page { background: var(--paper); }
.docs-header { position: sticky; z-index: 30; top: 0; width: 100%; height: 72px; border-bottom: 1px solid #34353b; color: var(--white); background: var(--ink); }
.docs-header-inner { display: flex; width: min(100%, var(--site-max, 1600px)); height: 100%; align-items: center; justify-content: space-between; margin-inline: auto; padding: 0 var(--page-pad); }
.docs-header-inner > a:last-child { display: flex; align-items: center; gap: 18px; font-size: 13px; }
.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }
.docs-nav { position: sticky; top: 72px; display: flex; height: calc(100vh - 72px); flex-direction: column; align-self: start; padding: 44px 28px; border-right: 1px solid var(--line); }
.docs-nav p { margin: 0 0 32px; color: var(--blue); font-family: var(--font-mono); font-size: 10px; }
.docs-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.docs-nav a:hover { color: var(--blue); }
.docs-content { min-width: 0; padding: 0 clamp(32px, 8vw, 120px) 100px; }
.docs-intro { padding: 112px 0 100px; }
.docs-intro h1 { margin: 0; font-size: clamp(52px, 7vw, 96px); font-weight: 500; line-height: .98; }
.docs-intro > p:not(.kicker) { max-width: 720px; margin: 36px 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.docs-notice { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; }
.docs-notice span { width: 7px; height: 7px; background: var(--lime); box-shadow: 0 0 0 4px rgba(185,255,87,.28); }
.docs-section { padding: 90px 0; border-top: 1px solid var(--ink); scroll-margin-top: 72px; }
.docs-section > span { color: var(--blue); font-family: var(--font-mono); font-size: 10px; }
.docs-section h2 { max-width: 760px; margin: 20px 0; font-size: clamp(32px, 4vw, 54px); font-weight: 500; }
.docs-section > p { max-width: 740px; margin: 0 0 42px; color: var(--muted); line-height: 1.8; }
.docs-placeholder { position: relative; display: flex; min-height: 210px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #34353b; color: var(--white); background: #17181d; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 40px 40px; }
.docs-placeholder b { position: relative; z-index: 2; padding: 10px 14px; color: var(--lime); background: #17181d; font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
.docs-placeholder > i { position: absolute; width: 15px; height: 15px; border: 2px solid #8eaeff; background: #17181d; transform: rotate(45deg); }
.docs-placeholder > i:nth-child(1) { top: 24%; left: 12%; }.docs-placeholder > i:nth-child(2) { top: 65%; left: 28%; }.docs-placeholder > i:nth-child(3) { top: 30%; left: 48%; }.docs-placeholder > i:nth-child(4) { top: 62%; left: 68%; }.docs-placeholder > i:nth-child(5) { top: 22%; left: 86%; }
.docs-placeholder-bars { align-items: flex-end; gap: 12px; padding-bottom: 48px; }.docs-placeholder-bars > i { position: static; width: 13%; border: 0; background: #52617d; transform: none; }.docs-placeholder-bars > i:nth-child(1) { height: 28%; }.docs-placeholder-bars > i:nth-child(2) { height: 48%; }.docs-placeholder-bars > i:nth-child(3) { height: 66%; }.docs-placeholder-bars > i:nth-child(4) { height: 84%; background: #8eaeff; }
.docs-placeholder-split { gap: 16px; }.docs-placeholder-split > i { position: static; display: grid; width: 34%; height: 84px; place-items: center; border: 1px solid #52617d; color: #aebbd6; font-family: var(--font-mono); font-size: 10px; font-style: normal; transform: none; }.docs-placeholder-split b { position: absolute; }
.docs-placeholder-chains { flex-direction: column; gap: 22px; padding: 40px 12%; }.docs-placeholder-chains > i { position: static; width: 100%; height: 1px; border: 0; background: rgba(185,255,87,.45); transform: none; }.docs-placeholder-chains > i::after { content: ""; display: block; width: 9px; height: 9px; margin-top: -4px; margin-left: 64%; border: 1px solid var(--lime); background: #17181d; }.docs-placeholder-chains b { position: absolute; }
.docs-placeholder-verify { gap: 80px; }.docs-placeholder-verify > i { position: static; width: 22%; height: 92px; border: 1px solid #52617d; background-image: repeating-linear-gradient(0deg, transparent 0 12px, rgba(142,174,255,.3) 12px 13px); transform: none; }
.docs-placeholder-output { align-items: flex-end; gap: 18px; padding-bottom: 42px; }.docs-placeholder-output > i { position: static; width: 13%; border: 0; background: #4f6bd9; transform: none; }.docs-placeholder-output > i:nth-child(1) { height: 28%; }.docs-placeholder-output > i:nth-child(2) { height: 48%; }.docs-placeholder-output > i:nth-child(3) { height: 72%; background: var(--lime); }.docs-placeholder-output b { position: absolute; }

@media (max-width: 760px) {
  .architecture-heading { grid-template-columns: 1fr; gap: 44px; padding-top: 84px; padding-bottom: 64px; }
  .architecture-heading h2 { font-size: 40px; }
  .architecture-summary > p { font-size: 15px; }
  .architecture-facts { grid-template-columns: 1fr; }
  .architecture-facts span { border-bottom: 1px solid #34353b; }
  .architecture-facts span:last-child { border-bottom: 0; }
  .architecture-stage { padding-top: 30px; padding-bottom: 80px; }
  .architecture-stage-label span:last-child { display: none; }
  .docs-header { height: 64px; }
  .docs-header-inner { padding: 0 20px; }
  .docs-header-inner > a:last-child { font-size: 0; }.docs-header-inner > a:last-child span { font-size: 18px; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-nav { position: sticky; z-index: 20; top: 64px; height: auto; flex-direction: row; gap: 20px; overflow-x: auto; padding: 0 20px; border-right: 0; border-bottom: 1px solid var(--line); background: var(--paper); }
  .docs-nav p { display: none; }.docs-nav a { flex: 0 0 auto; border-bottom: 0; white-space: nowrap; }
  .docs-content { padding: 0 20px 60px; }
  .docs-intro { padding: 72px 0; }.docs-intro h1 { font-size: 50px; }
  .docs-section { padding: 70px 0; scroll-margin-top: 108px; }
  .docs-placeholder { min-height: 180px; }
}

/* Project-level system map */
.system-architecture-stage { padding-bottom: 54px; }
.system-map { border-top: 1px solid #41434b; }
.system-layer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(170px, .27fr) minmax(0, 1fr);
  border-right: 1px solid #41434b;
  border-bottom: 1px solid #41434b;
  border-left: 1px solid #41434b;
  background: rgba(18,19,24,.72);
}
.system-layer:focus-within, .system-layer:hover { z-index: 10; }
.system-layer-title { padding: 28px 24px; border-right: 1px solid #41434b; }
.system-layer-title > span { color: #7f96e8; font-family: var(--font-mono); font-size: 9px; }
.system-layer-title h3 { margin: 24px 0 10px; font-size: 21px; font-weight: 500; }
.system-layer-title p { max-width: 190px; margin: 0; color: #7f8189; font-size: 12px; line-height: 1.65; }
.system-product-grid, .compiler-pipeline, .capability-pipelines, .foundation-grid { display: grid; min-width: 0; gap: 12px; padding: 16px; }
.system-product-grid { grid-template-columns: 1.15fr 1fr .9fr; }
.compiler-pipeline { grid-template-columns: repeat(3, 1fr); }
.capability-pipelines { grid-template-columns: repeat(2, 1fr); }
.foundation-grid { grid-template-columns: 1.2fr .85fr .85fr 110px; }
.system-component { position: relative; min-width: 0; }
.system-component::before { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 14px; }
.system-component:hover, .system-component:focus-within, .system-component.is-open { z-index: 20; }
.system-component > button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 172px;
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
  border: 1px solid #4a4c55;
  color: var(--white);
  text-align: left;
  background: #1a1b21;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.system-component:hover > button,
.system-component:focus-within > button,
.system-component.is-open > button { border-color: #8e91a0; background: #22242b; box-shadow: 0 18px 36px rgba(0,0,0,.32); transform: translateY(-5px); }
.system-component-research { scroll-margin-top: calc(var(--header-height) + 20px); }
.system-component-meta { color: #8492c8; font-family: var(--font-mono); font-size: 9px; }
.system-component > button > strong { margin-top: auto; font-size: 19px; font-weight: 500; line-height: 1.35; }
.system-component > button > small { min-height: 18px; margin-top: 7px; color: #858790; font-size: 10px; line-height: 1.5; }
.deployment-modes { display: grid; grid-template-rows: repeat(3, 1fr); border: 1px solid #4a4c55; }
.deployment-modes span { display: flex; flex-direction: column; justify-content: center; padding: 9px 14px; border-bottom: 1px solid #383a42; color: #8f9199; font-size: 10px; }
.deployment-modes span:last-child { border-bottom: 0; }
.deployment-modes b { margin-bottom: 3px; color: var(--white); font-family: var(--font-mono); font-size: 9px; font-weight: 500; }
.compiler-pipeline .system-component:not(:last-child)::after { content: "→"; position: absolute; z-index: 4; top: 77px; right: -11px; color: var(--lime); font-size: 14px; }
.system-glyph { position: relative; display: block; height: 58px; margin: 18px 0 12px; }
.synthesis-glyph { display: flex; align-items: center; justify-content: center; gap: 9px; }
.synthesis-glyph i { width: 26px; height: 26px; border: 1px solid #7c94ed; }
.synthesis-glyph i:nth-child(2) { background: #7c94ed; transform: rotate(45deg) scale(.72); }
.mapping-glyph { background-image: linear-gradient(25deg, transparent 48%, #596273 49%, #596273 51%, transparent 52%), linear-gradient(-22deg, transparent 48%, #596273 49%, #596273 51%, transparent 52%); }
.mapping-glyph i { position: absolute; width: 9px; height: 9px; border: 2px solid #8eaeff; border-radius: 50%; background: #1a1b21; }
.mapping-glyph i:nth-child(1) { top: 5px; left: 12%; }.mapping-glyph i:nth-child(2) { top: 38px; left: 30%; }.mapping-glyph i:nth-child(3) { top: 8px; left: 66%; }.mapping-glyph i:nth-child(4) { top: 36px; left: 84%; }
.mapping-glyph b { position: absolute; top: 24px; left: calc(50% - 5px); width: 11px; height: 11px; background: var(--lime); }
.pulse-glyph { overflow: hidden; }
.pulse-glyph i { position: absolute; top: 27px; right: 0; left: 0; height: 1px; background: #506531; }
.pulse-glyph i::after { content: ""; position: absolute; top: -15px; left: 12%; width: 70%; height: 30px; border-top: 2px solid var(--lime); border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime); clip-path: polygon(0 46%, 16% 46%, 16% 0, 36% 0, 36% 100%, 56% 100%, 56% 20%, 75% 20%, 75% 67%, 100% 67%, 100% 75%, 72% 75%, 72% 28%, 60% 28%, 60% 100%, 32% 100%, 32% 8%, 20% 8%, 20% 54%, 0 54%); }
.mini-pipeline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 22px 0 16px; }
.mini-pipeline i { display: grid; min-height: 42px; place-items: center; border: 1px solid #4e5260; color: #acb1c2; font-size: 10px; font-style: normal; }
.mini-pipeline b { color: var(--lime); font-weight: 400; }
.research-mark { display: grid; gap: 8px; margin: 20px 0 14px; }
.research-mark i { position: relative; height: 1px; background: rgba(185,255,87,.42); }
.research-mark i::after { content: ""; position: absolute; top: -4px; left: 62%; width: 8px; height: 8px; border: 1px solid var(--lime); background: #1c2519; }
.foundation-symbol { display: grid; height: 64px; place-items: center; margin: 17px 0 10px; color: #8eaeff; font-family: var(--font-mono); font-size: 16px; line-height: 1.4; text-align: center; }
.simulator-symbol { color: var(--lime); font-size: 29px; }
.acceleration-stack { display: flex; flex-direction: column; border: 1px solid #4a4c55; }
.acceleration-stack span { padding: 12px 10px; color: #777a83; font-family: var(--font-mono); font-size: 8px; writing-mode: vertical-rl; }
.acceleration-stack b { display: grid; flex: 1; place-items: center; border-top: 1px solid #4a4c55; color: var(--ink); background: #8eaeff; font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.acceleration-stack b:last-child { background: var(--lime); }
.system-component > .architecture-detail { top: calc(100% + 14px); left: 0; }
.system-component:nth-last-child(-n+2) > .architecture-detail,
.compiler-pipeline .system-component:last-child > .architecture-detail { right: 0; left: auto; }
.system-component:hover > .architecture-detail,
.system-component:focus-within > .architecture-detail,
.system-component.is-open > .architecture-detail { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.system-component > .architecture-detail::before { height: 14px; }
.system-map-legend { display: flex; justify-content: flex-end; gap: 28px; padding-top: 26px; color: #82848c; font-family: var(--font-mono); font-size: 9px; }
.system-map-legend span { display: flex; align-items: center; gap: 8px; }
.system-map-legend i { width: 8px; height: 8px; background: #8eaeff; }
.system-map-legend span:nth-child(2) i { background: #667080; }.system-map-legend span:nth-child(3) i { background: var(--lime); }

@media (max-width: 1050px) {
  .system-layer { grid-template-columns: 155px minmax(0, 1fr); }
  .system-product-grid { grid-template-columns: 1fr 1fr; }
  .deployment-modes { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
  .deployment-modes span { border-right: 1px solid #383a42; border-bottom: 0; }
  .foundation-grid { grid-template-columns: 1fr 1fr 76px; }
  .system-component-research { grid-column: 1 / 3; }
  .acceleration-stack { grid-column: 3; grid-row: 1 / 3; }
}

@media (max-width: 760px) {
  .system-architecture-stage { padding-bottom: 64px; }
  .system-layer { grid-template-columns: 1fr; }
  .system-layer-title { padding: 24px 20px; border-right: 0; border-bottom: 1px solid #41434b; }
  .system-layer-title h3 { margin: 14px 0 7px; }
  .system-layer-title p { max-width: none; }
  .system-product-grid, .compiler-pipeline, .capability-pipelines, .foundation-grid { grid-template-columns: 1fr; padding: 12px; }
  .system-component-research { grid-column: auto; }
  .system-component > button { min-height: 190px; }
  .compiler-pipeline .system-component:not(:last-child)::after { top: auto; right: calc(50% - 6px); bottom: -13px; content: "↓"; }
  .deployment-modes { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
  .deployment-modes span { min-height: 55px; border-right: 0; border-bottom: 1px solid #383a42; }
  .acceleration-stack { display: grid; grid-column: auto; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .acceleration-stack span { grid-column: 1 / -1; writing-mode: initial; }
  .acceleration-stack b { min-height: 48px; border-top: 1px solid #4a4c55; }.acceleration-stack b:last-child { border-left: 1px solid #4a4c55; }
  .system-component > .architecture-detail,
  .system-component:nth-last-child(-n+2) > .architecture-detail,
  .compiler-pipeline .system-component:last-child > .architecture-detail {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    border-width: 0;
    box-shadow: none;
    transform: none;
    transition: max-height .3s ease, padding .3s ease, opacity .2s, visibility .2s;
  }
  .system-component:hover > .architecture-detail,
  .system-component:focus-within > .architecture-detail,
  .system-component.is-open > .architecture-detail { max-height: 340px; padding: 22px 20px; border-width: 1px; transform: none; }
  .system-map-legend { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Light research interface */
.site-header {
  border-bottom-color: var(--line);
  color: var(--ink);
  background: rgba(250,251,248,.96);
  box-shadow: 0 1px 0 rgba(23,25,29,.02);
  backdrop-filter: blur(14px);
}
.site-header-inner > .brand { border-right-color: var(--line); }
.primary-nav a { border-left-color: var(--line); color: #555c65; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--ink); background: #ecefeb; }
.primary-nav a[aria-current="page"] { color: var(--white); background: var(--blue); }
.menu-toggle { border-left-color: var(--line); }
.menu-toggle span { background: var(--ink); }

.section-rail {
  border-color: rgba(23,25,29,.16);
  color: var(--ink);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 36px rgba(23,25,29,.12);
}
.section-rail a { border-bottom-color: var(--line); color: #737982; }
.section-rail a:hover, .section-rail a:focus-visible { color: var(--ink); background: #edf0ec; }
.section-rail a[aria-current="true"] { color: var(--white); background: var(--blue); }

.hero { color: var(--ink); background: #f8f9f6; }
.hero-grid {
  opacity: .75;
  background-image: linear-gradient(rgba(23,25,29,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(23,25,29,.065) 1px, transparent 1px);
}
.hero::after { background: linear-gradient(90deg, rgba(248,249,246,1) 0%, rgba(248,249,246,.96) 38%, rgba(248,249,246,.34) 71%, rgba(248,249,246,.72) 100%); }
.eyebrow { color: #59616a; }
.eyebrow span { background: var(--blue); }
.hero-intro, .hero-status { color: var(--muted); }
.status-dot { background: #6ea82e; box-shadow: 0 0 0 4px rgba(110,168,46,.14); }
.signal-strip { border-top: 1px solid var(--line); background: #ecefeb; }
.signal-strip span { border-right-color: var(--line); color: #505760; }

.card-dark { color: var(--ink); background: #eef1f4; }
.card-dark .card-number, .card-dark p { color: var(--muted); }
.card-dark > a { border-color: var(--line); }
.topology-visual {
  background-image: linear-gradient(#d8dde2 1px, transparent 1px), linear-gradient(90deg, #d8dde2 1px, transparent 1px);
}
.topology-visual::before, .topology-visual::after { background: var(--blue); }
.topology-visual i { border-color: var(--blue); background: #eef1f4; }

.architecture-section {
  color: var(--ink);
  background: #f0f2ef;
  background-image: linear-gradient(rgba(23,25,29,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(23,25,29,.04) 1px, transparent 1px);
}
.architecture-heading { border-bottom-color: var(--line); background: rgba(255,255,255,.7); }
.architecture-summary > p { color: var(--muted); }
.architecture-facts { border-top-color: var(--line); border-bottom-color: var(--line); }
.architecture-facts span { color: #737982; }
.architecture-facts b { color: var(--ink); }
.architecture-stage-label, .system-map-legend { color: #747b83; }
.system-map { border-top-color: #cbd0cc; }
.system-layer {
  border-right-color: #cbd0cc;
  border-bottom-color: #cbd0cc;
  border-left-color: #cbd0cc;
  background: rgba(255,255,255,.64);
}
.system-layer-title { border-right-color: #cbd0cc; }
.system-layer-title > span, .system-component-meta { color: #526da7; }
.system-layer-title p, .system-component > button > small { color: #6d747c; }
.system-component > button {
  border-color: #c9ced3;
  color: var(--ink);
  background: rgba(255,255,255,.92);
}
.system-component:hover > button,
.system-component:focus-within > button,
.system-component.is-open > button {
  border-color: #8e9db5;
  background: var(--white);
  box-shadow: 0 16px 32px rgba(36,46,60,.12);
}
.deployment-modes { border-color: #c9ced3; }
.deployment-modes span { border-bottom-color: var(--line); color: #737982; }
.deployment-modes b { color: var(--ink); }
.compiler-pipeline .system-component:not(:last-child)::after { color: var(--blue); }
.mapping-glyph {
  background-image: linear-gradient(25deg, transparent 48%, #aab2bd 49%, #aab2bd 51%, transparent 52%), linear-gradient(-22deg, transparent 48%, #aab2bd 49%, #aab2bd 51%, transparent 52%);
}
.mapping-glyph i { border-color: var(--blue); background: var(--white); }
.mapping-glyph b { background: #6c9f32; }
.pulse-glyph i { background: #b5c1a9; }
.pulse-glyph i::after { border-color: #6c9f32; }
.mini-pipeline i { border-color: #c6cbd1; color: #5e6670; }
.mini-pipeline b { color: var(--blue); }
.research-mark i { background: rgba(85,127,45,.34); }
.research-mark i::after { border-color: #65943b; background: #f1f7ec; }
.foundation-symbol { color: var(--blue); }
.simulator-symbol { color: #5b8a30; }
.acceleration-stack { border-color: #c9ced3; }
.acceleration-stack span { color: #717881; }
.acceleration-stack b { border-top-color: #c9ced3; color: var(--blue); background: #dfe7fb; }
.acceleration-stack b:last-child { color: #456d21; background: #e5f1d8; }
.system-map-legend i { background: var(--blue); }
.system-map-legend span:nth-child(2) i { background: #8b949f; }
.system-map-legend span:nth-child(3) i { background: #6c9f32; }

.workflow-section { border-bottom: 1px solid var(--line); color: var(--ink); background: var(--white); }
.workflow-copy { border-right: 1px solid var(--line); background: #fafbf8; }
.workflow-copy > p:not(.kicker) { color: var(--muted); }
.workflow-steps { border-top-color: var(--line); }
.workflow-steps li { border-bottom-color: var(--line); }
.workflow-steps button { color: #777e87; }
.workflow-steps li.is-active button, .workflow-steps button:hover { color: var(--blue); }
.workflow-steps li.is-active button::after { color: var(--blue); }
.code-workbench { border-left: 1px solid var(--line); background: #eef1f4; }
.code-toolbar { border-bottom-color: #c7ccd2; }
.code-tabs button, .copy-button { color: #69717b; }
.code-tabs button.is-active { color: var(--ink); }
.code-tabs button.is-active::after { background: var(--blue); }
.copy-button:hover { color: var(--blue); }
.code-workbench pre { padding: 36px; color: #e6e8ea; background: #191c22; }
.compile-result { border-top-color: #c7ccd2; color: #6c737c; background: var(--white); }
.compile-result span { border-right-color: var(--line); }
.compile-result span:first-child, .compile-result strong { color: var(--ink); }
.compile-result i { background: #6c9f32; }

.community-section {
  border-top: 1px solid #ccd6ee;
  border-bottom: 1px solid #ccd6ee;
  color: var(--ink);
  background: #e9eefb;
}
.community-grid {
  opacity: .55;
  background-image: linear-gradient(rgba(40,84,197,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(40,84,197,.13) 1px, transparent 1px);
}
.community-section .kicker { color: var(--blue); }
.community-section > p:not(.kicker) { color: #566174; }
.button-light { color: var(--white); background: var(--blue); }
.button-light:hover { background: var(--blue-dark); }

.site-footer { border-top: 1px solid var(--line); color: var(--ink); background: #eef0ed; }
.footer-brand p, .footer-links a, .footer-repository-button { color: #687079; }
.footer-links a:hover, .footer-repository-button:hover { color: var(--blue); }
.footer-bottom { border-top-color: #cdd1cd; color: #747b83; }

.modules-hero {
  border-bottom-color: var(--line);
  color: var(--ink);
  background-color: #eef1f4;
  background-image: linear-gradient(rgba(23,25,29,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(23,25,29,.055) 1px, transparent 1px);
}
.modules-hero .kicker { color: var(--blue); }
.modules-hero > p { color: var(--muted); }

.docs-header { border-bottom-color: var(--line); color: var(--ink); background: rgba(250,251,248,.96); backdrop-filter: blur(14px); }

@media (max-width: 980px) {
  .primary-nav { background: #f8f9f6; }
  .primary-nav a { border-bottom-color: var(--line); }
  .rail-label { color: var(--ink); background: var(--white); box-shadow: 0 8px 20px rgba(23,25,29,.12); }
  .section-rail a[aria-current="true"] .rail-label { color: var(--ink); }
}

@media (max-width: 640px) {
  .hero::after { background: linear-gradient(90deg, rgba(248,249,246,.98), rgba(248,249,246,.66)), linear-gradient(0deg, rgba(248,249,246,.9), transparent); }
  .rail-index::after { background: #8a9097; }
  .section-rail a[aria-current="true"] .rail-index::after { background: var(--white); }
  .workflow-copy { border-right: 0; }
  .code-workbench { border-left: 0; }
  .code-workbench pre { padding: 28px 20px; }
  .compile-result span:nth-child(3), .compile-result span:nth-child(4) { border-top-color: var(--line); }
}

@media (max-width: 760px) {
  .architecture-facts span, .system-layer-title { border-bottom-color: #cbd0cc; }
  .deployment-modes span { border-bottom-color: var(--line); }
  .acceleration-stack b { border-top-color: #c9ced3; }
  .acceleration-stack b:last-child { border-left-color: #c9ced3; }
}

/* Shared module navigation */
.nav-group { position: relative; display: flex; align-items: stretch; }
.nav-group-row { display: flex; align-items: stretch; }
.nav-group-row > button {
  display: grid;
  width: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  color: #555c65;
  background: transparent;
  cursor: pointer;
}
.nav-group-row > button span { display: block; font-size: 17px; transition: transform .2s ease; }
.nav-group.is-open .nav-group-row > button span,
.nav-group:focus-within .nav-group-row > button span { transform: rotate(180deg); }
.nav-submenu {
  position: absolute;
  z-index: 60;
  top: 100%;
  right: 0;
  display: none;
  width: 224px;
  border: 1px solid var(--line);
  border-top: 0;
  background: rgba(250,251,248,.98);
  box-shadow: 0 16px 28px rgba(23,25,29,.12);
}
.primary-nav .nav-submenu a {
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: #555c65;
  white-space: nowrap;
}
.primary-nav .nav-submenu a:last-child { border-bottom: 0; }
.primary-nav .nav-submenu a[aria-current="page"] { color: var(--blue); background: #edf2ff; }
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu,
.nav-group.is-open .nav-submenu { display: block; }
.nav-group.is-dismissed .nav-submenu { display: none; }

/* Tensor network contraction module */
.tensor-page main { color: var(--ink); background: #f7f8f5; }
.tensor-hero {
  padding: 34px var(--page-pad) 0;
  border-bottom: 1px solid var(--line);
  background-color: #f3f5f2;
  background-image: linear-gradient(rgba(23,25,29,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(23,25,29,.045) 1px, transparent 1px);
  background-size: 64px 64px;
}
.breadcrumb { display: flex; align-items: center; gap: 12px; color: #737982; font-size: 12px; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--blue); }
.tensor-hero-grid { display: grid; min-height: 610px; grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr); align-items: center; gap: clamp(56px, 8vw, 130px); padding: 68px 0 58px; }
.tensor-hero-grid > * { min-width: 0; }
.tensor-hero-copy .kicker { margin-bottom: 20px; }
.tensor-hero-copy h1 { font-size: clamp(56px, 6.7vw, 104px); line-height: .98; }
.tensor-hero-copy > p:not(.kicker) { max-width: 680px; margin: 30px 0 0; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.8; }
.tensor-hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 38px; }
.tensor-hero-visual { min-width: 0; align-self: stretch; overflow: hidden; padding: 28px; border: 1px solid #bcc4c0; background: rgba(255,255,255,.8); }
.tensor-visual-label { display: flex; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); color: #66707a; font-family: var(--font-mono); font-size: 10px; }
.annealing-chain { display: grid; min-height: 78px; grid-template-columns: 38px repeat(4, 1fr) 46px; align-items: center; gap: 8px; }
.annealing-chain > span, .annealing-chain > b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.annealing-chain > b { color: var(--muted); text-align: right; }
.annealing-chain i { position: relative; display: block; height: 2px; background: #b5bdc6; }
.annealing-chain i::after { content: ""; position: absolute; top: 50%; right: -5px; width: 10px; height: 10px; border: 2px solid var(--blue); border-radius: 50%; background: #fff; transform: translateY(-50%); }
.chain-hot i::after { border-color: #7b8794; }
.chain-cold i::after { border-color: #5c8c31; }
.chain-exchange { display: grid; grid-template-columns: 38px repeat(4, 1fr) 46px; gap: 8px; margin: -11px 0; color: #8a929a; font-family: var(--font-mono); font-size: 13px; text-align: right; }
.chain-exchange span { grid-column: auto; }
.chain-exchange span:first-child { grid-column: 3; }
.tensor-visual-output { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 20px; color: #234c12; background: #eaf3e4; }
.tensor-visual-output span { font-family: var(--font-mono); font-size: 10px; }
.tensor-visual-output strong { font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
.tensor-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 calc(var(--page-pad) * -1); border-top: 1px solid var(--line); }
.tensor-facts div { padding: 22px var(--page-pad); border-right: 1px solid var(--line); }
.tensor-facts div:last-child { border-right: 0; }
.tensor-facts dt { margin-bottom: 8px; color: #737982; font-size: 11px; }
.tensor-facts dd { margin: 0; font-family: var(--font-mono); font-size: 13px; }

.tensor-method, .performance-overview, .metric-results, .circuit-results { padding: 116px var(--page-pad); }
.tensor-method, .circuit-results { background: #fff; }
.performance-overview { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.metric-results { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #eef1ee; }
.tensor-section-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .65fr); gap: 72px; align-items: end; margin-bottom: 64px; }
.tensor-section-heading .kicker { margin-bottom: 18px; }
.tensor-section-heading h2 { margin: 0; font-size: clamp(40px, 5vw, 72px); font-weight: 500; line-height: 1.08; }
.tensor-section-heading > p { max-width: 560px; margin: 0 0 5px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.method-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid #bfc5c1; border-bottom: 1px solid #bfc5c1; list-style: none; }
.method-flow li { min-height: 228px; padding: 24px; border-right: 1px solid var(--line); }
.method-flow li:last-child { border-right: 0; }
.method-flow span { display: block; margin-bottom: 52px; color: var(--blue); font-family: var(--font-mono); font-size: 11px; }
.method-flow strong { display: block; margin-bottom: 14px; font-size: 18px; font-weight: 500; }
.method-flow p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.performance-overview-figure { margin: 0; }
.performance-chart-button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2423 / 749;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: zoom-in;
}
.performance-chart-button img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .24s ease; }
.performance-chart-button:hover img, .performance-chart-button:focus-visible img { transform: scale(1.012); }
.performance-overview-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 20px 24px; border: 0; color: #626a73; background: transparent; font-size: 13px; line-height: 1.75; }
.performance-overview-note span { color: var(--blue); font-family: var(--font-mono); font-weight: 500; }
.performance-overview-note p { margin: 0; }

.metric-carousel-shell {
  --metric-chart-height: min(clamp(300px, 30vw, 430px), 58svh);
  --metric-control-offset: min(clamp(150px, 15vw, 215px), 29svh);
  position: relative;
  width: min(calc(100% - 144px), 1120px);
  margin-inline: auto;
  border-top: 1px solid #bcc2be;
  border-bottom: 1px solid #bcc2be;
}
.carousel-toolbar { display: flex; min-height: 64px; align-items: center; justify-content: flex-end; gap: 24px; border-bottom: 1px solid #c8cdca; }
.carousel-toolbar > p { margin: 0; color: #697079; font-size: 12px; }
.carousel-controls { display: flex; align-self: stretch; }
.carousel-controls button { display: grid; min-width: 58px; place-items: center; border: 0; border-left: 1px solid #c8cdca; background: transparent; cursor: pointer; }
.carousel-controls button:hover, .carousel-controls button:focus-visible { color: var(--blue); background: #fff; }
.carousel-controls [data-carousel-toggle] { display: flex; min-width: 98px; align-items: center; justify-content: center; gap: 10px; }
.carousel-controls em { font-size: 12px; font-style: normal; }
.metric-carousel { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
.metric-carousel::-webkit-scrollbar { display: none; }
.metric-track { display: flex; gap: 24px; width: max-content; padding: 28px 0 36px; }
.metric-slide { width: clamp(300px, 42vw, 548px); max-width: 548px; flex: 0 0 auto; margin: 0; }
.metric-slide > button, .circuit-chart-button { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 1px solid #c7cbc8; background: #fff; cursor: zoom-in; }
.metric-slide > button { height: var(--metric-chart-height); }
.metric-slide img, .circuit-chart-button img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .24s ease; }
.metric-slide > button:hover img, .metric-slide > button:focus-visible img { transform: scale(1.03); }
.image-expand { position: absolute; right: 0; bottom: 0; padding: 10px 12px; color: #fff; background: rgba(23,25,29,.9); font-family: var(--font-mono); font-size: 10px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
button:hover > .image-expand, button:focus-visible > .image-expand { opacity: 1; transform: none; }
.metric-slide figcaption { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding-top: 20px; }
.metric-slide figcaption span { color: var(--blue); font-family: var(--font-mono); font-size: 10px; }
.metric-slide figcaption strong { font-size: 17px; font-weight: 500; }
.metric-slide figcaption p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.carousel-side-control {
  position: absolute;
  z-index: 4;
  top: calc(28px + var(--metric-control-offset));
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid #bfc5c1;
  background: #fff;
  box-shadow: 0 8px 20px rgba(23,25,29,.08);
  cursor: pointer;
  transform: translateY(-50%);
}
.carousel-side-control:hover,
.carousel-side-control:focus-visible { color: var(--blue); border-color: var(--blue); }
.carousel-side-previous { left: -72px; }
.carousel-side-next { right: -72px; }

.chart-tab-list { display: flex; border-bottom: 1px solid #c7cbc8; }
.chart-tab-list button { min-width: 0; min-height: 62px; flex: 1; padding: 0 22px; border: 0; border-right: 1px solid #c7cbc8; color: #676e77; background: #f3f5f2; cursor: pointer; }
.chart-tab-list button:last-child { border-right: 0; }
.chart-tab-list button[aria-selected="true"],
.chart-tab-list button[aria-pressed="true"] { color: #fff; background: var(--blue); }
.chart-panel { padding-top: 30px; }
.chart-panel[hidden] { display: none; }
.circuit-chart-button { aspect-ratio: 1330 / 730; }
.circuit-chart-button:hover img, .circuit-chart-button:focus-visible img { transform: scale(1.012); }
.chart-panel > p { display: flex; gap: 18px; margin: 0; padding: 20px 0 0; color: var(--muted); font-size: 13px; }
.chart-panel > p strong { color: var(--blue); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }

.metric-comparison-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin: -12px 0 64px; }
.metric-comparison-block { min-width: 0; padding-top: 16px; border-top: 2px solid #9fa7a1; }
.metric-comparison-scenario { margin: 0 0 11px; color: var(--blue); font-family: var(--font-mono); font-size: 10px; }
.metric-comparison-block h3 { margin: 0 0 14px; font-size: 16px; font-weight: 500; }
.metric-comparison-block h3 span { margin-right: 5px; color: var(--blue); font-family: var(--font-mono); font-size: 10px; }
.metric-comparison-block ul { margin: 0; padding: 0; list-style: none; }
.metric-comparison-block li { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(174,181,176,.72); color: var(--muted); font-size: 12px; }
.metric-comparison-block li:last-child { border-bottom: 0; }
.metric-comparison-block li strong { flex: 0 0 auto; color: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }

.circuit-results-option { border-bottom: 1px solid var(--line); }
.circuit-results-option-alt { position: relative; background: #eef1ee; }
.circuit-display { border-top: 1px solid #c7cbc8; }
.circuit-arrow-switcher > .chart-tab-list { background: #f3f5f2; }
.circuit-dynamic-heading { transition: opacity .18s ease, transform .18s ease; }
.is-scene-copy-fading .circuit-dynamic-heading { opacity: 0; transform: translateY(7px); }
.circuit-scene-copy { min-width: 0; align-self: end; }
.circuit-scene-copy p { max-width: 560px; margin: 0 0 5px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.circuit-scene-copy p[hidden] { display: none; }
.circuit-scene-stage { position: relative; }
.circuit-results-option-alt .circuit-scene-stage { position: static; }
.circuit-scene-panels { overflow: hidden; }
.circuit-scene-arrow {
  position: absolute;
  z-index: 3;
  top: calc(50% - 18px);
  display: grid;
  width: 52px;
  height: 72px;
  place-items: center;
  border: 1px solid #aeb5b0;
  color: var(--ink);
  background: rgba(255,255,255,.94);
  cursor: pointer;
  font-size: 20px;
  transform: translateY(-50%);
  transition: color .2s, border-color .2s, background .2s;
}
.circuit-scene-arrow:hover,
.circuit-scene-arrow:focus-visible { color: var(--white); border-color: var(--blue); background: var(--blue); }
.circuit-scene-arrow-previous { left: -76px; }
.circuit-scene-arrow-next { right: -76px; }
.circuit-results-option-alt .circuit-scene-arrow { top: 50%; }
.circuit-results-option-alt .circuit-scene-arrow-previous { left: max(16px, calc((100% - 1120px) / 2 - 76px)); }
.circuit-results-option-alt .circuit-scene-arrow-next { right: max(16px, calc((100% - 1120px) / 2 - 76px)); }
.is-switching-next .circuit-scene-panels > .chart-panel:not([hidden]) { animation: circuit-scene-enter-next .36s ease both; }
.is-switching-previous .circuit-scene-panels > .chart-panel:not([hidden]) { animation: circuit-scene-enter-previous .36s ease both; }
@keyframes circuit-scene-enter-next {
  from { opacity: .25; transform: translateX(7%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes circuit-scene-enter-previous {
  from { opacity: .25; transform: translateX(-7%); }
  to { opacity: 1; transform: translateX(0); }
}
.tensor-resources { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; padding: 100px var(--page-pad); border-top: 1px solid var(--line); background: #e9eefb; }
.tensor-resources h2 { margin: 0; font-size: clamp(38px, 4vw, 62px); font-weight: 500; }
.tensor-resource-links { border-top: 1px solid #aebbd7; }
.tensor-resource-links a,
.tensor-resource-links button { display: grid; width: 100%; min-height: 104px; grid-template-columns: 130px 1fr auto; align-items: center; gap: 20px; padding: 0; border: 0; border-bottom: 1px solid #aebbd7; text-align: left; background: transparent; }
.tensor-resource-links button { cursor: pointer; }
.tensor-resource-links a span,
.tensor-resource-links button span { color: var(--blue); font-family: var(--font-mono); font-size: 11px; }
.tensor-resource-links a strong,
.tensor-resource-links button strong { font-size: 16px; font-weight: 500; }
.tensor-resource-links a b,
.tensor-resource-links button b { font-size: 20px; font-weight: 400; transition: transform .2s; }
.tensor-resource-links a:hover b,
.tensor-resource-links button:hover b { transform: translateX(3px); }

/* ArcQML module */
.qml-hero .tensor-hero-copy h1 { font-size: clamp(50px, 5.2vw, 76px); line-height: 1.02; }
.qml-hero-visual { display: flex; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,.88); }
.qml-circuit { display: grid; gap: 34px; padding: 54px 8px 42px; }
.qml-circuit > span { display: grid; grid-template-columns: 42px 1fr 50px 1fr 42px; align-items: center; }
.qml-circuit i { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #8e9db5; color: var(--blue); background: #fff; font-family: var(--font-mono); font-size: 11px; font-style: normal; }
.qml-circuit b { height: 1px; background: #aeb5bd; }
.qml-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr) auto); align-items: center; gap: 8px; padding: 18px; border-top: 1px solid var(--line); color: #5d6670; background: #eef1ee; font-family: var(--font-mono); font-size: 9px; }
.qml-loop span { text-align: center; }
.qml-loop b { color: var(--blue); font-weight: 400; }
.qml-loop b:last-of-type { display: none; }

.qml-workflow-section, .qnn-results-section { padding: 116px var(--page-pad); }
.qml-workflow-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #eef1ee; }
.qml-workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #bfc5c1; border-bottom: 1px solid #bfc5c1; }
.qml-workflow-grid article { min-height: 220px; padding: 26px; border-right: 1px solid var(--line); }
.qml-workflow-grid article:last-child { border-right: 0; }
.qml-workflow-grid span { display: block; margin-bottom: 60px; color: var(--blue); font-family: var(--font-mono); font-size: 10px; }
.qml-workflow-grid strong { display: block; margin-bottom: 14px; font-size: 20px; font-weight: 500; }
.qml-workflow-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.qnn-results-section { overflow: hidden; background: #fff; }
.qnn-results-intro { display: grid; gap: 24px; align-self: end; }
.qnn-results-intro > p { max-width: 560px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.qnn-view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #b9c0c7; }
.qnn-view-switch button { min-height: 52px; padding: 0 20px; border: 0; color: #616872; background: #f4f5f2; cursor: pointer; font-size: 13px; }
.qnn-view-switch button + button { border-left: 1px solid #b9c0c7; }
.qnn-view-switch button:hover, .qnn-view-switch button:focus-visible { color: var(--ink); background: #e9ece9; }
.qnn-view-switch button[aria-pressed="true"] { color: #fff; background: var(--blue); }
.qnn-carousel-shell { position: relative; width: min(100%, 1280px); margin-inline: auto; }
.qnn-results-viewport { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
.qnn-results-viewport::-webkit-scrollbar { display: none; }
.qnn-results-track { display: flex; width: max-content; gap: 26px; padding: 8px 0 32px; }
.qnn-results-track[hidden] { display: none; }
.qnn-result-slide { width: clamp(420px, 37vw, 500px); flex: 0 0 auto; overflow: hidden; border: 1px solid #c7cbc8; background: #fafbf9; }
.qnn-result-slide > header { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.qnn-result-slide > header span { color: var(--blue); font-family: var(--font-mono); font-size: 9px; }
.qnn-result-slide > header h3 { margin: 0; font-size: 22px; font-weight: 500; }
.qnn-chart { position: relative; margin: 0; padding: 0; background: #fff; }
.qnn-chart + .qnn-chart { border-top: 1px solid #c7cbc8; }
.qnn-chart figcaption { position: absolute; z-index: 2; top: 12px; left: 12px; min-width: 54px; margin: 0; padding: 7px 10px; border: 1px solid #c7d3ec; color: #244a9b; background: rgba(235,240,249,.94); font-family: var(--font-mono); font-size: 9px; font-weight: 500; line-height: 1; text-align: center; pointer-events: none; }
.qnn-chart > button { position: relative; display: block; width: 100%; aspect-ratio: 1600 / 1225; overflow: hidden; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.qnn-chart img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .24s ease; }
.qnn-chart > button:hover img, .qnn-chart > button:focus-visible img { transform: scale(1.015); }
.qnn-carousel-arrow { position: absolute; z-index: 4; top: 50%; display: grid; width: 50px; height: 68px; place-items: center; padding: 0; border: 1px solid #bfc5c1; color: var(--ink); background: rgba(255,255,255,.95); box-shadow: 0 8px 20px rgba(23,25,29,.08); cursor: pointer; font-size: 20px; transform: translateY(-50%); }
.qnn-carousel-arrow:hover, .qnn-carousel-arrow:focus-visible { color: #fff; border-color: var(--blue); background: var(--blue); }
.qnn-carousel-arrow:disabled { color: #9ba1a6; border-color: #d5d9d6; background: rgba(247,248,246,.92); box-shadow: none; cursor: default; }
.qnn-carousel-previous { left: -70px; }
.qnn-carousel-next { right: -70px; }
.qnn-carousel-status { margin: 0; color: #69717a; font-family: var(--font-mono); font-size: 10px; text-align: right; }
.vqe-overview-section { padding: 116px var(--page-pad); border-top: 1px solid var(--line); background: #eef1ee; }
.vqe-overview-layout { display: grid; width: min(100%, 1280px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-inline: auto; border-top: 1px solid #c7cbc8; border-bottom: 1px solid #c7cbc8; }
.vqe-overview-copy { display: flex; flex-direction: column; justify-content: center; padding: 54px 64px 54px 0; }
.vqe-overview-copy h2 { margin: 18px 0 28px; font-size: clamp(42px, 4.6vw, 68px); font-weight: 500; line-height: 1.08; }
.vqe-overview-copy > p:last-child { max-width: 520px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.vqe-overview-figure { display: flex; margin: 0; border-left: 1px solid #c7cbc8; background: #fff; }
.vqe-overview-figure > button { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.vqe-overview-figure img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .24s ease; }
.vqe-overview-figure > button:hover img, .vqe-overview-figure > button:focus-visible img { transform: scale(1.012); }
.vqe-detail-section { border-top: 1px solid var(--line); background: #fff; }
.qnn-result-slide h3 sub { font-size: .58em; vertical-align: -.15em; }

.chart-lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; }
.chart-lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(13,15,18,.84); cursor: zoom-out; }
.lightbox-dialog { position: relative; display: grid; width: min(1180px, calc(100vw - 48px)); max-height: calc(100svh - 48px); background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.lightbox-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; padding-left: 20px; border-bottom: 1px solid var(--line); }
.lightbox-toolbar strong { font-size: 14px; font-weight: 500; }
.lightbox-toolbar button { align-self: stretch; width: 58px; border: 0; border-left: 1px solid var(--line); background: transparent; font-size: 28px; cursor: pointer; }
.lightbox-stage { display: grid; min-height: 0; grid-template-columns: 58px minmax(0, 1fr) 58px; align-items: center; background: #f4f5f2; }
.lightbox-stage button { align-self: stretch; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.lightbox-stage button:hover, .lightbox-stage button:focus-visible, .lightbox-toolbar button:hover, .lightbox-toolbar button:focus-visible { color: var(--blue); background: #e8ebea; }
.lightbox-stage img { display: block; width: 100%; max-height: calc(100svh - 150px); object-fit: contain; }
.lightbox-dialog > p { margin: 0; padding: 10px 20px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 10px; text-align: right; }
body.lightbox-open { overflow: hidden; }

@media (max-width: 1280px) {
  .circuit-scene-arrow { width: 46px; height: 58px; }
  .circuit-scene-arrow-previous { left: 12px; }
  .circuit-scene-arrow-next { right: 12px; }
  .qnn-carousel-previous { left: 12px; }
  .qnn-carousel-next { right: 12px; }
}

@media (max-width: 980px) {
  .nav-group { display: block; }
  .nav-group-row { width: 100%; }
  .nav-group-row > a { flex: 1; }
  .nav-group-row > button { width: 68px; border-bottom: 1px solid var(--line); }
  .nav-group:hover .nav-submenu, .nav-group:focus-within .nav-submenu { display: none; }
  .nav-group.is-open .nav-submenu { display: block; }
  .nav-submenu { position: static; width: 100%; border: 0; box-shadow: none; }
  .primary-nav .nav-submenu a { min-height: 54px; padding-left: 24px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .tensor-hero-grid { min-height: auto; grid-template-columns: 1fr; gap: 48px; }
  .tensor-hero-visual { min-height: 380px; }
  .tensor-section-heading { grid-template-columns: 1fr; gap: 28px; }
  .metric-comparison-grid { grid-template-columns: 1fr; gap: 34px; }
  .method-flow { grid-template-columns: repeat(2, 1fr); }
  .method-flow li:nth-child(2) { border-right: 0; }
  .method-flow li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .qml-workflow-grid { grid-template-columns: 1fr; }
  .qml-workflow-grid article { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--line); }
  .qml-workflow-grid article:last-child { border-bottom: 0; }
  .qml-workflow-grid span { margin-bottom: 38px; }
  .vqe-overview-layout { grid-template-columns: 1fr; }
  .vqe-overview-copy { min-height: 360px; padding: 48px 0; }
  .vqe-overview-figure { border-top: 1px solid #c7cbc8; border-left: 0; }
  .tensor-resources { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .tensor-hero { padding-top: 24px; }
  .tensor-hero-grid { gap: 38px; padding: 52px 0 42px; }
  .tensor-hero-copy h1 { font-size: 48px; }
  .tensor-hero-actions { align-items: flex-start; flex-direction: column; gap: 24px; }
  .tensor-hero-visual { min-height: 320px; padding: 20px 14px; }
  .annealing-chain { grid-template-columns: 30px repeat(4, 1fr) 38px; gap: 4px; }
  .chain-exchange { grid-template-columns: 30px repeat(4, 1fr) 38px; gap: 4px; }
  .tensor-visual-output { padding: 16px 12px; }
  .tensor-visual-output strong { max-width: 150px; text-align: right; overflow-wrap: anywhere; }
  .tensor-facts { grid-template-columns: 1fr; }
  .tensor-facts div { padding: 18px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tensor-facts div:last-child { border-bottom: 0; }
  .tensor-method, .performance-overview, .metric-results, .circuit-results, .qml-workflow-section, .qnn-results-section { padding: 78px 20px; }
  .tensor-section-heading { margin-bottom: 42px; }
  .tensor-section-heading h2 { font-size: 38px; }
  .method-flow { grid-template-columns: 1fr; }
  .method-flow li { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--line); }
  .method-flow li:nth-child(3) { border-bottom: 1px solid var(--line); }
  .method-flow li:last-child { border-bottom: 0; }
  .method-flow span { margin-bottom: 30px; }
  .carousel-toolbar { align-items: stretch; }
  .carousel-toolbar > p { display: none; }
  .carousel-controls { width: 100%; }
  .carousel-controls button { flex: 1; border-left: 0; border-right: 1px solid #c8cdca; }
  .carousel-controls button:last-child { border-right: 0; }
  .metric-track { gap: 14px; }
  .metric-carousel-shell {
    --metric-chart-height: min(78vw, 320px, 58svh);
    --metric-control-offset: min(39vw, 160px, 29svh);
    width: 100%;
  }
  .metric-slide { width: 84vw; max-width: 84vw; }
  .carousel-side-control { width: 42px; height: 42px; background: rgba(255,255,255,.94); }
  .carousel-side-previous { left: 8px; }
  .carousel-side-next { right: 8px; }
  .metric-slide figcaption { padding-right: 6px; }
  .chart-tab-list button { min-width: 0; flex: 1; }
  .circuit-scene-arrow { top: 50%; width: 42px; height: 42px; }
  .circuit-scene-arrow-previous { left: 8px; }
  .circuit-scene-arrow-next { right: 8px; }
  .circuit-dynamic-heading h2 { font-size: 32px; }
  .circuit-results-option-alt .circuit-scene-stage { position: relative; }
  .circuit-results-option-alt .circuit-scene-arrow { top: 50%; }
  .circuit-chart-button { aspect-ratio: auto; }
  .circuit-chart-button img { height: auto; }
  .chart-panel > p { align-items: flex-start; flex-direction: column; gap: 7px; }
  .qml-hero .tensor-hero-copy h1 { font-size: 46px; }
  .qml-circuit { gap: 24px; padding: 38px 0 30px; }
  .qml-loop { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 14px 8px; }
  .qml-loop b { display: none; }
  .qnn-view-switch button { min-height: 50px; padding: 0 10px; }
  .qnn-result-slide { width: 84vw; }
  .qnn-result-slide > header { min-height: 60px; padding: 10px 14px; }
  .qnn-result-slide > header h3 { font-size: 20px; }
  .qnn-chart figcaption { top: 8px; left: 8px; min-width: 48px; padding: 6px 8px; font-size: 8px; }
  .qnn-carousel-arrow { width: 42px; height: 54px; }
  .qnn-carousel-previous { left: 8px; }
  .qnn-carousel-next { right: 8px; }
  .vqe-overview-section { padding-top: 78px; padding-bottom: 78px; }
  .vqe-overview-copy { min-height: 280px; padding: 36px 0; }
  .vqe-overview-copy h2 { font-size: 38px; }
  .tensor-resources { padding: 72px 20px; }
  .tensor-resource-links a,
  .tensor-resource-links button { min-height: 112px; grid-template-columns: 1fr auto; gap: 8px 16px; }
  .tensor-resource-links a span,
  .tensor-resource-links button span { grid-column: 1 / -1; align-self: end; }
  .lightbox-dialog { width: calc(100vw - 20px); max-height: calc(100svh - 20px); }
  .chart-lightbox { padding: 10px; }
  .lightbox-stage { grid-template-columns: 42px minmax(0, 1fr) 42px; }
  .lightbox-stage img { max-height: calc(100svh - 132px); }
}

@media (prefers-reduced-motion: reduce) {
  .metric-slide img, .image-expand, .nav-group-row > button span, .circuit-dynamic-heading { transition: none; }
  .is-switching-next .circuit-scene-panels > .chart-panel:not([hidden]),
  .is-switching-previous .circuit-scene-panels > .chart-panel:not([hidden]) { animation: none; }
}

/* Stable desktop scale: browser zoom should scale the composition as a whole. */
:root { --page-pad: 64px; }
h1 { font-size: 104px; }
.hero-intro { font-size: 19px; }
.section-heading h2,
.workflow-copy h2,
.resource-title-row h2,
.community-section h2 { font-size: 68px; }
.capability-card h3 { font-size: 34px; }
pre { font-size: 14px; }
.stat strong { font-size: 58px; }
.modules-hero h1 { font-size: 84px; }
.module-card h2 { font-size: 34px; }
.architecture-heading h2 { font-size: 72px; }
.docs-content { padding-right: 96px; padding-left: 96px; }
.docs-intro h1 { font-size: 92px; }
.docs-section h2 { font-size: 52px; }
.tensor-hero-copy h1 { font-size: 96px; }
.tensor-hero-copy > p:not(.kicker) { font-size: 18px; }
.tensor-section-heading h2 { font-size: 68px; }
.tensor-resources h2 { font-size: 58px; }

.primary-nav > a,
.primary-nav > .nav-group { width: 112px; flex: 0 0 112px; }
.primary-nav > a { justify-content: center; padding: 0; }
.primary-nav a[aria-current="page"] {
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 -3px var(--blue);
}
.nav-group-row {
  width: 100%;
  height: 100%;
  border-left: 1px solid var(--line);
  transition: background .2s;
}
.nav-group-row > a {
  width: 100%;
  justify-content: center;
  padding: 0;
  border-left: 0;
}
.nav-group-row > button {
  width: 42px;
  padding-right: 14px;
  border-left: 0;
}
.nav-group-row:hover,
.nav-group-row:focus-within { background: #ecefeb; }
.nav-group-row:hover > a,
.nav-group-row:focus-within > a,
.nav-group-row:hover > button,
.nav-group-row:focus-within > button { background: transparent; }
.nav-group-current .nav-group-row { box-shadow: inset 0 -3px var(--blue); }
.nav-group-current .nav-group-row > a[aria-current="page"] { box-shadow: none; }

.primary-nav > .nav-repository-button {
  display: flex;
  width: 112px;
  flex: 0 0 112px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  color: #555c65;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  transition: color .2s, background .2s;
}
.primary-nav > .nav-repository-button:hover,
.primary-nav > .nav-repository-button:focus-visible { color: var(--ink); background: #ecefeb; }
.button { border: 0; cursor: pointer; }

.repository-dialog {
  width: min(560px, calc(100vw - 40px));
  margin: auto;
  padding: 0;
  border: 1px solid #bcc3c0;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(23,25,29,.24);
}
.repository-dialog::backdrop { background: rgba(23,25,29,.52); backdrop-filter: blur(3px); }
.repository-dialog-heading,
.repository-dialog-footer { display: flex; align-items: center; justify-content: space-between; }
.repository-dialog-heading { min-height: 58px; padding-left: 24px; border-bottom: 1px solid var(--line); }
.repository-dialog-heading p { margin: 0; color: var(--blue); font-family: var(--font-mono); font-size: 10px; }
.repository-dialog-heading button {
  align-self: stretch;
  width: 58px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 28px;
  font-weight: 300;
}
.repository-dialog-heading button:hover,
.repository-dialog-heading button:focus-visible { color: var(--blue); background: #f0f3f1; }
.repository-dialog-content { padding: 48px 48px 52px; }
.repository-dialog-content > span { color: #87909a; font-family: var(--font-mono); font-size: 10px; }
.repository-dialog-content h2 { margin: 18px 0 24px; font-size: 42px; font-weight: 500; letter-spacing: 0; line-height: 1.12; }
.repository-dialog-content p { max-width: 440px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.repository-dialog-footer { min-height: 64px; padding-left: 24px; border-top: 1px solid var(--line); background: #f6f7f4; }
.repository-dialog-footer > span { display: flex; align-items: center; gap: 9px; color: #687079; font-family: var(--font-mono); font-size: 10px; }
.repository-dialog-footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.repository-dialog-footer button { align-self: stretch; min-width: 112px; padding: 0 22px; border: 0; border-left: 1px solid var(--line); color: #fff; background: var(--blue); cursor: pointer; font-size: 13px; }
.repository-dialog-footer button:hover,
.repository-dialog-footer button:focus-visible { background: var(--blue-dark); }

@media (max-width: 1200px) {
  :root { --page-pad: 40px; }
  .docs-content { padding-right: 64px; padding-left: 64px; }
}

@media (max-width: 980px) {
  h1 { font-size: 72px; }
  .section-heading h2,
  .workflow-copy h2,
  .resource-title-row h2,
  .community-section h2 { font-size: 56px; }
  .architecture-heading h2 { font-size: 60px; }
  .tensor-hero-copy h1 { font-size: 78px; }
  .tensor-section-heading h2 { font-size: 58px; }
  .tensor-resources h2 { font-size: 50px; }
  .primary-nav > a,
  .primary-nav > .nav-group,
  .primary-nav > .nav-repository-button { width: 100%; flex: 0 0 auto; }
  .primary-nav > a { justify-content: flex-start; padding: 0; }
  .primary-nav > .nav-repository-button { min-height: 68px; justify-content: flex-start; border-left: 0; border-bottom: 1px solid var(--line); font-size: 20px; }
  .nav-group-row { border-left: 0; }
  .nav-group-row > a { padding: 0; }
  .nav-group-row > button { width: 68px; padding: 0; }
  .nav-group-current .nav-group-row { box-shadow: none; }
  .nav-group-current .nav-group-row > a[aria-current="page"] { box-shadow: inset 0 -3px var(--blue); }
  .docs-content { padding-right: 40px; padding-left: 40px; }
  .docs-intro h1 { font-size: 72px; }
  .docs-section h2 { font-size: 44px; }
}

@media (max-width: 640px) {
  :root { --page-pad: 20px; }
  h1 { font-size: 52px; }
  .modules-hero h1 { font-size: 50px; }
  .module-card h2 { font-size: 29px; }
  .architecture-heading h2 { font-size: 40px; }
  .docs-content { padding-right: 20px; padding-left: 20px; }
  .docs-intro h1 { font-size: 54px; }
  .docs-section h2 { font-size: 36px; }
  .tensor-hero-copy h1 { font-size: 48px; }
  .tensor-hero-copy > p:not(.kicker) { font-size: 16px; }
  .tensor-section-heading h2 { font-size: 38px; }
  .tensor-resources h2 { font-size: 42px; }
  .repository-dialog { width: calc(100vw - 24px); }
  .repository-dialog-content { padding: 38px 24px 42px; }
  .repository-dialog-content h2 { font-size: 34px; }
}

/* Full-width background bands with centered, bounded content. */
:root {
  --site-max: 1600px;
  --content-max: 1440px;
}
body { background: var(--paper); }
body > .site-header,
body > .docs-header,
body > main,
body > .site-footer {
  width: 100%;
}
.section-rail {
  right: max(16px, calc((100vw - var(--site-max)) / 2 + 16px));
}

.hero-copy {
  width: min(100%, calc((100% - min(100%, var(--content-max))) / 2 + 780px));
  padding-left: max(var(--page-pad), calc((100% - var(--content-max)) / 2));
}
.hero-status { right: max(var(--page-pad), calc((100% - var(--content-max)) / 2)); }

.intro-section,
.capability-grid,
.workflow-section,
.stats-section,
.module-gallery {
  width: min(calc(100% - var(--page-pad) - var(--page-pad)), var(--content-max));
  margin-inline: auto;
}
.intro-section { padding-right: 0; padding-left: 0; }
.capability-grid { border-left: 1px solid var(--line); }
.module-gallery { padding-right: 0; padding-left: 0; }

.signal-strip {
  grid-template-columns:
    max(var(--page-pad), calc((100% - var(--content-max)) / 2))
    repeat(4, minmax(0, 1fr))
    max(var(--page-pad), calc((100% - var(--content-max)) / 2));
}
.signal-strip::before,
.signal-strip::after { content: ""; display: block; }
.signal-strip::before { grid-column: 1; }
.signal-strip::after { grid-column: 6; }
.signal-strip > span:nth-of-type(1) { grid-column: 2; }
.signal-strip > span:nth-of-type(2) { grid-column: 3; }
.signal-strip > span:nth-of-type(3) { grid-column: 4; }
.signal-strip > span:nth-of-type(4) { grid-column: 5; }

.architecture-stage {
  width: min(calc(100% - var(--page-pad) - var(--page-pad)), var(--content-max));
  margin-inline: auto;
  padding-right: 0;
  padding-left: 0;
}
.architecture-heading {
  width: 100%;
  margin-inline: 0;
  padding-right: max(var(--page-pad), calc((100% - var(--content-max)) / 2));
  padding-left: max(var(--page-pad), calc((100% - var(--content-max)) / 2));
}
.workflow-section,
.stats-section {
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(0 -100vmax);
}
.modules-hero,
.tensor-hero,
.tensor-method,
.performance-overview,
.metric-results,
.circuit-results,
.qml-workflow-section,
.qnn-results-section,
.vqe-overview-section,
.tensor-resources,
.resource-section,
.community-section {
  padding-right: max(var(--page-pad), calc((100% - var(--content-max)) / 2));
  padding-left: max(var(--page-pad), calc((100% - var(--content-max)) / 2));
}
.circuit-results > .circuit-display {
  width: min(100%, 1120px);
  margin-inline: auto;
}
.performance-overview > .performance-overview-figure {
  width: min(100%, 1280px);
  margin-inline: auto;
}

@media (max-width: 640px) {
  .section-rail { right: 0; }
  .hero-copy { width: 100%; }
  .hero-status { right: 20px; }
  .signal-strip { grid-template-columns: repeat(2, 1fr); }
  .signal-strip::before,
  .signal-strip::after { display: none; }
  .signal-strip > span:nth-of-type(1),
  .signal-strip > span:nth-of-type(2),
  .signal-strip > span:nth-of-type(3),
  .signal-strip > span:nth-of-type(4) { grid-column: auto; }
}