arwm-framework-diagram {
  --afd-bg: #070909;
  --afd-panel: rgba(16, 19, 19, .94);
  --afd-panel-soft: rgba(15, 18, 20, .76);
  --afd-line: rgba(235, 242, 247, .72);
  --afd-action: #65f0b5;
  --afd-memory: #9496ff;
  --afd-align: #ffad5c;
  --afd-text: #f4f6f7;
  --afd-muted: #9ba4ad;
  display: block;
  width: 100%;
  color: var(--afd-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.method-figure:has(> arwm-framework-diagram) {
  padding-bottom: 0;
  overflow: hidden;
  background: #070909;
}

.method-figure:has(> arwm-framework-diagram) > .visual-topline {
  padding: 22px 28px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.afd-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(20px, 2.5vw, 38px);
  background:
    radial-gradient(circle at 52% 12%, rgba(148,150,255,.09), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 38%),
    var(--afd-bg);
}

.afd-shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .28;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148,150,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,150,255,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 52%);
}

.afd-main-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 25fr) minmax(0, 40fr) minmax(0, 29fr);
  column-gap: clamp(34px, 3.4vw, 56px);
  row-gap: 14px;
  align-items: start;
}

.afd-observation { grid-column: 1; grid-row: 1; }
.afd-generator { grid-column: 2; grid-row: 1; }
.afd-future { grid-column: 3; grid-row: 1; }
.afd-action-stack { display: grid; grid-column: 1; grid-row: 2; gap: 14px; min-width: 0; align-content: start; }
.afd-memory { grid-column: 2; grid-row: 2; }
.afd-alignment { grid-column: 3; grid-row: 2; }
.afd-observation,
.afd-generator,
.afd-future,
.afd-action-stack,
.afd-memory,
.afd-alignment { position: relative; z-index: 2; min-width: 0; }

.afd-global-links { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.afd-live-link { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 7; animation: afd-flow 5s linear infinite; }
.afd-live-link.is-neutral { stroke: var(--afd-line); }
.afd-live-link.is-action { stroke: var(--afd-action); }
.afd-live-link.is-memory { stroke: var(--afd-memory); }
.afd-live-link.is-alignment { stroke: var(--afd-align); animation-direction: reverse; }
#afd-head-neutral path { fill: var(--afd-line); }
#afd-head-action path { fill: var(--afd-action); }
#afd-head-memory path { fill: var(--afd-memory); }
#afd-head-alignment path { fill: var(--afd-align); }

.afd-module,
.afd-prefix {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.026), transparent 46%), var(--afd-panel);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 50px rgba(0,0,0,.2);
  transition: opacity .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.afd-module { padding: clamp(14px, 1.4vw, 22px); }
.afd-module:focus-visible,
.afd-prefix:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.afd-module--action { border-color: rgba(101,240,181,.34); }
.afd-module--memory { border-color: rgba(148,150,255,.4); }
.afd-module--alignment { border-color: rgba(255,173,92,.42); }
.afd-module--neutral { border-color: rgba(231,239,246,.26); }

.afd-kicker,
.afd-eyebrow,
.afd-view-count,
.afd-memory-budget,
.afd-loop-note,
.afd-footer-key,
.afd-process-row,
.afd-scale-caption,
.afd-kv-legend,
.afd-alignment-signals,
.afd-training-rail,
.afd-prefix small {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.afd-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--afd-muted);
  font-size: clamp(9px, .74vw, 12px);
  font-weight: 650;
}
.afd-kicker span { color: var(--afd-memory); }
.afd-input-column .afd-kicker span { color: var(--afd-action); }
.afd-output-column .afd-alignment .afd-kicker span { color: var(--afd-align); }

.afd-module-heading,
.afd-memory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.afd-eyebrow {
  display: block;
  color: var(--afd-muted);
  font-size: clamp(8px, .64vw, 10px);
  font-weight: 700;
}
.afd-module h3,
.afd-memory h3 {
  margin: 5px 0 0;
  color: var(--afd-text);
  font-size: clamp(14px, 1.05vw, 19px);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.afd-module h3 i { font-family: Georgia, serif; font-weight: 500; }
.afd-module h3 sub,
.afd-memory h3 sub { font-size: .58em; }
.afd-view-count,
.afd-memory-budget {
  flex: none;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: #bbc5ce;
  font-size: clamp(7px, .55vw, 9px);
}

.afd-view-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.afd-view-grid img,
.afd-future-strip img,
.afd-rollout-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  background: #050606;
}
.afd-view-grid img { aspect-ratio: 16 / 9; border: 1px solid rgba(101,240,181,.28); }

.afd-encode-line,
.afd-decode-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #c8d1d7;
  font-size: clamp(9px, .66vw, 11px);
}
.afd-vae-flow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 3px; }
.afd-vae-flow--encoder { flex-wrap: wrap; }
.afd-vae-flow--encoder .afd-frozen { width: 100%; justify-content: center; }
.afd-vae-flow--encoder .afd-vae-block { margin-inline: auto; }
.afd-vae-flow--decoder { position: relative; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin: -2px 0 7px; }
.afd-vae-flow--decoder .afd-frozen { margin: 0; padding: 3px 8px; border-radius: 999px; background: rgba(7,9,9,.88); font-size: clamp(8px,.6vw,10px); }
.afd-vae-flow--decoder .afd-vae-block { min-width: 132px; }
.afd-vae-block { position: relative; display: grid; place-items: center; min-width: 112px; padding: 9px 20px; color: #e8fff5; background: linear-gradient(145deg, rgba(101,240,181,.65), rgba(40,104,79,.58)); clip-path: polygon(0 0,100% 0,88% 100%,12% 100%); filter: drop-shadow(0 8px 14px rgba(23,104,72,.2)); }
.afd-vae-block::before { position: absolute; inset: 1px; z-index: -1; content: ""; background: linear-gradient(145deg, rgba(36,79,63,.96), rgba(13,27,23,.98)); clip-path: polygon(0 0,100% 0,88% 100%,12% 100%); }
.afd-vae-flow--decoder .afd-vae-block { color: #eeefff; background: linear-gradient(145deg, rgba(148,150,255,.75), rgba(70,72,154,.62)); clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); filter: drop-shadow(0 8px 14px rgba(83,85,190,.22)); }
.afd-vae-flow--decoder .afd-vae-block::before { background: linear-gradient(145deg, rgba(65,66,132,.97), rgba(18,18,41,.98)); clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); }
.afd-vae-block small { color: #929da5; font: 7px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; }
.afd-vae-block strong { margin-top: 3px; font-size: clamp(10px,.72vw,12px); }
.afd-vae-arrow { color: #d7e0e5; font-weight: 700; }
.afd-frozen { display: inline-flex; align-items: center; gap: 5px; color: #aab4bd; }
.afd-frozen img { width: 15px; height: 15px; filter: brightness(1.8) saturate(.2); }
.afd-token-row { display: flex; gap: 4px; margin-top: 9px; }
.afd-token-row span { flex: 1; height: 10px; border: 1px solid rgba(148,150,255,.5); border-radius: 3px; background: rgba(148,150,255,.22); }

.afd-robot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.afd-robot-row figure { margin: 0; padding: 7px 5px 5px; border-radius: 9px; background: rgba(101,240,181,.045); border: 1px solid rgba(101,240,181,.15); }
.afd-robot-row img { display: block; width: 100%; height: 52px; object-fit: contain; filter: drop-shadow(0 7px 12px rgba(0,0,0,.3)); }
.afd-robot-row figcaption { margin-top: 2px; color: #7f918a; text-align: center; font: 8px/1.1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.afd-process-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 11px 0 9px; color: #9ca9a4; font-size: clamp(7px, .52vw, 9px); text-align: center; }
.afd-process-row b { color: var(--afd-action); }
.afd-action-scales { display: grid; grid-template-columns: .72fr 1fr 1.28fr; gap: 6px; align-items: end; }
.afd-action-scales > div { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; border: 1px solid rgba(101,240,181,.18); border-radius: 6px; background: rgba(101,240,181,.035); }
.afd-action-scales small { width: 100%; color: #81a697; font: 7px/1 "IBM Plex Mono", monospace; }
.afd-action-scales span { flex: 1; min-width: 7px; height: 7px; border-radius: 2px; background: rgba(101,240,181,.64); }

.afd-prefix {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-color: rgba(101,240,181,.3);
}
.afd-prefix-symbol { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(101,240,181,.12); color: var(--afd-action); font: italic 700 20px Georgia, serif; }
.afd-prefix small { display: block; color: var(--afd-action); font-size: 8px; }
.afd-prefix strong { display: block; margin-top: 3px; color: #cbd5d1; font-size: clamp(9px, .65vw, 11px); font-weight: 550; }

.afd-bridge { position: relative; min-height: 100%; }
.afd-bridge .afd-arrow { position: absolute; left: 4px; width: calc(100% - 8px); height: 28px; overflow: visible; }
.afd-bridge-visual { top: 18%; }
.afd-bridge-action { top: 47%; }
.afd-bridge-prefix { top: 72%; }
.afd-bridge-future { top: 23%; }
.afd-bridge-train { top: 68%; }

.afd-arrow path,
.afd-memory-arrows path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.afd-path { color: var(--afd-line); }
.afd-path--action { color: var(--afd-action); }
.afd-path--memory { color: var(--afd-memory); }
.afd-path--alignment { color: var(--afd-align); }
.afd-path:not(.afd-arrow-tip):not(.afd-tip) { stroke-dasharray: 7 7; animation: afd-flow 5s linear infinite; }
.afd-path--reverse:not(.afd-tip) { animation-direction: reverse; }
.afd-arrow-tip,
.afd-tip { stroke-dasharray: none !important; animation: none !important; }

.afd-generator { background: radial-gradient(circle at 72% 6%, rgba(148,150,255,.14), transparent 34%), var(--afd-panel); }
.afd-scale-pyramid { display: grid; grid-template-columns: .76fr auto 1fr auto 1.25fr; align-items: end; gap: 8px; min-height: 132px; }
.afd-scale-stage { position: relative; display: grid; align-content: end; min-width: 0; padding: 10px; border: 1px solid rgba(148,150,255,.56); border-radius: 7px; background: linear-gradient(145deg, rgba(148,150,255,.26), rgba(148,150,255,.065)); transform: skewY(-4deg); overflow: hidden; }
.afd-scale-stage--coarse { height: 54px; }
.afd-scale-stage--mid { height: 82px; }
.afd-scale-stage--fine { height: 116px; }
.afd-scale-stage small,
.afd-scale-stage strong { position: relative; z-index: 2; transform: skewY(4deg); }
.afd-scale-stage small { color: #c9caff; font: 8px/1 "IBM Plex Mono", monospace; }
.afd-scale-stage strong { margin-top: 4px; font: italic 600 clamp(14px, 1.1vw, 20px) Georgia, serif; }
.afd-stage-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); }
.afd-stage-grid--1 { background-size: 100% 100%; }
.afd-stage-grid--2 { background-size: 50% 50%; }
.afd-stage-grid--3 { background-size: 25% 25%; }
.afd-scale-step { align-self: center; color: var(--afd-memory); font-size: 18px; }
.afd-scale-caption { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 9px 2px 13px; color: #8e98a2; font-size: clamp(7px, .5vw, 9px); }
.afd-scale-caption b { color: #c3c4ff; font-weight: 650; }
.afd-transformer-block { padding: 12px; border: 1px solid rgba(148,150,255,.28); border-radius: 12px; background: rgba(4,5,10,.52); }
.afd-transformer-title { display: flex; justify-content: space-between; align-items: center; color: #dadcf4; font-size: clamp(10px, .8vw, 13px); }
.afd-transformer-title span { color: var(--afd-memory); font: 700 11px "IBM Plex Mono", monospace; }
.afd-transformer-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 7px; margin-top: 9px; }
.afd-transformer-flow > span { color: var(--afd-memory); }
.afd-transformer-cell { padding: 10px 5px; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; color: #b7c0c9; text-align: center; font-size: clamp(8px, .62vw, 10px); line-height: 1.25; }
.afd-transformer-cell--action { border-color: rgba(101,240,181,.3); color: #a8ecd0; }

.afd-memory { animation: afd-breathe-memory 6.4s ease-in-out infinite; }
.afd-memory-head { margin-bottom: 8px; }
.afd-memory-head h3 { font-size: clamp(12px, .85vw, 15px); }
.afd-memory-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 10px; }
.afd-memory-flow span { display: grid; grid-template-columns: 24px auto; grid-template-rows: auto auto; align-items: center; padding: 7px 9px; border: 1px solid rgba(148,150,255,.22); border-radius: 8px; background: rgba(148,150,255,.045); }
.afd-memory-flow b { grid-row: 1 / 3; color: var(--afd-memory); font-size: 22px; line-height: 1; }
.afd-memory-flow i { color: #c6c7ff; font: normal 700 8px/1.1 "IBM Plex Mono", monospace; letter-spacing: .06em; }
.afd-memory-flow em { margin-top: 3px; color: #8f98a2; font: normal 7px/1.15 "IBM Plex Mono", monospace; }
.afd-memory-cells { display: grid; grid-template-columns: .78fr 1fr 1.08fr 1.22fr; gap: 6px; margin-top: 8px; }
.afd-memory-cell { display: grid; align-content: center; min-width: 0; min-height: 62px; padding: 7px; border: 1px solid rgba(148,150,255,.2); border-radius: 8px; background: rgba(148,150,255,.04); text-align: center; }
.afd-memory-cell small { color: #9ea0df; font: 7px/1 "IBM Plex Mono", monospace; }
.afd-memory-cell > span { margin-top: 4px; color: #8f98a2; font: 7px/1 "IBM Plex Mono", monospace; }
.afd-memory-cell--anchor strong { margin: 3px 0; color: var(--afd-action); font-size: 20px; }
.afd-kv-bars { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 7px; }
.afd-kv-bars i { display: block; width: 13px; height: 8px; border: 1px solid rgba(148,150,255,.72); border-radius: 2px; background: rgba(148,150,255,.26); }
.afd-kv-bars.is-mid i { height: 11px; }
.afd-kv-bars.is-fine i { width: 15px; height: 14px; background: rgba(148,150,255,.65); }
.afd-aging-lane { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; margin-top: 8px; padding: 7px 9px; border: 1px solid rgba(148,150,255,.16); border-radius: 7px; background: linear-gradient(90deg, rgba(101,240,181,.025), rgba(148,150,255,.06)); color: #929bac; font: 7px/1 "IBM Plex Mono", monospace; text-align: center; }
.afd-anchor-lock { display: inline-flex; align-items: center; gap: 6px; padding-right: 11px; border-right: 1px solid rgba(255,255,255,.1); color: var(--afd-action); font-size: 9px; white-space: nowrap; }
.afd-anchor-lock i { color: #75847f; font: normal 7px/1 "IBM Plex Mono", monospace; }
.afd-aging-track { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.afd-aging-track b { color: var(--afd-memory); font-size: 11px; }
.afd-new-kv { color: #c5c6ff; }
.afd-evict { color: #c58b8b; }
.afd-kv-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.07); color: #858e98; font-size: 7px; }
.afd-kv-legend span:first-child b { color: var(--afd-memory); }
.afd-kv-legend span:nth-child(2) b { color: var(--afd-action); }

.afd-future { display: flex; flex-direction: column; min-height: clamp(255px, 21vw, 290px); animation: afd-breathe-neutral 5.4s ease-in-out infinite; }
.afd-future > .afd-kicker { margin-bottom: 8px; }
.afd-future .afd-vae-flow--decoder { width: 100%; }
.afd-future .afd-vae-flow--decoder .afd-frozen,
.afd-future .afd-vae-flow--decoder .afd-vae-block { align-self: center; }
.afd-future .afd-future-strip { margin-top: 10px; margin-bottom: auto; }
.afd-decode-line { margin: 0 0 10px; }
.afd-future-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: min(100%, 250px); align-self: center; }
.afd-future-strip figure { position: relative; margin: 0; }
.afd-future-strip img { aspect-ratio: 1.75 / 1; border: 1px solid rgba(236,243,247,.28); }
.afd-future-strip figcaption { position: absolute; right: 4px; bottom: 3px; padding: 2px 3px; border-radius: 3px; background: rgba(0,0,0,.68); color: #eef3f6; font: 7px/1 "IBM Plex Mono", monospace; }
.afd-loop-note { margin-top: 11px; color: #a9b2ba; font-size: clamp(7px, .5vw, 9px); text-align: right; }

.afd-alignment { background: radial-gradient(circle at 70% 0%, rgba(255,173,92,.09), transparent 33%), var(--afd-panel); animation: afd-breathe-align 6.8s ease-in-out infinite; }
.afd-alignment-labels { display: grid; grid-template-columns: minmax(0,1fr) 86px; gap: 10px; margin: -2px 0 7px; color: #9e805f; font: 7px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-align: center; }
.afd-rollout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 10px; align-items: center; }
.afd-rollout-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.afd-rollout-grid img { aspect-ratio: 1.797 / 1; border: 1px solid rgba(255,173,92,.2); }
.afd-alignment-stack { display: grid; gap: 6px; text-align: center; color: #a7afb7; font-size: clamp(7px, .55vw, 9px); }
.afd-alignment-stack > div { padding: 8px 4px; border: 1px solid rgba(255,173,92,.28); border-radius: 7px; background: rgba(255,173,92,.045); }
.afd-alignment-stack strong { color: #ffca94; }
.afd-alignment-stack > span { color: var(--afd-align); }
.afd-alignment-signals { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 9px; }
.afd-alignment-signals span { padding: 7px; border: 1px solid rgba(255,173,92,.16); border-radius: 6px; color: #d2a475; background: rgba(255,173,92,.035); text-align: center; font-size: clamp(6px, .48vw, 8px); }
.afd-training-rail { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 7px; align-items: center; margin-top: 10px; color: #9da5ad; font-size: clamp(6px, .46vw, 8px); }
.afd-training-rail i { height: 1px; background: linear-gradient(90deg, transparent, var(--afd-align), transparent); }
.afd-training-rail strong { color: var(--afd-align); text-align: center; }

.afd-footer-key { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 3px 1px; color: #89939b; font-size: clamp(8px, .6vw, 10px); }
.afd-footer-key span::before { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 2px; content: ""; background: currentColor; }
.afd-footer-key .is-action { color: var(--afd-action); }
.afd-footer-key .is-memory { color: var(--afd-memory); }
.afd-footer-key .is-alignment { color: var(--afd-align); }
.afd-footer-key .is-neutral { color: #dfe6eb; }

arwm-framework-diagram[data-focus] [data-zone] { opacity: .82; }
arwm-framework-diagram[data-focus="input"] [data-zone="input"],
arwm-framework-diagram[data-focus="input"] [data-zone="generator"],
arwm-framework-diagram[data-focus="input"] [data-zone="future"],
arwm-framework-diagram[data-focus="action"] [data-zone="action"],
arwm-framework-diagram[data-focus="action"] [data-zone="generator"],
arwm-framework-diagram[data-focus="action"] [data-zone="future"],
arwm-framework-diagram[data-focus="generator"] [data-zone="generator"],
arwm-framework-diagram[data-focus="generator"] [data-zone="memory"],
arwm-framework-diagram[data-focus="generator"] [data-zone="future"],
arwm-framework-diagram[data-focus="memory"] [data-zone="memory"],
arwm-framework-diagram[data-focus="memory"] [data-zone="generator"],
arwm-framework-diagram[data-focus="memory"] [data-zone="future"],
arwm-framework-diagram[data-focus="future"] [data-zone="future"],
arwm-framework-diagram[data-focus="future"] [data-zone="memory"],
arwm-framework-diagram[data-focus="future"] [data-zone="generator"],
arwm-framework-diagram[data-focus="alignment"] [data-zone="alignment"],
arwm-framework-diagram[data-focus="alignment"] [data-zone="generator"] { opacity: 1; border-color: currentColor; box-shadow: 0 0 18px color-mix(in srgb, currentColor 12%, transparent); transform: none; }

arwm-framework-diagram[data-focus] .afd-live-link { opacity: .34; transition: opacity .22s ease, stroke-width .22s ease; }
arwm-framework-diagram[data-focus="input"] .afd-live-link[data-link="observation"],
arwm-framework-diagram[data-focus="action"] .afd-live-link[data-link="action"],
arwm-framework-diagram[data-focus="action"] .afd-live-link[data-link="prefix"],
arwm-framework-diagram[data-focus="generator"] .afd-live-link[data-link="observation"],
arwm-framework-diagram[data-focus="generator"] .afd-live-link[data-link="action"],
arwm-framework-diagram[data-focus="generator"] .afd-live-link[data-link="prefix"],
arwm-framework-diagram[data-focus="generator"] .afd-live-link[data-link="future"],
arwm-framework-diagram[data-focus="generator"] .afd-live-link[data-link="update"],
arwm-framework-diagram[data-focus="memory"] .afd-live-link[data-link="commit"],
arwm-framework-diagram[data-focus="future"] .afd-live-link[data-link="future"],
arwm-framework-diagram[data-focus="future"] .afd-live-link[data-link="commit"],
arwm-framework-diagram[data-focus="alignment"] .afd-live-link[data-link="update"] { opacity: 1; stroke-width: 2.8; }

@keyframes afd-flow { to { stroke-dashoffset: -56; } }
@keyframes afd-breathe-memory { 50% { box-shadow: inset 0 1px rgba(255,255,255,.03), 0 0 30px rgba(148,150,255,.09); } }
@keyframes afd-breathe-align { 50% { box-shadow: inset 0 1px rgba(255,255,255,.03), 0 0 28px rgba(255,173,92,.08); } }
@keyframes afd-breathe-neutral { 50% { box-shadow: inset 0 1px rgba(255,255,255,.03), 0 0 24px rgba(230,240,247,.055); } }

@media (max-width: 1040px) {
  .afd-shell { padding: 22px; }
  .afd-main-grid { grid-template-columns: minmax(0, 24fr) minmax(0, 40fr) minmax(0, 29fr); column-gap: 32px; }
  .afd-module { padding: 13px; border-radius: 15px; }
  .afd-scale-pyramid { min-height: 112px; }
  .afd-scale-stage--coarse { height: 46px; }
  .afd-scale-stage--mid { height: 68px; }
  .afd-scale-stage--fine { height: 96px; }
  .afd-robot-row img { height: 42px; }
  .afd-rollout-layout { grid-template-columns: 1fr 72px; }
  .afd-alignment-labels { grid-template-columns: minmax(0,1fr) 72px; }
}

@media (max-width: 736px) {
  .method-figure:has(> arwm-framework-diagram) > .visual-topline { padding-inline: 18px; }
  .afd-shell { padding: 16px; }
  .afd-main-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .afd-observation { grid-column: 1; grid-row: 1; }
  .afd-action-stack { grid-column: 1; grid-row: 2; }
  .afd-generator { grid-column: 1; grid-row: 3; }
  .afd-memory { grid-column: 1; grid-row: 4; }
  .afd-future { grid-column: 1; grid-row: 5; }
  .afd-future { min-height: 0; }
  .afd-alignment { grid-column: 1; grid-row: 6; }
  .afd-global-links { display: none; }
  .afd-module { padding: 17px; border-radius: 16px; }
  .afd-module h3,
  .afd-memory h3 { font-size: clamp(16px, 4vw, 20px); }
  .afd-kicker { font-size: 11px; }
  .afd-eyebrow { font-size: 9px; }
  .afd-view-count,
  .afd-memory-budget { font-size: 8px; }
  .afd-view-grid { gap: 7px; }
  .afd-robot-row img { height: 72px; }
  .afd-process-row { font-size: 9px; }
  .afd-action-scales small,
  .afd-memory-cell small,
  .afd-memory-cell > span,
  .afd-kv-legend { font-size: 8px; }
  .afd-scale-pyramid { min-height: 148px; }
  .afd-scale-stage--coarse { height: 58px; }
  .afd-scale-stage--mid { height: 94px; }
  .afd-scale-stage--fine { height: 132px; }
  .afd-scale-stage small { font-size: 9px; }
  .afd-scale-caption { font-size: 8px; }
  .afd-transformer-cell { font-size: 10px; }
  .afd-memory-flow { font-size: 8px; }
  .afd-memory-cells { gap: 7px; }
  .afd-memory-cell { min-height: 78px; }
  .afd-aging-lane { font-size: 8px; }
  .afd-future-strip { gap: 7px; width: min(100%, 320px); }
  .afd-rollout-layout { grid-template-columns: minmax(0, 1fr) 100px; }
  .afd-alignment-labels { grid-template-columns: minmax(0,1fr) 100px; }
  .afd-alignment-stack { font-size: 9px; }
  .afd-alignment-signals span,
  .afd-training-rail { font-size: 8px; }
}

@media (max-width: 440px) {
  .afd-shell { padding: 12px; }
  .afd-module { padding: 14px; }
  .afd-view-grid { grid-template-columns: repeat(2, 1fr); }
  .afd-view-grid img { aspect-ratio: 16 / 10; }
  .afd-robot-row { gap: 5px; }
  .afd-robot-row img { height: 54px; }
  .afd-process-row { flex-wrap: wrap; }
  .afd-prefix { padding: 10px 12px; }
  .afd-scale-pyramid { grid-template-columns: .82fr auto 1fr auto 1.12fr; gap: 4px; min-height: 128px; }
  .afd-scale-stage { padding: 7px; }
  .afd-scale-stage--coarse { height: 50px; }
  .afd-scale-stage--mid { height: 80px; }
  .afd-scale-stage--fine { height: 114px; }
  .afd-scale-caption span { display: none; }
  .afd-scale-caption { justify-content: center; }
  .afd-transformer-flow { grid-template-columns: 1fr; gap: 5px; }
  .afd-transformer-flow > span { transform: rotate(90deg); justify-self: center; }
  .afd-memory-cells { grid-template-columns: repeat(2, 1fr); }
  .afd-memory-flow { display: none; }
  .afd-aging-lane { grid-template-columns: 1fr; gap: 7px; }
  .afd-anchor-lock { justify-self: stretch; justify-content: center; padding: 0 0 7px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .afd-aging-track { flex-wrap: wrap; justify-content: center; }
  .afd-future-strip { grid-template-columns: repeat(2, 1fr); }
  .afd-rollout-layout { grid-template-columns: 1fr; }
  .afd-alignment-labels { display: none; }
  .afd-alignment-stack { grid-template-columns: 1fr auto 1fr; }
  .afd-alignment-stack > span { transform: rotate(-90deg); }
  .afd-training-rail { grid-template-columns: 1fr; text-align: center; }
  .afd-training-rail i { display: none; }
  .afd-footer-key { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .afd-path,
  .afd-memory,
  .afd-future,
  .afd-alignment { animation: none !important; }
  .afd-module,
  .afd-prefix { transition: none; }
}