.visual-module {
  --visual-ink: #17191b;
  --visual-muted: #62676a;
  --visual-rule: rgba(23, 25, 27, .18);
  --visual-surface: #f3f4f3;
  --visual-signal: #e23d35;
  --visual-signal-text: #c92f2a;
  width: 100%;
  max-width: 1320px;
  margin: 78px auto 0;
  color: var(--visual-ink);
}

.visual-module--dark {
  --visual-ink: #f7f8f7;
  --visual-muted: #b8bdb9;
  --visual-rule: rgba(255, 255, 255, .2);
  --visual-surface: #151817;
  --visual-signal-text: #ff6b60;
}

.visual-frame {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 2.45 / 1;
  overflow: hidden;
  border-top: 1px solid var(--visual-rule);
  border-bottom: 1px solid var(--visual-rule);
  background: var(--visual-surface);
}

.visual-frame canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.visual-legend {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 18px;
  right: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px clamp(18px, 3vw, 46px);
  color: var(--visual-muted);
  pointer-events: none;
}

.visual-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
}

.visual-legend span::before {
  width: 16px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}

[data-visual="power-field"] .visual-legend .force-redirecting::before {
  height: 0;
  background: transparent;
  border-top: 1px dashed currentColor;
}

[data-visual="power-field"] .visual-legend .force-constraining::before {
  height: 0;
  background: transparent;
  border-top: 1px dotted currentColor;
}

[data-visual="power-field"] .visual-legend .field-route {
  color: var(--visual-signal-text);
}

[data-visual="power-field"] .visual-legend .field-route::before {
  height: 2px;
  background: currentColor;
}

.visual-legend--stages { justify-content: space-between; }
.visual-legend--stages span:last-child { color: var(--visual-signal-text); }
[data-visual="situation-board"] .visual-legend span:first-child { color: var(--visual-signal); }
[data-visual="shared-situation"] .visual-legend span::before {
  height: 0;
  background: transparent;
  border-top: 1px solid currentColor;
}
[data-visual="shared-situation"] .visual-legend span:nth-child(2)::before { border-top-style: dashed; }
[data-visual="shared-situation"] .visual-legend span:nth-child(3) { color: var(--visual-muted); }
[data-visual="shared-situation"] .visual-legend span:nth-child(3)::before { border-top-style: dotted; }
[data-visual="shared-intelligence"] .visual-legend span::before {
  height: 0;
  background: transparent;
  border-top: 1px solid currentColor;
}
[data-visual="shared-intelligence"] .visual-legend span:nth-child(2)::before { border-top-style: dashed; }
[data-visual="shared-intelligence"] .visual-legend span:nth-child(3) { color: var(--visual-muted); }
[data-visual="shared-intelligence"] .visual-legend span:nth-child(3)::before { border-top-style: dotted; }
[data-visual="shared-intelligence"] .visual-legend span:nth-child(4) {
  color: var(--visual-ink);
  font-weight: 700;
}
[data-visual="shared-intelligence"] .visual-legend span:nth-child(4)::before {
  height: 5px;
  background: var(--visual-signal);
  border: 0;
  border-radius: 50%;
}
[data-visual="shared-situation"] .visual-callouts em { font-style: normal; font-weight: 500; }

.visual-callouts {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-height: 38px;
  align-items: center;
  padding: 10px 0 9px;
  border-bottom: 1px solid var(--visual-rule);
  color: var(--visual-muted);
  pointer-events: none;
}

.visual-callouts span {
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.visual-callouts span:first-child { color: var(--visual-signal-text); }

.visual-module figcaption {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(240px, 1fr) minmax(280px, 1.2fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: start;
  padding: 24px 0 0;
}

.visual-module figcaption span {
  color: var(--visual-signal-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.visual-module figcaption strong {
  font-size: clamp(26px, 2.4vw, 39px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

.visual-module figcaption p {
  max-width: 54ch;
  margin: 0;
  color: var(--visual-muted);
  font-size: 16px;
  line-height: 1.52;
}

.thesis .visual-module {
  grid-column: 2;
  margin-top: 50px;
}

.thesis .visual-frame { min-height: 0; aspect-ratio: 2.2 / 1; }
.capabilities .visual-module { margin-top: 88px; }
.practice-case .visual-module { margin-top: 72px; }

[data-visual="shared-intelligence"] .visual-frame { aspect-ratio: 2.4 / 1; }
[data-visual="field-path"] .visual-frame { aspect-ratio: 2.05 / 1; }

#situation-r-landing .sr-visual-module {
  margin-top: 82px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#situation-r-landing .sr-visual-module .visual-frame { min-height: 0; }
#situation-r-landing .sr-visual-module[data-visual="shared-situation"] .visual-frame { aspect-ratio: 2.35 / 1; }
#situation-r-landing .sr-visual-module[data-visual="situation-board"] .visual-frame { aspect-ratio: 2.05 / 1; }
#situation-r-landing .sr-result .sr-visual-module { margin-top: 72px; }
#situation-r-landing .sr-apart .sr-visual-module {
  max-width: none;
  margin: 0 0 86px;
}

@media (max-width: 1120px) {
  .thesis .visual-module { grid-column: 1 / -1; }
  .visual-frame,
  .thesis .visual-frame,
  #situation-r-landing .sr-visual-module .visual-frame { min-height: 0; }
  .visual-module figcaption { grid-template-columns: .75fr 1fr 1.25fr; }
}

@media (max-width: 820px) {
  .visual-module,
  .capabilities .visual-module,
  .practice-case .visual-module,
  #situation-r-landing .sr-visual-module,
  #situation-r-landing .sr-result .sr-visual-module { margin-top: 64px; }

  #situation-r-landing .sr-apart .sr-visual-module { margin-bottom: 64px; }

  .visual-frame,
  .thesis .visual-frame,
  #situation-r-landing .sr-visual-module .visual-frame { min-height: 0; aspect-ratio: 1.75 / 1; }

  [data-visual="field-path"] .visual-frame { aspect-ratio: 1.62 / 1; }
  #situation-r-landing .sr-visual-module[data-visual="situation-board"] .visual-frame { aspect-ratio: 1.42 / 1; }

  .visual-module figcaption {
    grid-template-columns: 1fr 1.5fr;
    gap: 16px 26px;
    padding-top: 20px;
  }

  .visual-module figcaption p { grid-column: 2; }
}

@media (max-width: 620px) {
  [data-visual="field-path"] .visual-frame { min-height: 0; aspect-ratio: .6 / 1; }
  [data-visual="method-cycle"] .visual-frame { min-height: 0; aspect-ratio: .5 / 1; }
  [data-visual="field-path"] .visual-legend,
  [data-visual="method-cycle"] .visual-legend { display: none; }
}

@media (max-width: 520px) {
  .visual-frame,
  .thesis .visual-frame,
  #situation-r-landing .sr-visual-module .visual-frame { min-height: 0; aspect-ratio: 1.2 / 1; }

  [data-visual="power-field"] .visual-frame,
  [data-visual="shared-intelligence"] .visual-frame,
  [data-visual="shared-situation"] .visual-frame { min-height: 0; aspect-ratio: 1.05 / 1; }

  #situation-r-landing .sr-visual-module[data-visual="situation-board"] .visual-frame { min-height: 0; aspect-ratio: .72 / 1; }

  .visual-module figcaption { grid-template-columns: 1fr; }
  .visual-module figcaption p { grid-column: 1; }
  .visual-module figcaption strong { font-size: 29px; }
  .visual-legend {
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 56px;
    padding: 11px 13px 9px;
    gap: 8px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--visual-rule);
    background: var(--visual-surface);
  }
  .visual-legend span { min-width: 0; font-size: 10px; }
  .visual-legend span::before { width: 10px; }
  .visual-legend--stages { justify-content: flex-start; }
  .visual-callouts { gap: 14px; }
  .visual-callouts span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .visual-frame canvas { scroll-behavior: auto; }
}