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

:root {
  --bg: #ffffff;
  --bg-alt: #f7f7f8;
  --text: #1a1a2e;
  --text-body: #374151;
  --text-muted: #6b7280;
  --accent: #ea580c;
  --accent-dark: #c2410c;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.035);
  --radius: 12px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --max-w: 1160px;
  --wide-w: 1340px;
  --narrow-w: 800px;
  --site-render-scale: 0.8;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.72;
  zoom: var(--site-render-scale);
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container,
.container-wide,
.container-narrow {
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container {
  max-width: var(--max-w);
}

.container-wide {
  max-width: var(--wide-w);
}

.container-narrow {
  max-width: var(--narrow-w);
}

.section,
.section-alt {
  padding: 5.5rem 0;
}

.section-alt {
  background: var(--bg-alt);
}

.hero {
  align-items: flex-end;
  background: #080c11;
  color: #fff;
  display: flex;
  isolation: isolate;
  min-height: 125svh;
  overflow: hidden;
  padding: clamp(4rem, 9vh, 7rem) 1.5rem clamp(3.5rem, 7vh, 5.5rem);
  position: relative;
  text-align: center;
}

.hero-rollout-grid {
  filter: saturate(0.86) contrast(1.06) brightness(0.8);
  height: 100%;
  inset: 0;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.hero-shade {
  background:
    linear-gradient(180deg, rgba(3, 8, 14, 0.18) 0%, rgba(3, 8, 14, 0.34) 43%, rgba(3, 8, 14, 0.94) 100%),
    linear-gradient(90deg, rgba(3, 8, 14, 0.32), transparent 24%, transparent 76%, rgba(3, 8, 14, 0.32));
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-playback-fallback {
  align-items: center;
  backdrop-filter: blur(10px);
  background: rgba(8, 12, 17, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  bottom: 1.4rem;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 600;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  position: absolute;
  right: 1.4rem;
  transition: background 0.15s, border-color 0.15s;
  z-index: 3;
}

.hero-playback-fallback:hover {
  background: rgba(234, 88, 12, 0.92);
  border-color: rgba(255, 255, 255, 0.82);
}

.hero-playback-fallback[hidden] {
  display: none;
}

.hero-foreground {
  position: relative;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.72);
  width: 100%;
  z-index: 2;
}

.paper-title {
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 1.75rem;
}

.paper-title .accent {
  color: var(--accent);
}

.hero .paper-title {
  color: #fff;
  font-size: clamp(2.5rem, 4.8vw, 4rem);
}

.hero .paper-title .accent {
  color: #fb923c;
}

.authors {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.12rem;
  gap: 0.15rem 1.25rem;
  justify-content: center;
  margin-bottom: 0.6rem;
}

.authors-public {
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
}

.authors-public .author {
  color: var(--text-body);
  font-weight: 500;
  white-space: nowrap;
}

.hero .authors-public .author {
  color: #f8fafc;
}

.authors-public sup,
.affiliations-public sup {
  color: var(--accent-dark);
  font-size: 0.68em;
  font-weight: 700;
  margin-left: 0.08em;
}

.author.anon {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

.affiliations {
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  gap: 0.25rem 1.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.affiliations-public {
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
}

.affiliations-public .author-note {
  flex-basis: 100%;
  font-size: 0.86rem;
  margin-top: 0.2rem;
}

.hero .affiliations-public {
  color: #dce3eb;
  margin-bottom: 0;
}

.hero .authors-public sup,
.hero .affiliations-public sup {
  color: #fdba74;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.btn {
  align-items: center;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 500;
  gap: 0.45rem;
  padding: 0.55rem 1.2rem;
  transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  text-decoration: none;
}

.btn svg {
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  text-align: center;
}

h3 {
  font-size: 1.28rem;
  line-height: 1.35;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.68;
  margin: 0 auto 3rem;
  max-width: 820px;
  text-align: center;
}

.section-kicker {
  color: var(--accent-dark);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  margin-bottom: 0.5rem;
  text-align: center;
  text-transform: uppercase;
}

.method-explorer {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
  margin: 0 auto;
  max-width: 1280px;
  overflow: hidden;
}

.method-explorer-toolbar {
  align-items: center;
  background:
    radial-gradient(circle at 8% 0%, rgba(251, 146, 60, 0.16), transparent 32%),
    linear-gradient(180deg, #fffdfb, #fff);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 1.25rem;
  justify-content: space-between;
  padding: 1rem 1.15rem;
}

.method-stage-tabs {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: inline-grid;
  flex: 0 0 auto;
  gap: 0.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.25rem;
}

.method-stage-tab {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #4b5563;
  cursor: pointer;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 0.62rem 0.9rem;
  text-align: left;
  transition: background 0.16s, box-shadow 0.16s, color 0.16s;
}

.method-stage-tab span {
  color: #9ca3af;
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.12rem;
  text-transform: uppercase;
}

.method-stage-tab.is-active {
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  color: var(--accent-dark);
}

.method-stage-tab.is-active span {
  color: #fb923c;
}

.method-stage-tab:focus-visible,
.method-stream-card:focus-visible,
.method-history-strip button:focus-visible,
.method-demo-toggle:focus-visible,
.method-paper-details summary:focus-visible {
  outline: 3px solid rgba(234, 88, 12, 0.28);
  outline-offset: 2px;
}

.method-explorer-status {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 440px;
  text-align: right;
}

.method-explorer-status::before {
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
  content: "";
  display: inline-block;
  height: 0.48rem;
  margin-right: 0.5rem;
  vertical-align: 0.05rem;
  width: 0.48rem;
}

.method-explorer.has-no-streams .method-explorer-status::before {
  background: #9ca3af;
  box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.14);
}

.method-explorer-body {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(650px, 1.55fr);
}

.method-demo-panel,
.method-pipeline-panel {
  min-width: 0;
  padding: 1.4rem;
}

.method-demo-panel {
  border-right: 1px solid var(--border);
}

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

.method-panel-heading h3 {
  color: #111827;
  font-size: 1.22rem;
}

.method-demo-kind,
.method-pipeline-hint {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #c2410c;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.55rem;
}

.method-pipeline-hint {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
  letter-spacing: 0;
}

.method-demo-video-frame {
  background: #0f172a;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  position: relative;
}

.method-demo-video-frame video {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.method-demo-camera {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  left: 0.65rem;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.5rem;
  position: absolute;
  text-transform: uppercase;
  top: 0.65rem;
}

.method-demo-toggle {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  bottom: 0.65rem;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.35rem;
  padding: 0.35rem 0.58rem;
  position: absolute;
  right: 0.65rem;
}

.method-demo-toggle:hover {
  background: rgba(194, 65, 12, 0.92);
}

.method-demo-toggle-icon {
  font-size: 0.8rem;
}

.method-demo-timeline {
  margin-top: 1rem;
}

#method-demo-slider {
  accent-color: var(--accent);
  cursor: pointer;
  display: block;
  margin: 0;
  width: 100%;
}

.method-demo-time {
  color: var(--text-muted);
  display: flex;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  justify-content: space-between;
  margin-top: 0.28rem;
}

.method-history-strip {
  display: grid;
  gap: 0.38rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0.95rem;
}

.method-history-strip button {
  background: #fff;
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}

.method-history-strip button:hover {
  transform: translateY(-1px);
}

.method-history-strip button.is-active {
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.13);
}

.method-history-strip img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.method-history-strip button span {
  background: rgba(15, 23, 42, 0.76);
  bottom: 0;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  left: 0;
  line-height: 1;
  padding: 0.23rem 0.28rem;
  position: absolute;
  right: 0;
  text-align: center;
}

.method-demo-prompt {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #374151;
  font-size: 0.9rem;
  line-height: 1.45;
  margin-top: 0.95rem;
  padding: 0.7rem 0.8rem;
}

.method-demo-prompt span {
  color: var(--accent-dark);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 0.16rem;
  text-transform: uppercase;
}

.method-pipeline-scroll {
  overflow-x: auto;
  padding: 0.12rem 0.12rem 0.35rem;
}

.method-pipeline-grid {
  align-items: center;
  display: grid;
  gap: 0.65rem 0;
  grid-template-columns:
    minmax(184px, 0.92fr)
    62px
    minmax(150px, 0.72fr)
    54px
    minmax(286px, 1.38fr);
  grid-template-rows: repeat(3, minmax(88px, auto));
  min-width: 736px;
}

.method-stream-card {
  align-items: center;
  background: var(--stream-soft);
  border: 1px solid var(--stream-border);
  border-radius: 12px;
  color: #1f2937;
  cursor: pointer;
  display: grid;
  gap: 0.58rem;
  grid-template-columns: auto 1fr auto;
  min-height: 74px;
  padding: 0.72rem;
  text-align: left;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.method-stream-card:hover {
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.method-stream-card-visual {
  --stream: #eaaa00;
  --stream-border: #f2cf72;
  --stream-soft: #fff9e6;
  grid-column: 1;
  grid-row: 1;
}

.method-stream-card-action {
  --stream: #3b82f6;
  --stream-border: #a8cafb;
  --stream-soft: #eff6ff;
  grid-column: 1;
  grid-row: 2;
}

.method-stream-card-state {
  --stream: #65a30d;
  --stream-border: #bbda8f;
  --stream-soft: #f2fce8;
  grid-column: 1;
  grid-row: 3;
}

.method-stream-card.is-disabled {
  background: #f9fafb;
  border-color: #e5e7eb;
  opacity: 0.46;
}

.method-stream-mark {
  background: var(--stream);
  border-radius: 5px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.72);
  height: 1.05rem;
  width: 1.05rem;
}

.method-stream-card strong,
.method-stream-card small {
  display: block;
}

.method-stream-card strong {
  font-size: 0.92rem;
  line-height: 1.25;
}

.method-stream-card small {
  color: #6b7280;
  font-size: 0.76rem;
  line-height: 1.3;
  margin-top: 0.16rem;
}

.method-stream-state {
  background: #fff;
  border: 1px solid var(--stream-border);
  border-radius: 999px;
  color: var(--stream);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.27rem 0.4rem;
  text-transform: uppercase;
}

.method-stream-card.is-disabled .method-stream-state {
  border-color: #d1d5db;
  color: #9ca3af;
}

.method-flow-track {
  --stream: #9ca3af;
  background: linear-gradient(90deg, transparent, var(--stream) 22%, var(--stream) 82%, transparent);
  grid-column: 2;
  height: 2px;
  opacity: 0.82;
  position: relative;
}

.method-flow-track::after,
.method-output-track::after {
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--stream);
  border-top: 4px solid transparent;
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.method-flow-track-visual {
  --stream: #eaaa00;
  grid-row: 1;
}

.method-flow-track-action {
  --stream: #3b82f6;
  grid-row: 2;
}

.method-flow-track-state {
  --stream: #65a30d;
  grid-row: 3;
}

.method-flow-track.is-disabled {
  filter: grayscale(1);
  opacity: 0.15;
}

.method-flow-track > span,
.method-output-track > span {
  background: var(--stream);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  height: 0.58rem;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.58rem;
}

.method-flow-track > span:nth-child(2),
.method-output-track > span:nth-child(2) {
  animation-delay: 0.72s;
}

.method-flow-track > span:nth-child(3),
.method-output-track > span:nth-child(3) {
  animation-delay: 1.44s;
}

.method-memory-node {
  align-items: center;
  align-self: stretch;
  background:
    radial-gradient(circle at 50% 20%, rgba(251, 146, 60, 0.2), transparent 42%),
    #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  grid-column: 3;
  grid-row: 1 / 4;
  justify-content: center;
  margin: 0 0.6rem;
  min-height: 276px;
  padding: 1rem 0.75rem;
  text-align: center;
  transition: border-color 0.2s, filter 0.2s, opacity 0.2s;
}

.method-memory-node > p {
  color: #ea580c;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.method-memory-node h4 {
  color: #9a3412;
  font-size: 1.08rem;
  line-height: 1.25;
  margin: 0.16rem 0 0.75rem;
}

.method-memory-token-grid {
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(4, 0.8rem);
}

.method-memory-token-grid span {
  background: #ea580c;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  height: 0.8rem;
  transition: opacity 0.2s, transform 0.2s;
  width: 0.8rem;
}

.method-memory-token-grid [data-memory-stream="visual"] {
  background: #eaaa00;
}

.method-memory-token-grid [data-memory-stream="action"] {
  background: #3b82f6;
}

.method-memory-token-grid [data-memory-stream="state"] {
  background: #65a30d;
}

.method-memory-token-grid [data-memory-stream="mixed"] {
  background: #ea580c;
}

.method-memory-token-grid span.is-muted {
  opacity: 0.12;
  transform: scale(0.78);
}

.method-memory-caption {
  color: #9a3412;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0.7rem;
}

.method-memory-node.is-empty {
  border-color: #d1d5db;
  filter: grayscale(0.8);
  opacity: 0.56;
}

.method-output-track {
  --stream: #ea580c;
  align-self: center;
  background: linear-gradient(90deg, transparent, var(--stream) 18%, var(--stream) 82%, transparent);
  grid-column: 4;
  grid-row: 1 / 4;
  height: 2px;
  position: relative;
}

.method-output-track.is-disabled {
  filter: grayscale(1);
  opacity: 0.15;
}

.method-stage-output {
  align-self: stretch;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  display: flex;
  grid-column: 5;
  grid-row: 1 / 4;
  min-height: 276px;
  overflow: hidden;
}

.method-stage-content {
  animation: method-panel-enter 0.28s ease both;
  padding: 1rem;
  width: 100%;
}

.method-stage-content[hidden] {
  display: none;
}

.method-stage-content h4 {
  color: #1f2937;
  font-size: 1.04rem;
  line-height: 1.3;
  margin-bottom: 0.85rem;
}

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

.method-objective-grid > div {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-height: 83px;
  padding: 0.62rem;
  transition: filter 0.2s, opacity 0.2s, transform 0.2s;
}

.method-objective-grid > div.is-disabled {
  filter: grayscale(1);
  opacity: 0.33;
  transform: scale(0.97);
}

.method-objective-grid strong,
.method-objective-grid small {
  display: block;
}

.method-objective-grid strong {
  color: #374151;
  font-size: 0.82rem;
  line-height: 1.25;
  margin-top: 0.38rem;
}

.method-objective-grid small {
  color: #6b7280;
  font-size: 0.7rem;
  line-height: 1.35;
  margin-top: 0.18rem;
}

.method-objective-icon {
  --objective: #9ca3af;
  display: block;
  height: 1.04rem;
  position: relative;
  width: 2.2rem;
}

.method-objective-icon::before {
  background: var(--objective);
  border-radius: 3px;
  box-shadow:
    0 0.39rem 0 color-mix(in srgb, var(--objective) 68%, white),
    0 0.78rem 0 color-mix(in srgb, var(--objective) 38%, white);
  content: "";
  height: 0.25rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 2.2rem;
}

.method-objective-icon-visual {
  --objective: #eaaa00;
}

.method-objective-icon-action {
  --objective: #3b82f6;
}

.method-objective-icon-state {
  --objective: #65a30d;
}

.method-progress-objective {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.method-progress-value {
  color: #ea580c;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.method-progress-bar {
  background: #ffedd5;
  border-radius: 999px;
  display: block;
  height: 0.34rem;
  margin-top: 0.52rem;
  overflow: hidden;
}

.method-progress-bar > span {
  background: linear-gradient(90deg, #fb923c, #ea580c);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 0.12s linear;
  width: 0%;
}

.method-policy-inputs {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(92px, 0.75fr);
}

.method-current-observation {
  background: #111827;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
}

.method-current-observation canvas {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  width: 100%;
}

.method-current-observation figcaption {
  background: rgba(15, 23, 42, 0.76);
  bottom: 0;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  left: 0;
  padding: 0.25rem 0.4rem;
  position: absolute;
  right: 0;
}

.method-policy-context {
  display: grid;
  gap: 0.45rem;
}

.method-policy-context span {
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #4b5563;
  display: flex;
  font-size: 0.7rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.3;
  padding: 0.42rem;
  text-align: center;
}

.method-policy-context span:last-child {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.method-vla-path {
  align-items: center;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.78fr);
  margin-top: 0.7rem;
}

.method-vla-path > div {
  background: #fff;
  border: 1px solid #fdba74;
  border-radius: 9px;
  min-width: 0;
  padding: 0.55rem;
  text-align: center;
}

.method-vla-path strong,
.method-vla-path small {
  display: block;
}

.method-vla-path strong {
  color: #9a3412;
  font-size: 0.76rem;
  line-height: 1.25;
}

.method-vla-path small {
  color: #6b7280;
  font-size: 0.66rem;
  line-height: 1.3;
  margin-top: 0.18rem;
}

.method-vla-path > span {
  color: #ea580c;
  font-size: 1.1rem;
  font-weight: 700;
}

.method-vla-path .method-action-chunk {
  background: #fff1e8;
  border-style: dashed;
}

.method-explorer.is-animated .method-flow-track:not(.is-disabled) > span,
.method-explorer.is-animated .method-output-track > span {
  animation: method-token-flow 2.2s linear infinite;
}

.method-explorer.is-animated .method-memory-token-grid span:not(.is-muted) {
  animation: method-memory-breathe 2.4s ease-in-out infinite;
}

.method-explorer.is-animated .method-memory-token-grid span:nth-child(3n + 1) {
  animation-delay: 0.4s;
}

.method-explorer.is-animated .method-memory-token-grid span:nth-child(3n + 2) {
  animation-delay: 0.8s;
}

.method-paper-details {
  margin: 1.25rem auto 0;
  max-width: 1280px;
}

.method-paper-details summary {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #4b5563;
  cursor: pointer;
  display: flex;
  font-size: 0.86rem;
  font-weight: 700;
  justify-content: space-between;
  list-style: none;
  padding: 0.8rem 1rem;
}

.method-paper-details summary::-webkit-details-marker {
  display: none;
}

.method-paper-details summary span:last-child {
  color: var(--accent);
  font-size: 1.25rem;
  transition: transform 0.2s;
}

.method-paper-details[open] summary span:last-child {
  transform: rotate(45deg);
}

.method-paper-details .method-overview {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-top: 0.75rem;
  padding: 0.8rem 0.8rem 1rem;
}

@keyframes method-token-flow {
  0% {
    left: 0;
    opacity: 0;
  }

  14%,
  78% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes method-memory-breathe {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    transform: translateY(0);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.56),
      0 3px 8px rgba(234, 88, 12, 0.18);
    transform: translateY(-1px);
  }
}

@keyframes method-panel-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

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

.method-overview {
  margin: 0 auto;
  max-width: 1240px;
}

.method-image-scroll {
  background: #fff;
  border-radius: 16px;
  overflow-x: auto;
}

.method-overview img {
  display: block;
  height: auto;
  max-height: 410px;
  object-fit: contain;
  width: 100%;
}

.method-overview figcaption {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 1.15rem auto 0;
  max-width: 980px;
  text-align: center;
}

.result-highlight-grid {
  align-items: stretch;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1240px;
}

.result-highlight-panel {
  align-items: center;
  aspect-ratio: 35 / 27;
  background: #fff;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.result-highlight-panel img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.contributions-highlight {
  margin: 3.1rem auto 0;
  max-width: 1240px;
}

.contributions-title {
  color: var(--accent-dark);
  font-size: 1.5rem;
  margin-bottom: 1.35rem;
  text-align: center;
}

.contributions-list {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.contributions-list li {
  align-items: center;
  background: linear-gradient(155deg, #fffaf7 0%, #fff4ed 100%);
  border: 1px solid #fed7aa;
  border-radius: 14px;
  border-top: 4px solid var(--accent);
  box-shadow: 0 8px 22px rgba(154, 52, 18, 0.055);
  color: var(--text-body);
  display: flex;
  flex-direction: column;
  font-size: 0.98rem;
  gap: 0.85rem;
  line-height: 1.62;
  padding: 1.35rem 1.4rem 1.45rem;
  text-align: center;
}

.contributions-list strong {
  color: var(--accent-dark);
}

.contribution-number {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(194, 65, 12, 0.2);
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.experiment-index {
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2.5rem auto 0;
  max-width: 1240px;
}

.experiment-index > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.4rem;
  padding: 1.45rem 1.75rem;
}

.experiment-index > div + div {
  border-left: 1px solid var(--border);
}

.experiment-index strong {
  color: var(--text);
  font-size: 1.32rem;
  line-height: 1.25;
  margin-right: 0.25rem;
}

.experiment-index a {
  border-bottom: 2px solid #fdba74;
  color: var(--accent-dark);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.35;
}

.experiment-index a:hover {
  border-bottom-color: var(--accent-dark);
  text-decoration: none;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

[hidden] {
  display: none !important;
}

.results-figure,
.figure-card {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  min-width: 0;
  width: 100%;
}

.results-figure {
  max-width: 1020px;
}

.results-figure img,
.figure-card img {
  border-radius: 10px;
  display: block;
  height: auto;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100%;
}

.results-figure > img {
  max-height: 470px;
}

.figure-card > img {
  max-height: 390px;
}

.results-figure figcaption,
.figure-card figcaption {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 1rem auto 0;
  max-width: 920px;
  order: 1;
  text-align: center;
}

.results-figure-narrow {
  max-width: 700px;
}

.figure-grid {
  align-items: stretch;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1180px;
}

.figure-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--panel-shadow);
  padding: 1.5rem;
}

.figure-plot-title {
  color: #2f3035;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  text-align: center;
}

.figure-card sub {
  font-size: 0.75em;
}

#memory-encoding .container-wide {
  max-width: 1500px;
}

#memory-encoding .figure-grid {
  gap: 1.25rem;
  max-width: 1450px;
}

#memory-encoding .figure-card {
  padding: 1.2rem;
}

#memory-encoding .figure-card > img {
  max-height: 460px;
}

#memory-learning .figure-grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.analysis-figure {
  max-width: 1180px;
}

.analysis-image-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  width: 100%;
}

.rollout-shell {
  background: transparent;
  margin: 0 auto;
  max-width: 1180px;
}

.task-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.task-tab {
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.45rem 1.3rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.task-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.task-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.task-tab:focus-visible,
.attention-methods button:focus-visible,
.trial-button:focus-visible,
.robocasa-trial-button:focus-visible {
  outline: 3px solid rgba(234, 88, 12, 0.2);
  outline-offset: -3px;
}

.rollout-result-overview {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  padding: 1.5rem;
}

.rollout-result-figure {
  min-width: 0;
}

.rollout-result-figure img {
  border-radius: 10px;
  display: block;
  height: auto;
  max-height: 260px;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100%;
}

.rollout-result-copy {
  min-width: 0;
}

.rollout-result-copy > p:not(.eyebrow) {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.68;
  margin-top: 0.75rem;
}

.rollout-result-copy > .result-analysis {
  margin-top: 1rem;
  max-width: none;
}

.rollout-result-copy .table-toggle,
.rollout-result-copy .figure-data {
  margin-left: 0;
}

.fold-context {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  margin-top: 1.25rem;
  padding: 1.5rem;
}

.subsection-heading,
.control-heading,
.trial-browser-heading,
.rollout-meta {
  align-items: flex-end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.subsection-heading {
  margin-bottom: 1.25rem;
}

.subsection-heading > p,
.rollout-meta > p {
  color: var(--text-muted);
  font-size: 0.95rem;
  text-align: right;
}

.eyebrow {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: 0.18rem;
  text-transform: uppercase;
}

.fold-context-example {
  margin: 0 auto;
  max-width: 1080px;
  min-width: 0;
}

.fold-context-video-frame {
  background: #111;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
}

.fold-context-video-frame video {
  aspect-ratio: 3 / 1;
  display: block;
  object-fit: contain;
  width: 100%;
}

.fold-context-video-frame > span {
  background: rgba(17, 24, 39, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  left: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.34rem 0.6rem;
  position: absolute;
  text-transform: uppercase;
  top: 0.75rem;
}

.fold-context-example figcaption {
  color: var(--text-body);
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.55rem;
  text-align: center;
}

.rollout-controls {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  margin-top: 1.25rem;
  padding: 1.35rem 1.5rem 1.1rem;
}

.rollout-score {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.method-slider,
.trial-slider,
.attention-timeline input {
  accent-color: var(--accent);
  appearance: none;
  background: var(--border);
  border-radius: 999px;
  cursor: pointer;
  display: block;
  height: 6px;
  margin: 0.85rem 0 0;
  outline: none;
  width: 100%;
}

.method-slider::-webkit-slider-thumb,
.trial-slider::-webkit-slider-thumb,
#rmbench-method-slider::-webkit-slider-thumb,
.attention-timeline input::-webkit-slider-thumb {
  appearance: none;
  background: var(--accent);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.28);
  cursor: grab;
  height: 20px;
  width: 20px;
}

.method-slider::-moz-range-thumb,
.trial-slider::-moz-range-thumb,
#rmbench-method-slider::-moz-range-thumb,
.attention-timeline input::-moz-range-thumb {
  background: var(--accent);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: grab;
  height: 14px;
  width: 14px;
}

.method-scale {
  color: var(--text-muted);
  display: grid;
  font-size: 0.94rem;
  font-weight: 500;
  gap: 0.25rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  line-height: 1.3;
  margin-top: 0.45rem;
  text-align: center;
}

.method-scale span {
  min-width: 0;
}

.method-scale span:first-child {
  text-align: left;
}

.method-scale span:last-child {
  text-align: right;
}

.method-scale .is-active {
  color: var(--accent-dark);
  font-weight: 700;
}

.rollout-layout {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  margin-top: 1rem;
  overflow: hidden;
}

.rollout-player {
  min-width: 0;
  padding: 1.5rem;
}

.video-frame {
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.video-frame video {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  width: 100%;
}

.outcome-badge {
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  left: 0.75rem;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.62rem;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: 0.75rem;
}

.outcome-badge.is-success {
  background: rgba(21, 128, 61, 0.94);
}

.outcome-badge.is-failure {
  background: rgba(185, 28, 28, 0.94);
}

.rollout-meta {
  margin-top: 0.85rem;
}

.trial-failure-detail {
  align-items: start;
  background: #fff7f7;
  border: 1px solid #fecaca;
  border-left: 4px solid #b91c1c;
  border-radius: 10px;
  display: grid;
  gap: 0.2rem;
  grid-template-columns: 1fr;
  margin-top: 0.8rem;
  padding: 0.72rem 0.85rem;
}

.trial-failure-detail > span {
  color: #991b1b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.trial-failure-detail p {
  color: #7f1d1d;
  font-size: 0.92rem;
  line-height: 1.55;
}

.memer-trace-toggle {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--text-body);
  cursor: pointer;
  display: flex;
  font-size: 0.86rem;
  font-weight: 650;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 0.8rem;
  padding: 0.68rem 0.8rem;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: 100%;
}

.memer-trace-toggle:hover {
  background: #fff7ed;
  border-color: #fdba74;
  color: var(--accent-dark);
}

.memer-trace-toggle:focus-visible {
  outline: 3px solid rgba(234, 88, 12, 0.2);
  outline-offset: 2px;
}

.memer-trace-toggle svg {
  fill: none;
  flex: 0 0 auto;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 0.15s;
  width: 16px;
}

.memer-trace-toggle[aria-expanded="true"] {
  background: #fff7ed;
  border-color: #fdba74;
  color: var(--accent-dark);
}

.memer-trace-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.memer-trace-panel {
  background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
  border-top: 1px solid var(--border);
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  padding: 1.35rem 1.5rem 1.5rem;
}

.memer-trace-heading {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-width: 0;
}

.memer-trace-heading > div {
  min-width: 0;
}

.memer-trace-heading h3 {
  font-size: 1.18rem;
  line-height: 1.35;
}

.memer-trace-heading output {
  color: var(--text-muted);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.memer-trace-focus {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
  margin-top: 1rem;
}

.memer-trace-keyframe {
  background: #111827;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  margin: 0;
  overflow: hidden;
}

.memer-trace-keyframe img {
  aspect-ratio: 2 / 1;
  display: block;
  object-fit: cover;
  width: 100%;
}

.memer-trace-keyframe figcaption {
  background: #111827;
  color: #f9fafb;
  font-size: 0.74rem;
  padding: 0.42rem 0.6rem;
}

.memer-trace-prediction {
  align-content: center;
  background: #fff;
  border: 1px solid #fed7aa;
  border-left: 4px solid var(--accent);
  border-radius: 9px;
  display: grid;
  min-width: 0;
  padding: 1rem 1.1rem;
}

.memer-trace-prediction > span,
.memer-trace-memory > p {
  color: var(--accent-dark);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.memer-trace-prediction > p {
  color: var(--text);
  font-size: clamp(1.08rem, 1.8vw, 1.45rem);
  font-weight: 650;
  line-height: 1.35;
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
}

.memer-trace-prediction dl {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.9rem;
}

.memer-trace-prediction dl div {
  display: grid;
  gap: 0.05rem;
}

.memer-trace-prediction dt {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.memer-trace-prediction dd {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.memer-trace-scrubber {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
}

.memer-trace-scrubber label {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.memer-trace-scrubber input {
  accent-color: var(--accent);
  cursor: pointer;
  width: 100%;
}

.memer-trace-memory {
  margin-top: 0.9rem;
}

.memer-keyframe-bank {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin-top: 0.45rem;
  max-width: 100%;
  min-width: 0;
}

.memer-keyframe-bank figure {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  min-width: 0;
  overflow: hidden;
}

.memer-keyframe-bank figure.is-newest {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.memer-keyframe-bank img {
  aspect-ratio: 2 / 1;
  display: block;
  object-fit: cover;
  width: 100%;
}

.memer-keyframe-bank figcaption {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.25;
  padding: 0.3rem 0.38rem;
}

.memer-keyframe-bank figure.is-newest figcaption {
  color: var(--accent-dark);
  font-weight: 700;
}

.memer-trace-note {
  color: var(--text-muted);
  font-size: 0.73rem;
  line-height: 1.5;
  margin-top: 0.75rem;
}

.rollout-meta h3,
.trial-browser-heading h3,
.control-heading h3 {
  font-variant-numeric: tabular-nums;
}

.trial-browser {
  background: #f9fafb;
  border-left: 1px solid var(--border);
  min-width: 0;
  padding: 1.5rem;
}

.trial-browser-heading output {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.trial-grid {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}

.trial-button {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
  min-height: 2rem;
  padding: 0.38rem 0.25rem;
}

.trial-button.is-success {
  border-color: #86b997;
  color: #166534;
}

.trial-button.is-failure {
  border-color: #d7a0a0;
  color: #991b1b;
}

.trial-button.is-active {
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(15, 23, 42, 0.24);
}

.trial-button.is-success.is-active {
  background: #15803d;
  border-color: #15803d;
}

.trial-button.is-failure.is-active {
  background: #b91c1c;
  border-color: #b91c1c;
}

.trial-button.is-success:focus-visible,
.robocasa-trial-button.is-success:focus-visible {
  outline-color: rgba(21, 128, 61, 0.32);
}

.trial-button.is-failure:focus-visible,
.robocasa-trial-button.is-failure:focus-visible {
  outline-color: rgba(185, 28, 28, 0.32);
}

.trial-slider::-webkit-slider-thumb {
  background: var(--trial-outcome-color, #15803d);
}

.trial-slider::-moz-range-thumb {
  background: var(--trial-outcome-color, #15803d);
}

.trial-key {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: 0.73rem;
  gap: 0.38rem;
  margin-top: 1rem;
}

.key-dot {
  border-radius: 50%;
  display: inline-block;
  height: 0.52rem;
  margin-left: 0.35rem;
  width: 0.52rem;
}

.key-dot:first-child {
  margin-left: 0;
}

.key-dot.success {
  background: #15803d;
}

.key-dot.failure {
  background: #b91c1c;
}

.fold-trial-matrix {
  margin-top: 1rem;
}

.fold-color-group {
  border-top: 1px solid var(--border);
  padding: 0.85rem 0;
}

.fold-color-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.fold-color-heading {
  color: var(--text-body);
  font-size: 0.77rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.fold-style-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fold-style-label {
  color: var(--text-muted);
  display: block;
  font-size: 0.66rem;
  line-height: 1.2;
  margin-bottom: 0.28rem;
}

.fold-style-trials {
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.result-analysis {
  background: linear-gradient(135deg, #fffaf7 0%, #fff7ed 100%);
  border: 1px solid #fed7aa;
  border-left: 5px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(154, 52, 18, 0.045);
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.65;
  margin: 1.4rem auto 0;
  max-width: 980px;
  order: 4;
  overflow: hidden;
  padding: 1rem 1.25rem 1.05rem;
  text-align: left;
}

.result-analysis > strong:first-child {
  color: var(--accent-dark);
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.simulation-rollout-explorer {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 3rem auto 0;
  max-width: 1000px;
  padding: 1.5rem;
}

.simulation-controls {
  align-items: end;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.45fr);
}

.simulation-controls label > span,
.simulation-method-heading > span {
  color: var(--text-muted);
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.simulation-controls select {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  height: 2.55rem;
  padding: 0 2.2rem 0 0.75rem;
  width: 100%;
}

.simulation-controls select:focus {
  border-color: var(--accent);
  outline: none;
}

.simulation-method-heading {
  align-items: baseline;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto 1fr auto;
}

.simulation-method-heading > span {
  margin-bottom: 0;
}

.simulation-method-heading strong {
  font-size: 1.14rem;
}

.simulation-method-heading output {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

#rmbench-method-slider {
  appearance: none;
  background: var(--border);
  border-radius: 999px;
  cursor: pointer;
  display: block;
  height: 6px;
  margin-top: 0.45rem;
  outline: none;
  width: 100%;
}

.simulation-method-scale {
  color: var(--text-muted);
  display: grid;
  font-size: 0.94rem;
  font-weight: 500;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  line-height: 1.3;
  margin-top: 0.35rem;
  text-align: center;
}

.simulation-method-scale span:first-child {
  text-align: left;
}

.simulation-method-scale span:last-child {
  text-align: right;
}

.simulation-method-scale .is-active {
  color: var(--accent-dark);
  font-weight: 700;
}

.simulation-video-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.5rem auto 0;
  max-width: 900px;
}

.simulation-video-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  min-width: 0;
}

.simulation-video-frame {
  background: #111;
  overflow: hidden;
  position: relative;
}

.simulation-video-frame video {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: contain;
  width: 100%;
}

.simulation-video-card figcaption {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem 0.65rem;
  text-align: center;
}

.simulation-video-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0.8rem auto 0;
  max-width: 760px;
  text-align: center;
}

.task-prompt-card {
  align-items: baseline;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
}

.task-prompt-label {
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.task-prompt-card p {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

.realworld-task-prompt {
  margin: 0 0 1.25rem;
}

.robocasa-rollout-explorer {
  --robocasa-method-color: #f47a00;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--panel-shadow);
  margin: 3.5rem auto 0;
  max-width: 1180px;
  padding: 1.75rem;
}

.robocasa-rollout-explorer .task-prompt-card {
  background: var(--bg-alt);
}

.robocasa-controls {
  align-items: end;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
  padding-bottom: 1.5rem;
}

.robocasa-task-control > span,
.robocasa-method-heading > span {
  color: var(--text-muted);
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.robocasa-task-control select {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  height: 2.7rem;
  padding: 0 2.3rem 0 0.8rem;
  width: 100%;
}

.robocasa-task-control select:focus {
  border-color: var(--robocasa-method-color);
  outline: none;
}

.robocasa-method-heading {
  align-items: baseline;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto 1fr auto;
}

.robocasa-method-heading > span {
  margin-bottom: 0;
}

.robocasa-method-heading strong {
  color: var(--robocasa-method-color);
  font-size: 1.22rem;
}

.robocasa-method-heading output {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

#robocasa-method-slider,
#robocasa-trial-slider {
  appearance: none;
  background: var(--border);
  border-radius: 999px;
  cursor: pointer;
  display: block;
  height: 6px;
  outline: none;
  width: 100%;
}

#robocasa-method-slider {
  margin-top: 0.55rem;
}

#robocasa-trial-slider {
  margin-top: 0.75rem;
}

#robocasa-method-slider::-webkit-slider-thumb,
#robocasa-trial-slider::-webkit-slider-thumb {
  appearance: none;
  background: var(--robocasa-method-color);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.28);
  cursor: grab;
  height: 20px;
  width: 20px;
}

#robocasa-method-slider::-moz-range-thumb,
#robocasa-trial-slider::-moz-range-thumb {
  background: var(--robocasa-method-color);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: grab;
  height: 14px;
  width: 14px;
}

#robocasa-trial-slider::-webkit-slider-thumb {
  background: var(--robocasa-trial-color, #15803d);
}

#robocasa-trial-slider::-moz-range-thumb {
  background: var(--robocasa-trial-color, #15803d);
}

.robocasa-method-scale {
  color: var(--text-muted);
  display: grid;
  font-size: 1.06rem;
  font-weight: 500;
  gap: 0.35rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  line-height: 1.35;
  margin-top: 0.45rem;
  text-align: center;
}

.robocasa-method-scale span {
  align-items: center;
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  min-width: 0;
}

.robocasa-method-scale span::before {
  background: var(--marker-color);
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 0.55rem;
  width: 0.55rem;
}

.robocasa-method-scale span:first-child {
  justify-content: flex-start;
  text-align: left;
}

.robocasa-method-scale span:last-child {
  justify-content: flex-end;
  text-align: right;
}

.robocasa-method-scale .is-active {
  color: var(--robocasa-method-color);
  font-weight: 700;
}

.robocasa-rollout-summary,
.robocasa-trial-heading {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.robocasa-rollout-summary {
  margin-top: 1.5rem;
}

.robocasa-rollout-summary > div > p:last-child {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.archive-outcome {
  border-radius: 999px;
  color: #fff;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.75rem;
  text-transform: uppercase;
}

.archive-outcome.is-success {
  background: #15803d;
}

.archive-outcome.is-failure {
  background: #b91c1c;
}

.robocasa-video-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.2rem;
}

.robocasa-video-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 0;
  overflow: hidden;
}

.robocasa-video-frame {
  background: #111;
  isolation: isolate;
  position: relative;
}

.robocasa-video-frame video {
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: contain;
  width: 100%;
}

.robocasa-video-status {
  align-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(244, 122, 0, 0.12), transparent 42%),
    linear-gradient(145deg, #f8f6f2, #eee9e1);
  color: #5f574d;
  display: flex;
  flex-direction: column;
  font-size: 0.88rem;
  font-weight: 600;
  gap: 0.65rem;
  inset: 0;
  justify-content: center;
  letter-spacing: 0.01em;
  padding: 1rem;
  position: absolute;
  text-align: center;
  transition: opacity 180ms ease;
  z-index: 1;
}

.robocasa-video-frame[data-video-state="ready"] .robocasa-video-status {
  opacity: 0;
  pointer-events: none;
}

.robocasa-video-frame[data-video-state="error"] .robocasa-video-status {
  background:
    radial-gradient(circle at 50% 42%, rgba(185, 28, 28, 0.08), transparent 42%),
    linear-gradient(145deg, #fffafa, #f3e9e7);
  color: #7f1d1d;
}

.robocasa-video-spinner {
  animation: robocasa-video-spin 800ms linear infinite;
  border: 3px solid rgba(244, 122, 0, 0.2);
  border-radius: 50%;
  border-top-color: var(--robocasa-method-color, #f47a00);
  height: 1.8rem;
  width: 1.8rem;
}

.robocasa-video-frame[data-video-state="error"] .robocasa-video-spinner {
  display: none;
}

.robocasa-video-retry {
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0.42rem 0.85rem;
}

.robocasa-video-retry:hover,
.robocasa-video-retry:focus-visible {
  background: #7f1d1d;
  color: #fff;
}

@keyframes robocasa-video-spin {
  to {
    transform: rotate(360deg);
  }
}

.robocasa-video-card figcaption {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0.6rem 0.75rem 0.7rem;
  text-align: center;
}

.robocasa-trial-browser {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 1.25rem;
  padding: 1.25rem;
}

.robocasa-trial-heading output {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.robocasa-trial-grid {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  margin-top: 1rem;
}

.robocasa-trial-button {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-height: 2rem;
  padding: 0.35rem 0.2rem;
}

.robocasa-trial-button.is-success {
  border-color: #86b997;
  color: #166534;
}

.robocasa-trial-button.is-failure {
  border-color: #d7a0a0;
  color: #991b1b;
}

.robocasa-trial-button.is-active {
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(15, 23, 42, 0.24);
}

.robocasa-trial-button.is-success.is-active {
  background: #15803d;
  border-color: #15803d;
}

.robocasa-trial-button.is-failure.is-active {
  background: #b91c1c;
  border-color: #b91c1c;
}

.robocasa-archive-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0.9rem auto 0;
  max-width: 850px;
  text-align: center;
}

.appendix-result {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  margin: 3.25rem auto 0;
  max-width: 1120px;
  padding: 1.75rem;
}

.ablation-pair-figure {
  max-width: 1050px;
}

.ablation-image-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  width: 100%;
}

.ablation-image-scroll img {
  border-radius: 10px;
  display: block;
  height: auto;
  max-height: 440px;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100%;
}

.supervision-ablation .result-analysis {
  max-width: 1000px;
}

.ablation-summary {
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.ablation-summary > div {
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 1rem 0.75rem;
  text-align: center;
}

.ablation-summary > div:last-child {
  border-right: 0;
}

.ablation-summary strong,
.ablation-summary span {
  display: block;
}

.ablation-summary strong {
  color: var(--text);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.ablation-summary span {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.ablation-summary .is-best {
  background: #fff7ed;
}

.supplemental-table {
  margin-top: 1rem;
}

.attention-explorer {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 3.5rem auto 0;
  max-width: 1240px;
  padding: 1.5rem;
}

.attention-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.attention-methods button {
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.42rem 1.2rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.attention-methods button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.attention-methods button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.attention-methods button.is-active:hover {
  color: #fff;
}

.attention-stage {
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: hidden;
}

.attention-stage img {
  display: block;
  height: auto;
  width: 100%;
}

.attention-timeline {
  margin-top: 0.8rem;
}

.attention-time-labels {
  color: var(--text-muted);
  display: flex;
  font-size: 0.84rem;
  justify-content: space-between;
}

.attention-time-labels output {
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.attention-timeline input {
  margin-top: 0.35rem;
}

.attention-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0.8rem auto 0;
  max-width: 900px;
  text-align: center;
}

.table-toggle {
  align-items: center;
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 999px;
  color: #4b5563;
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  font-weight: 500;
  gap: 0.35rem;
  justify-content: center;
  margin: 1rem auto 0;
  order: 2;
  padding: 0.38rem 0.9rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.table-toggle:hover {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
}

.table-toggle[aria-expanded="true"] {
  background: #fff7ed;
  border-color: #fdba74;
  color: var(--accent-dark);
}

.table-toggle:focus-visible {
  outline: 3px solid rgba(234, 88, 12, 0.2);
  outline-offset: 2px;
}

.table-toggle svg {
  fill: none;
  height: 14px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 0.15s;
  width: 14px;
}

.table-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.figure-data {
  margin: 1rem auto 0;
  max-width: 1100px;
  min-width: 0;
  order: 3;
  width: 100%;
}

.figure-data[hidden] {
  display: none;
}

.table-scroll {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

.data-table {
  border-collapse: collapse;
  color: #374151;
  font-size: 0.84rem;
  line-height: 1.45;
  min-width: 100%;
  width: max-content;
}

.data-table caption {
  background: #fff;
  color: #4b5563;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.8rem 0.9rem;
  text-align: left;
}

.data-table th,
.data-table td {
  border-top: 1px solid var(--border);
  padding: 0.58rem 0.75rem;
  text-align: center;
  white-space: nowrap;
}

.data-table thead th {
  background: #f3f4f6;
  color: #374151;
  font-weight: 600;
}

.data-table tbody th {
  background: #fff;
  color: #374151;
  font-weight: 600;
  text-align: left;
}

.data-table tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) th {
  background: #fafafa;
}

.data-table tbody tr.is-selected td,
.data-table tbody tr.is-selected th {
  background: #fff7ed;
  color: var(--accent-dark);
}

.data-table th:first-child {
  left: 0;
  position: sticky;
  z-index: 1;
}

.data-table thead th:first-child {
  z-index: 2;
}

.data-table th[rowspan] {
  vertical-align: top;
}

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

@media (min-width: 701px) and (min-aspect-ratio: 16 / 9) {
  .hero-rollout-grid {
    object-fit: contain;
  }
}

@media (max-width: 1120px) {
  .method-explorer-body {
    grid-template-columns: 1fr;
  }

  .method-demo-panel {
    border-bottom: 1px solid var(--border);
    border-right: 0;
  }

  .method-demo-panel > :not(.method-panel-heading) {
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
  }

  .method-pipeline-grid {
    grid-template-columns:
      minmax(200px, 0.88fr)
      72px
      minmax(170px, 0.7fr)
      64px
      minmax(320px, 1.3fr);
    min-width: 860px;
  }
}

@media (max-width: 900px) {
  .result-highlight-grid {
    gap: 0.8rem;
  }

  .contributions-list {
    grid-template-columns: 1fr;
  }

  .contributions-list li {
    margin: 0 auto;
    max-width: 760px;
    width: 100%;
  }

  .experiment-index {
    grid-template-columns: 1fr;
  }

  .experiment-index > div + div {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .figure-grid {
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  #memory-encoding .figure-grid,
  #memory-learning .figure-grid {
    grid-template-columns: 1fr;
  }

  .figure-card {
    max-width: 860px;
  }

  .robocasa-controls {
    grid-template-columns: 1fr;
  }

  .rollout-layout {
    grid-template-columns: 1fr;
  }

  .trial-browser {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .memer-keyframe-bank {
    display: flex;
    overflow-x: auto;
    padding: 2px 2px 0.35rem;
    scroll-snap-type: x mandatory;
  }

  .memer-keyframe-bank figure {
    flex: 0 0 132px;
    scroll-snap-align: start;
  }
}

@media (max-width: 700px) {
  body {
    zoom: 1;
  }

  .method-explorer-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }

  .method-stage-tabs {
    width: 100%;
  }

  .method-stage-tab {
    text-align: center;
  }

  .method-explorer-status {
    max-width: none;
    text-align: left;
  }

  .method-demo-panel,
  .method-pipeline-panel {
    padding: 1rem;
  }

  .method-pipeline-hint {
    display: none;
  }

  .method-history-strip {
    display: flex;
    overflow-x: auto;
    padding: 2px 2px 0.3rem;
    scroll-snap-type: x mandatory;
  }

  .method-history-strip button {
    flex: 0 0 94px;
    scroll-snap-align: start;
  }

  .method-pipeline-scroll {
    margin-right: -1rem;
    padding-right: 1rem;
  }

  .method-paper-details summary {
    font-size: 0.8rem;
  }

  .result-highlight-grid {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scroll-snap-type: x mandatory;
  }

  .result-highlight-panel {
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: center;
  }

  .attention-stage img {
    max-width: none;
    min-width: 900px;
  }

  .analysis-image-scroll img {
    max-width: none;
    min-width: 960px;
  }

  .rollout-result-overview,
  .simulation-controls {
    grid-template-columns: 1fr;
  }

  .robocasa-method-heading {
    grid-template-columns: auto 1fr;
  }

  .robocasa-method-heading output {
    grid-column: 1 / -1;
  }

  .robocasa-video-grid {
    grid-template-columns: 1fr;
  }

  .robocasa-trial-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .rollout-result-figure img {
    max-height: 240px;
  }

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

  .ablation-summary > div:nth-child(2) {
    border-right: 0;
  }

  .ablation-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .method-flow-track > span,
  .method-output-track > span,
  .method-memory-token-grid span,
  .method-stage-content {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 100svh;
    padding: 3rem 1.25rem 2.75rem;
  }

  .hero-shade {
    background:
      linear-gradient(180deg, rgba(3, 8, 14, 0.3) 0%, rgba(3, 8, 14, 0.52) 34%, rgba(3, 8, 14, 0.97) 100%),
      linear-gradient(90deg, rgba(3, 8, 14, 0.28), transparent 50%, rgba(3, 8, 14, 0.28));
  }

  .hero .paper-title {
    font-size: clamp(2rem, 8vw, 2.55rem);
  }

  .section,
  .section-alt {
    padding: 4rem 0;
  }

  .paper-title {
    font-size: 2rem;
  }

  .container,
  .container-wide,
  .container-narrow {
    padding: 0 1rem;
  }

  .ablation-image-scroll img {
    max-height: none;
    max-width: none;
    min-width: 820px;
  }

  .task-tab {
    font-size: 0.9rem;
    padding: 0.45rem 0.9rem;
  }

  .rollout-result-overview,
  .fold-context,
  .rollout-controls,
  .rollout-player,
  .trial-browser,
  .memer-trace-panel {
    padding: 1rem;
  }

  .memer-trace-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .memer-trace-focus {
    grid-template-columns: 1fr;
  }

  .memer-trace-prediction dl {
    gap: 1rem;
  }

  .subsection-heading,
  .control-heading,
  .rollout-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
  }

  .subsection-heading > p,
  .rollout-meta > p {
    text-align: left;
  }

  .task-prompt-card {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .method-scale {
    font-size: 0.8rem;
  }

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

  .simulation-video-grid {
    grid-template-columns: 1fr;
  }

  .simulation-rollout-explorer,
  .robocasa-rollout-explorer,
  .attention-explorer,
  .appendix-result {
    padding: 1rem;
  }

  .robocasa-rollout-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .figure-card {
    padding: 1.1rem;
  }

  .attention-explorer {
    margin-top: 3rem;
  }
}

@media (max-width: 480px) {
  .experiment-index > div {
    align-items: center;
    gap: 0.55rem 1rem;
    padding: 1rem 0.25rem;
  }

  .experiment-index strong {
    flex-basis: 100%;
  }
}

/* Interactive method explorer */
.method-explorer {
  background: #fff;
  border: 1px solid #e4e2df;
  border-radius: 24px;
  box-shadow:
    0 2px 3px rgba(28, 25, 23, 0.03),
    0 24px 70px rgba(28, 25, 23, 0.09);
  max-width: 1280px;
}

.method-explorer-toolbar {
  background:
    radial-gradient(circle at 0% 0%, rgba(251, 146, 60, 0.17), transparent 35%),
    linear-gradient(180deg, #fffdfa 0%, #fff 100%);
  border-bottom-color: #e8e5e1;
  padding: 1.05rem 1.35rem;
}

.method-stage-tabs {
  background: rgba(245, 242, 238, 0.9);
  border-color: #e7e1da;
  border-radius: 14px;
  gap: 0.28rem;
  padding: 0.3rem;
}

.method-stage-tab {
  border-radius: 10px;
  min-width: 150px;
  padding: 0.64rem 0.95rem;
}

.method-stage-tab.is-active {
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.08),
    0 5px 16px rgba(28, 25, 23, 0.06);
}

.method-explorer-status {
  color: #57534e;
  font-size: 0.92rem;
  max-width: 520px;
}

.method-media-grid {
  background: #fcfbf9;
  border-bottom: 1px solid #e8e5e1;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.method-demo-panel,
.method-rollout-panel,
.method-pipeline-panel {
  min-width: 0;
  padding: 1.45rem;
}

.method-demo-panel {
  border-bottom: 0;
  border-right: 1px solid #e8e5e1;
}

.method-rollout-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(234, 88, 12, 0.07), transparent 34%),
    #fff;
}

.method-panel-heading {
  align-items: center;
  margin-bottom: 0.95rem;
}

.method-panel-heading h3 {
  font-size: clamp(1.08rem, 1.4vw, 1.28rem);
  letter-spacing: -0.015em;
}

.method-demo-kind,
.method-success-badge,
.method-pipeline-hint {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.025em;
  line-height: 1.1;
  padding: 0.34rem 0.58rem;
  white-space: nowrap;
}

.method-demo-kind {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
}

.method-success-badge {
  background: #ecfdf3;
  border: 1px solid #a7f3c5;
  color: #167744;
}

.method-success-badge::before {
  background: #22c55e;
  border-radius: 50%;
  content: "";
  height: 0.42rem;
  margin-right: 0.34rem;
  width: 0.42rem;
}

.method-pipeline-hint {
  background: #f7f5f2;
  border: 1px solid #e7e2dc;
  color: #78716c;
}

.method-demo-video-frame,
.method-rollout-video-frame {
  background: #111827;
  border-radius: 15px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.18),
    0 12px 30px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  position: relative;
}

.method-demo-video-frame video,
.method-rollout-video-frame video {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.method-demo-camera,
.method-rollout-camera,
.method-rollout-clock {
  backdrop-filter: blur(8px);
  background: rgba(17, 24, 39, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.045em;
  padding: 0.3rem 0.5rem;
  position: absolute;
  text-transform: uppercase;
  top: 0.62rem;
}

.method-demo-camera,
.method-rollout-camera {
  left: 0.62rem;
}

.method-rollout-clock {
  font-variant-numeric: tabular-nums;
  right: 0.62rem;
}

.method-demo-toggle,
.method-rollout-toggle {
  align-items: center;
  backdrop-filter: blur(9px);
  background: rgba(17, 24, 39, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  bottom: 0.62rem;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 750;
  gap: 0.35rem;
  padding: 0.36rem 0.6rem;
  position: absolute;
  right: 0.62rem;
  transition: background 0.16s, transform 0.16s;
}

.method-demo-toggle:hover,
.method-rollout-toggle:hover {
  background: rgba(194, 65, 12, 0.94);
  transform: translateY(-1px);
}

.method-demo-sequence,
.method-rollout-strip {
  display: grid;
  gap: 0.38rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0.85rem;
}

.method-demo-sequence figure,
.method-rollout-strip button {
  background: #e7e5e4;
  border: 0;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.method-demo-sequence img,
.method-rollout-strip img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.method-demo-sequence span,
.method-rollout-strip button > span {
  background: linear-gradient(180deg, transparent, rgba(17, 24, 39, 0.84));
  bottom: 0;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 750;
  left: 0;
  line-height: 1;
  padding: 0.72rem 0.24rem 0.25rem;
  position: absolute;
  right: 0;
  text-align: center;
}

.method-demo-sequence figure {
  opacity: 0.82;
}

.method-demo-sequence figure:nth-child(3) {
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2);
  opacity: 1;
}

.method-rollout-strip button {
  cursor: pointer;
  opacity: 0.46;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: opacity 0.18s, outline-color 0.18s, transform 0.18s;
}

.method-rollout-strip button:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

.method-rollout-strip button.is-complete {
  opacity: 0.86;
}

.method-rollout-strip button.is-active {
  opacity: 1;
  outline-color: #f97316;
}

.method-demo-prompt {
  background: #fff;
  border-color: #e7e2dc;
  border-radius: 11px;
  font-size: 0.84rem;
  margin-top: 0.85rem;
  padding: 0.68rem 0.78rem;
}

.method-rollout-control {
  margin-top: 0.9rem;
}

.method-rollout-control-heading {
  align-items: baseline;
  color: #57534e;
  display: flex;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  justify-content: space-between;
  margin-bottom: 0.38rem;
}

#method-rollout-slider {
  --progress: 0%;
  appearance: none;
  background:
    linear-gradient(90deg, #ea580c var(--progress), #e7e5e4 var(--progress));
  border-radius: 999px;
  cursor: pointer;
  display: block;
  height: 0.38rem;
  margin: 0;
  width: 100%;
}

#method-rollout-slider::-webkit-slider-thumb {
  appearance: none;
  background: #fff;
  border: 3px solid #ea580c;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(124, 45, 18, 0.22);
  height: 1.05rem;
  width: 1.05rem;
}

#method-rollout-slider::-moz-range-thumb {
  background: #fff;
  border: 3px solid #ea580c;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(124, 45, 18, 0.22);
  height: 0.78rem;
  width: 0.78rem;
}

.method-live-readout {
  display: grid;
  gap: 0.58rem;
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);
  margin-top: 0.78rem;
}

.method-history-readout,
.method-prediction-readout {
  background: #faf9f7;
  border: 1px solid #e8e4df;
  border-radius: 11px;
  min-height: 86px;
  padding: 0.68rem 0.75rem;
}

.method-prediction-readout {
  background:
    radial-gradient(circle at 100% 0%, rgba(251, 146, 60, 0.16), transparent 46%),
    #fff9f4;
  border-color: #fed7aa;
}

.method-readout-label {
  color: #9a3412;
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.method-history-readout strong,
.method-prediction-readout strong {
  color: #292524;
  display: block;
  font-size: 0.82rem;
  line-height: 1.34;
}

.method-history-readout strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.method-prediction-readout small {
  color: #78716c;
  display: block;
  font-size: 0.62rem;
  line-height: 1.35;
  margin-top: 0.18rem;
}

.method-history-meter {
  background: #e7e5e4;
  border-radius: 999px;
  display: block;
  height: 0.34rem;
  margin-top: 0.56rem;
  overflow: hidden;
}

.method-history-meter > span {
  background: linear-gradient(90deg, #fb923c, #ea580c);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 0.12s linear;
  width: 0%;
}

.method-pipeline-panel {
  background: #fff;
  border: 0;
  padding: 1.5rem;
}

.method-pipeline-scroll {
  padding: 0.15rem 0.15rem 0.45rem;
}

.method-pipeline-grid {
  gap: 0.68rem 0;
  grid-template-columns:
    minmax(205px, 0.9fr)
    72px
    minmax(175px, 0.74fr)
    68px
    minmax(390px, 1.6fr);
  grid-template-rows: repeat(3, minmax(82px, auto));
  min-width: 980px;
}

.method-stream-card {
  border-radius: 13px;
  min-height: 70px;
  padding: 0.68rem 0.74rem;
}

.method-stream-card strong {
  font-size: 0.88rem;
}

.method-stream-card small {
  font-size: 0.7rem;
}

.method-stream-card.is-disabled {
  opacity: 0.38;
}

.method-memory-node {
  border-radius: 18px;
  margin: 0 0.72rem;
  min-height: 250px;
}

.method-stage-output {
  background: #faf9f7;
  border-color: #e7e2dc;
  border-radius: 18px;
  min-height: 250px;
}

.method-stage-content {
  padding: 1rem 1.05rem;
}

.method-stage-content h4 {
  font-size: 1rem;
  margin-bottom: 0.72rem;
}

.method-objective-grid {
  gap: 0.48rem;
}

.method-objective-grid > .method-objective-card {
  align-items: center;
  background: #fff;
  border: 1px solid #e5e1dc;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 0.42rem;
  grid-template-columns: auto 1fr auto;
  min-height: 72px;
  padding: 0.58rem 0.62rem;
  position: relative;
  text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s, opacity 0.18s, transform 0.18s;
}

.method-objective-grid > .method-objective-card:hover {
  border-color: #fdba74;
  box-shadow: 0 7px 18px rgba(124, 45, 18, 0.08);
  transform: translateY(-1px);
}

.method-objective-grid > .method-objective-card.is-disabled {
  filter: grayscale(0.75);
  opacity: 0.4;
  transform: none;
}

.method-objective-card strong,
.method-objective-card small {
  display: block;
}

.method-objective-card strong {
  color: #292524;
  font-size: 0.75rem;
  line-height: 1.25;
}

.method-objective-card small {
  color: #78716c;
  font-size: 0.64rem;
  line-height: 1.25;
  margin-top: 0.12rem;
}

.method-objective-state {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #c2410c;
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1;
  padding: 0.26rem 0.34rem;
  text-transform: uppercase;
}

.method-objective-card.is-disabled .method-objective-state {
  background: #f5f5f4;
  border-color: #d6d3d1;
  color: #a8a29e;
}

.method-objective-card-progress {
  grid-template-columns: auto 1fr auto;
}

.method-objective-card-progress .method-progress-value {
  font-size: 0.94rem;
}

.method-objective-card-progress .method-progress-bar {
  bottom: 0.38rem;
  grid-column: 1 / -1;
  left: 0.62rem;
  margin: 0;
  position: absolute;
  right: 0.62rem;
}

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

.method-policy-inputs > div {
  background: #fff;
  border: 1px solid #e5e1dc;
  border-radius: 10px;
  min-width: 0;
  padding: 0.58rem;
}

.method-policy-inputs > div span,
.method-policy-inputs > div strong {
  display: block;
}

.method-policy-inputs > div span {
  color: #a8a29e;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.method-policy-inputs > div strong {
  color: #44403c;
  font-size: 0.68rem;
  line-height: 1.3;
  margin-top: 0.22rem;
}

.method-policy-inputs > .method-policy-memory {
  background: #fff7ed;
  border-color: #fdba74;
}

.method-vla-path {
  gap: 0.55rem;
  margin-top: 0.66rem;
}

.method-vla-path > div {
  padding: 0.62rem;
}

.method-vla-path strong {
  font-size: 0.72rem;
}

.method-vla-path small {
  font-size: 0.62rem;
}

.method-evidence {
  background:
    radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.07), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(251, 146, 60, 0.12), transparent 36%),
    #fbfaf8;
  border-top: 1px solid #e8e5e1;
  padding: 1.45rem;
}

.method-evidence-header {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.method-evidence-header h3 {
  color: #292524;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}

.method-evidence-tabs {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #e7e2dc;
  border-radius: 12px;
  display: flex;
  gap: 0.24rem;
  padding: 0.26rem;
}

.method-evidence-tabs button {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #78716c;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
  padding: 0.5rem 0.64rem;
  transition: background 0.16s, box-shadow 0.16s, color 0.16s;
  white-space: nowrap;
}

.method-evidence-tabs button.is-active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.09);
  color: #c2410c;
}

.method-evidence-body {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(235px, 0.62fr) minmax(0, 1.38fr);
  margin-top: 1rem;
}

.method-evidence-summary,
.method-task-chart {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e7e2dc;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.045);
}

.method-evidence-summary {
  padding: 1rem;
}

.method-evidence-chip {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #c2410c;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  padding: 0.27rem 0.48rem;
  text-transform: uppercase;
}

.method-evidence-summary h4 {
  color: #292524;
  font-size: 1rem;
  line-height: 1.3;
  margin-top: 0.58rem;
}

.method-evidence-score-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.68rem;
  margin-top: 0.28rem;
}

.method-evidence-score-row strong {
  color: #c2410c;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
}

.method-evidence-score-row span {
  color: #78716c;
  font-size: 0.7rem;
  font-weight: 700;
}

.method-evidence-summary p {
  color: #78716c;
  font-size: 0.69rem;
  line-height: 1.45;
  margin-top: 0.62rem;
}

.method-recipe-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.72rem;
}

.method-recipe-options[hidden] {
  display: none;
}

.method-recipe-options button {
  background: #f5f5f4;
  border: 1px solid #e7e5e4;
  border-radius: 999px;
  color: #57534e;
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 750;
  padding: 0.32rem 0.5rem;
}

.method-recipe-options button.is-active {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

.method-task-chart {
  display: grid;
  gap: 0.7rem 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 1rem;
}

.method-task-result-heading {
  align-items: baseline;
  color: #57534e;
  display: flex;
  font-size: 0.65rem;
  gap: 0.45rem;
  justify-content: space-between;
  line-height: 1.25;
}

.method-task-result-heading span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.method-task-result-heading strong {
  color: #292524;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.method-task-result-track {
  background: #e7e5e4;
  border-radius: 999px;
  display: block;
  height: 0.42rem;
  margin-top: 0.3rem;
  overflow: hidden;
}

.method-task-result-track > span {
  background: linear-gradient(90deg, #fb923c, #ea580c);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 2px;
  transition: width 0.28s ease;
}

.method-task-chart-empty {
  align-items: center;
  color: #78716c;
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 132px;
  text-align: center;
}

.method-task-chart-empty strong {
  color: #44403c;
  font-size: 0.9rem;
}

.method-task-chart-empty span {
  font-size: 0.7rem;
  margin-top: 0.22rem;
}

.method-stage-tab:focus-visible,
.method-stream-card:focus-visible,
.method-objective-card:focus-visible,
.method-rollout-strip button:focus-visible,
.method-demo-toggle:focus-visible,
.method-rollout-toggle:focus-visible,
.method-evidence-tabs button:focus-visible,
.method-recipe-options button:focus-visible {
  outline: 3px solid rgba(234, 88, 12, 0.28);
  outline-offset: 2px;
}

@media (max-width: 1120px) {
  .method-media-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .method-demo-panel {
    border-bottom: 0;
    border-right: 1px solid #e8e5e1;
  }

  .method-demo-panel > :not(.method-panel-heading) {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .method-media-grid {
    grid-template-columns: 1fr;
  }

  .method-demo-panel {
    border-bottom: 1px solid #e8e5e1;
    border-right: 0;
  }

  .method-demo-panel > :not(.method-panel-heading),
  .method-rollout-panel > :not(.method-panel-heading) {
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
  }

  .method-evidence-header {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .method-evidence-summary {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: minmax(170px, 0.55fr) minmax(0, 1.45fr);
  }

  .method-evidence-chip,
  .method-evidence-summary h4,
  .method-evidence-score-row {
    grid-column: 1;
  }

  .method-evidence-summary p,
  .method-recipe-options {
    grid-column: 2;
  }

  .method-evidence-summary p {
    grid-row: 1 / 4;
    margin-top: 0;
  }

  .method-recipe-options {
    align-self: end;
  }
}

@media (max-width: 700px) {
  .method-explorer {
    border-radius: 18px;
  }

  .method-explorer-toolbar,
  .method-demo-panel,
  .method-rollout-panel,
  .method-pipeline-panel,
  .method-evidence {
    padding: 1rem;
  }

  .method-stage-tab {
    min-width: 0;
  }

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

  .method-prediction-readout,
  .method-history-readout {
    min-height: 0;
  }

  .method-evidence-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .method-evidence-tabs button {
    padding: 0.48rem 0.28rem;
    white-space: normal;
  }

  .method-evidence-summary {
    display: block;
  }

  .method-evidence-summary p {
    margin-top: 0.62rem;
  }

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

  .method-rollout-camera {
    max-width: calc(100% - 7.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .method-demo-kind,
  .method-success-badge {
    display: none;
  }

  .method-demo-sequence,
  .method-rollout-strip {
    gap: 0.28rem;
  }

  .method-demo-sequence span,
  .method-rollout-strip button > span {
    font-size: 0.54rem;
  }

  .method-rollout-control-heading {
    align-items: flex-start;
    flex-direction: column;
  }

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

@media (prefers-reduced-motion: reduce) {
  .method-task-result-track > span,
  .method-history-meter > span,
  .method-rollout-strip button {
    transition: none;
  }
}

/* Method input streams and separated interactive example */
.method-pipeline-grid {
  grid-template-columns:
    minmax(285px, 1.08fr)
    74px
    minmax(178px, 0.7fr)
    68px
    minmax(410px, 1.55fr);
  grid-template-rows: repeat(3, minmax(116px, auto));
  min-width: 1080px;
}

.method-stream-card {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  min-height: 106px;
  padding: 0.62rem 0.68rem;
}

.method-stream-card-heading {
  align-items: center;
  display: grid;
  gap: 0.48rem;
  grid-template-columns: auto 1fr auto;
  width: 100%;
}

.method-stream-card-heading strong {
  color: #292524;
  font-size: 0.84rem;
  line-height: 1.2;
}

.method-stream-card > small {
  color: #78716c;
  display: block;
  font-size: 0.64rem;
  line-height: 1.2;
  margin: 0;
}

.method-visual-history-preview {
  align-items: center;
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
}

.method-visual-history-preview img {
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(234, 170, 0, 0.36);
  border-radius: 5px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.method-visual-history-preview > span {
  align-items: center;
  background: rgba(255, 249, 230, 0.9);
  border-radius: 999px;
  color: #b77900;
  display: flex;
  font-size: 0.72rem;
  font-weight: 900;
  height: 1.05rem;
  justify-content: center;
  left: 31.5%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.05rem;
  z-index: 1;
}

.method-vector-history-preview {
  align-items: center;
  display: flex;
  gap: 0.32rem;
  min-height: 42px;
}

.method-vector-history-preview img {
  flex: 0 0 auto;
  height: 2.1rem;
  object-fit: contain;
  width: 2.1rem;
}

.method-vector-token {
  align-items: center;
  background: color-mix(in srgb, var(--stream) 12%, white);
  border: 1px solid color-mix(in srgb, var(--stream) 36%, white);
  border-radius: 7px;
  color: color-mix(in srgb, var(--stream) 78%, #1f2937);
  display: inline-flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.73rem;
  font-style: italic;
  font-weight: 700;
  height: 1.8rem;
  justify-content: center;
  min-width: 2.15rem;
  padding: 0 0.3rem;
}

.method-vector-token sub {
  font-size: 0.72em;
}

.method-vector-history-preview b {
  background: #fff;
  border: 1px solid var(--stream-border);
  border-radius: 6px;
  color: var(--stream);
  font-size: 0.58rem;
  letter-spacing: 0.035em;
  margin-left: auto;
  padding: 0.28rem 0.34rem;
}

.method-memory-node,
.method-stage-output {
  min-height: 364px;
}

.method-memory-caption {
  font-size: 0.78rem;
}

.method-objective-grid {
  gap: 0.58rem;
}

.method-objective-grid > .method-objective-card {
  gap: 0.62rem;
  grid-template-columns: 3.15rem 1fr auto;
  min-height: 105px;
  padding: 0.72rem;
}

.method-supervision-icon {
  display: block;
  height: 3.05rem;
  object-fit: contain;
  width: 3.05rem;
}

.method-objective-card strong {
  font-size: 0.8rem;
}

.method-objective-card small {
  font-size: 0.68rem;
}

.method-objective-card-progress {
  grid-template-columns: 3.15rem 1fr auto;
}

.method-objective-card-progress #method-progress-value {
  color: #d8662d;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.method-objective-card-progress .method-progress-bar {
  left: 0.72rem;
  right: 0.72rem;
}

.method-example-showcase {
  margin: 0 auto;
  max-width: 1280px;
}

.method-example-heading {
  margin: 0 auto 1.35rem;
  max-width: 760px;
  text-align: center;
}

.method-example-heading .section-kicker {
  margin-bottom: 0.35rem;
}

.method-example-heading h3 {
  color: #292524;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.method-example-heading > p:last-child {
  color: #6b7280;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-top: 0.62rem;
}

.method-example-showcase .method-media-grid {
  border: 1px solid #e4e2df;
  border-bottom: 1px solid #e4e2df;
  border-radius: 22px;
  box-shadow:
    0 2px 3px rgba(28, 25, 23, 0.03),
    0 20px 55px rgba(28, 25, 23, 0.08);
  overflow: hidden;
}

@media (max-width: 1120px) {
  .method-pipeline-grid {
    grid-template-columns:
      minmax(275px, 1fr)
      72px
      minmax(175px, 0.68fr)
      66px
      minmax(400px, 1.45fr);
    min-width: 1060px;
  }
}

@media (max-width: 900px) {
  .method-example-showcase {
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  .method-example-showcase {
    margin-top: 0;
  }

  .method-example-heading {
    padding: 0 0.25rem;
  }

  .method-example-heading h3 {
    font-size: 1.45rem;
  }

  .method-example-showcase .method-media-grid {
    border-radius: 16px;
  }
}

/* Flex-pi-inspired method canvas: one visual system, fewer nested cards */
.method-explorer-v4 {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.method-explorer-v4 .method-explorer-toolbar {
  background: transparent;
  border: 0;
  padding: 0 0 1.2rem;
}

.method-explorer-v4 .method-stage-tabs {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 1.4rem;
  padding: 0;
}

.method-explorer-v4 .method-stage-tab {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  min-width: 148px;
  padding: 0.38rem 0.08rem 0.58rem;
  position: relative;
}

.method-explorer-v4 .method-stage-tab::after {
  background: #ea580c;
  bottom: -2px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
  width: 100%;
}

.method-explorer-v4 .method-stage-tab.is-active {
  background: transparent;
  box-shadow: none;
  color: #1c1917;
}

.method-explorer-v4 .method-stage-tab.is-active::after {
  transform: scaleX(1);
}

.method-explorer-v4 .method-stage-tab span {
  color: #a8a29e;
  font-size: 0.66rem;
}

.method-explorer-v4 .method-stage-tab.is-active span {
  color: #ea580c;
}

.method-explorer-v4 .method-explorer-status {
  color: #78716c;
  font-size: 0.86rem;
  max-width: 500px;
}

.method-explorer-v4 .method-explorer-status::before {
  display: none;
}

.method-explorer-v4 .method-pipeline-panel {
  background: #f1f0ec;
  border: 1px solid #dfdcd5;
  border-radius: 28px;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.03),
    0 20px 46px rgba(28, 25, 23, 0.07);
  padding: 1.55rem;
}

.method-explorer-v4 .method-panel-heading {
  margin-bottom: 1.25rem;
}

.method-explorer-v4 .method-panel-heading .eyebrow {
  color: #c2410c;
  font-size: 0.68rem;
  letter-spacing: 0.11em;
}

.method-explorer-v4 .method-panel-heading h3 {
  color: #1c1917;
  font-size: clamp(1.28rem, 1.8vw, 1.58rem);
  letter-spacing: -0.025em;
  margin-top: 0.12rem;
}

.method-explorer-v4 .method-pipeline-hint {
  background: transparent;
  border: 0;
  color: #78716c;
  font-size: 0.68rem;
  font-weight: 650;
  padding: 0;
}

.method-explorer-v4 .method-canvas-legend {
  color: #78716c;
  display: grid;
  font-size: 0.63rem;
  font-weight: 700;
  grid-template-columns: minmax(300px, 1.08fr) 368px minmax(420px, 1.5fr);
  letter-spacing: 0.035em;
  min-width: 1110px;
  padding: 0 1.1rem 0.48rem;
  text-transform: uppercase;
}

.method-explorer-v4 .method-canvas-legend span:nth-child(2) {
  text-align: center;
}

.method-explorer-v4 .method-canvas-legend span:nth-child(3) {
  text-align: left;
}

.method-explorer-v4 .method-canvas-legend b {
  color: #c2410c;
  font-size: 0.58rem;
  margin-right: 0.3rem;
}

.method-explorer-v4 .method-pipeline-scroll {
  padding: 0;
}

.method-explorer-v4 .method-pipeline-grid {
  align-items: stretch;
  background-color: #e9e7e2;
  background-image: radial-gradient(rgba(120, 113, 108, 0.14) 0.7px, transparent 0.7px);
  background-size: 15px 15px;
  border: 1px solid #dbd8d2;
  border-radius: 22px;
  gap: 0;
  grid-template-columns:
    minmax(300px, 1.08fr)
    104px
    minmax(190px, 0.7fr)
    94px
    minmax(420px, 1.5fr);
  grid-template-rows: repeat(3, minmax(122px, auto));
  min-width: 1110px;
  overflow: hidden;
  padding: 1.1rem;
  position: relative;
}

.method-explorer-v4 .method-stream-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: #dedbd5;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 0.72rem 0.82rem;
  position: relative;
  z-index: 1;
}

.method-explorer-v4 .method-stream-card:hover {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--stream);
  transform: none;
}

.method-explorer-v4 .method-stream-card-visual {
  border-radius: 16px 16px 0 0;
  border-bottom-width: 0;
}

.method-explorer-v4 .method-stream-card-action {
  border-bottom-width: 0;
}

.method-explorer-v4 .method-stream-card-state {
  border-radius: 0 0 16px 16px;
}

.method-explorer-v4 .method-stream-card.is-disabled {
  background: rgba(245, 245, 244, 0.92);
  box-shadow: inset 3px 0 0 #d6d3d1;
  opacity: 0.48;
}

.method-explorer-v4 .method-stream-card-heading {
  gap: 0.52rem;
}

.method-explorer-v4 .method-stream-mark {
  border-radius: 50%;
  box-shadow: none;
  height: 0.72rem;
  width: 0.72rem;
}

.method-explorer-v4 .method-stream-card-heading strong {
  font-size: 0.86rem;
  letter-spacing: -0.01em;
}

.method-explorer-v4 .method-stream-state {
  background: var(--stream);
  border: 0;
  border-radius: 999px;
  color: transparent;
  font-size: 0;
  height: 1.18rem;
  padding: 0;
  position: relative;
  transition: background 0.18s;
  width: 2.05rem;
}

.method-explorer-v4 .method-stream-state::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.24);
  content: "";
  height: 0.86rem;
  position: absolute;
  right: 0.16rem;
  top: 0.16rem;
  transition: transform 0.18s;
  width: 0.86rem;
}

.method-explorer-v4 .method-stream-card.is-disabled .method-stream-state {
  background: #d6d3d1;
}

.method-explorer-v4 .method-stream-card.is-disabled .method-stream-state::after {
  transform: translateX(-0.87rem);
}

.method-explorer-v4 .method-visual-history-preview {
  gap: 0.34rem;
}

.method-explorer-v4 .method-visual-history-preview img {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.13);
}

.method-explorer-v4 .method-vector-history-preview img {
  height: 1.9rem;
  width: 1.9rem;
}

.method-explorer-v4 .method-vector-token {
  background: color-mix(in srgb, var(--stream) 9%, white);
  border-color: color-mix(in srgb, var(--stream) 24%, white);
  border-radius: 6px;
  height: 1.68rem;
  min-width: 2.02rem;
}

.method-explorer-v4 .method-vector-history-preview b {
  background: transparent;
  border: 0;
  color: var(--stream);
  font-size: 0.57rem;
  padding: 0;
}

.method-explorer-v4 .method-flow-track {
  align-self: center;
  margin: 0 0.7rem;
  opacity: 0.64;
}

.method-explorer-v4 .method-memory-node {
  align-self: stretch;
  background:
    radial-gradient(circle at 50% 22%, rgba(249, 115, 22, 0.34), transparent 43%),
    linear-gradient(155deg, #292524, #171717);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(28, 25, 23, 0.2);
  margin: 0.62rem 0.7rem;
  min-height: 0;
  padding: 1.15rem 0.8rem;
  position: relative;
  z-index: 1;
}

.method-explorer-v4 .method-memory-node > p {
  color: #fdba74;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.method-explorer-v4 .method-memory-node h4 {
  color: #fff;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  margin: 0.2rem 0 0.9rem;
}

.method-explorer-v4 .method-memory-token-grid {
  gap: 0.34rem;
  grid-template-columns: repeat(4, 0.86rem);
}

.method-explorer-v4 .method-memory-token-grid span {
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.22);
  height: 0.86rem;
  width: 0.86rem;
}

.method-explorer-v4 .method-memory-caption {
  color: #d6d3d1;
  font-size: 0.67rem;
  letter-spacing: 0.02em;
  margin-top: 0.8rem;
}

.method-explorer-v4 .method-memory-node.is-empty {
  background: #44403c;
  border-color: #57534e;
  filter: grayscale(1);
  opacity: 0.55;
}

.method-explorer-v4 .method-output-track {
  margin: 0 0.65rem;
  opacity: 0.64;
}

.method-explorer-v4 .method-stage-output {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dedbd5;
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.04),
    0 10px 24px rgba(28, 25, 23, 0.06);
  min-height: 0;
  position: relative;
  z-index: 1;
}

.method-explorer-v4 .method-stage-content {
  padding: 1.15rem;
}

.method-explorer-v4 .method-stage-content > .eyebrow {
  color: #a8a29e;
  font-size: 0.61rem;
  letter-spacing: 0.11em;
}

.method-explorer-v4 .method-stage-content h4 {
  color: #1c1917;
  font-size: 1.05rem;
  letter-spacing: -0.018em;
  margin: 0.12rem 0 0.92rem;
}

.method-explorer-v4 .method-objective-grid {
  gap: 0.62rem;
}

.method-explorer-v4 .method-objective-grid > .method-objective-card {
  border: 1px solid transparent;
  border-radius: 13px;
  box-shadow: none;
  gap: 0.65rem;
  grid-template-columns: 3.2rem 1fr auto;
  min-height: 108px;
  padding: 0.76rem;
}

.method-explorer-v4 [data-method-objective="visual"] {
  background: #fff9e8;
  border-color: #f5df9b;
}

.method-explorer-v4 [data-method-objective="action"] {
  background: #eff7ff;
  border-color: #bfdbfe;
}

.method-explorer-v4 [data-method-objective="state"] {
  background: #f1faeb;
  border-color: #c9e7b7;
}

.method-explorer-v4 [data-method-objective="progress"] {
  background: #fff2ec;
  border-color: #fed0bd;
}

.method-explorer-v4 .method-objective-grid > .method-objective-card:hover {
  border-color: color-mix(in srgb, currentColor 22%, #d6d3d1);
  box-shadow: 0 8px 18px rgba(28, 25, 23, 0.07);
  transform: none;
}

.method-explorer-v4 .method-objective-grid > .method-objective-card.is-disabled {
  background: #f5f5f4;
  border-color: #e7e5e4;
  filter: grayscale(0.85);
  opacity: 0.42;
}

.method-explorer-v4 .method-supervision-icon {
  height: 3.05rem;
  width: 3.05rem;
}

.method-explorer-v4 .method-objective-card strong {
  color: #292524;
  font-size: 0.79rem;
}

.method-explorer-v4 .method-objective-card small {
  color: #78716c;
  font-size: 0.65rem;
}

.method-explorer-v4 .method-objective-state {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(120, 113, 108, 0.22);
  border-radius: 50%;
  color: transparent;
  display: flex;
  font-size: 0;
  height: 1.28rem;
  justify-content: center;
  padding: 0;
  width: 1.28rem;
}

.method-explorer-v4 .method-objective-state::before {
  color: #22a45d;
  content: "✓";
  font-size: 0.72rem;
  font-weight: 900;
}

.method-explorer-v4 .method-objective-card.is-disabled .method-objective-state {
  background: #e7e5e4;
  border-color: #d6d3d1;
}

.method-explorer-v4 .method-objective-card.is-disabled .method-objective-state::before {
  color: #a8a29e;
  content: "+";
}

.method-explorer-v4 .method-objective-card-progress .method-progress-bar {
  background: rgba(234, 88, 12, 0.12);
}

.method-explorer-v4 .method-policy-inputs > div {
  background: #f7f7f6;
  border: 0;
  border-radius: 10px;
}

.method-explorer-v4 .method-policy-inputs > .method-policy-memory {
  background: #fff2e8;
  border: 1px solid #fed7aa;
}

.method-explorer-v4 .method-vla-path > div {
  border: 1px solid #e7e5e4;
  border-radius: 11px;
}

.method-explorer-v4 .method-evidence {
  background: #fff;
  border: 1px solid #e4e1db;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(28, 25, 23, 0.05);
  margin-top: 1rem;
  padding: 1.35rem 1.5rem;
}

.method-explorer-v4 .method-evidence-header {
  align-items: center;
}

.method-explorer-v4 .method-evidence-header h3 {
  font-size: 1.02rem;
}

.method-explorer-v4 .method-evidence-tabs {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 1rem;
  padding: 0;
}

.method-explorer-v4 .method-evidence-tabs button {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.38rem 0.06rem;
}

.method-explorer-v4 .method-evidence-tabs button.is-active {
  background: transparent;
  border-bottom-color: #ea580c;
  box-shadow: none;
}

.method-explorer-v4 .method-evidence-body {
  border-top: 1px solid #ece9e4;
  gap: 1.35rem;
  margin-top: 0.9rem;
  padding-top: 1rem;
}

.method-explorer-v4 .method-evidence-summary,
.method-explorer-v4 .method-task-chart {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.method-explorer-v4 .method-evidence-summary {
  border-right: 1px solid #ece9e4;
  padding: 0 1.2rem 0 0;
}

.method-explorer-v4 .method-evidence-chip {
  background: transparent;
  border: 0;
  color: #c2410c;
  padding: 0;
}

.method-explorer-v4 .method-evidence-score-row strong {
  font-size: 2.2rem;
}

.method-explorer-v4 .method-task-chart {
  padding: 0;
}

.method-explorer-v4 .method-task-result-track {
  height: 0.34rem;
}

@media (max-width: 1120px) {
  .method-explorer-v4 .method-canvas-legend {
    grid-template-columns: minmax(300px, 1.08fr) 362px minmax(410px, 1.48fr);
    min-width: 1090px;
  }

  .method-explorer-v4 .method-pipeline-grid {
    grid-template-columns:
      minmax(300px, 1.08fr)
      100px
      minmax(190px, 0.7fr)
      90px
      minmax(410px, 1.48fr);
    min-width: 1090px;
  }
}

@media (max-width: 900px) {
  .method-explorer-v4 .method-evidence-summary {
    border-bottom: 1px solid #ece9e4;
    border-right: 0;
    padding: 0 0 1rem;
  }
}

@media (max-width: 700px) {
  .method-explorer-v4 .method-explorer-toolbar {
    gap: 0.8rem;
  }

  .method-explorer-v4 .method-stage-tabs {
    gap: 0.8rem;
  }

  .method-explorer-v4 .method-stage-tab {
    min-width: 0;
  }

  .method-explorer-v4 .method-pipeline-panel {
    border-radius: 20px;
    padding: 1rem;
  }

  .method-explorer-v4 .method-canvas-legend {
    display: none;
  }

  .method-explorer-v4 .method-pipeline-grid {
    border-radius: 16px;
    padding: 0.8rem;
  }

  .method-explorer-v4 .method-evidence {
    border-radius: 18px;
    padding: 1rem;
  }

  .method-explorer-v4 .method-evidence-tabs {
    gap: 0;
  }
}

/* Method explorer v5: larger type and a single animated visual story */
.method-explorer-v5 {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.method-explorer-v5 .method-explorer-toolbar {
  align-items: end;
  background: transparent;
  border: 0;
  padding: 0 0 1.4rem;
}

.method-explorer-v5 .method-stage-tabs {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 1.75rem;
  padding: 0;
}

.method-explorer-v5 .method-stage-tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid #d6d3d1;
  border-radius: 0;
  color: #78716c;
  font-size: 1.12rem;
  min-width: 190px;
  padding: 0.45rem 0.1rem 0.72rem;
}

.method-explorer-v5 .method-stage-tab span {
  color: #a8a29e;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.18rem;
}

.method-explorer-v5 .method-stage-tab.is-active {
  background: transparent;
  border-bottom-color: #ea580c;
  box-shadow: none;
  color: #1c1917;
}

.method-explorer-v5 .method-stage-tab.is-active span {
  color: #ea580c;
}

.method-explorer-v5 .method-explorer-status {
  color: #57534e;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 550px;
}

.method-explorer-v5 .method-explorer-status::before {
  display: none;
}

.method-explorer-v5 .method-pipeline-panel {
  background: #f0eee9;
  border: 1px solid #dedad2;
  border-radius: 30px;
  box-shadow: 0 22px 54px rgba(28, 25, 23, 0.08);
  padding: 1.7rem;
}

.method-explorer-v5 .method-story-heading {
  margin-bottom: 1.35rem;
}

.method-explorer-v5 .method-story-heading .eyebrow {
  color: #c2410c;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.method-explorer-v5 .method-story-heading h3 {
  color: #1c1917;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 0.15rem;
}

.method-explorer-v5 .method-story-heading > p:last-child {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0.45rem;
}

.method-explorer-v5 .method-pipeline-scroll {
  overflow-x: auto;
  padding: 0.1rem 0.1rem 0.45rem;
}

.method-explorer-v5 .method-storyboard {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-template-columns:
    minmax(330px, 1.12fr)
    98px
    minmax(205px, 0.68fr)
    92px
    minmax(450px, 1.45fr);
  min-width: 1175px;
}

.method-explorer-v5 .method-history-bank,
.method-explorer-v5 .method-stage-output {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.method-explorer-v5 .method-history-bank {
  grid-column: 1;
  padding: 0.4rem 0;
}

.method-explorer-v5 .method-column-heading {
  align-items: center;
  display: flex;
  gap: 0.78rem;
  margin-bottom: 0.72rem;
}

.method-explorer-v5 .method-column-heading > span {
  align-items: center;
  background: #1c1917;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 800;
  height: 2.05rem;
  justify-content: center;
  width: 2.05rem;
}

.method-explorer-v5 .method-column-heading small {
  color: #c2410c;
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.method-explorer-v5 .method-column-heading h4 {
  color: #1c1917;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0.08rem 0 0;
}

.method-explorer-v5 .method-stream-card {
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(120, 113, 108, 0.14);
  border-radius: 14px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
  min-height: 0;
  margin-top: 0.62rem;
  padding: 0.9rem;
}

.method-explorer-v5 .method-stream-card:hover {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 7px 18px rgba(28, 25, 23, 0.055);
  transform: none;
}

.method-explorer-v5 .method-stream-card.is-disabled {
  background: rgba(231, 229, 228, 0.34);
  filter: grayscale(0.8);
  opacity: 0.34;
}

.method-explorer-v5 .method-stream-card-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.method-explorer-v5 .method-stream-card-heading strong {
  color: #292524;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.method-explorer-v5 .method-stream-card > small {
  color: #78716c;
  font-size: 0.94rem;
  line-height: 1.3;
}

.method-explorer-v5 .method-stream-state {
  align-items: center;
  background: var(--stream);
  border: 0;
  border-radius: 50%;
  color: transparent;
  display: inline-flex;
  font-size: 0;
  height: 1.45rem;
  justify-content: center;
  padding: 0;
  width: 1.45rem;
}

.method-explorer-v5 .method-stream-state::before {
  color: #fff;
  content: "✓";
  font-size: 0.82rem;
  font-weight: 900;
}

.method-explorer-v5 .method-stream-card.is-disabled .method-stream-state {
  background: #d6d3d1;
}

.method-explorer-v5 .method-stream-card.is-disabled .method-stream-state::before {
  content: "+";
}

.method-explorer-v5 .method-visual-history-preview {
  display: grid;
  gap: 0.48rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.method-explorer-v5 .method-visual-history-preview img {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 7px rgba(28, 25, 23, 0.14);
  display: block;
  object-fit: cover;
  width: 100%;
}

.method-explorer-v5 .method-visual-history-preview > span {
  display: none;
}

.method-explorer-v5 .method-vector-history-preview {
  display: flex;
  gap: 0.58rem;
  min-height: 0;
}

.method-explorer-v5 .method-vector-history-preview img,
.method-explorer-v5 .method-vector-history-preview b {
  display: none;
}

.method-explorer-v5 .method-vector-token {
  align-items: center;
  background: color-mix(in srgb, var(--stream) 10%, white);
  border: 1px solid color-mix(in srgb, var(--stream) 30%, white);
  border-radius: 8px;
  color: color-mix(in srgb, var(--stream) 78%, #1c1917);
  display: inline-flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
  height: 2.25rem;
  justify-content: center;
  min-width: 3.1rem;
  padding: 0 0.48rem;
}

.method-explorer-v5 .method-flow-bundle {
  display: grid;
  grid-column: 2;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  padding: 4.7rem 0 0.35rem;
}

.method-explorer-v5 .method-flow-bundle .method-flow-track {
  align-self: center;
  grid-column: 1;
  height: 3px;
  margin: 0 0.7rem;
  opacity: 0.72;
  width: auto;
}

.method-explorer-v5 .method-flow-bundle .method-flow-track-visual {
  grid-row: 1;
}

.method-explorer-v5 .method-flow-bundle .method-flow-track-action {
  grid-row: 2;
}

.method-explorer-v5 .method-flow-bundle .method-flow-track-state {
  grid-row: 3;
}

.method-explorer-v5 .method-flow-track > span,
.method-explorer-v5 .method-output-track > span {
  height: 0.72rem;
  width: 0.72rem;
}

.method-explorer-v5 .method-memory-node {
  align-self: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(251, 146, 60, 0.34), transparent 42%),
    linear-gradient(155deg, #292524, #171717);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 38px rgba(28, 25, 23, 0.23);
  grid-column: 3;
  grid-row: 1;
  justify-self: stretch;
  margin: 0 0.45rem;
  min-height: 300px;
  overflow: visible;
  padding: 1.4rem 1rem;
  position: relative;
  z-index: 1;
}

.method-explorer-v5 .method-memory-node::before,
.method-explorer-v5 .method-memory-node::after {
  border: 1px solid rgba(234, 88, 12, 0.24);
  border-radius: 38px;
  content: "";
  inset: -0.52rem;
  pointer-events: none;
  position: absolute;
}

.method-explorer-v5 .method-memory-node::after {
  border-color: rgba(234, 88, 12, 0.12);
  inset: -1rem;
}

.method-explorer-v5.is-animated .method-memory-node::before {
  animation: method-memory-ring 2.4s ease-in-out infinite;
}

.method-explorer-v5.is-animated .method-memory-node::after {
  animation: method-memory-ring 2.4s 0.5s ease-in-out infinite;
}

.method-explorer-v5 .method-memory-kicker {
  color: #fdba74;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.method-explorer-v5 .method-memory-node h4 {
  color: #fff;
  font-size: 1.38rem;
  letter-spacing: -0.02em;
  margin: 0.22rem 0 1.1rem;
}

.method-explorer-v5 .method-memory-token-grid {
  gap: 0.45rem;
  grid-template-columns: repeat(3, 1.05rem);
}

.method-explorer-v5 .method-memory-token-grid span {
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.24);
  height: 1.05rem;
  width: 1.05rem;
}

.method-explorer-v5 .method-memory-caption {
  color: #e7e5e4;
  font-size: 0.95rem;
  margin-top: 1rem;
}

.method-explorer-v5 .method-memory-node.is-empty {
  background: #44403c;
  filter: grayscale(1);
  opacity: 0.58;
}

.method-explorer-v5 .method-output-track {
  align-self: center;
  grid-column: 4;
  grid-row: 1;
  height: 3px;
  margin: 0 0.62rem;
  opacity: 0.72;
  width: auto;
}

.method-explorer-v5 .method-stage-output {
  align-self: stretch;
  grid-column: 5;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
}

.method-explorer-v5 .method-stage-content {
  padding: 0.4rem 0;
}

.method-explorer-v5 .method-stage-content > .method-column-heading {
  margin-bottom: 0.95rem;
}

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

.method-explorer-v5 .method-objective-grid > .method-objective-card {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 15px;
  box-shadow: none;
  cursor: pointer;
  display: grid;
  gap: 0.68rem;
  grid-template-columns: 3.8rem 1fr auto;
  min-height: 124px;
  padding: 0.82rem;
  text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s, opacity 0.18s;
}

.method-explorer-v5 [data-method-objective="visual"] {
  background: #fff9e6;
  border-color: #f2d77f;
}

.method-explorer-v5 [data-method-objective="action"] {
  background: #eef6ff;
  border-color: #b9d7fb;
}

.method-explorer-v5 [data-method-objective="state"] {
  background: #eff9e9;
  border-color: #bfdfaa;
}

.method-explorer-v5 [data-method-objective="progress"] {
  background: #fff0e9;
  border-color: #f8c7b2;
}

.method-explorer-v5 .method-objective-grid > .method-objective-card:hover {
  box-shadow: 0 8px 20px rgba(28, 25, 23, 0.09);
  transform: none;
}

.method-explorer-v5 .method-objective-grid > .method-objective-card.is-disabled {
  background: #f5f5f4;
  border-color: #e7e5e4;
  filter: grayscale(0.85);
  opacity: 0.38;
}

.method-explorer-v5 .method-supervision-icon {
  height: 3.65rem;
  object-fit: contain;
  width: 3.65rem;
}

.method-explorer-v5 .method-objective-card strong {
  color: #292524;
  display: block;
  font-size: 1rem;
  line-height: 1.25;
}

.method-explorer-v5 .method-objective-card small {
  color: #6b7280;
  display: block;
  font-size: 0.9rem;
  line-height: 1.3;
  margin-top: 0.18rem;
}

.method-explorer-v5 .method-objective-card-progress #method-progress-value {
  color: #c2410c;
  font-size: 0.84rem;
}

.method-explorer-v5 .method-objective-state {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(120, 113, 108, 0.22);
  border-radius: 50%;
  color: transparent;
  display: flex;
  font-size: 0;
  height: 1.55rem;
  justify-content: center;
  padding: 0;
  width: 1.55rem;
}

.method-explorer-v5 .method-objective-state::before {
  color: #16a45d;
  content: "✓";
  font-size: 0.88rem;
  font-weight: 900;
}

.method-explorer-v5 .method-objective-card.is-disabled .method-objective-state {
  background: #e7e5e4;
}

.method-explorer-v5 .method-objective-card.is-disabled .method-objective-state::before {
  color: #a8a29e;
  content: "+";
}

.method-explorer-v5 .method-objective-card-progress .method-progress-bar {
  background: rgba(234, 88, 12, 0.12);
  bottom: 0.48rem;
  left: 0.82rem;
  right: 0.82rem;
}

.method-explorer-v5 .method-policy-inputs {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.method-explorer-v5 .method-policy-inputs > div {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ebe8e3;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 0.1rem;
}

.method-explorer-v5 .method-policy-inputs > div span {
  color: #78716c;
  font-size: 0.92rem;
}

.method-explorer-v5 .method-policy-inputs > div strong {
  color: #292524;
  font-size: 1rem;
  margin: 0;
  text-align: right;
}

.method-explorer-v5 .method-policy-inputs > .method-policy-memory {
  background: transparent;
  border-color: #ebe8e3;
}

.method-explorer-v5 .method-vla-path {
  gap: 0.72rem;
  margin-top: 1rem;
}

.method-explorer-v5 .method-vla-path > div {
  border-radius: 13px;
  padding: 0.85rem;
}

.method-explorer-v5 .method-vla-path strong {
  font-size: 0.94rem;
}

.method-explorer-v5 .method-vla-path small {
  font-size: 0.8rem;
}

.method-explorer-v5 .method-policy-loop {
  color: #78716c;
  font-size: 0.92rem;
  line-height: 1.4;
  margin-top: 0.85rem;
  text-align: center;
}

.method-explorer-v5 .method-evidence {
  background: transparent;
  border: 0;
  border-top: 1px solid #d6d3d1;
  border-radius: 0;
  box-shadow: none;
  margin-top: 1.5rem;
  padding: 1.35rem 0 0;
}

.method-explorer-v5 .method-evidence-body {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(280px, 0.66fr) minmax(0, 1.34fr);
  margin: 0;
}

.method-explorer-v5 .method-evidence-summary,
.method-explorer-v5 .method-task-chart {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.method-explorer-v5 .method-evidence-summary {
  border-right: 1px solid #ebe8e3;
  padding: 0 1.35rem 0 0;
}

.method-example-section {
  background: #f2f0eb;
  border-top: 1px solid #e2ded7;
}

.method-explorer-v5 .method-evidence-summary > .eyebrow {
  color: #c2410c;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
}

.method-explorer-v5 .method-evidence-chip {
  background: transparent;
  border: 0;
  color: #78716c;
  font-size: 0.74rem;
  margin-top: 0.35rem;
  padding: 0;
}

.method-explorer-v5 .method-evidence-summary h3 {
  color: #1c1917;
  font-size: 1.22rem;
  line-height: 1.3;
  margin-top: 0.28rem;
}

.method-explorer-v5 .method-evidence-score-row {
  margin-top: 0.42rem;
}

.method-explorer-v5 .method-evidence-score-row strong {
  font-size: 2.7rem;
}

.method-explorer-v5 .method-evidence-score-row span {
  font-size: 0.88rem;
}

.method-explorer-v5 .method-evidence-summary > p:last-of-type {
  font-size: 0.92rem;
  line-height: 1.45;
}

.method-explorer-v5 .method-recipe-options button {
  font-size: 0.82rem;
  padding: 0.42rem 0.62rem;
}

.method-explorer-v5 .method-task-chart {
  gap: 0.9rem 1.1rem;
  padding: 0.1rem 0;
}

.method-explorer-v5 .method-task-result-heading {
  font-size: 0.9rem;
}

.method-explorer-v5 .method-task-result-heading strong {
  font-size: 0.92rem;
}

.method-explorer-v5 .method-task-result-track {
  height: 0.48rem;
  margin-top: 0.38rem;
}

.method-explorer-v5 .method-task-chart-empty strong {
  font-size: 1rem;
}

.method-explorer-v5 .method-task-chart-empty span {
  font-size: 0.84rem;
}

@keyframes method-memory-ring {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@media (max-width: 1120px) {
  .method-explorer-v5 .method-storyboard {
    min-width: 1160px;
  }
}

@media (max-width: 900px) {
  .method-explorer-v5 .method-evidence-body {
    grid-template-columns: 1fr;
  }

  .method-explorer-v5 .method-evidence-summary {
    border-bottom: 1px solid #ebe8e3;
    border-right: 0;
    padding: 0 0 1rem;
  }
}

@media (max-width: 700px) {
  .method-explorer-v5 .method-explorer-toolbar {
    align-items: stretch;
    gap: 0.9rem;
  }

  .method-explorer-v5 .method-stage-tabs {
    gap: 0.8rem;
  }

  .method-explorer-v5 .method-stage-tab {
    font-size: 1rem;
    min-width: 0;
  }

  .method-explorer-v5 .method-pipeline-panel {
    border-radius: 20px;
    padding: 1rem;
  }

  .method-explorer-v5 .method-story-heading h3 {
    font-size: 1.45rem;
  }

  .method-explorer-v5 .method-storyboard {
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .method-explorer-v5 .method-history-bank {
    grid-column: 1;
    grid-row: 1;
  }

  .method-explorer-v5 .method-flow-bundle {
    align-items: center;
    display: flex;
    grid-column: 1;
    grid-row: 2;
    height: 3rem;
    justify-content: center;
    padding: 0;
    position: relative;
  }

  .method-explorer-v5 .method-flow-bundle .method-flow-track {
    display: none;
  }

  .method-explorer-v5 .method-flow-bundle::before {
    background: linear-gradient(180deg, #eaaa00, #ea580c);
    content: "";
    height: 2.2rem;
    width: 3px;
  }

  .method-explorer-v5 .method-flow-bundle::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #ea580c;
    bottom: 0.15rem;
    content: "";
    position: absolute;
  }

  .method-explorer-v5 .method-memory-node {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    margin: 0;
    max-width: 270px;
    min-height: 260px;
    width: 100%;
  }

  .method-explorer-v5 .method-output-track {
    background: linear-gradient(180deg, #ea580c, #ea580c);
    grid-column: 1;
    grid-row: 4;
    height: 3rem;
    justify-self: center;
    margin: 0;
    width: 3px;
  }

  .method-explorer-v5 .method-output-track::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #ea580c;
    bottom: 0;
    right: 50%;
    top: auto;
    transform: translate(50%, 0);
  }

  .method-explorer-v5 .method-output-track > span {
    display: none;
  }

  .method-explorer-v5 .method-stage-output {
    grid-column: 1;
    grid-row: 5;
  }

  .method-explorer-v5 .method-objective-grid {
    grid-template-columns: 1fr;
  }

  .method-explorer-v5 .method-objective-grid > .method-objective-card {
    min-height: 104px;
  }

  .method-explorer-v5 .method-evidence {
    border-radius: 18px;
    padding: 1rem;
  }

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

@media (max-width: 480px) {
  .method-explorer-v5 .method-stage-tabs {
    grid-template-columns: 1fr;
  }

  .method-explorer-v5 .method-task-chart {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .method-explorer-v5 .method-memory-node::before,
  .method-explorer-v5 .method-memory-node::after {
    animation: none;
  }
}

/* Method explorer v6: one visual language, source-colored memory, and a real VLA flow */
.method-explorer-v6 {
  --method-action: #387fc4;
  --method-action-soft: #eaf3fb;
  --method-canvas: #edf1f4;
  --method-ink: #182235;
  --method-muted: #667085;
  --method-progress: #e9783d;
  --method-state: #4b9b43;
  --method-state-soft: #edf6eb;
  --method-visual: #dfa900;
  --method-visual-soft: #fbf5dc;
}

.method-explorer-v6 .method-explorer-toolbar {
  align-items: center;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(600px, 760px) minmax(280px, 1fr);
  padding: 0 0 1.35rem;
}

.method-explorer-v6 .method-stage-tabs {
  background: #e8ecf0;
  border: 1px solid #dce2e8;
  border-radius: 20px;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.4rem;
}

.method-explorer-v6 .method-stage-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 15px;
  color: #667085;
  display: grid;
  gap: 0.78rem;
  grid-template-columns: 2.55rem minmax(0, 1fr);
  min-width: 0;
  padding: 0.72rem 0.9rem;
  text-align: left;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.method-explorer-v6 .method-stage-tab:hover {
  background: rgba(255, 255, 255, 0.48);
}

.method-explorer-v6 .method-stage-tab.is-active {
  background: #fff;
  border: 0;
  box-shadow:
    0 1px 2px rgba(24, 34, 53, 0.06),
    0 8px 22px rgba(24, 34, 53, 0.08);
  color: var(--method-ink);
}

.method-explorer-v6 .method-stage-tab .method-stage-index {
  align-items: center;
  background: #d7dde4;
  border-radius: 50%;
  color: #6c788a;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 800;
  height: 2.55rem;
  justify-content: center;
  letter-spacing: 0;
  margin: 0;
  width: 2.55rem;
}

.method-explorer-v6 .method-stage-tab.is-active .method-stage-index {
  background: var(--method-ink);
  color: #fff;
}

.method-explorer-v6 .method-stage-tab .method-stage-copy {
  color: inherit;
  display: block;
  font-size: inherit;
  letter-spacing: 0;
  margin: 0;
}

.method-explorer-v6 .method-stage-copy strong,
.method-explorer-v6 .method-stage-copy small {
  display: block;
}

.method-explorer-v6 .method-stage-copy strong {
  color: inherit;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.method-explorer-v6 .method-stage-copy small {
  color: #7b8492;
  font-size: 0.84rem;
  line-height: 1.3;
  margin-top: 0.2rem;
}

.method-explorer-v6 .method-explorer-status {
  border-left: 3px solid #c7d0da;
  color: #4f5b6d;
  font-size: 1rem;
  line-height: 1.48;
  max-width: none;
  padding-left: 1rem;
}

.method-explorer-v6 .method-pipeline-panel {
  background:
    radial-gradient(circle at 49% 40%, rgba(255, 255, 255, 0.72), transparent 31%),
    linear-gradient(145deg, #f1f4f6 0%, #e9eef2 100%);
  border: 1px solid #d8e0e7;
  border-radius: 28px;
  box-shadow:
    0 1px 1px rgba(24, 34, 53, 0.03),
    0 22px 56px rgba(24, 34, 53, 0.09);
  padding: 1.55rem;
}

.method-explorer-v6 .method-pipeline-scroll {
  overflow-x: auto;
  padding: 0.2rem 0.1rem 0.55rem;
}

.method-explorer-v6 .method-storyboard {
  align-items: center;
  display: grid;
  gap: 0;
  grid-template-columns:
    minmax(350px, 1.04fr)
    78px
    minmax(220px, 0.63fr)
    72px
    minmax(490px, 1.42fr);
  min-height: 390px;
  min-width: 1210px;
}

.method-explorer-v6 .method-history-bank,
.method-explorer-v6 .method-stage-output {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.method-explorer-v6 .method-history-bank {
  padding: 0;
}

.method-explorer-v6 .method-column-heading {
  align-items: center;
  display: flex;
  gap: 0.78rem;
  margin-bottom: 0.82rem;
}

.method-explorer-v6 .method-column-heading > span {
  align-items: center;
  background: var(--method-ink);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  height: auto;
  justify-content: center;
  letter-spacing: 0.08em;
  min-width: 3.7rem;
  padding: 0.48rem 0.72rem;
  text-transform: uppercase;
  width: auto;
}

.method-explorer-v6 .method-column-heading small {
  color: #728094;
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.method-explorer-v6 .method-column-heading h4 {
  color: var(--method-ink);
  font-size: 1.28rem;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0.1rem 0 0;
}

.method-explorer-v6 .method-stream-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(154, 166, 180, 0.24);
  border-left: 4px solid var(--stream);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(24, 34, 53, 0.03),
    0 7px 20px rgba(24, 34, 53, 0.045);
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  margin-top: 0.62rem;
  min-height: 0;
  padding: 0.86rem 0.9rem 0.9rem;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.method-explorer-v6 .method-stream-card:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--stream) 44%, #d8e0e7);
  box-shadow:
    0 2px 4px rgba(24, 34, 53, 0.04),
    0 10px 26px rgba(24, 34, 53, 0.075);
  transform: none;
}

.method-explorer-v6 .method-stream-card.is-disabled {
  background: rgba(233, 237, 241, 0.72);
  border-color: #d9e0e6;
  filter: grayscale(0.75);
  opacity: 0.34;
}

.method-explorer-v6 .method-stream-card-heading {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  width: 100%;
}

.method-explorer-v6 .method-stream-card-heading > span:first-child {
  min-width: 0;
}

.method-explorer-v6 .method-stream-card-heading strong,
.method-explorer-v6 .method-stream-card-heading small {
  display: block;
}

.method-explorer-v6 .method-stream-card-heading strong {
  color: var(--method-ink);
  font-size: 1.08rem;
  letter-spacing: -0.012em;
  line-height: 1.18;
}

.method-explorer-v6 .method-stream-card-heading small {
  color: #727d8c;
  font-size: 0.82rem;
  line-height: 1.3;
  margin-top: 0.15rem;
}

.method-explorer-v6 .method-stream-title-with-icon {
  align-items: center;
  display: flex;
  gap: 0.72rem;
}

.method-explorer-v6 .method-stream-title-with-icon > img {
  flex: 0 0 auto;
  height: 2.35rem;
  object-fit: contain;
  width: 2.35rem;
}

.method-explorer-v6 .method-stream-state {
  align-items: center;
  background: var(--stream);
  border: 0;
  border-radius: 50%;
  color: transparent;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0;
  height: 1.48rem;
  justify-content: center;
  padding: 0;
  width: 1.48rem;
}

.method-explorer-v6 .method-stream-state::before {
  color: #fff;
  content: "✓";
  font-size: 0.78rem;
  font-weight: 900;
}

.method-explorer-v6 .method-stream-card.is-disabled .method-stream-state {
  background: #b8c0ca;
}

.method-explorer-v6 .method-stream-card.is-disabled .method-stream-state::before {
  content: "+";
}

.method-explorer-v6 .method-visual-history-preview {
  display: grid;
  gap: 0.48rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.method-explorer-v6 .method-visual-history-preview img {
  aspect-ratio: 16 / 9;
  border: 2px solid #fff;
  border-radius: 9px;
  box-shadow: 0 3px 9px rgba(24, 34, 53, 0.14);
  display: block;
  object-fit: cover;
  width: 100%;
}

.method-explorer-v6 .method-action-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.15rem 0.35rem 0;
  position: relative;
}

.method-explorer-v6 .method-action-sequence::before {
  background: color-mix(in srgb, var(--method-action) 38%, white);
  content: "";
  height: 2px;
  left: 16%;
  position: absolute;
  right: 16%;
  top: 0.52rem;
}

.method-explorer-v6 .method-action-sequence > span {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
  z-index: 1;
}

.method-explorer-v6 .method-action-sequence i {
  background: var(--method-action);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(56, 127, 196, 0.28);
  height: 0.92rem;
  width: 0.92rem;
}

.method-explorer-v6 .method-action-sequence b {
  color: #5e6b7c;
  font-size: 0.73rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.method-explorer-v6 .method-state-signal {
  background: linear-gradient(180deg, rgba(75, 155, 67, 0.07), rgba(75, 155, 67, 0.015));
  border-radius: 10px;
  display: block;
  padding: 0.18rem 0.48rem 0.28rem;
}

.method-explorer-v6 .method-state-signal svg {
  display: block;
  height: 2.2rem;
  overflow: visible;
  width: 100%;
}

.method-explorer-v6 .method-state-signal path {
  fill: none;
  stroke: var(--method-state);
  stroke-linecap: round;
  stroke-width: 2.5;
}

.method-explorer-v6 .method-state-signal path:last-child {
  opacity: 0.38;
  stroke-width: 2;
}

.method-explorer-v6 .method-state-signal > span {
  color: #667085;
  display: flex;
  font-size: 0.69rem;
  justify-content: space-between;
  line-height: 1;
  padding: 0 0.12rem;
}

.method-explorer-v6 .method-flow-bundle {
  display: grid;
  grid-column: 2;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  padding: 4.3rem 0 0.2rem;
}

.method-explorer-v6 .method-flow-bundle .method-flow-track {
  align-self: center;
  grid-column: 1;
  height: 2px;
  margin: 0 0.46rem;
  opacity: 0.78;
  width: auto;
}

.method-explorer-v6 .method-flow-bundle .method-flow-track-visual {
  grid-row: 1;
}

.method-explorer-v6 .method-flow-bundle .method-flow-track-action {
  grid-row: 2;
}

.method-explorer-v6 .method-flow-bundle .method-flow-track-state {
  grid-row: 3;
}

.method-explorer-v6 .method-flow-track > span,
.method-explorer-v6 .method-output-track > span {
  border-width: 2px;
  height: 0.68rem;
  width: 0.68rem;
}

.method-explorer-v6 .method-memory-node {
  align-self: center;
  background:
    radial-gradient(circle at 30% 7%, rgba(109, 139, 180, 0.24), transparent 36%),
    linear-gradient(155deg, #25334a 0%, #151d2b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 36px rgba(24, 34, 53, 0.22);
  grid-column: 3;
  grid-row: 1;
  justify-self: stretch;
  margin: 0 0.34rem;
  min-height: 282px;
  overflow: hidden;
  padding: 1.35rem 1rem;
  position: relative;
}

.method-explorer-v6 .method-memory-node::before {
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255, 255, 255, 0.07) 45%,
    transparent 64%
  );
  border: 0;
  border-radius: 0;
  content: "";
  inset: -45% -80%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-28%);
}

.method-explorer-v6 .method-memory-node::after {
  display: none;
}

.method-explorer-v6.is-animated .method-memory-node::before {
  animation: method-memory-sheen 5.8s ease-in-out infinite;
}

.method-explorer-v6 .method-memory-kicker {
  color: #aebdd0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.method-explorer-v6 .method-memory-node h4 {
  color: #fff;
  font-size: 1.42rem;
  letter-spacing: -0.025em;
  margin: 0.2rem 0 1.12rem;
  position: relative;
  z-index: 1;
}

.method-explorer-v6 .method-memory-compression {
  align-items: center;
  display: grid;
  gap: 0.48rem 0.42rem;
  grid-template-columns: 3.3rem 1.2rem 5.2rem;
  grid-template-rows: repeat(3, 1rem);
  justify-content: center;
  position: relative;
  z-index: 1;
}

.method-explorer-v6 .method-compression-stream {
  border-radius: 999px;
  display: block;
  height: 0.38rem;
  position: relative;
}

.method-explorer-v6 .method-compression-stream::before,
.method-explorer-v6 .method-compression-stream::after {
  background: inherit;
  border-radius: 50%;
  content: "";
  height: 0.58rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.58rem;
}

.method-explorer-v6 .method-compression-stream::before {
  left: 0;
}

.method-explorer-v6 .method-compression-stream::after {
  right: 0;
}

.method-explorer-v6 .method-compression-visual {
  background: var(--method-visual);
  grid-column: 1;
  grid-row: 1;
}

.method-explorer-v6 .method-compression-action {
  background: var(--method-action);
  grid-column: 1;
  grid-row: 2;
}

.method-explorer-v6 .method-compression-state {
  background: var(--method-state);
  grid-column: 1;
  grid-row: 3;
}

.method-explorer-v6 .method-compression-arrow {
  color: #96a5ba;
  font-size: 2rem;
  font-weight: 300;
  grid-column: 2;
  grid-row: 1 / 4;
  line-height: 1;
}

.method-explorer-v6 .method-memory-token-grid {
  display: grid;
  gap: 0.35rem;
  grid-column: 3;
  grid-row: 1 / 4;
  grid-template-columns: repeat(4, 0.9rem);
}

.method-explorer-v6 .method-memory-token-grid span {
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(5, 10, 18, 0.26);
  height: 1.15rem;
  width: 0.9rem;
}

.method-explorer-v6 .method-memory-token-grid [data-memory-stream="visual"] {
  background: var(--method-visual);
}

.method-explorer-v6 .method-memory-token-grid [data-memory-stream="action"] {
  background: var(--method-action);
}

.method-explorer-v6 .method-memory-token-grid [data-memory-stream="state"] {
  background: var(--method-state);
}

.method-explorer-v6 .method-memory-token-grid [data-memory-stream="mixed"] {
  background: linear-gradient(
    180deg,
    var(--method-visual) 0 33.333%,
    var(--method-action) 33.333% 66.666%,
    var(--method-state) 66.666% 100%
  );
}

.method-explorer-v6 .method-memory-token-grid span.is-muted {
  opacity: 0.1;
  transform: scale(0.78);
}

.method-explorer-v6 .method-memory-caption {
  color: #c7d2e0;
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 1.08rem;
  position: relative;
  z-index: 1;
}

.method-explorer-v6 .method-memory-node.is-empty {
  background: #364152;
  filter: grayscale(1);
  opacity: 0.54;
}

.method-explorer-v6 .method-output-track {
  --stream: #7e8da2;
  align-self: center;
  background: linear-gradient(90deg, transparent, var(--stream) 18%, var(--stream) 82%, transparent);
  grid-column: 4;
  grid-row: 1;
  height: 2px;
  margin: 0 0.38rem;
  opacity: 0.75;
  width: auto;
}

.method-explorer-v6 .method-stage-output {
  align-self: center;
  grid-column: 5;
  grid-row: 1;
  min-height: 0;
  overflow: visible;
}

.method-explorer-v6 .method-stage-content {
  padding: 0;
  width: 100%;
}

.method-explorer-v6 .method-stage-content > .method-column-heading {
  margin-bottom: 0.92rem;
}

.method-explorer-v6 .method-learning-diagram {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: 9rem minmax(0, 1fr);
}

.method-explorer-v6 .method-decoder-hub {
  align-items: center;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(137, 151, 168, 0.24);
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(24, 34, 53, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 190px;
  padding: 1rem 0.78rem;
  position: relative;
  text-align: center;
}

.method-explorer-v6 .method-decoder-hub::after {
  background: #9aa7b8;
  content: "";
  height: 2px;
  left: 100%;
  position: absolute;
  top: 50%;
  width: 1rem;
}

.method-explorer-v6 .method-decoder-mark {
  background:
    radial-gradient(circle at center, #fff 0 22%, transparent 24%),
    conic-gradient(
      var(--method-visual) 0 33%,
      var(--method-action) 33% 66%,
      var(--method-state) 66% 100%
    );
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(126, 141, 162, 0.2);
  display: block;
  height: 3.1rem;
  margin-bottom: 0.68rem;
  width: 3.1rem;
}

.method-explorer-v6 .method-decoder-hub strong {
  color: var(--method-ink);
  font-size: 1rem;
  line-height: 1.2;
}

.method-explorer-v6 .method-decoder-hub small {
  color: #748092;
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 0.3rem;
}

.method-explorer-v6 .method-objective-grid {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: 1fr;
  position: relative;
}

.method-explorer-v6 .method-objective-grid::before {
  background: #9aa7b8;
  bottom: 1.9rem;
  content: "";
  left: -0.52rem;
  position: absolute;
  top: 1.9rem;
  width: 2px;
}

.method-explorer-v6 .method-objective-grid > .method-objective-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(151, 164, 180, 0.23);
  border-radius: 13px;
  box-shadow: none;
  display: grid;
  gap: 0.62rem;
  grid-template-columns: 2.7rem minmax(0, 1fr) 1.35rem;
  min-height: 58px;
  padding: 0.44rem 0.58rem;
  position: relative;
  text-align: left;
}

.method-explorer-v6 .method-objective-grid > .method-objective-card::before {
  background: #9aa7b8;
  content: "";
  height: 2px;
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0.55rem;
}

.method-explorer-v6 .method-objective-grid > .method-objective-card:hover {
  background: #fff;
  border-color: #c4cdd7;
  box-shadow: 0 7px 18px rgba(24, 34, 53, 0.075);
  transform: none;
}

.method-explorer-v6 .method-objective-grid > .method-objective-card.is-disabled {
  background: rgba(224, 229, 234, 0.7);
  border-color: #d6dde4;
  filter: grayscale(0.8);
  opacity: 0.34;
}

.method-explorer-v6 .method-supervision-icon {
  height: 2.55rem;
  object-fit: contain;
  width: 2.55rem;
}

.method-explorer-v6 .method-objective-card strong {
  color: var(--method-ink);
  display: block;
  font-size: 0.94rem;
  line-height: 1.16;
}

.method-explorer-v6 .method-objective-card small {
  color: #727e8f;
  display: block;
  font-size: 0.76rem;
  line-height: 1.25;
  margin-top: 0.12rem;
}

.method-explorer-v6 .method-objective-card-progress #method-progress-value {
  color: var(--method-progress);
  font-size: 0.76rem;
}

.method-explorer-v6 .method-objective-state {
  align-items: center;
  background: #fff;
  border: 1px solid #ccd4dd;
  border-radius: 50%;
  color: transparent;
  display: flex;
  font-size: 0;
  height: 1.32rem;
  justify-content: center;
  padding: 0;
  width: 1.32rem;
}

.method-explorer-v6 .method-objective-state::before {
  color: #23965b;
  content: "✓";
  font-size: 0.72rem;
  font-weight: 900;
}

.method-explorer-v6 .method-objective-card.is-disabled .method-objective-state::before {
  color: #9ba5b2;
  content: "+";
}

.method-explorer-v6 .method-objective-card-progress .method-progress-bar {
  background: rgba(233, 120, 61, 0.13);
  border-radius: 999px;
  bottom: 0.27rem;
  height: 3px;
  left: 3.92rem;
  overflow: hidden;
  right: 2.05rem;
}

.method-explorer-v6 .method-objective-card-progress .method-progress-bar > span {
  background: var(--method-progress);
}

.method-explorer-v6 .method-policy-board {
  display: flex;
  flex-direction: column;
  gap: 0.82rem;
}

.method-explorer-v6 .method-policy-context {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(225px, 1.15fr) minmax(160px, 0.85fr);
}

.method-explorer-v6 .method-policy-context span {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  display: block;
  font-size: inherit;
  font-weight: inherit;
  justify-content: initial;
  line-height: inherit;
  padding: 0;
  text-align: left;
}

.method-explorer-v6 .method-policy-observation {
  background: #111827;
  border: 1px solid rgba(24, 34, 53, 0.12);
  border-radius: 16px;
  box-shadow: 0 9px 24px rgba(24, 34, 53, 0.14);
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.method-explorer-v6 .method-policy-observation img {
  aspect-ratio: 16 / 9;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.method-explorer-v6 .method-policy-observation::after {
  background: linear-gradient(180deg, transparent 45%, rgba(9, 15, 25, 0.88));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.method-explorer-v6 .method-policy-observation figcaption {
  align-items: end;
  bottom: 0.58rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  left: 0.7rem;
  position: absolute;
  right: 0.7rem;
  z-index: 1;
}

.method-explorer-v6 .method-policy-observation figcaption span {
  font-size: 0.79rem;
  font-weight: 750;
}

.method-explorer-v6 .method-policy-observation figcaption strong {
  background: rgba(12, 20, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
}

.method-explorer-v6 .method-policy-prompt {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(151, 164, 180, 0.25);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.82rem 0.9rem;
}

.method-explorer-v6 .method-policy-prompt span,
.method-explorer-v6 .method-action-chunk > span {
  color: #778295;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.method-explorer-v6 .method-policy-prompt strong {
  color: var(--method-ink);
  font-size: 1rem;
  letter-spacing: -0.015em;
  line-height: 1.28;
  margin-top: 0.28rem;
}

.method-explorer-v6 .method-vla-path {
  align-items: stretch;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(225px, 1.12fr) 2.25rem minmax(165px, 0.88fr);
  margin-top: 0;
}

.method-explorer-v6 .method-vla-path > div {
  border-radius: 17px;
  padding: 0.84rem 0.9rem;
  text-align: left;
}

.method-explorer-v6 .method-vla-core {
  background:
    radial-gradient(circle at 92% 0%, rgba(92, 131, 179, 0.3), transparent 38%),
    var(--method-ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 9px 22px rgba(24, 34, 53, 0.17);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.method-explorer-v6 .method-vla-memory-port {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  display: block;
  margin-bottom: 0.62rem;
  padding: 0.38rem 0.5rem 0.42rem;
  position: relative;
}

.method-explorer-v6 .method-vla-memory-port::before {
  background: linear-gradient(
    90deg,
    var(--method-visual) 0 33.333%,
    var(--method-action) 33.333% 66.666%,
    var(--method-state) 66.666% 100%
  );
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 0.5rem;
  position: absolute;
  right: 0.5rem;
  top: -1px;
}

.method-explorer-v6 .method-vla-memory-port small,
.method-explorer-v6 .method-vla-memory-port strong {
  display: block;
}

.method-explorer-v6 .method-vla-memory-port small {
  color: #aebdce;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.method-explorer-v6 .method-vla-memory-port strong {
  color: #fff;
  font-size: 0.77rem;
  line-height: 1.2;
  margin-top: 0.12rem;
}

.method-explorer-v6 .method-vla-core > strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1.2;
}

.method-explorer-v6 .method-vla-core > small {
  color: #b7c3d2;
  font-size: 0.75rem;
  line-height: 1.3;
  margin-top: 0.2rem;
}

.method-explorer-v6 .method-policy-arrow {
  align-items: center;
  color: #76869a;
  display: flex;
  font-size: 1.7rem;
  justify-content: center;
}

.method-explorer-v6 .method-action-chunk {
  background: #eef4fa;
  border: 1px solid #c9d8e8;
  border-style: solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.method-explorer-v6 .method-action-chunk > strong {
  color: #23496f;
  font-size: 0.98rem;
  line-height: 1.25;
  margin-top: 0.3rem;
}

.method-explorer-v6 .method-action-chunk > small {
  color: #6e7c8e;
  font-size: 0.7rem;
  line-height: 1.35;
  margin-top: 0.34rem;
}

.method-explorer-v6 .method-evidence {
  background: #f2f5f7;
  border: 1px solid #dce3e9;
  border-radius: 22px;
  box-shadow: none;
  margin-top: 1.15rem;
  padding: 1.1rem 1.2rem;
}

.method-explorer-v6 .method-evidence-body {
  gap: 1.4rem;
  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
}

.method-explorer-v6 .method-evidence-summary {
  border-right-color: #d8e0e7;
}

.method-explorer-v6 .method-evidence-summary > .eyebrow {
  color: #607086;
}

.method-explorer-v6 .method-evidence-score-row strong {
  color: var(--method-ink);
}

.method-explorer-v6 .method-task-result-track {
  background: #dce3ea;
}

.method-explorer-v6 .method-task-result-track > span {
  background: #5b7698;
}

@keyframes method-memory-sheen {
  0%,
  22% {
    transform: translateX(-30%);
  }

  64%,
  100% {
    transform: translateX(30%);
  }
}

@media (max-width: 1120px) {
  .method-explorer-v6 .method-explorer-toolbar {
    grid-template-columns: minmax(560px, 720px) minmax(240px, 1fr);
  }

  .method-explorer-v6 .method-storyboard {
    min-width: 1190px;
  }
}

@media (max-width: 900px) {
  .method-explorer-v6 .method-explorer-toolbar {
    align-items: stretch;
    gap: 0.9rem;
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-explorer-status {
    border-left: 0;
    border-top: 1px solid #dce2e8;
    padding: 0.72rem 0 0;
  }

  .method-explorer-v6 .method-evidence-body {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-evidence-summary {
    border-bottom: 1px solid #d8e0e7;
    border-right: 0;
    padding: 0 0 1rem;
  }
}

@media (max-width: 700px) {
  .method-explorer-v6 .method-stage-tabs {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-pipeline-panel {
    border-radius: 20px;
    padding: 0.95rem;
  }

  .method-explorer-v6 .method-storyboard {
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
  }

  .method-explorer-v6 .method-history-bank {
    grid-column: 1;
    grid-row: 1;
  }

  .method-explorer-v6 .method-flow-bundle {
    align-items: center;
    display: flex;
    grid-column: 1;
    grid-row: 2;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    position: relative;
  }

  .method-explorer-v6 .method-flow-bundle .method-flow-track {
    display: none;
  }

  .method-explorer-v6 .method-flow-bundle::before {
    background: linear-gradient(
      180deg,
      var(--method-visual) 0 33.333%,
      var(--method-action) 33.333% 66.666%,
      var(--method-state) 66.666% 100%
    );
    border-radius: 999px;
    content: "";
    height: 2rem;
    width: 4px;
  }

  .method-explorer-v6 .method-flow-bundle::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--method-state);
    bottom: 0;
    content: "";
    position: absolute;
  }

  .method-explorer-v6 .method-memory-node {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    margin: 0;
    max-width: 280px;
    min-height: 250px;
    width: 100%;
  }

  .method-explorer-v6 .method-output-track {
    background: #7e8da2;
    grid-column: 1;
    grid-row: 4;
    height: 2.5rem;
    justify-self: center;
    margin: 0;
    width: 3px;
  }

  .method-explorer-v6 .method-output-track::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #7e8da2;
    bottom: 0;
    right: 50%;
    top: auto;
    transform: translate(50%, 0);
  }

  .method-explorer-v6 .method-output-track > span {
    display: none;
  }

  .method-explorer-v6 .method-stage-output {
    grid-column: 1;
    grid-row: 5;
  }

  .method-explorer-v6 .method-learning-diagram {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-decoder-hub {
    min-height: 130px;
  }

  .method-explorer-v6 .method-decoder-hub::after,
  .method-explorer-v6 .method-objective-grid::before,
  .method-explorer-v6 .method-objective-grid > .method-objective-card::before {
    display: none;
  }

  .method-explorer-v6 .method-policy-context,
  .method-explorer-v6 .method-vla-path {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-policy-arrow {
    height: 1.6rem;
    transform: rotate(90deg);
  }

  .method-explorer-v6 .method-evidence {
    border-radius: 18px;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .method-explorer-v6 .method-stage-tab {
    padding: 0.65rem 0.72rem;
  }

  .method-explorer-v6 .method-task-chart {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .method-explorer-v6 .method-memory-node::before {
    animation: none;
  }
}

/* Method explorer v7 refinements: no white cards, per-stream tokens, explicit VLA adapter */
.method-explorer-v6 .method-stage-tab:hover {
  background: #dfe5eb;
}

.method-explorer-v6 .method-stage-tab.is-active {
  background: #d5dee7;
  box-shadow: inset 0 0 0 1px rgba(79, 96, 118, 0.1);
}

.method-explorer-v6 .method-pipeline-panel {
  background:
    radial-gradient(circle at 46% 44%, rgba(213, 222, 231, 0.7), transparent 32%),
    linear-gradient(145deg, #e8edf1 0%, #dde5eb 100%);
}

.method-explorer-v6 .method-storyboard {
  grid-template-columns:
    minmax(320px, 0.96fr)
    64px
    minmax(205px, 0.58fr)
    64px
    minmax(620px, 1.72fr);
  min-width: 1270px;
}

.method-explorer-v6 .method-stream-card {
  background: color-mix(in srgb, var(--stream) 10%, #e6ebef);
  border-color: color-mix(in srgb, var(--stream) 28%, #cbd4dd);
  box-shadow: 0 5px 14px rgba(24, 34, 53, 0.045);
}

.method-explorer-v6 .method-stream-card:hover {
  background: color-mix(in srgb, var(--stream) 15%, #e6ebef);
  border-color: color-mix(in srgb, var(--stream) 48%, #bdc8d3);
}

.method-explorer-v6 .method-stream-card.is-disabled {
  background: #dce3e8;
}

.method-explorer-v6 .method-visual-history-preview img {
  border-color: color-mix(in srgb, var(--method-visual) 24%, #d8e0e6);
}

.method-explorer-v6 .method-action-sequence i {
  border-color: #e4e9ed;
}

.method-explorer-v6 .method-memory-node {
  background: rgba(207, 217, 226, 0.62);
  border: 1px solid #aebbc8;
  box-shadow: 0 9px 22px rgba(43, 57, 75, 0.09);
  color: var(--method-ink);
}

.method-explorer-v6 .method-memory-node::before {
  background: linear-gradient(
    105deg,
    transparent 28%,
    rgba(126, 146, 169, 0.11) 46%,
    transparent 64%
  );
}

.method-explorer-v6 .method-memory-kicker {
  color: #66788d;
}

.method-explorer-v6 .method-memory-node h4 {
  color: var(--method-ink);
}

.method-explorer-v6 .method-compression-arrow {
  color: #6f8196;
}

.method-explorer-v6 .method-memory-token-grid {
  grid-template-columns: repeat(3, 1rem);
}

.method-explorer-v6 .method-memory-token-grid span {
  border-color: rgba(63, 78, 98, 0.15);
  box-shadow: 0 2px 4px rgba(43, 57, 75, 0.13);
  height: 1.25rem;
  width: 1rem;
}

.method-explorer-v6 .method-memory-token-grid [data-memory-stream="mixed"] {
  background: #8795a7;
}

.method-explorer-v6 .method-memory-caption {
  color: #53667b;
}

.method-explorer-v6 .method-memory-node.is-empty {
  background: #ccd5dd;
}

.method-explorer-v6 .method-output-track {
  --stream: #75869a;
}

.method-explorer-v6 .method-output-track-label {
  color: #5e7085;
  font-size: 0.66rem;
  font-weight: 800;
  left: 50%;
  letter-spacing: 0.04em;
  line-height: 1.15;
  position: absolute;
  text-align: center;
  top: calc(50% - 2.05rem);
  transform: translateX(-50%);
  white-space: nowrap;
}

.method-explorer-v6 .method-output-track > span:nth-of-type(1) {
  background: var(--method-visual);
}

.method-explorer-v6 .method-output-track > span:nth-of-type(2) {
  background: var(--method-action);
}

.method-explorer-v6 .method-output-track > span:nth-of-type(3) {
  background: var(--method-state);
}

.method-explorer-v6 .method-learning-diagram {
  gap: 1.15rem;
  grid-template-columns: 8.4rem minmax(0, 1fr);
}

.method-explorer-v6 .method-decoder-hub {
  background: #d4dde5;
  border-color: #b8c4cf;
  box-shadow: 0 6px 16px rgba(38, 52, 70, 0.06);
  min-height: 218px;
}

.method-explorer-v6 .method-decoder-mark {
  background:
    radial-gradient(circle at center, #d4dde5 0 22%, transparent 24%),
    conic-gradient(
      var(--method-visual) 0 33%,
      var(--method-action) 33% 66%,
      var(--method-state) 66% 100%
    );
  border-color: #d4dde5;
}

.method-explorer-v6 .method-objective-grid {
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.method-explorer-v6 .method-objective-grid::before,
.method-explorer-v6 .method-objective-grid > .method-objective-card::before {
  display: none;
}

.method-explorer-v6 .method-objective-grid > .method-objective-card {
  align-content: center;
  border-radius: 16px;
  gap: 0.72rem;
  grid-template-columns: 3.15rem minmax(0, 1fr) 1.35rem;
  min-height: 104px;
  padding: 0.72rem 0.72rem;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="visual"] {
  background: #eee5bd;
  border-color: #d9c77a;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="action"] {
  background: #d8e7f3;
  border-color: #aecae0;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="state"] {
  background: #dcead8;
  border-color: #b5d0ae;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="progress"] {
  background: #eeddd3;
  border-color: #dcbca9;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="visual"]:hover {
  background: #f1e4aa;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="action"]:hover {
  background: #cfe3f2;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="state"]:hover {
  background: #d4e8cf;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="progress"]:hover {
  background: #ecd3c5;
}

.method-explorer-v6 .method-supervision-icon {
  height: 3rem;
  width: 3rem;
}

.method-explorer-v6 .method-objective-card strong {
  font-size: 0.98rem;
}

.method-explorer-v6 .method-objective-card small {
  font-size: 0.79rem;
}

.method-explorer-v6 .method-objective-state {
  background: #dfe6eb;
  border-color: #bbc6d0;
}

.method-explorer-v6 .method-objective-card-progress .method-progress-bar {
  left: 4.58rem;
}

.method-explorer-v6 .method-policy-architecture {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.method-explorer-v6 .method-policy-input-lanes {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: minmax(200px, 0.78fr) minmax(350px, 1.22fr);
}

.method-explorer-v6 .method-memory-input-lane,
.method-explorer-v6 .method-native-input-lane {
  border: 1px solid #b9c5d0;
  border-radius: 17px;
  min-width: 0;
  padding: 0.72rem 0.8rem;
  position: relative;
}

.method-explorer-v6 .method-memory-input-lane {
  background: #d4dde5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.method-explorer-v6 .method-native-input-lane {
  background: #dce4ea;
}

.method-explorer-v6 .method-architecture-label {
  color: #65758a;
  display: block;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 0.48rem;
  text-transform: uppercase;
}

.method-explorer-v6 .method-policy-memory-tokens {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.48rem;
}

.method-explorer-v6 .method-policy-memory-tokens i {
  border-radius: 3px;
  display: block;
  height: 1.22rem;
  width: 0.82rem;
}

.method-explorer-v6 .method-policy-memory-tokens .is-visual {
  background: var(--method-visual);
}

.method-explorer-v6 .method-policy-memory-tokens .is-action {
  background: var(--method-action);
}

.method-explorer-v6 .method-policy-memory-tokens .is-state {
  background: var(--method-state);
}

.method-explorer-v6 .method-policy-memory-tokens i.is-muted {
  filter: grayscale(0.8);
  opacity: 0.14;
  transform: scale(0.78);
}

.method-explorer-v6 .method-memory-input-lane > strong {
  color: var(--method-ink);
  font-size: 0.92rem;
  line-height: 1.25;
}

.method-explorer-v6 .method-memory-input-lane > small {
  color: #667589;
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 0.24rem;
}

.method-explorer-v6 .method-lane-arrow {
  align-items: center;
  background: #c6d0da;
  border: 1px solid #aebbc7;
  border-radius: 50%;
  bottom: -0.82rem;
  color: #4f647b;
  display: flex;
  font-size: 0.9rem;
  font-weight: 800;
  height: 1.64rem;
  justify-content: center;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 1.64rem;
  z-index: 2;
}

.method-explorer-v6 .method-native-context {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(145px, 1.08fr) minmax(135px, 0.92fr);
}

.method-explorer-v6 .method-policy-observation {
  border-color: #aebbc7;
  border-radius: 12px;
  box-shadow: none;
}

.method-explorer-v6 .method-policy-prompt {
  background: #cfd9e2;
  border-color: #aebbc7;
  border-radius: 12px;
  padding: 0.62rem 0.68rem;
}

.method-explorer-v6 .method-policy-prompt strong {
  font-size: 0.88rem;
}

.method-explorer-v6 .method-vlm-block {
  align-items: center;
  background: #c7d3df;
  border: 1px solid #a5b4c3;
  border-radius: 11px;
  display: grid;
  gap: 0.12rem 0.6rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 0.52rem;
  padding: 0.48rem 0.62rem;
}

.method-explorer-v6 .method-vlm-block > span {
  background: #b8c6d3;
  border-radius: 999px;
  color: #52657b;
  font-size: 0.62rem;
  font-weight: 800;
  grid-row: 1 / 3;
  line-height: 1.15;
  padding: 0.28rem 0.43rem;
  text-align: center;
}

.method-explorer-v6 .method-vlm-block > strong {
  color: var(--method-ink);
  font-size: 0.9rem;
  line-height: 1.15;
}

.method-explorer-v6 .method-vlm-block > small {
  color: #637388;
  font-size: 0.68rem;
  line-height: 1.25;
}

.method-explorer-v6 .method-action-expert {
  background: #cfd9e2;
  border: 1px solid #aebbc7;
  border-radius: 19px;
  padding: 0.72rem;
}

.method-explorer-v6 .method-action-expert-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.method-explorer-v6 .method-action-expert-heading span {
  color: #637388;
  display: block;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.method-explorer-v6 .method-action-expert-heading strong {
  color: var(--method-ink);
  display: block;
  font-size: 1rem;
  line-height: 1.18;
  margin-top: 0.08rem;
}

.method-explorer-v6 .method-action-expert-heading > small {
  background: #bdc9d4;
  border: 1px solid #a7b5c3;
  border-radius: 999px;
  color: #52657b;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0.28rem 0.52rem;
}

.method-explorer-v6 .method-expert-layers {
  display: grid;
  gap: 0.34rem;
}

.method-explorer-v6 .method-expert-layer {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}

.method-explorer-v6 .method-native-layer,
.method-explorer-v6 .method-adapter-layer {
  align-items: center;
  border-radius: 10px;
  display: flex;
  min-width: 0;
}

.method-explorer-v6 .method-native-layer {
  background: #bac8d5;
  border: 1px solid #a0b1c0;
  color: #25374c;
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 750;
  padding: 0.55rem 0.62rem;
}

.method-explorer-v6 .method-adapter-layer {
  background: #ead9ce;
  border: 1px solid #d2b7a6;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  justify-content: center;
  padding: 0.44rem 0.58rem;
  text-align: left;
}

.method-explorer-v6 .method-adapter-layer small,
.method-explorer-v6 .method-adapter-layer strong {
  display: block;
  width: 100%;
}

.method-explorer-v6 .method-adapter-layer small {
  color: #85634f;
  font-size: 0.61rem;
  line-height: 1.15;
}

.method-explorer-v6 .method-adapter-layer strong {
  color: #6e422b;
  font-size: 0.78rem;
  line-height: 1.2;
  margin-top: 0.15rem;
}

.method-explorer-v6 .method-adapter-layer i {
  color: #a26543;
  font-style: normal;
  margin: 0 0.14rem;
}

.method-explorer-v6 .method-adapter-layer b {
  font-weight: 850;
}

.method-explorer-v6 .method-expert-layer-middle .method-native-layer,
.method-explorer-v6 .method-expert-layer-middle .method-adapter-layer {
  min-height: 1.35rem;
  padding: 0;
}

.method-explorer-v6 .method-expert-order {
  color: #586b80;
  font-size: 0.66rem;
  line-height: 1.35;
  margin-top: 0.5rem;
  text-align: center;
}

.method-explorer-v6 .method-expert-order strong {
  color: #8a5133;
}

.method-explorer-v6 .method-action-output {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.method-explorer-v6 .method-action-output-arrow {
  align-items: center;
  color: #61758c;
  display: flex;
  font-size: 1.15rem;
  font-weight: 800;
  justify-content: center;
}

.method-explorer-v6 .method-action-output .method-action-chunk {
  background: #cbddea;
  border: 1px solid #a7bfd3;
  border-radius: 14px;
  display: grid;
  gap: 0.28rem 0.7rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.58rem 0.72rem;
  width: 100%;
}

.method-explorer-v6 .method-action-output .method-action-chunk > span {
  align-self: center;
  grid-row: 1 / 3;
}

.method-explorer-v6 .method-action-output .method-action-chunk > strong {
  color: #23496f;
  font-size: 0.94rem;
  margin: 0;
}

.method-explorer-v6 .method-action-output .method-action-chunk > small {
  font-size: 0.68rem;
  margin: 0;
}

@media (max-width: 1120px) {
  .method-explorer-v6 .method-storyboard {
    min-width: 1250px;
  }
}

@media (max-width: 700px) {
  .method-explorer-v6 .method-storyboard {
    min-width: 0;
  }

  .method-explorer-v6 .method-objective-grid,
  .method-explorer-v6 .method-policy-input-lanes,
  .method-explorer-v6 .method-native-context {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-learning-diagram {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-output-track-label {
    left: calc(50% + 3.5rem);
    top: 50%;
    transform: translate(-50%, -50%);
  }

}

/* Method explorer v8: compact, scrollbar-free policy architecture */
.method-explorer-v6 .method-pipeline-scroll {
  overflow: visible;
}

.method-explorer-v6 .method-storyboard {
  grid-template-columns:
    minmax(0, 0.92fr)
    44px
    minmax(0, 0.58fr)
    44px
    minmax(0, 1.7fr);
  min-width: 0;
}

.method-explorer-v6 .method-history-bank,
.method-explorer-v6 .method-memory-node,
.method-explorer-v6 .method-stage-output {
  min-width: 0;
}

.method-explorer-v6 .method-flow-bundle .method-flow-track {
  margin: 0 0.26rem;
}

.method-explorer-v6 .method-memory-node {
  margin: 0 0.18rem;
  padding-left: 0.72rem;
  padding-right: 0.72rem;
}

.method-explorer-v6 .method-output-track {
  margin: 0 0.22rem;
}

.method-explorer-v6 .method-output-track-label {
  font-size: 0.7rem;
  top: calc(50% - 1.82rem);
}

.method-explorer-v6 .method-raw-vector-sequence {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.method-explorer-v6 .method-raw-vector-sequence > span {
  background: color-mix(in srgb, var(--stream) 8%, #dce4ea);
  border: 1px solid color-mix(in srgb, var(--stream) 23%, #c3ced7);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  min-width: 0;
  padding: 0.42rem 0.45rem;
}

.method-explorer-v6 .method-raw-vector-sequence b {
  color: color-mix(in srgb, var(--stream) 78%, #243449);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

.method-explorer-v6 .method-raw-vector-sequence sub {
  font-size: 0.68em;
  font-style: normal;
}

.method-explorer-v6 .method-raw-vector-sequence i {
  align-items: end;
  display: flex;
  gap: 0.16rem;
  height: 0.72rem;
}

.method-explorer-v6 .method-raw-vector-sequence em {
  background: var(--stream);
  border-radius: 999px;
  display: block;
  flex: 1;
  height: 45%;
  min-width: 2px;
  opacity: 0.48;
}

.method-explorer-v6 .method-raw-vector-sequence em:nth-child(2) {
  height: 100%;
  opacity: 0.78;
}

.method-explorer-v6 .method-raw-vector-sequence em:nth-child(3) {
  height: 66%;
  opacity: 0.62;
}

.method-explorer-v6 .method-raw-vector-sequence em:nth-child(4) {
  height: 84%;
  opacity: 0.9;
}

.method-explorer-v6 .method-raw-vector-sequence > span:nth-child(2) em:nth-child(1) {
  height: 78%;
}

.method-explorer-v6 .method-raw-vector-sequence > span:nth-child(2) em:nth-child(2) {
  height: 52%;
}

.method-explorer-v6 .method-raw-vector-sequence > span:nth-child(3) em:nth-child(3) {
  height: 94%;
}

.method-explorer-v6 .method-policy-architecture-compact {
  gap: 0.48rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-native-context {
  gap: 0.52rem;
  grid-template-columns: minmax(155px, 0.9fr) minmax(155px, 1.1fr);
}

.method-explorer-v6 .method-policy-architecture-compact .method-policy-observation {
  min-height: 82px;
}

.method-explorer-v6 .method-policy-architecture-compact .method-policy-prompt {
  min-width: 0;
}

.method-explorer-v6 .method-vlm-bridge {
  align-items: center;
  background: #c7d3de;
  border: 1px solid #a8b7c5;
  border-radius: 13px;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  padding: 0.48rem 0.68rem;
  position: relative;
}

.method-explorer-v6 .method-vlm-bridge::after {
  align-items: center;
  background: #b8c6d2;
  border: 1px solid #9eafbf;
  border-radius: 50%;
  bottom: -0.72rem;
  color: #50657c;
  content: "↓";
  display: flex;
  font-size: 0.72rem;
  font-weight: 900;
  height: 1.4rem;
  justify-content: center;
  left: 75%;
  position: absolute;
  transform: translateX(-50%);
  width: 1.4rem;
  z-index: 2;
}

.method-explorer-v6 .method-vlm-bridge span,
.method-explorer-v6 .method-vlm-bridge strong {
  display: block;
}

.method-explorer-v6 .method-vlm-bridge span {
  color: #617286;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.method-explorer-v6 .method-vlm-bridge strong {
  color: var(--method-ink);
  font-size: 1.04rem;
  line-height: 1.15;
  margin-top: 0.12rem;
}

.method-explorer-v6 .method-vlm-bridge > small {
  color: #5d6f83;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: right;
}

.method-explorer-v6 .method-vlm-bridge > small b:first-child {
  color: #65768a;
}

.method-explorer-v6 .method-vlm-bridge > small b:last-child {
  color: #2f648f;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-expert {
  padding: 0.62rem;
}

.method-explorer-v6 .method-expert-body {
  align-items: stretch;
  display: grid;
  gap: 0.52rem;
  grid-template-columns: minmax(82px, 0.3fr) minmax(0, 1.7fr);
}

.method-explorer-v6 .method-expert-memory-rail {
  background: #d8e0e6;
  border: 1px solid #b6c2cd;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0.48rem;
  position: relative;
}

.method-explorer-v6 .method-expert-memory-rail::after {
  background: #a5b3c1;
  content: "";
  height: 2px;
  left: 100%;
  position: absolute;
  top: 50%;
  width: 0.54rem;
}

.method-explorer-v6 .method-expert-memory-rail > span {
  color: #64768a;
  font-size: 0.71rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.method-explorer-v6 .method-expert-memory-rail .method-policy-memory-tokens {
  display: grid;
  gap: 0.22rem;
  grid-template-columns: repeat(3, 0.66rem);
  margin: 0.38rem 0;
}

.method-explorer-v6 .method-expert-memory-rail .method-policy-memory-tokens i {
  height: 0.9rem;
  width: 0.66rem;
}

.method-explorer-v6 .method-expert-memory-rail > strong {
  color: #33485f;
  font-size: 0.76rem;
  line-height: 1.2;
}

.method-explorer-v6 .method-expert-memory-rail > small {
  color: #758395;
  font-size: 0.68rem;
  line-height: 1.2;
  margin-top: 0.18rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-expert-heading {
  margin-bottom: 0.48rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-expert-heading strong {
  font-size: 1.06rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-expert-heading > small {
  font-size: 0.72rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-expert-layers {
  gap: 0.28rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-expert-layer {
  gap: 0.38rem;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}

.method-explorer-v6 .method-policy-architecture-compact .method-adapter-layer {
  padding: 0.36rem 0.48rem;
  position: relative;
}

.method-explorer-v6 .method-policy-architecture-compact .method-adapter-layer::after {
  border-bottom: 4px solid transparent;
  border-left: 6px solid #b17b5d;
  border-top: 4px solid transparent;
  content: "";
  position: absolute;
  right: -0.46rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.method-explorer-v6 .method-policy-architecture-compact .method-native-layer {
  padding: 0.42rem 0.48rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-adapter-layer small {
  font-size: 0.68rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-adapter-layer strong {
  font-size: 0.84rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-expert-order {
  font-size: 0.74rem;
  margin-top: 0.42rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-output {
  gap: 0.14rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-output-arrow {
  font-size: 0.9rem;
  height: 0.9rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-chunk {
  padding: 0.48rem 0.64rem;
}

@media (max-width: 1000px) {
  .method-explorer-v6 .method-storyboard {
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .method-explorer-v6 .method-history-bank {
    grid-column: 1;
    grid-row: 1;
  }

  .method-explorer-v6 .method-flow-bundle {
    align-items: center;
    display: flex;
    grid-column: 1;
    grid-row: 2;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    position: relative;
  }

  .method-explorer-v6 .method-flow-bundle .method-flow-track {
    display: none;
  }

  .method-explorer-v6 .method-flow-bundle::before {
    background: linear-gradient(
      180deg,
      var(--method-visual) 0 33.333%,
      var(--method-action) 33.333% 66.666%,
      var(--method-state) 66.666% 100%
    );
    border-radius: 999px;
    content: "";
    height: 2rem;
    width: 4px;
  }

  .method-explorer-v6 .method-flow-bundle::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--method-state);
    bottom: 0;
    content: "";
    position: absolute;
  }

  .method-explorer-v6 .method-memory-node {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    margin: 0;
    max-width: 280px;
    min-height: 250px;
    width: 100%;
  }

  .method-explorer-v6 .method-output-track {
    background: #75869a;
    grid-column: 1;
    grid-row: 4;
    height: 2.5rem;
    justify-self: center;
    margin: 0;
    width: 3px;
  }

  .method-explorer-v6 .method-output-track::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #75869a;
    bottom: 0;
    right: 50%;
    top: auto;
    transform: translate(50%, 0);
  }

  .method-explorer-v6 .method-output-track > span {
    display: none;
  }

  .method-explorer-v6 .method-output-track-label {
    left: calc(50% + 3.6rem);
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .method-explorer-v6 .method-stage-output {
    grid-column: 1;
    grid-row: 5;
  }
}

@media (max-width: 620px) {
  .method-explorer-v6 .method-raw-vector-sequence {
    gap: 0.3rem;
  }

  .method-explorer-v6 .method-policy-architecture-compact .method-native-context {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-vlm-bridge {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

  .method-explorer-v6 .method-vlm-bridge > small {
    text-align: left;
  }

  .method-explorer-v6 .method-expert-body {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-expert-memory-rail::after {
    display: none;
  }

  .method-explorer-v6 .method-expert-memory-rail .method-policy-memory-tokens {
    grid-template-columns: repeat(6, 0.66rem);
  }
}

/* Method explorer v9: visible memory labels and a clearer VLA color hierarchy */
.method-explorer-v6 .method-output-track {
  overflow: visible;
  position: relative;
  z-index: 5;
}

.method-explorer-v6 .method-output-track-label {
  background: #334c68;
  border: 1px solid #263c55;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(35, 54, 75, 0.18);
  color: #edf4fa;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.52rem;
  top: calc(50% - 2.25rem);
  z-index: 7;
}

.method-explorer-v6 .method-policy-architecture-compact .method-native-context {
  gap: 0.62rem;
  grid-template-columns: minmax(170px, 1.06fr) minmax(160px, 0.94fr);
}

.method-explorer-v6 .method-policy-architecture-compact .method-policy-observation {
  border: 2px solid #8ca9c4;
  box-shadow: 0 7px 17px rgba(45, 71, 98, 0.15);
}

.method-explorer-v6 .method-policy-architecture-compact .method-policy-prompt {
  background:
    radial-gradient(circle at 92% 10%, rgba(126, 99, 170, 0.18), transparent 38%),
    linear-gradient(145deg, #e6def1 0%, #d8e2f0 100%);
  border: 1px solid #b5a8cb;
  border-radius: 15px;
  box-shadow: 0 7px 17px rgba(70, 57, 96, 0.11);
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
  padding: 0.82rem 0.9rem 0.82rem 1rem;
  position: relative;
}

.method-explorer-v6 .method-policy-architecture-compact .method-policy-prompt::before {
  color: rgba(83, 64, 120, 0.13);
  content: "“";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: 0.35rem;
  top: -0.2rem;
}

.method-explorer-v6 .method-policy-prompt .method-policy-prompt-label {
  align-items: center;
  align-self: flex-start;
  background: #66558f;
  border: 0;
  border-radius: 999px;
  color: #f1ecf9;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 850;
  justify-content: center;
  letter-spacing: 0.07em;
  line-height: 1;
  padding: 0.34rem 0.56rem;
  position: relative;
  text-transform: uppercase;
  width: fit-content;
  z-index: 1;
}

.method-explorer-v6 .method-policy-architecture-compact .method-policy-prompt strong {
  color: #352c50;
  font-size: 1.02rem;
  letter-spacing: -0.018em;
  line-height: 1.3;
  margin-top: 0.58rem;
  position: relative;
  z-index: 1;
}

.method-explorer-v6 .method-vlm-bridge {
  background:
    radial-gradient(circle at 90% 0%, rgba(123, 167, 207, 0.38), transparent 38%),
    linear-gradient(135deg, #304b69 0%, #466b90 100%);
  border-color: #29435e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 18px rgba(39, 62, 85, 0.2);
  padding: 0.62rem 0.76rem;
}

.method-explorer-v6 .method-vlm-bridge::after {
  background: #d7e4ef;
  border-color: #91a9bf;
  color: #345371;
}

.method-explorer-v6 .method-vlm-bridge span {
  color: #cbdbea;
}

.method-explorer-v6 .method-vlm-bridge strong {
  color: #fff;
  font-size: 1.08rem;
}

.method-explorer-v6 .method-vlm-bridge > small {
  color: #d6e2ed;
  font-size: 0.76rem;
}

.method-explorer-v6 .method-vlm-bridge > small b {
  background: rgba(226, 237, 247, 0.12);
  border: 1px solid rgba(226, 237, 247, 0.18);
  border-radius: 999px;
  color: #eef5fb;
  display: inline-block;
  font-size: 0.68rem;
  padding: 0.16rem 0.36rem;
}

.method-explorer-v6 .method-vlm-bridge > small b:first-child,
.method-explorer-v6 .method-vlm-bridge > small b:last-child {
  color: #eef5fb;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-expert {
  background:
    radial-gradient(circle at 6% 10%, rgba(98, 138, 176, 0.16), transparent 34%),
    linear-gradient(145deg, #dbe6f0 0%, #cbdbe8 100%);
  border-color: #9fb4c7;
  box-shadow: 0 8px 19px rgba(46, 72, 99, 0.12);
  padding: 0.72rem;
}

.method-explorer-v6 .method-action-expert-heading span {
  color: #586e84;
  font-size: 0.74rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-expert-heading strong {
  color: #1f3853;
  font-size: 1.08rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-expert-heading > small {
  background: #3e6082;
  border-color: #345472;
  color: #e8f1f8;
  font-size: 0.7rem;
  padding: 0.34rem 0.58rem;
}

.method-explorer-v6 .method-expert-body {
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1.58fr);
}

.method-explorer-v6 .method-expert-memory-rail {
  background:
    linear-gradient(145deg, #e2e9ef 0%, #d4dee7 100%);
  border-color: #9eafbf;
  box-shadow: inset 3px 0 0 #6c8299;
  overflow: visible;
  padding: 0.58rem 0.58rem 0.58rem 0.72rem;
}

.method-explorer-v6 .method-expert-memory-rail::before {
  background: linear-gradient(
    90deg,
    var(--method-visual) 0 33.333%,
    var(--method-action) 33.333% 66.666%,
    var(--method-state) 66.666% 100%
  );
  border-radius: 999px;
  content: "";
  height: 4px;
  left: 0.72rem;
  position: absolute;
  right: 0.58rem;
  top: 0.42rem;
}

.method-explorer-v6 .method-expert-memory-rail::after {
  background: #7890a6;
  height: 2px;
  width: 0.62rem;
}

.method-explorer-v6 .method-expert-memory-rail > span {
  color: #38516b;
  font-size: 0.76rem;
  margin-top: 0.3rem;
}

.method-explorer-v6 .method-expert-memory-rail .method-policy-memory-tokens {
  display: grid;
  gap: 0.22rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0.48rem 0 0.42rem;
  width: 100%;
}

.method-explorer-v6 .method-expert-memory-rail .method-policy-memory-tokens i {
  height: 1.05rem;
  width: 100%;
}

.method-explorer-v6 .method-expert-memory-rail > strong {
  color: #263f59;
  display: block;
  font-size: 0.77rem;
  line-height: 1.28;
  overflow: visible;
  white-space: normal;
}

.method-explorer-v6 .method-expert-memory-rail > small {
  color: #617489;
  font-size: 0.68rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-native-layer {
  background: linear-gradient(135deg, #5b7fa2 0%, #486d91 100%);
  border-color: #3f6488;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #f0f6fb;
  font-size: 0.82rem;
}

.method-explorer-v6 .method-policy-architecture-compact .method-adapter-layer {
  background: linear-gradient(135deg, #f1d3c0 0%, #e8bfa7 100%);
  border-color: #ca9f85;
  box-shadow: 0 3px 7px rgba(121, 75, 49, 0.08);
}

.method-explorer-v6 .method-policy-architecture-compact .method-adapter-layer small {
  color: #7b523b;
}

.method-explorer-v6 .method-policy-architecture-compact .method-adapter-layer strong {
  color: #673c26;
}

.method-explorer-v6 .method-policy-architecture-compact .method-expert-order {
  color: #4f6479;
}

.method-explorer-v6 .method-policy-architecture-compact .method-action-chunk {
  background: linear-gradient(135deg, #d5e8f5 0%, #c4dceb 100%);
  border-color: #97b6cd;
  box-shadow: 0 5px 13px rgba(46, 86, 116, 0.11);
}

@media (max-width: 620px) {
  .method-explorer-v6 .method-policy-architecture-compact .method-native-context {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-expert-body {
    grid-template-columns: 1fr;
  }
}

/* Method explorer v10: diagrammatic VLA integration without nested panels */
.method-explorer-v6 .method-policy-architecture-v10 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.method-explorer-v6 .method-policy-context-row {
  align-items: center;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: minmax(165px, 0.9fr) minmax(0, 1.1fr);
}

.method-explorer-v6 .method-policy-context-row .method-policy-observation {
  border: 2px solid #8ca9c4;
  border-radius: 13px;
  box-shadow: 0 6px 15px rgba(45, 71, 98, 0.14);
  min-height: 88px;
}

.method-explorer-v6 .method-instruction-chip {
  align-items: center;
  align-self: center;
  background: linear-gradient(135deg, #e4dcf0 0%, #d8e2f0 100%);
  border: 1px solid #b1a4c8;
  border-radius: 999px;
  box-shadow: 0 5px 13px rgba(72, 57, 101, 0.1);
  display: inline-flex;
  gap: 0.62rem;
  justify-self: start;
  max-width: 100%;
  padding: 0.55rem 0.82rem 0.55rem 0.58rem;
}

.method-explorer-v6 .method-instruction-chip > span {
  background: #66558f;
  border-radius: 999px;
  color: #f2edf9;
  flex: 0 0 auto;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.34rem 0.5rem;
  text-transform: uppercase;
}

.method-explorer-v6 .method-instruction-chip > strong {
  color: #362d51;
  font-size: 0.92rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.method-explorer-v6 .method-context-arrows {
  display: grid;
  grid-template-columns: minmax(165px, 0.9fr) minmax(0, 1.1fr);
  height: 1.35rem;
}

.method-explorer-v6 .method-context-arrows > span {
  align-items: center;
  color: #6f86a0;
  display: flex;
  font-size: 0.92rem;
  font-weight: 800;
  justify-content: center;
}

.method-explorer-v6 .method-vlm-node {
  align-items: center;
  align-self: center;
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 171, 212, 0.34), transparent 38%),
    linear-gradient(135deg, #2e4967 0%, #456b90 100%);
  border: 1px solid #263f59;
  border-radius: 17px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 8px 18px rgba(39, 62, 85, 0.2);
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  max-width: 430px;
  padding: 0.62rem 0.78rem;
  width: 78%;
}

.method-explorer-v6 .method-vlm-node span,
.method-explorer-v6 .method-vlm-node strong {
  display: block;
}

.method-explorer-v6 .method-vlm-node span {
  color: #c8d9e9;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.method-explorer-v6 .method-vlm-node strong {
  color: #fff;
  font-size: 1.04rem;
  line-height: 1.15;
  margin-top: 0.12rem;
}

.method-explorer-v6 .method-vlm-node > small {
  color: #d7e3ee;
  font-size: 0.69rem;
  line-height: 1.3;
  max-width: 12rem;
  text-align: right;
}

.method-explorer-v6 .method-vlm-node > small b {
  color: #fff;
}

.method-explorer-v6 .method-vlm-node > small i {
  font-style: normal;
  opacity: 0.55;
  padding: 0 0.18rem;
}

.method-explorer-v6 .method-vlm-kv-link {
  align-items: center;
  color: #55708c;
  display: flex;
  flex-direction: column;
  height: 2.05rem;
  justify-content: center;
  margin-left: 36%;
  width: 58%;
}

.method-explorer-v6 .method-vlm-kv-link > span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
}

.method-explorer-v6 .method-vlm-kv-link > i {
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  margin-top: 0.14rem;
}

.method-explorer-v6 .method-expert-diagram {
  align-items: center;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(88px, 0.31fr) minmax(0, 1.69fr) minmax(105px, 0.42fr);
  position: relative;
}

.method-explorer-v6 .method-memory-source {
  align-items: center;
  align-self: stretch;
  border-right: 1px dashed #8fa1b3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0.35rem 0.5rem 0.35rem 0;
  position: relative;
  text-align: center;
}

.method-explorer-v6 .method-memory-source::after {
  background: #7189a0;
  content: "";
  height: 2px;
  left: 100%;
  position: absolute;
  top: 54%;
  width: 0.52rem;
}

.method-explorer-v6 .method-memory-source > span {
  color: #324b65;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  line-height: 1.15;
  text-transform: uppercase;
}

.method-explorer-v6 .method-memory-source .method-policy-memory-tokens {
  display: grid;
  gap: 0.22rem;
  grid-template-columns: repeat(3, 0.72rem);
  margin: 0.48rem 0 0.4rem;
}

.method-explorer-v6 .method-memory-source .method-policy-memory-tokens i {
  border-radius: 3px;
  height: 0.95rem;
  width: 0.72rem;
}

.method-explorer-v6 .method-memory-source > strong {
  color: #38516b;
  display: block;
  font-size: 0.66rem;
  line-height: 1.25;
  max-width: 5.7rem;
  overflow: visible;
  white-space: normal;
}

.method-explorer-v6 .method-memory-source > small {
  color: #718095;
  font-size: 0.64rem;
  line-height: 1.1;
  margin-top: 0.2rem;
}

.method-explorer-v6 .method-expert-stack {
  min-width: 0;
}

.method-explorer-v6 .method-expert-stack-heading {
  align-items: end;
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  margin-bottom: 0.42rem;
}

.method-explorer-v6 .method-expert-stack-heading > strong {
  color: #203a55;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.method-explorer-v6 .method-expert-stack-heading > span {
  color: #8a5a40;
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: right;
}

.method-explorer-v6 .method-expert-stack-layers {
  display: grid;
  gap: 0.28rem;
}

.method-explorer-v6 .method-expert-stack-layer {
  border: 1px solid #aebcca;
  border-radius: 11px;
  box-shadow: 0 4px 10px rgba(45, 68, 91, 0.08);
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.72fr) minmax(0, 0.64fr);
  overflow: hidden;
}

.method-explorer-v6 .method-expert-stack-layer > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0.43rem 0.48rem;
}

.method-explorer-v6 .method-expert-stack-layer small,
.method-explorer-v6 .method-expert-stack-layer strong {
  display: block;
}

.method-explorer-v6 .method-expert-stack-layer small {
  font-size: 0.59rem;
  line-height: 1.15;
}

.method-explorer-v6 .method-expert-stack-layer strong {
  font-size: 0.76rem;
  line-height: 1.2;
  margin-top: 0.13rem;
}

.method-explorer-v6 .method-cross-attn {
  background: #edc7af;
  color: #6e432c;
}

.method-explorer-v6 .method-cross-attn small {
  color: #8a6049;
}

.method-explorer-v6 .method-film-block {
  background: #f2dacb;
  color: #744832;
}

.method-explorer-v6 .method-film-block small {
  color: #966c55;
}

.method-explorer-v6 .method-native-action-layer {
  background: linear-gradient(135deg, #597da1 0%, #476c91 100%);
  color: #f1f6fb;
  text-align: center;
}

.method-explorer-v6 .method-native-action-layer small {
  color: #d4e0eb;
}

.method-explorer-v6 .method-expert-stack-middle {
  border: 0;
  box-shadow: none;
  min-height: 1.15rem;
  overflow: visible;
}

.method-explorer-v6 .method-expert-stack-middle > span {
  background: transparent;
  color: #8292a3;
  padding: 0;
  text-align: center;
}

.method-explorer-v6 .method-next-action {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  min-width: 0;
}

.method-explorer-v6 .method-next-action > span {
  color: #5f7891;
  flex: 0 0 auto;
  font-size: 1.1rem;
  font-weight: 900;
}

.method-explorer-v6 .method-next-action > div {
  background: linear-gradient(135deg, #d3e7f4 0%, #c5dcea 100%);
  border: 1px solid #99b5ca;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(49, 83, 109, 0.1);
  min-width: 0;
  padding: 0.55rem 0.58rem;
}

.method-explorer-v6 .method-next-action small,
.method-explorer-v6 .method-next-action strong {
  display: block;
}

.method-explorer-v6 .method-next-action small {
  color: #647d93;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-transform: uppercase;
}

.method-explorer-v6 .method-next-action strong {
  color: #274b6b;
  font-size: 0.8rem;
  line-height: 1.25;
  margin-top: 0.25rem;
}

.method-explorer-v6 .method-expert-order-v10 {
  color: #5c7085;
  font-size: 0.7rem;
  margin: 0.48rem 0 0;
  text-align: center;
}

.method-explorer-v6 .method-policy-update {
  align-items: center;
  color: #65778b;
  display: flex;
  font-size: 0.68rem;
  gap: 0.38rem;
  justify-content: center;
  line-height: 1.3;
  margin-top: 0.28rem;
}

.method-explorer-v6 .method-policy-update > span {
  color: #4b7094;
  font-size: 0.92rem;
}

.method-explorer-v6 .method-policy-update strong {
  color: #315a7f;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

@media (max-width: 620px) {
  .method-explorer-v6 .method-policy-context-row,
  .method-explorer-v6 .method-context-arrows {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-context-arrows {
    display: none;
  }

  .method-explorer-v6 .method-instruction-chip {
    border-radius: 16px;
    justify-self: stretch;
  }

  .method-explorer-v6 .method-vlm-node {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 0.55rem;
    width: 100%;
  }

  .method-explorer-v6 .method-vlm-node > small {
    text-align: left;
  }

  .method-explorer-v6 .method-vlm-kv-link {
    margin-left: 0;
    width: 100%;
  }

  .method-explorer-v6 .method-expert-diagram {
    grid-template-columns: 1fr;
  }

  .method-explorer-v6 .method-memory-source {
    border-bottom: 1px dashed #8fa1b3;
    border-right: 0;
    padding: 0.4rem 0 0.55rem;
  }

  .method-explorer-v6 .method-memory-source::after {
    display: none;
  }

  .method-explorer-v6 .method-memory-source .method-policy-memory-tokens {
    grid-template-columns: repeat(6, 0.72rem);
  }

  .method-explorer-v6 .method-memory-source > strong {
    max-width: none;
  }

  .method-explorer-v6 .method-next-action > span {
    transform: rotate(90deg);
  }
}

/* Method explorer v11: warm graphite and terracotta VLA palette */
.method-explorer-v6 {
  --method-vla-border: #c6a08a;
  --method-vla-dark: #433833;
  --method-vla-mid: #a85f3c;
  --method-vla-soft: #f0e3d9;
}

.method-explorer-v6 .method-output-track {
  --stream: #9a6b52;
}

.method-explorer-v6 .method-policy-context-row .method-policy-observation {
  border-color: #bb8b70;
  box-shadow: 0 6px 15px rgba(96, 59, 39, 0.14);
}

.method-explorer-v6 .method-instruction-chip {
  background: linear-gradient(135deg, #f5ece5 0%, #ead9ce 100%);
  border-color: #c7a38f;
  box-shadow: 0 5px 13px rgba(92, 56, 39, 0.1);
}

.method-explorer-v6 .method-instruction-chip > span {
  background: var(--method-vla-mid);
  color: #fff8f2;
}

.method-explorer-v6 .method-instruction-chip > strong {
  color: #43342d;
}

.method-explorer-v6 .method-context-arrows > span,
.method-explorer-v6 .method-vlm-kv-link,
.method-explorer-v6 .method-next-action > span {
  color: #9b6a50;
}

.method-explorer-v6 .method-vlm-node {
  background:
    radial-gradient(circle at 88% 0%, rgba(225, 139, 86, 0.3), transparent 38%),
    linear-gradient(135deg, var(--method-vla-dark) 0%, var(--method-vla-mid) 100%);
  border-color: #382d28;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 8px 18px rgba(62, 43, 34, 0.2);
}

.method-explorer-v6 .method-vlm-node span {
  color: #f0d8c8;
}

.method-explorer-v6 .method-vlm-node > small {
  color: #f5e9e1;
}

.method-explorer-v6 .method-memory-source {
  border-right-color: #b6a094;
}

.method-explorer-v6 .method-memory-source::after {
  background: #a77b62;
}

.method-explorer-v6 .method-memory-source > span {
  color: #55473f;
}

.method-explorer-v6 .method-memory-source > strong {
  color: #4b3d36;
}

.method-explorer-v6 .method-memory-source > small {
  color: #796d66;
}

.method-explorer-v6 .method-expert-stack-heading > strong {
  color: #4b3931;
}

.method-explorer-v6 .method-expert-stack-layer {
  border-color: #c3ac9f;
  box-shadow: 0 4px 10px rgba(75, 50, 38, 0.08);
}

.method-explorer-v6 .method-native-action-layer {
  background: linear-gradient(135deg, #b66c45 0%, #84513a 100%);
  color: #fff9f5;
}

.method-explorer-v6 .method-native-action-layer small {
  color: #f1ddd1;
}

.method-explorer-v6 .method-next-action > div.method-action-symbol-output {
  align-items: center;
  background: linear-gradient(135deg, #f2e5dc 0%, #e8d4c5 100%);
  border: 1px solid var(--method-vla-border);
  border-radius: 13px;
  box-shadow: 0 4px 10px rgba(85, 51, 34, 0.1);
  display: flex;
  gap: 0.58rem;
  justify-content: center;
  min-width: 0;
  padding: 0.55rem 0.62rem;
}

.method-explorer-v6 .method-next-action .method-action-symbol-output > strong {
  color: var(--method-vla-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.38rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.method-explorer-v6 .method-next-action .method-action-symbol-output sub {
  font-size: 0.62em;
  font-style: normal;
}

.method-explorer-v6 .method-action-vector-glyph {
  align-items: end;
  display: flex;
  gap: 0.15rem;
  height: 1.25rem;
  width: 2.6rem;
}

.method-explorer-v6 .method-action-vector-glyph > i {
  background: var(--method-vla-mid);
  border-radius: 999px;
  display: block;
  flex: 1;
  height: 42%;
  opacity: 0.52;
}

.method-explorer-v6 .method-action-vector-glyph > i:nth-child(2) {
  height: 82%;
  opacity: 0.72;
}

.method-explorer-v6 .method-action-vector-glyph > i:nth-child(3) {
  height: 58%;
  opacity: 0.62;
}

.method-explorer-v6 .method-action-vector-glyph > i:nth-child(4) {
  height: 100%;
  opacity: 0.88;
}

.method-explorer-v6 .method-action-vector-glyph > i:nth-child(5) {
  height: 68%;
  opacity: 0.68;
}

.method-explorer-v6 .method-expert-order-v10 {
  color: #786960;
}

.method-explorer-v6 .method-expert-order-v10 strong {
  color: #99593b;
}

/* Method explorer v12: exact temporal notation and connected memory conditioning */
.method-explorer-v6 {
  --method-progress: #b85f82;
}

.method-explorer-v6 .method-instruction-stack {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  justify-self: start;
  max-width: 100%;
  padding: 0.18rem 0.1rem;
}

.method-explorer-v6 .method-instruction-stack > span {
  color: #9b5e40;
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  line-height: 1.1;
  text-transform: uppercase;
}

.method-explorer-v6 .method-instruction-stack > strong {
  border-left: 3px solid #b98264;
  color: #43352f;
  font-size: 1.03rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
  padding: 0.12rem 0 0.12rem 0.68rem;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="visual"] {
  --objective-color: var(--method-visual);
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="action"] {
  --objective-color: var(--method-action);
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="state"] {
  --objective-color: var(--method-state);
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="progress"] {
  --objective-color: var(--method-progress);
  background: #f0e2e8;
  border-color: #d6b3c1;
}

.method-explorer-v6 .method-objective-grid > [data-method-objective="progress"]:hover {
  background: #ecd7df;
}

.method-explorer-v6
  .method-objective-grid
  > .method-objective-card
  .method-objective-state {
  background: var(--objective-color);
  border: 0;
  height: 1.48rem;
  width: 1.48rem;
}

.method-explorer-v6
  .method-objective-grid
  > .method-objective-card
  .method-objective-state::before {
  color: #fff;
  font-size: 0.78rem;
}

.method-explorer-v6
  .method-objective-grid
  > .method-objective-card.is-disabled
  .method-objective-state {
  background: #aeb7c0;
}

.method-explorer-v6
  .method-objective-grid
  > [data-method-objective="progress"]
  .method-supervision-icon {
  filter: none;
}

.method-explorer-v6
  .method-objective-grid
  > [data-method-objective="progress"]
  .method-progress-bar {
  background: rgba(184, 95, 130, 0.17);
}

.method-explorer-v6 .method-memory-source::before {
  background: #9a6b52;
  content: "";
  height: 2px;
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0.5rem;
}

.method-explorer-v6 .method-memory-source::after {
  top: 50%;
}

@media (min-width: 1001px) {
  .method-explorer-v6[data-stage="policy"] .method-output-track {
    align-self: stretch;
    background: none;
    height: auto;
    margin: 0;
    opacity: 0.88;
    overflow: visible;
    position: relative;
  }

  .method-explorer-v6[data-stage="policy"] .method-output-track::before {
    border-right: 2px solid var(--stream);
    border-top: 2px solid var(--stream);
    content: "";
    height: 28%;
    left: 0;
    position: absolute;
    top: 50%;
    width: 52%;
  }

  .method-explorer-v6[data-stage="policy"] .method-output-track::after {
    background: var(--stream);
    border: 0;
    content: "";
    height: 2px;
    left: 52%;
    position: absolute;
    right: auto;
    top: 78%;
    transform: none;
    width: 48%;
  }

  .method-explorer-v6[data-stage="policy"] .method-output-track > span {
    animation: none !important;
    display: none;
  }

  .method-explorer-v6[data-stage="policy"] .method-output-track > span:first-child {
    background: transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid var(--stream);
    border-radius: 0;
    border-right: 0;
    border-top: 4px solid transparent;
    box-shadow: none;
    display: block;
    height: 0;
    left: auto;
    opacity: 1;
    right: -1px;
    top: 78%;
    transform: translateY(-50%);
    width: 0;
  }
}

@media (max-width: 620px) {
  .method-explorer-v6 .method-instruction-stack {
    justify-self: stretch;
  }

  .method-explorer-v6 .method-memory-source::before {
    display: none;
  }
}

/* Method explorer v13: causal history scrubber and style-conditioned examples */
.method-explorer-v6 {
  --history-progress: 50%;
}

.method-explorer-v6 .method-stream-card-heading small b {
  color: color-mix(in srgb, var(--stream) 78%, #334155);
  display: inline;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02em;
  font-style: italic;
  font-weight: 700;
}

.method-explorer-v6 .method-stream-card-heading small sub {
  font-size: 0.7em;
  font-style: normal;
}

.method-explorer-v6 .method-visual-history-preview {
  gap: 0.4rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.method-explorer-v6 .method-visual-history-preview > span {
  grid-column: span 2;
}

.method-explorer-v6 .method-visual-history-preview > span:nth-child(4) {
  grid-column: 2 / span 2;
}

.method-explorer-v6 .method-visual-history-preview > span {
  border: 1px solid transparent;
  border-radius: 9px;
  display: block;
  min-width: 0;
  opacity: 1;
  overflow: hidden;
  position: relative;
  transition:
    border-color 0.16s ease,
    filter 0.16s ease,
    opacity 0.16s ease,
    transform 0.16s ease;
}

.method-explorer-v6 .method-visual-history-preview img {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  height: 100%;
}

.method-explorer-v6 .method-visual-history-preview i {
  background: rgba(25, 34, 48, 0.78);
  border-radius: 999px;
  bottom: 0.22rem;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 700;
  left: 50%;
  line-height: 1;
  padding: 0.18rem 0.3rem;
  position: absolute;
  transform: translateX(-50%);
}

.method-explorer-v6 [data-method-history-point].is-future {
  filter: grayscale(0.72);
  opacity: 0.24;
}

.method-explorer-v6 [data-method-history-point].is-current {
  border-color: color-mix(in srgb, var(--stream) 82%, #334155);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--stream) 25%, transparent);
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

.method-explorer-v6 .method-raw-vector-sequence {
  gap: 0.28rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.method-explorer-v6 .method-raw-vector-sequence > span {
  border-radius: 8px;
  gap: 0.3rem;
  padding: 0.36rem 0.28rem;
  transition:
    border-color 0.16s ease,
    filter 0.16s ease,
    opacity 0.16s ease,
    transform 0.16s ease;
}

.method-explorer-v6 .method-raw-vector-sequence b {
  font-size: 0.78rem;
  text-align: center;
}

.method-explorer-v6 .method-raw-vector-sequence i {
  gap: 0.1rem;
  height: 0.58rem;
}

.method-explorer-v6 .method-history-timeline {
  background: rgba(247, 249, 251, 0.76);
  border: 1px solid rgba(128, 143, 160, 0.22);
  border-radius: 14px;
  margin-top: 0.72rem;
  padding: 0.72rem 0.82rem 0.68rem;
}

.method-explorer-v6 .method-history-timeline-heading {
  align-items: baseline;
  color: #344257;
  display: flex;
  font-size: 0.76rem;
  font-weight: 800;
  justify-content: space-between;
  margin-bottom: 0.48rem;
}

.method-explorer-v6 .method-history-timeline-heading output {
  color: #66758a;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

#method-history-slider {
  --progress: 50%;
  appearance: none;
  background:
    linear-gradient(
      90deg,
      #3f5067 0,
      #3f5067 var(--progress),
      #cfd7df var(--progress),
      #cfd7df 100%
    );
  border-radius: 999px;
  cursor: pointer;
  display: block;
  height: 0.42rem;
  margin: 0;
  width: 100%;
}

#method-history-slider::-webkit-slider-thumb {
  appearance: none;
  background: #fff;
  border: 3px solid #3f5067;
  border-radius: 50%;
  box-shadow: 0 2px 9px rgba(41, 55, 74, 0.24);
  height: 1.08rem;
  width: 1.08rem;
}

#method-history-slider::-moz-range-thumb {
  background: #fff;
  border: 3px solid #3f5067;
  border-radius: 50%;
  box-shadow: 0 2px 9px rgba(41, 55, 74, 0.24);
  height: 0.82rem;
  width: 0.82rem;
}

.method-explorer-v6 .method-history-legend {
  color: #697689;
  display: flex;
  font-size: 0.65rem;
  font-weight: 700;
  gap: 0.9rem;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.method-explorer-v6 .method-history-legend span {
  align-items: center;
  display: inline-flex;
  gap: 0.32rem;
}

.method-explorer-v6 .method-history-legend i {
  background: #3f5067;
  border-radius: 50%;
  height: 0.46rem;
  width: 0.46rem;
}

.method-explorer-v6 .method-history-legend span:last-child i {
  background: #cfd7df;
}

.method-explorer-v6
  .method-next-action
  > div.method-action-symbol-output.method-action-symbol-plain {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  min-width: auto;
  padding: 0.16rem 0;
}

.method-explorer-v6
  .method-next-action
  .method-action-symbol-output.method-action-symbol-plain
  > strong {
  font-size: 1.58rem;
  white-space: nowrap;
}

.method-example-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(234, 88, 12, 0.07), transparent 28%),
    #f4f1ec;
}

.method-style-matrix {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #ded9d1;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(62, 50, 38, 0.08);
  margin: 0 auto;
  max-width: 1020px;
  overflow: hidden;
  padding: 0.78rem;
}

.method-style-column-head,
.method-style-row {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 90px repeat(4, minmax(0, 1fr));
}

.method-style-column-head {
  align-items: center;
  color: #534b43;
  padding: 0 0 0.58rem;
}

.method-style-column-head > span {
  color: #91877d;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.method-style-column-head > strong {
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
}

.method-style-row + .method-style-row {
  margin-top: 0.55rem;
}

.method-style-color {
  align-items: center;
  color: #5f574f;
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  font-weight: 800;
  gap: 0.38rem;
  justify-content: center;
  text-align: center;
}

.method-style-color i {
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(61, 51, 43, 0.14);
  height: 1rem;
  width: 1rem;
}

.method-style-color i.is-orange {
  background: #df7540;
}

.method-style-color i.is-dark-blue {
  background: #263e65;
}

.method-style-color i.is-blue {
  background: #5179ac;
}

.method-style-color i.is-pink {
  background: #d88ea6;
}

.method-style-row figure {
  background: #d9d4ce;
  border: 2px solid transparent;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(49, 40, 32, 0.1);
  cursor: pointer;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

.method-style-row figure:not(.is-selected-combination) {
  opacity: 0.86;
}

.method-style-row figure:hover {
  border-color: rgba(152, 111, 153, 0.5);
  opacity: 1;
  transform: translateY(-2px);
}

.method-style-row figure.is-selected-combination {
  border-color: #986f99;
  box-shadow:
    0 0 0 2px rgba(152, 111, 153, 0.15),
    0 8px 20px rgba(75, 53, 76, 0.16);
  opacity: 1;
  transform: translateY(-2px);
}

.method-style-demo-video {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.method-style-picker {
  display: block;
  margin: 2rem auto 1rem;
  max-width: 720px;
  text-align: center;
}

.method-style-picker h3 {
  color: #292524;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 0.12rem;
}

.method-style-picker > div:first-child > p:last-child {
  color: #756d65;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.34rem auto 0;
  max-width: 620px;
}

.method-style-tabs {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid #ddd6ce;
  border-radius: 999px;
  display: flex;
  flex: 0 0 auto;
  gap: 0.24rem;
  padding: 0.28rem;
}

.method-style-tabs button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #6f665e;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.54rem 0.75rem;
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease;
}

.method-style-tabs button.is-active {
  background: #765477;
  box-shadow: 0 4px 12px rgba(74, 48, 77, 0.2);
  color: #fff;
}

.method-style-rollout-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: 720px;
}

.method-style-rollout-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #ded8d1;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(58, 46, 35, 0.07);
  min-width: 0;
  overflow: hidden;
  padding: 0.58rem;
}

.method-style-rollout-card-heading {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
  padding: 0.12rem 0.12rem 0.55rem;
}

.method-style-rollout-card-heading strong {
  color: #39332d;
  font-size: 0.84rem;
}

.method-style-rollout-card-heading span {
  background: #e8f7ed;
  border: 1px solid #b9e7c8;
  border-radius: 999px;
  color: #197443;
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  padding: 0.26rem 0.42rem;
  text-transform: uppercase;
}

.method-style-rollout-card.is-failure
  .method-style-rollout-card-heading
  span {
  background: #fdecec;
  border-color: #f0b9b9;
  color: #a52d2d;
}

.method-style-rollout-video {
  background: #16191e;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.method-style-rollout-video video {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.method-style-rollout-video > span {
  backdrop-filter: blur(6px);
  background: rgba(24, 28, 34, 0.7);
  border-radius: 999px;
  bottom: 0.42rem;
  color: #fff;
  font-size: 0.56rem;
  font-weight: 800;
  left: 0.42rem;
  letter-spacing: 0.04em;
  padding: 0.24rem 0.38rem;
  position: absolute;
  text-transform: uppercase;
}

.fold-context-example {
  max-width: 720px;
}

.fold-context-video-frame video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.method-style-row figure:focus-visible,
#method-history-slider:focus-visible {
  outline: 3px solid rgba(118, 84, 119, 0.28);
  outline-offset: 2px;
}

@media (max-width: 1000px) {
  .method-explorer-v6 .method-history-bank {
    margin: 0 auto;
    max-width: 620px;
    width: 100%;
  }

  .method-style-rollout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .method-explorer-v6 .method-history-timeline-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.14rem;
  }

  .method-explorer-v6 .method-history-legend {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.28rem;
  }

  .method-style-matrix {
    border-radius: 14px;
    padding: 0.48rem;
  }

  .method-style-column-head,
  .method-style-row {
    gap: 0.3rem;
    grid-template-columns: 58px repeat(4, minmax(0, 1fr));
  }

  .method-style-column-head > span {
    font-size: 0.5rem;
  }

  .method-style-column-head > strong {
    font-size: 0.64rem;
  }

  .method-style-color {
    font-size: 0.55rem;
  }

  .method-style-row figure {
    border-radius: 8px;
  }

  .method-style-picker {
    margin-top: 1.35rem;
  }
}

@media (max-width: 520px) {
  .method-explorer-v6 .method-visual-history-preview,
  .method-explorer-v6 .method-raw-vector-sequence {
    gap: 0.2rem;
  }

  .method-explorer-v6 .method-raw-vector-sequence > span {
    padding-left: 0.16rem;
    padding-right: 0.16rem;
  }

  .method-explorer-v6 .method-raw-vector-sequence b {
    font-size: 0.64rem;
  }

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

@media (prefers-reduced-motion: reduce) {
  .method-explorer-v6 [data-method-history-point],
  .method-style-row figure {
    transition: none;
  }
}

/* Method explorer v17: top-level timestep bar and moving visual-history slots. */
@media (min-width: 1001px) {
  .method-explorer-v6 .method-storyboard {
    row-gap: 0;
    grid-template-columns:
      minmax(0, 0.92fr)
      44px
      minmax(0, 0.58fr)
      44px
      minmax(0, 1.7fr);
  }

  .method-explorer-v6 .method-history-bank {
    grid-column: 1;
    grid-row: 1;
  }

  .method-explorer-v6 .method-flow-bundle {
    grid-column: 2;
    grid-row: 1;
  }

  .method-explorer-v6 .method-memory-node {
    grid-column: 3;
    grid-row: 1;
  }

  .method-explorer-v6 .method-output-track {
    grid-column: 4;
    grid-row: 1;
  }

  .method-explorer-v6 .method-stage-output {
    grid-column: 5;
    grid-row: 1;
  }
}

.method-explorer-v6 .method-history-timeline-top {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(237, 241, 245, 0.96), rgba(247, 249, 251, 0.96));
  border: 0;
  border-bottom: 1px solid #d7dfe6;
  border-radius: 0;
  display: grid;
  gap: 1.15rem;
  grid-template-columns: minmax(145px, auto) minmax(260px, 1fr) auto;
  margin: 0;
  padding: 0.9rem 1.55rem;
}

.method-explorer-v6
  .method-history-timeline-top
  .method-history-timeline-heading {
  display: block;
  margin: 0;
}

.method-explorer-v6
  .method-history-timeline-top
  .method-history-timeline-heading
  label,
.method-explorer-v6
  .method-history-timeline-top
  .method-history-timeline-heading
  output {
  display: block;
}

.method-explorer-v6
  .method-history-timeline-top
  .method-history-timeline-heading
  label {
  font-size: 0.78rem;
  line-height: 1.2;
}

.method-explorer-v6
  .method-history-timeline-top
  .method-history-timeline-heading
  output {
  font-size: 0.72rem;
  margin-top: 0.18rem;
}

.method-explorer-v6 .method-history-timeline-top .method-history-legend {
  justify-content: flex-end;
  margin: 0;
  white-space: nowrap;
}

.method-explorer-v6 .method-visual-history-preview {
  display: grid;
  gap: 0.58rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.method-explorer-v6 .method-visual-history-preview > .method-visual-history-slot {
  align-items: initial;
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  display: block;
  font-size: inherit;
  font-weight: inherit;
  grid-column: auto;
  height: auto;
  justify-content: initial;
  left: auto;
  line-height: normal;
  min-width: 0;
  overflow: visible;
  position: relative;
  top: auto;
  transform: none;
  width: 100%;
  z-index: auto;
}

.method-explorer-v6 .method-visual-history-slot img {
  aspect-ratio: 16 / 9;
  background: #dce3e9;
  border: 1px solid color-mix(in srgb, var(--method-visual) 35%, #c7d2dc);
  border-radius: 9px;
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.method-explorer-v6 .method-visual-history-slot > i {
  backdrop-filter: none;
  background: transparent;
  border-radius: 0;
  bottom: auto;
  color: color-mix(in srgb, var(--method-visual) 78%, #334155);
  display: block;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  left: auto;
  line-height: 1;
  padding: 0.28rem 0 0;
  position: static;
  text-align: center;
  transform: none;
}

@media (max-width: 800px) {
  .method-explorer-v6 .method-history-timeline-top {
    gap: 0.58rem;
    grid-template-columns: 1fr;
    padding: 0.82rem 1rem;
  }

  .method-explorer-v6
    .method-history-timeline-top
    .method-history-timeline-heading {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
  }

  .method-explorer-v6
    .method-history-timeline-top
    .method-history-timeline-heading
    output {
    margin: 0;
  }

  .method-explorer-v6 .method-history-timeline-top .method-history-legend {
    justify-content: flex-start;
  }

}

@media (max-width: 1000px) {
  .method-explorer-v6 .method-history-bank {
    grid-row: 1;
  }

  .method-explorer-v6 .method-flow-bundle {
    grid-row: 2;
  }

  .method-explorer-v6 .method-memory-node {
    grid-row: 3;
  }

  .method-explorer-v6 .method-output-track {
    grid-row: 4;
  }

  .method-explorer-v6 .method-stage-output {
    grid-row: 5;
  }
}

/* Method example v18: paired in-distribution and matched OOD executions. */
.method-style-rollout-grid {
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1120px;
}

.method-style-rollout-grid:not(.has-ood-comparison) {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.method-style-rollout-card.is-ood {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 236, 249, 0.96));
  border: 2px solid #9a70ad;
  box-shadow:
    0 0 0 4px rgba(154, 112, 173, 0.1),
    0 12px 30px rgba(77, 50, 91, 0.16);
}

.method-style-rollout-card.is-ood
  .method-style-rollout-card-heading
  strong {
  color: #684676;
}

.method-style-rollout-card.is-ood
  .method-style-rollout-card-heading
  span {
  background: #835494;
  border-color: #835494;
  color: #fff;
}

.method-style-rollout-card.is-ood .method-style-rollout-video {
  box-shadow: 0 0 0 2px rgba(131, 84, 148, 0.42);
}

.method-style-rollout-card.is-ood .method-style-rollout-note {
  color: #684f72;
  font-weight: 650;
}

.method-style-rollout-card.is-ood.is-failure {
  border-color: #c65b64;
  box-shadow:
    0 0 0 4px rgba(198, 91, 100, 0.12),
    0 12px 30px rgba(102, 46, 55, 0.16);
}

.method-style-rollout-card.is-ood.is-failure
  .method-style-rollout-card-heading
  span {
  background: #a52d3b;
  border-color: #a52d3b;
  color: #fff;
}

.method-style-rollout-card.is-ood.is-failure .method-style-rollout-video {
  box-shadow: 0 0 0 2px rgba(198, 91, 100, 0.48);
}

.method-style-rollout-note {
  color: #746b63;
  font-size: 0.7rem;
  line-height: 1.45;
  margin: 0;
  padding: 0.55rem 0.16rem 0.08rem;
}

@media (max-width: 700px) {
  .method-style-rollout-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
  }
}

/* Method explorer v23: compact non-visual streams and a three-frame history buffer. */
.method-explorer-v6
  .method-history-bank
  .method-stream-card-action,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state {
  gap: 0.38rem;
  margin-top: 0.42rem;
  padding: 0.52rem 0.65rem 0.56rem;
}

.method-explorer-v6
  .method-history-bank
  .method-stream-card-action
  .method-stream-title-with-icon,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state
  .method-stream-title-with-icon {
  gap: 0.48rem;
}

.method-explorer-v6
  .method-history-bank
  .method-stream-card-action
  .method-stream-title-with-icon
  > img,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state
  .method-stream-title-with-icon
  > img {
  height: 1.7rem;
  width: 1.7rem;
}

.method-explorer-v6
  .method-history-bank
  .method-stream-card-action
  .method-stream-card-heading
  strong,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state
  .method-stream-card-heading
  strong {
  font-size: 0.92rem;
}

.method-explorer-v6
  .method-history-bank
  .method-stream-card-action
  .method-stream-card-heading
  small,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state
  .method-stream-card-heading
  small {
  font-size: 0.7rem;
  margin-top: 0.08rem;
}

.method-explorer-v6
  .method-history-bank
  .method-stream-card-action
  .method-stream-state,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state
  .method-stream-state {
  height: 1.22rem;
  width: 1.22rem;
}

.method-explorer-v6
  .method-history-bank
  .method-stream-card-action
  .method-raw-vector-sequence,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state
  .method-raw-vector-sequence {
  gap: 0.2rem;
}

.method-explorer-v6
  .method-history-bank
  .method-stream-card-action
  .method-raw-vector-sequence
  > span,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state
  .method-raw-vector-sequence
  > span {
  border-radius: 6px;
  gap: 0.16rem;
  padding: 0.24rem 0.14rem;
}

.method-explorer-v6
  .method-history-bank
  .method-stream-card-action
  .method-raw-vector-sequence
  b,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state
  .method-raw-vector-sequence
  b {
  font-size: 0.66rem;
}

.method-explorer-v6
  .method-history-bank
  .method-stream-card-action
  .method-raw-vector-sequence
  i,
.method-explorer-v6
  .method-history-bank
  .method-stream-card-state
  .method-raw-vector-sequence
  i {
  height: 0.42rem;
}

.method-explorer-v6 .method-visual-history-slot > i sub {
  font-size: 0.72em;
}

.method-explorer-v6 .method-stream-range {
  color: color-mix(in srgb, var(--method-visual) 82%, #334155);
  display: inline;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9em;
  font-style: italic;
  font-weight: 700;
  margin-left: 0.28rem;
  white-space: nowrap;
}

.method-explorer-v6 .method-stream-range sub {
  font-size: 0.7em;
  font-style: normal;
}

#method .method-section-subtitle {
  max-width: 980px;
}

#method .method-section-subtitle > span {
  display: block;
}

/* Attention explorer v2: editorial comparison with a large interactive focal stage. */
#memory-analysis .analysis-figure {
  background: linear-gradient(145deg, #ffffff 0%, #fbfaf8 100%);
  border: 1px solid #ded8d1;
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(52, 43, 35, 0.04),
    0 18px 48px rgba(52, 43, 35, 0.07);
  overflow: hidden;
  padding: 1rem 1rem 1.15rem;
}

#memory-analysis .analysis-image-scroll {
  background: #f2eee8;
  border-radius: 15px;
  padding: 0.48rem;
  scrollbar-color: #c6a58f #eee8e1;
  scrollbar-width: thin;
}

#memory-analysis .analysis-image-scroll img {
  border-radius: 10px;
}

.attention-explorer {
  --attention-active: #df7540;
  --attention-active-rgb: 223 117 64;
  background:
    radial-gradient(circle at 92% 5%, rgb(var(--attention-active-rgb) / 0.12), transparent 28%),
    linear-gradient(145deg, #f7f4ef 0%, #eee9e2 100%);
  border: 1px solid #d9d1c8;
  border-radius: 28px;
  box-shadow:
    0 2px 4px rgba(52, 43, 35, 0.05),
    0 24px 65px rgba(52, 43, 35, 0.11);
  isolation: isolate;
  margin-top: 3.75rem;
  max-width: 1240px;
  overflow: hidden;
  padding: clamp(1.35rem, 2.4vw, 2.25rem);
  position: relative;
  transition: background 0.25s ease;
}

.attention-explorer::before {
  background: linear-gradient(
    90deg,
    #537fa6 0 33.333%,
    #2f9a84 33.333% 66.666%,
    #df7540 66.666% 100%
  );
  content: "";
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
  z-index: 2;
}

.attention-explorer[data-attention-active="e2e"] {
  --attention-active: #537fa6;
  --attention-active-rgb: 83 127 166;
}

.attention-explorer[data-attention-active="frozen"] {
  --attention-active: #2f9a84;
  --attention-active-rgb: 47 154 132;
}

.attention-explorer-header {
  align-items: end;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 0.36fr);
}

.attention-explorer-copy {
  max-width: 720px;
}

.attention-explorer-copy .eyebrow {
  color: var(--attention-active);
}

.attention-explorer-copy h3 {
  color: #27231f;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.attention-explorer-copy > p:last-child {
  color: #756c63;
  font-size: 0.96rem;
  line-height: 1.55;
  margin-top: 0.55rem;
}

.attention-selected-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(158, 143, 128, 0.34);
  border-radius: 17px;
  box-shadow: 0 10px 28px rgba(54, 44, 35, 0.06);
  min-width: 0;
  padding: 0.82rem 0.95rem 0.88rem;
}

.attention-selected-card > span {
  color: #85796e;
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.085em;
  line-height: 1.2;
  text-transform: uppercase;
}

.attention-selected-card > div {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 0.22rem;
}

.attention-selected-card strong {
  color: #29241f;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

.attention-selected-card b {
  color: var(--attention-active);
  font-size: 1.42rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.attention-selected-card small {
  color: #776d64;
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 0.26rem;
}

.attention-methods {
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.4rem 0 1.1rem;
}

.attention-methods button {
  --attention-tab: #df7540;
  align-items: center;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(151, 139, 127, 0.34);
  border-radius: 16px;
  color: #342e29;
  cursor: pointer;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 0.72rem 0.8rem;
  text-align: left;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.attention-methods button[data-attention-method="e2e"] {
  --attention-tab: #537fa6;
}

.attention-methods button[data-attention-method="frozen"] {
  --attention-tab: #2f9a84;
}

.attention-methods button:hover {
  background: rgba(255, 255, 255, 0.84);
  border-color: color-mix(in srgb, var(--attention-tab) 52%, #cfc6bc);
  color: #342e29;
  transform: translateY(-1px);
}

.attention-methods button.is-active,
.attention-methods button.is-active:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--attention-tab) 72%, #cfc6bc);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--attention-tab) 11%, transparent),
    0 10px 24px rgba(52, 43, 35, 0.08);
  color: #342e29;
  transform: translateY(-1px);
}

.attention-method-swatch {
  align-self: stretch;
  background: var(--attention-tab);
  border-radius: 999px;
  min-height: 2.55rem;
}

.attention-method-copy {
  min-width: 0;
}

.attention-method-copy strong,
.attention-method-copy small,
.attention-method-result b,
.attention-method-result small {
  display: block;
}

.attention-method-copy strong {
  color: #2d2823;
  font-size: 0.96rem;
  line-height: 1.2;
}

.attention-method-copy small {
  color: #796f66;
  font-size: 0.69rem;
  line-height: 1.3;
  margin-top: 0.18rem;
}

.attention-method-result {
  border-left: 1px solid #e4ddd5;
  min-width: 3.8rem;
  padding-left: 0.72rem;
  text-align: right;
}

.attention-method-result b {
  color: var(--attention-tab);
  font-size: 1.04rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.attention-method-result small {
  color: #93877c;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-top: 0.12rem;
  text-transform: uppercase;
}

.attention-stage {
  background: #fff;
  border: 1px solid #d8d0c7;
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(35, 31, 27, 0.06),
    0 16px 36px rgba(35, 31, 27, 0.1);
  margin: 0;
  overflow: hidden;
}

.attention-stage-bar {
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e4ddd5;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0.62rem 0.82rem;
}

.attention-stage-bar > div {
  align-items: center;
  display: flex;
  gap: 0.48rem;
  min-width: 0;
}

.attention-stage-bar strong {
  color: #302a25;
  font-size: 0.82rem;
  line-height: 1.2;
}

.attention-stage-bar small {
  color: #8a7f75;
  font-size: 0.68rem;
  line-height: 1.2;
}

.attention-stage-bar > span {
  background: color-mix(in srgb, var(--attention-active) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--attention-active) 26%, #ded6ce);
  border-radius: 999px;
  color: color-mix(in srgb, var(--attention-active) 80%, #3f3934);
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1;
  padding: 0.35rem 0.58rem;
}

.attention-live-dot {
  background: var(--attention-active);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--attention-active) 14%, transparent);
  height: 0.48rem;
  width: 0.48rem;
}

.attention-stage-viewport {
  background: #0d0f12;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #6f737a #171a1f;
  scrollbar-width: thin;
  width: 100%;
}

.attention-stage img {
  display: block;
  height: auto;
  max-width: none;
  min-width: 0;
  width: 100%;
}

.attention-stage figcaption {
  align-items: center;
  background: #fff;
  color: #81766c;
  display: flex;
  font-size: 0.69rem;
  gap: 1rem;
  justify-content: space-between;
  line-height: 1.35;
  padding: 0.55rem 0.82rem 0.62rem;
}

.attention-stage figcaption > span:first-child {
  color: #4b433c;
  font-weight: 750;
}

.attention-playback {
  align-items: center;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(159, 146, 134, 0.3);
  border-radius: 17px;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 1rem;
  padding: 0.72rem 0.82rem;
}

.attention-play-button {
  align-items: center;
  background: var(--attention-active);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 7px 16px rgb(var(--attention-active-rgb) / 0.2);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.73rem;
  font-weight: 750;
  gap: 0.48rem;
  justify-content: center;
  min-width: 7.4rem;
  padding: 0.55rem 0.78rem;
  transition:
    filter 0.18s ease,
    transform 0.18s ease;
}

.attention-play-button:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

.attention-play-button:focus-visible {
  outline: 3px solid rgb(var(--attention-active-rgb) / 0.22);
  outline-offset: 3px;
}

.attention-play-icon {
  border-bottom: 0.3rem solid transparent;
  border-left: 0.48rem solid currentColor;
  border-top: 0.3rem solid transparent;
  display: block;
  height: 0;
  width: 0;
}

.attention-play-button.is-playing .attention-play-icon {
  border: 0;
  height: 0.66rem;
  position: relative;
  width: 0.55rem;
}

.attention-play-button.is-playing .attention-play-icon::before,
.attention-play-button.is-playing .attention-play-icon::after {
  background: currentColor;
  border-radius: 1px;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 0.16rem;
}

.attention-play-button.is-playing .attention-play-icon::before {
  left: 0;
}

.attention-play-button.is-playing .attention-play-icon::after {
  right: 0;
}

.attention-timeline {
  margin: 0;
  min-width: 0;
}

.attention-time-labels {
  align-items: center;
  color: #84796f;
  display: grid;
  font-size: 0.68rem;
  grid-template-columns: 1fr auto 1fr;
  line-height: 1.2;
}

.attention-time-labels > span:last-child {
  text-align: right;
}

.attention-time-labels output {
  background: #fff;
  border: 1px solid #ded6ce;
  border-radius: 999px;
  color: #4f4740;
  font-size: 0.69rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  min-width: 6.3rem;
  padding: 0.24rem 0.5rem;
  text-align: center;
}

.attention-explorer .attention-timeline input {
  --attention-progress: 0%;
  background: linear-gradient(
    90deg,
    var(--attention-active) 0 var(--attention-progress),
    #d8d0c8 var(--attention-progress) 100%
  );
  height: 7px;
  margin-top: 0.58rem;
}

.attention-explorer .attention-timeline input::-webkit-slider-thumb {
  background: var(--attention-active);
  border-width: 3px;
  box-shadow:
    0 0 0 3px rgb(var(--attention-active-rgb) / 0.14),
    0 2px 7px rgba(35, 31, 27, 0.24);
  height: 21px;
  width: 21px;
}

.attention-explorer .attention-timeline input::-moz-range-thumb {
  background: var(--attention-active);
  box-shadow:
    0 0 0 3px rgb(var(--attention-active-rgb) / 0.14),
    0 2px 7px rgba(35, 31, 27, 0.24);
}

.attention-note {
  border-top: 1px solid rgba(154, 141, 129, 0.28);
  color: #786e65;
  font-size: 0.75rem;
  line-height: 1.55;
  margin: 1rem 0 0;
  max-width: none;
  padding: 0.82rem 0.1rem 0;
  text-align: left;
}

.simulation-rollout-explorer,
.robocasa-rollout-explorer {
  border-color: #ded8d1;
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(52, 43, 35, 0.04),
    0 18px 48px rgba(52, 43, 35, 0.07);
}

.simulation-rollout-explorer {
  background: linear-gradient(145deg, #faf9f7 0%, #f3f0eb 100%);
}

.simulation-rollout-explorer .subsection-heading h3,
.robocasa-rollout-explorer .subsection-heading h3 {
  font-size: 1.42rem;
  letter-spacing: -0.025em;
}

@media (max-width: 820px) {
  .attention-explorer-header {
    align-items: stretch;
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .attention-selected-card {
    max-width: 360px;
  }

  .attention-methods {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-right: -0.3rem;
    overflow-x: auto;
    padding: 0.18rem 0.3rem 0.7rem 0.18rem;
    scroll-snap-type: x mandatory;
  }

  .attention-methods button {
    flex: 0 0 min(78vw, 285px);
    scroll-snap-align: start;
  }

  .attention-stage-viewport img {
    min-width: 860px;
  }

  .attention-stage figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.18rem;
  }
}

@media (max-width: 620px) {
  .attention-explorer {
    border-radius: 21px;
    padding: 1.15rem;
  }

  .attention-explorer-copy h3 {
    font-size: 1.48rem;
  }

  .attention-playback {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .attention-play-button {
    justify-self: start;
  }

  .attention-stage-bar small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .attention-explorer,
  .attention-methods button,
  .attention-play-button {
    transition: none;
  }
}


/* Attention explorer v3: web-native current, recall, and temporal views. */
.attention-stage-viewport {
  background: #e8e2da;
  overflow: hidden;
  padding: 0.9rem;
}

.attention-visualization {
  --attention-sprite: url("../images/attention-detail/ours/frame-00-sprite.jpg?v=20261011-web-native-v1");
  --attention-visual-stream: #c79016;
  --attention-action-stream: #387fc4;
  --attention-state-stream: #4b9b43;
  background: #f8f6f2;
  border: 1px solid rgba(160, 146, 132, 0.32);
  border-radius: 16px;
  color: #312b26;
  padding: 0.9rem;
}

.attention-detail-section {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #e2dbd3;
  border-radius: 14px;
  padding: 0.78rem;
}

.attention-detail-section + .attention-detail-section {
  margin-top: 0.78rem;
}

.attention-detail-heading {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.62rem;
  padding: 0 0.08rem;
}

.attention-detail-heading > div {
  min-width: 0;
}

.attention-detail-heading span,
.attention-detail-heading strong {
  display: block;
}

.attention-detail-heading span {
  color: var(--attention-active);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.attention-detail-heading strong {
  color: #302a25;
  font-size: 1.12rem;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin-top: 0.08rem;
}

.attention-detail-heading small {
  color: #857a70;
  flex: 0 0 auto;
  font-size: 0.76rem;
  line-height: 1.3;
  text-align: right;
}

.attention-current-grid {
  display: grid;
  gap: 0.62rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 980px;
}

.attention-observation-card {
  background: #fff;
  border: 1px solid #ded7cf;
  border-radius: 11px;
  box-shadow: 0 6px 16px rgba(48, 40, 33, 0.055);
  min-width: 0;
  overflow: hidden;
}

.attention-stage .attention-observation-card figcaption {
  align-items: flex-start;
  background: #fff;
  color: #302a25;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  justify-content: flex-start;
  line-height: 1.2;
  padding: 0.5rem 0.58rem 0.48rem;
}

.attention-stage .attention-observation-card figcaption > span:first-child {
  color: #94887d;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.attention-observation-card figcaption strong {
  color: #322c27;
  font-size: 0.92rem;
}

.attention-scene-crop {
  aspect-ratio: 4 / 3;
  background-image: var(--attention-sprite);
  background-repeat: no-repeat;
  background-size: 400% 200%;
  border-top: 1px solid #e7e1da;
  display: block;
  width: 100%;
}

.attention-scene-crop.is-current-head {
  background-position: 0 0;
}

.attention-scene-crop.is-current-left {
  background-position: 33.333% 0;
}

.attention-scene-crop.is-current-right {
  background-position: 66.667% 0;
}

.attention-scene-crop.is-recall-head {
  background-position: 100% 0;
}

.attention-scene-crop.is-recall-left {
  background-position: 0 100%;
}

.attention-scene-crop.is-recall-right {
  background-position: 33.333% 100%;
}

.attention-scene-crop.is-recall-action {
  background-position: 66.667% 100%;
}

.attention-scene-crop.is-recall-state {
  background-position: 100% 100%;
}

.attention-recall-grid {
  display: grid;
  gap: 0.58rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.attention-recall-card,
.attention-heatmap-labels [data-attention-stream],
.attention-map-marker {
  --attention-stream-color: var(--attention-visual-stream);
}

.attention-recall-card[data-attention-stream="action"],
.attention-heatmap-labels [data-attention-stream="action"],
.attention-map-marker[data-attention-marker="action"] {
  --attention-stream-color: var(--attention-action-stream);
}

.attention-recall-card[data-attention-stream="state"],
.attention-heatmap-labels [data-attention-stream="state"],
.attention-map-marker[data-attention-marker="state"] {
  --attention-stream-color: var(--attention-state-stream);
}

.attention-recall-card {
  background: #fff;
  border: 1px solid #ddd6ce;
  border-top: 3px solid var(--attention-stream-color);
  border-radius: 11px;
  box-shadow: 0 6px 16px rgba(48, 40, 33, 0.05);
  min-width: 0;
  overflow: hidden;
}

.attention-recall-card-heading {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
  padding: 0.46rem 0.5rem 0;
}

.attention-recall-card-heading > span {
  color: var(--attention-stream-color);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-transform: uppercase;
}

.attention-recall-card-heading > b {
  background: color-mix(in srgb, var(--attention-stream-color) 11%, #fff);
  border: 1px solid color-mix(in srgb, var(--attention-stream-color) 29%, #ddd6ce);
  border-radius: 999px;
  color: color-mix(in srgb, var(--attention-stream-color) 82%, #403832);
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 0.25rem 0.34rem;
}

.attention-recall-card h5 {
  color: #302a25;
  font-size: 0.84rem;
  line-height: 1.22;
  min-height: 2.15rem;
  padding: 0.24rem 0.5rem 0.38rem;
}

.attention-recall-card .attention-scene-crop {
  border-bottom: 1px solid #e7e1da;
}

.attention-recall-card footer {
  padding: 0.46rem 0.5rem 0.52rem;
}

.attention-recall-card footer > span:first-child {
  color: #776d64;
  display: block;
  font-size: 0.68rem;
  line-height: 1.25;
  min-height: 1.6rem;
}

.attention-weight-track {
  background: #ede8e2;
  border-radius: 999px;
  display: block;
  height: 4px;
  margin-top: 0.34rem;
  overflow: hidden;
  width: 100%;
}

.attention-weight-track > span {
  background: var(--attention-stream-color);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 0.2s ease;
  width: 0;
}

.attention-heatmap-section {
  overflow: hidden;
}

.attention-heatmap-scroll {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.12rem;
  scrollbar-color: #b8aa9e #eee9e3;
  scrollbar-width: thin;
}

.attention-heatmap-grid {
  align-items: stretch;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 8.6rem minmax(690px, 1fr);
  min-width: 900px;
}

.attention-heatmap-labels {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.attention-heatmap-labels > span {
  align-items: center;
  color: #574f48;
  display: flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.42rem;
  line-height: 1.15;
  white-space: nowrap;
}

.attention-heatmap-labels > span::before {
  background: var(--attention-stream-color);
  border-radius: 999px;
  content: "";
  height: 0.4rem;
  width: 0.4rem;
}

.attention-heatmap-plot {
  background: #241337;
  border: 1px solid #d5cdc5;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.attention-stage-viewport .attention-heatmap-plot > img {
  display: block;
  height: auto;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.attention-map-marker {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow:
    0 0 0 2px var(--attention-stream-color),
    0 2px 7px rgba(18, 12, 25, 0.42);
  height: calc(20% - 8px);
  min-width: 5px;
  pointer-events: none;
  position: absolute;
  transition:
    left 0.2s ease,
    width 0.2s ease;
}

.attention-map-marker[data-attention-marker="head"] {
  top: 4px;
}

.attention-map-marker[data-attention-marker="left"] {
  top: calc(20% + 4px);
}

.attention-map-marker[data-attention-marker="right"] {
  top: calc(40% + 4px);
}

.attention-map-marker[data-attention-marker="action"] {
  top: calc(60% + 4px);
}

.attention-map-marker[data-attention-marker="state"] {
  top: calc(80% + 4px);
}

.attention-map-marker.is-point {
  transform: translateX(-50%);
}

.attention-heatmap-axis {
  color: #82776d;
  display: flex;
  font-size: 0.66rem;
  justify-content: space-between;
  line-height: 1.2;
  margin: 0.34rem 0.1rem 0 calc(8.6rem + 0.65rem);
  min-width: calc(900px - 8.6rem - 0.65rem);
}

.attention-source-summary {
  background: #f7f4ef;
  border: 1px solid #ded6cd;
  border-radius: 11px;
  margin-top: 0.68rem;
  padding: 0.64rem;
}

.attention-source-summary-heading {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.58rem;
}

.attention-source-summary-heading > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
}

.attention-source-summary-heading > div:first-child > span {
  color: #9a7040;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.attention-source-summary-heading > div:first-child > strong {
  color: #3f3832;
  font-size: 0.83rem;
}

.attention-source-summary-heading > div:first-child > small {
  color: #82776d;
  font-size: 0.66rem;
}

.attention-memory-output {
  align-items: center;
  background: #fffaf1;
  border: 1px solid #e4cfa7;
  border-radius: 9px;
  display: flex;
  flex: 0 0 auto;
  gap: 0.56rem;
  padding: 0.43rem 0.58rem;
}

.attention-memory-output > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
}

.attention-memory-output small {
  color: #917d68;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.attention-memory-output strong {
  color: #62451d;
  font-size: 0.73rem;
}

.attention-memory-token-stack {
  display: flex;
  gap: 2px;
}

.attention-memory-token-stack i {
  background: #d89a35;
  border: 1px solid #ba7920;
  border-radius: 3px;
  display: block;
  height: 1.18rem;
  width: 0.34rem;
}

.attention-memory-token-stack i:nth-child(2) {
  background: #e7b45d;
  transform: translateY(-2px);
}

.attention-mass-grid {
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attention-mass-grid > div {
  --attention-mass-color: #df7540;
  background: #fff;
  border: 1px solid #e1dad2;
  border-radius: 9px;
  padding: 0.48rem 0.54rem 0.5rem;
}

.attention-mass-grid > div[data-attention-mass="recent"] {
  --attention-mass-color: var(--attention-visual-stream);
}

.attention-mass-grid > div[data-attention-mass="action"] {
  --attention-mass-color: var(--attention-action-stream);
}

.attention-mass-grid > div[data-attention-mass="state"] {
  --attention-mass-color: var(--attention-state-stream);
}

.attention-mass-grid > div > span {
  align-items: baseline;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
}

.attention-mass-grid strong {
  color: #514941;
  font-size: 0.7rem;
  line-height: 1.2;
}

.attention-mass-grid > div > small {
  color: #91867c;
  display: block;
  font-size: 0.59rem;
  line-height: 1.25;
  margin-top: 0.14rem;
}

.attention-mass-grid output {
  color: var(--attention-mass-color);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.attention-mass-grid > div > i {
  background: #eee9e3;
  border-radius: 999px;
  display: block;
  height: 4px;
  margin-top: 0.36rem;
  overflow: hidden;
}

.attention-mass-grid > div > i > span {
  background: var(--attention-mass-color);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 0.2s ease;
  width: 0;
}

.attention-stage > figcaption {
  align-items: center;
  background: #fff;
  color: #81766c;
  display: flex;
  flex-direction: row;
  font-size: 0.69rem;
  gap: 1rem;
  justify-content: space-between;
  line-height: 1.35;
  padding: 0.55rem 0.82rem 0.62rem;
}

.attention-stage > figcaption > span:first-child {
  color: #4b433c;
  font-weight: 750;
}

@media (max-width: 1060px) {
  .attention-recall-grid {
    display: flex;
    overflow-x: auto;
    padding: 0.1rem 0 0.48rem;
    scroll-snap-type: x mandatory;
  }

  .attention-recall-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }
}

@media (max-width: 820px) {
  .attention-stage-viewport {
    padding: 0.62rem;
  }

  .attention-visualization {
    padding: 0.62rem;
  }

  .attention-current-grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: 0.45rem;
    scroll-snap-type: x mandatory;
  }

  .attention-observation-card {
    flex: 0 0 min(72vw, 300px);
    scroll-snap-align: start;
  }

  .attention-stage-viewport img,
  .attention-stage-viewport .attention-heatmap-plot > img {
    max-width: 100%;
    min-width: 0;
  }

  .attention-stage > figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.18rem;
  }

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

  .attention-source-summary-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .attention-detail-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.18rem;
  }

  .attention-detail-heading small {
    text-align: left;
  }

  .attention-heatmap-grid {
    grid-template-columns: 7.5rem minmax(650px, 1fr);
    min-width: 800px;
  }

  .attention-heatmap-axis {
    margin-left: calc(7.5rem + 0.65rem);
    min-width: calc(800px - 7.5rem - 0.65rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .attention-weight-track > span,
  .attention-map-marker,
  .attention-mass-grid > div > i > span {
    transition: none;
  }
}

/* Compact desktop attention explorer v4. */
@media (min-width: 1061px) {
  .attention-explorer {
    padding: 1.15rem;
  }

  .attention-explorer-header {
    display: block;
  }

  .attention-explorer-copy {
    max-width: none;
  }

  .attention-explorer-copy h3 {
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    white-space: nowrap;
  }

  .attention-explorer-copy > p:last-child {
    margin-top: 0.25rem;
  }

  .attention-selected-card {
    display: none;
  }

  .attention-methods {
    margin: 0.72rem 0 0.68rem;
  }

  .attention-methods button {
    padding: 0.48rem 0.62rem;
  }

  .attention-method-swatch {
    min-height: 1.9rem;
  }

  .attention-stage-bar {
    min-height: 2.45rem;
    padding: 0.44rem 0.7rem;
  }

  .attention-stage-viewport {
    padding: 0.52rem;
  }

  .attention-visualization {
    display: grid;
    gap: 0.52rem;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    padding: 0.52rem;
  }

  .attention-detail-section {
    min-width: 0;
    padding: 0.52rem;
  }

  .attention-detail-section + .attention-detail-section {
    margin-top: 0;
  }

  .attention-detail-heading {
    margin-bottom: 0.42rem;
  }

  .attention-detail-heading strong {
    font-size: 0.96rem;
    white-space: nowrap;
  }

  .attention-detail-heading span {
    font-size: 0.62rem;
  }

  .attention-detail-heading small {
    font-size: 0.66rem;
    white-space: nowrap;
  }

  .attention-current-grid {
    gap: 0.42rem;
  }

  .attention-stage .attention-observation-card figcaption {
    padding: 0.34rem 0.42rem;
  }

  .attention-stage .attention-observation-card figcaption > span:first-child {
    display: none;
  }

  .attention-observation-card figcaption strong {
    font-size: 0.76rem;
    white-space: nowrap;
  }

  .attention-recall-grid {
    gap: 0.42rem;
  }

  .attention-recall-card {
    border-top-width: 2px;
  }

  .attention-recall-card-heading {
    padding: 0.36rem 0.38rem;
  }

  .attention-recall-card-heading h5 {
    font-size: 0.7rem;
    line-height: 1.1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .attention-recall-card-heading > b {
    font-size: 0.59rem;
    padding: 0.2rem 0.27rem;
  }

  .attention-recall-card footer {
    padding: 0.32rem 0.38rem 0.36rem;
  }

  .attention-recall-card footer > span:first-child {
    font-size: 0.61rem;
    min-height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .attention-weight-track {
    height: 3px;
    margin-top: 0.24rem;
  }

  .attention-heatmap-section {
    grid-column: 1 / -1;
  }

  .attention-source-summary {
    align-items: center;
    display: grid;
    gap: 0.52rem;
    grid-template-areas: "copy inputs output";
    grid-template-columns: minmax(145px, 0.68fr) minmax(0, 2.35fr) auto;
    padding: 0.45rem 0.5rem;
  }

  .attention-source-summary-heading {
    display: contents;
  }

  .attention-source-summary-heading > div:first-child {
    grid-area: copy;
  }

  .attention-source-summary-heading > div:first-child > strong {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .attention-source-summary-heading > div:first-child > small {
    display: none;
  }

  .attention-memory-output {
    grid-area: output;
    padding: 0.36rem 0.48rem;
  }

  .attention-mass-grid {
    gap: 0.38rem;
    grid-area: inputs;
  }

  .attention-mass-grid > div {
    padding: 0.38rem 0.42rem;
  }

  .attention-mass-grid strong {
    font-size: 0.64rem;
    white-space: nowrap;
  }

  .attention-mass-grid > div > small {
    font-size: 0.54rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .attention-mass-grid output {
    font-size: 0.68rem;
  }

  .attention-playback {
    margin-top: 0.58rem;
    padding: 0.5rem 0.62rem;
  }

  .attention-note {
    line-height: 1.35;
    margin-top: 0.55rem;
    padding-top: 0.52rem;
    white-space: nowrap;
  }
}

/* Attention explorer placement below the in-context cloth example. */
.method-example-section .attention-explorer {
  margin-top: 2.4rem;
}

/* Integrated bottleneck control in the Method encoder. */
.method-explorer-v6 .method-memory-node {
  min-height: 322px;
  padding: 0.82rem 0.72rem 0.76rem;
}

.method-explorer-v6 .method-memory-capacity-control {
  margin-bottom: 0.52rem;
  position: relative;
  z-index: 2;
}

.method-explorer-v6 .method-memory-capacity-control > span {
  align-items: baseline;
  color: #5a6b7d;
  display: flex;
  font-size: 0.62rem;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.method-explorer-v6 .method-memory-capacity-control > span b {
  color: #9a572f;
  font-family: Georgia, serif;
  font-size: 0.72rem;
}

.method-explorer-v6 .method-memory-capacity-control > div {
  display: grid;
  gap: 0.22rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.28rem;
}

.method-explorer-v6 .method-memory-capacity-control button {
  appearance: none;
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid #aebbc7;
  border-radius: 999px;
  color: #4f6073;
  cursor: pointer;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  min-height: 1.72rem;
  min-width: 0;
  padding: 0 0.05rem;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.method-explorer-v6 .method-memory-capacity-control button:hover,
.method-explorer-v6 .method-memory-capacity-control button:focus-visible {
  background: #fff;
  border-color: #bd7649;
  color: #713f24;
  outline: none;
}

.method-explorer-v6 .method-memory-capacity-control button.is-active {
  background: #b86635;
  border-color: #9e542a;
  box-shadow: 0 3px 8px rgba(139, 72, 34, 0.22);
  color: #fff;
  transform: translateY(-1px);
}

.method-explorer-v6 .method-memory-node h4 {
  margin: 0.12rem 0 0.58rem;
}

.method-explorer-v6 .method-memory-compression {
  gap: 0.26rem 0.3rem;
  grid-template-columns: 2.7rem 0.8rem 4.7rem;
  grid-template-rows: repeat(3, 0.8rem);
}

.method-explorer-v6 .method-memory-token-grid {
  align-content: center;
  gap: 0.16rem;
  grid-template-columns: repeat(6, 0.52rem);
  min-height: 2.36rem;
}

.method-explorer-v6 .method-memory-token-grid span {
  animation: method-capacity-token-in 180ms ease both;
  border-radius: 3px;
  height: 0.68rem;
  width: 0.52rem;
}

.method-explorer-v6 .method-memory-token-grid span.is-capacity-hidden {
  display: none;
}

.method-explorer-v6 .method-memory-caption {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  margin-top: 0.58rem;
}

.method-explorer-v6 .method-memory-capacity-caption {
  color: #6d7d8e;
  display: block;
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.025em;
  line-height: 1.25;
  margin-top: 0.16rem;
  position: relative;
  z-index: 1;
}

@keyframes method-capacity-token-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1000px) {
  .method-explorer-v6 .method-memory-node {
    min-height: 0;
  }

  .method-explorer-v6 .method-memory-capacity-control button {
    font-size: 0.64rem;
    min-height: 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .method-explorer-v6 .method-memory-token-grid span,
  .method-explorer-v6 .method-memory-capacity-control button {
    animation: none;
    transition: none;
  }
}

/* RoboTTT-inspired connected section rail. */
.section-rail {
  --section-rail-progress: 0%;
  backdrop-filter: blur(18px) saturate(1.15);
  background: rgba(255, 252, 248, 0.94);
  border: 1px solid rgba(121, 105, 91, 0.2);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(34, 39, 46, 0.13);
  display: flex;
  flex-direction: column;
  left: clamp(0.7rem, 1.25vw, 1.25rem);
  max-height: calc(100vh - 2rem);
  padding: 0.82rem 0.72rem 0.68rem;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 12rem;
  z-index: 90;
}

.section-rail-heading {
  border-bottom: 1px solid rgba(121, 105, 91, 0.16);
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
  margin-bottom: 0.42rem;
  padding: 0.04rem 0.42rem 0.62rem;
}

.section-rail-heading a {
  color: #322b26;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0.075em;
  line-height: 1.1;
  text-decoration: none;
}

.section-rail-heading span {
  color: #8a7c71;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.045em;
  margin-top: 0.12rem;
  text-transform: uppercase;
}

.section-rail-scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.12rem 0.08rem 0;
  position: relative;
  scrollbar-width: none;
}

.section-rail-scroll::-webkit-scrollbar {
  display: none;
}

.section-rail-line {
  background: #dcd4cc;
  bottom: 0.78rem;
  left: 0.54rem;
  overflow: hidden;
  position: absolute;
  top: 1.65rem;
  width: 2px;
  z-index: 0;
}

.section-rail-line i {
  background: linear-gradient(180deg, #f0a06b 0%, #d35f2d 100%);
  border-radius: inherit;
  display: block;
  height: var(--section-rail-progress);
  transition: height 180ms ease-out;
  width: 100%;
}

.section-rail-group {
  position: relative;
  z-index: 1;
}

.section-rail-group + .section-rail-group {
  margin-top: 0.42rem;
}

.section-rail-group > p {
  color: #9a8b7f;
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  line-height: 1.2;
  margin: 0 0 0.14rem 1.42rem;
  text-transform: uppercase;
}

.section-rail-group > a {
  align-items: center;
  border-radius: 9px;
  color: #625950;
  display: grid;
  gap: 0.38rem;
  grid-template-columns: 1.08rem minmax(0, 1fr);
  line-height: 1.15;
  min-height: 1.92rem;
  padding: 0.24rem 0.34rem 0.24rem 0;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.section-rail-group > a:hover,
.section-rail-group > a:focus-visible {
  background: rgba(219, 103, 48, 0.08);
  color: #352d27;
  outline: none;
  text-decoration: none;
}

.section-rail-dot {
  align-self: center;
  background: #d7d0c9;
  border: 2px solid #fffdfa;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c9c0b8;
  display: block;
  height: 0.68rem;
  justify-self: center;
  position: relative;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  width: 0.68rem;
  z-index: 2;
}

.section-rail-group > a > span:last-child {
  font-size: 0.84rem;
  font-weight: 680;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-rail-group > a small {
  color: #a29488;
  display: inline-block;
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  margin-right: 0.35rem;
  transition: color 150ms ease;
}

.section-rail-group > a.is-passed .section-rail-dot {
  background: #edb18d;
  box-shadow: 0 0 0 1px #dc956c;
}

.section-rail-group > a.is-active {
  background: linear-gradient(90deg, rgba(222, 104, 47, 0.14), rgba(222, 104, 47, 0.035));
  color: #2d2824;
  font-weight: 800;
  transform: translateX(0.1rem);
}

.section-rail-group > a.is-active .section-rail-dot {
  background: #d75f2d;
  box-shadow: 0 0 0 1px #bd4f24, 0 0 0 4px rgba(215, 95, 45, 0.14);
  transform: scale(1.08);
}

.section-rail-group > a.is-active small {
  color: #bd4f24;
}

.section-rail-hint {
  border-top: 1px solid rgba(121, 105, 91, 0.14);
  color: #9a8c81;
  font-size: 0.6rem;
  line-height: 1.25;
  margin-top: 0.42rem;
  padding: 0.52rem 0.4rem 0.02rem;
  text-align: center;
}

.section-rail-toggle,
.section-rail-scrim {
  display: none;
}

body > .section {
  isolation: isolate;
  position: relative;
  scroll-margin-top: 1.4rem;
}

body > .section::before {
  background: linear-gradient(90deg, transparent, rgba(190, 93, 48, 0.22), transparent);
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: min(30rem, 44vw);
  z-index: 1;
}

body > .section::after {
  background: #fff;
  border: 2px solid #d77a4c;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(215, 122, 76, 0.08);
  content: "";
  height: 0.58rem;
  left: 50%;
  position: absolute;
  top: -0.29rem;
  transform: translateX(-50%);
  width: 0.58rem;
  z-index: 2;
}

body > .section-alt::after {
  background: var(--bg-alt);
}

body > .section > :is(.container, .container-wide) > .section-subtitle {
  position: relative;
}

body > .section > :is(.container, .container-wide) > .section-subtitle::after {
  background: linear-gradient(180deg, rgba(205, 107, 60, 0.42), transparent);
  content: "";
  display: block;
  height: 1.4rem;
  margin: 0.82rem auto -1.75rem;
  width: 1px;
}

#results-overview > .container-wide > h2 {
  position: relative;
}

#results-overview > .container-wide > h2::after {
  background: linear-gradient(180deg, rgba(205, 107, 60, 0.42), transparent);
  content: "";
  display: block;
  height: 1.4rem;
  margin: 0.82rem auto -1rem;
  width: 1px;
}

@media (max-width: 1320px) {
  .section-rail-toggle {
    align-items: center;
    backdrop-filter: blur(14px);
    background: rgba(255, 252, 248, 0.94);
    border: 1px solid rgba(121, 105, 91, 0.24);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(34, 39, 46, 0.14);
    color: #433a33;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 800;
    gap: 0.46rem;
    left: 0.8rem;
    padding: 0.5rem 0.76rem;
    position: fixed;
    top: 0.8rem;
    z-index: 102;
  }

  .section-rail-toggle-icon {
    display: grid;
    gap: 0.15rem;
    width: 0.78rem;
  }

  .section-rail-toggle-icon i {
    background: currentColor;
    border-radius: 999px;
    display: block;
    height: 1.5px;
    transition: transform 160ms ease, opacity 160ms ease;
    width: 100%;
  }

  body.section-rail-open .section-rail-toggle-icon i:first-child {
    transform: translateY(0.3rem) rotate(45deg);
  }

  body.section-rail-open .section-rail-toggle-icon i:nth-child(2) {
    opacity: 0;
  }

  body.section-rail-open .section-rail-toggle-icon i:last-child {
    transform: translateY(-0.3rem) rotate(-45deg);
  }

  .section-rail {
    bottom: 0.8rem;
    left: 0.8rem;
    max-height: none;
    top: 0.8rem;
    transform: translateX(calc(-100% - 1.5rem));
    transition: transform 190ms ease;
    width: min(18rem, calc(100vw - 1.6rem));
    z-index: 101;
  }

  body.section-rail-open .section-rail {
    transform: translateX(0);
  }

  .section-rail-scrim {
    background: rgba(24, 28, 33, 0.32);
    border: 0;
    cursor: pointer;
    display: block;
    inset: 0;
    position: fixed;
    z-index: 100;
  }

  .section-rail-scrim[hidden] {
    display: none;
  }

  body.section-rail-open {
    overflow: hidden;
  }

  .section-rail-group > a > span:last-child {
    font-size: 0.86rem;
  }

  .section-rail-group > a {
    min-height: 2.08rem;
  }

  .section-rail-group > p {
    font-size: 0.66rem;
  }
}

@media (max-width: 700px) {
  .section-rail-toggle {
    font-size: 0.78rem;
    left: 0.65rem;
    top: 0.65rem;
  }

  .section-rail {
    bottom: 0.65rem;
    left: 0.65rem;
    top: 0.65rem;
    width: min(18rem, calc(100vw - 1.3rem));
  }

  body > .section::before {
    width: min(20rem, 58vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-rail,
  .section-rail-line i,
  .section-rail-group > a,
  .section-rail-dot,
  .section-rail-toggle-icon i {
    transition: none;
  }
}

/* Open ablation layouts: keep the evidence connected to the surrounding section. */
.method-explorer-v6 .method-evidence {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(117, 128, 139, 0.24);
  border-radius: 0;
  box-shadow: none;
  margin-top: 1.35rem;
  padding: 1.2rem 0 0;
}

.supervision-ablation.appendix-result {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

#memory-encoding .figure-card,
#memory-learning .figure-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}