.xr-guide .xr-context-visual {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 16px 0 4px;
  padding: 8px 10px 7px;
  border: 1px solid #35505d;
  border-radius: 7px;
  background: #07151d;
  color: #dffcff;
}

.xr-guide .xr-context-visual svg {
  display: block;
  width: 100%;
  height: 136px;
  overflow: visible;
}
.xr-guide .xr-context-visual svg.xr-context-wavelength { height: 188px; }

.xr-guide .xr-context-caption {
  margin: 0;
  max-width: 60ch;
  color: #abc0cb;
  font: 400 12px/1.45 var(--sans, system-ui, sans-serif);
  text-align: center;
}
.xr-guide .xr-context-code { justify-items: stretch; padding: 14px; }
.xr-guide .xr-context-code pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.xr-guide .xr-context-code code { color: #c9f4f8; font: 400 12px/1.65 var(--mono); }
.xr-guide .xr-context-code-output { margin-top: 6px; padding-top: 10px; border-top: 1px solid #35505d; color: #87e8d3; font: 400 12px/1.5 var(--mono); }

@media (max-width: 420px) {
  .xr-guide .xr-context-visual { padding-inline: 6px; }
  .xr-guide .xr-context-caption { font-size: 12px; }
}

/* A shared, responsive topology for the guide and the on-page fiber lesson. */
.xr-context-visual.xr-raman {
  display: grid; justify-items: stretch; gap: 14px; margin: 18px 0;
  padding: 18px; border: 1px solid #35505d; border-radius: 8px;
  background: #07151d; color: #dffcff; font: 400 14px/1.6 var(--sans, system-ui, sans-serif);
  container-type: inline-size;
}
.xr-raman p { margin: 0; }
.xr-raman .xr-raman-title { color: #dffcff; font-size: 17px; font-weight: 650; }
.xr-raman-subtitle, .xr-raman-location { color: #abc0cb; }
.xr-raman-route {
  list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px; margin: 0; padding: 0;
}
.xr-raman-route > li {
  position: relative; padding: 10px; border: 1px solid #35505d;
  border-radius: 6px; background: #102630; font-size: 12px;
}
.xr-raman-route > li:not(:last-child)::after {
  content: '→'; position: absolute; top: 10px; right: -17px; color: #72e5ef;
}
.xr-raman-route strong, .xr-raman-route span { display: block; }
.xr-raman-route span { margin-top: 4px; color: #abc0cb; }
.xr-raman-route .xr-raman-span { border-color: #87e8d3; }
.xr-raman-span strong { color: #87e8d3; }
.xr-raman-pump { margin-top: 12px; padding-top: 9px; border-top: 1px dashed #f3c87b; color: #f3c87b; }
.xr-raman-pump span:last-child { color: #f3c87b; }
.xr-raman .xr-controls { margin: 0; flex-wrap: wrap; }
.xr-raman svg.xr-raman-detail { display: block; width: 100%; height: auto; max-height: 260px; overflow: visible; }
.xr-raman-detail text { font: 12px system-ui, sans-serif; }
.xr-raman-label { fill: #abc0cb; }
.xr-raman-signal { fill: #72e5ef; }
.xr-raman-pump-label { fill: #f3c87b; }
.xr-raman-gain-label { fill: #87e8d3; }
.xr-raman-signal-track, .xr-raman-pump-track { stroke: #35505d; stroke-width: 2; }
.xr-raman-signal-flow {
  fill: #72e5ef; animation: xr-raman-signal-gain 6s linear infinite;
  animation-delay: calc(var(--raman-phase) * 6s);
}
.xr-raman-pump-flow {
  fill: #f3c87b; animation: xr-raman-pump-decay 5s linear infinite;
  animation-delay: calc(var(--raman-phase) * 5s);
}
.xr-raman-transfer { fill: none; stroke: #87e8d3; stroke-width: 1.5; animation: xr-raman-energy 2s ease-in-out infinite; }
.xr-raman[data-pump="off"] .xr-raman-pump-flow,
.xr-raman[data-pump="off"] .xr-raman-transfer { opacity: 0; animation: none; }
.xr-raman[data-pump="off"] .xr-raman-signal-flow { animation-name: xr-raman-signal-loss; r: 1; opacity: .45; }
.xr-raman[data-pump="off"] .xr-raman-gain-label { opacity: 0; }
.xr-raman-status { border-left: 3px solid #87e8d3; padding-left: 12px; }
.xr-raman-explanation { display: grid; gap: 12px; border-top: 1px solid #35505d; padding-top: 14px; }
.xr-raman-explanation h4 { margin: 0; font: 600 16px/1.4 var(--sans, system-ui); color: #dffcff; }
.xr-raman-explanation .xr-raman-equation { padding: 10px; border-radius: 5px; background: #102630; color: #87e8d3; }
.xr-raman .xr-note, .xr-raman .xr-context-caption { font: 400 12px/1.6 var(--sans, system-ui); color: #abc0cb; }
.xr-raman .xr-context-caption { text-align: left; max-width: none; }
.xr-raman-paused :is(.xr-raman-signal-flow, .xr-raman-pump-flow, .xr-raman-transfer) { animation-play-state: paused; }
@keyframes xr-raman-signal-gain {
  0% { cx: 26; r: 1.2; opacity: .5; }
  25% { cx: 102.5; r: 1.5; opacity: .58; }
  50% { cx: 179; r: 2.2; opacity: .7; }
  75% { cx: 255.5; r: 3.2; opacity: .84; }
  100% { cx: 332; r: 4.5; opacity: 1; }
}
@keyframes xr-raman-pump-decay {
  0% { cx: 332; r: 4.5; opacity: 1; }
  25% { cx: 255.5; r: 3.35; opacity: .8; }
  50% { cx: 179; r: 2.3; opacity: .6; }
  75% { cx: 102.5; r: 1.4; opacity: .4; }
  100% { cx: 26; r: .8; opacity: .2; }
}
@keyframes xr-raman-signal-loss {
  from { cx: 26; r: 1.2; opacity: .5; }
  to { cx: 332; r: .6; opacity: .2; }
}
@keyframes xr-raman-energy { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@container (max-width: 620px) {
  .xr-raman-route { grid-template-columns: 1fr; gap: 20px; }
  .xr-raman-route > li:not(:last-child)::after { content: '↓'; top: auto; bottom: -21px; left: 14px; right: auto; }
  .xr-raman-route > li { padding: 9px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .xr-raman :is(.xr-raman-signal-flow, .xr-raman-pump-flow, .xr-raman-transfer) { animation: none; }
  .xr-raman [data-raman-pause] { display: none; }
}

/* OSI model: layers 1 to 7, then the unofficial Layer 8 as a dashed bonus row. */
.xr-guide .xr-osi { justify-items: stretch; padding: 12px; }
.xr-osi-stack { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.xr-osi-layer {
  display: grid; grid-template-columns: 28px minmax(88px, auto) 1fr; column-gap: 10px; align-items: baseline;
  padding: 7px 10px; border: 1px solid #35505d; border-radius: 5px; background: #102630;
}
.xr-osi-layer[data-layer="1"] { border-color: #72e5ef; }
.xr-osi-num { color: #72e5ef; font: 700 13px/1.4 var(--mono); }
.xr-osi-name { color: #dffcff; font: 600 13px/1.4 var(--sans, system-ui, sans-serif); }
.xr-osi-what { color: #c9dfe6; font: 400 12.5px/1.45 var(--sans, system-ui, sans-serif); }
.xr-osi-eg { grid-column: 3; color: #87e8d3; font: 400 11.5px/1.45 var(--mono); }
.xr-osi-bonus { margin-top: 4px; border-style: dashed; border-color: #f9a8d466; background: transparent; }
.xr-osi-bonus .xr-osi-num, .xr-osi-bonus .xr-osi-name { color: #f9a8d4; }

@media (max-width: 520px) {
  .xr-osi-layer { grid-template-columns: 22px 1fr; }
  .xr-osi-what, .xr-osi-eg { grid-column: 2; }
}

/* Fresnel zone: one hop in side view, with a band picker and ridge slider. */
.xr-guide .xr-context-visual.xr-fresnel { justify-items: stretch; gap: 12px; padding: 16px; }
.xr-guide .xr-fresnel svg.xr-fz-svg { height: auto; aspect-ratio: 520 / 222; overflow: hidden; border-radius: 6px; background: linear-gradient(#0b2029, #07151d 70%); }
.xr-fz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.xr-fz-stats p { display: grid; gap: 2px; margin: 0; padding: 8px 10px; border: 1px solid #35505d; border-radius: 6px; background: #102630; }
.xr-fz-stats span, .xr-fz-control-label { color: #abc0cb; font: 500 10px/1.3 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; }
.xr-fz-stats strong { color: #dffcff; font: 600 20px/1.2 var(--sans, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.xr-fz-stats p[data-fz="status"] { grid-column: 1 / -1; display: block; padding: 7px 10px; font: 600 13px/1.4 var(--sans, system-ui, sans-serif); }
.xr-fresnel[data-tone="ok"] .xr-fz-status { border-color: #3f8f80; background: #0f2e2b; color: #87e8d3; }
.xr-fresnel[data-tone="warn"] .xr-fz-status { border-color: #8a6a38; background: #2a2215; color: #f3c87b; }
.xr-fresnel[data-tone="blocked"] .xr-fz-status { border-color: #8f4a45; background: #2c1617; color: #ff9d92; }
.xr-fresnel[data-tone="ok"] [data-fz="pct"] { color: #87e8d3; }
.xr-fresnel[data-tone="warn"] [data-fz="pct"] { color: #f3c87b; }
.xr-fresnel[data-tone="blocked"] [data-fz="pct"] { color: #ff9d92; }

.xr-fz-svg text { font-family: var(--sans, system-ui, sans-serif); paint-order: stroke; stroke: #07151d; stroke-width: 4px; stroke-linejoin: round; }
.xr-fz-zone { fill: rgba(114, 229, 239, .13); stroke: #72e5ef; stroke-width: 1.6; }
.xr-fz-sixty { fill: rgba(135, 232, 211, .08); stroke: #87e8d3; stroke-width: 1.4; stroke-dasharray: 6 5; }
.xr-fz-beam { stroke: #dffcff; stroke-width: 1.4; stroke-dasharray: 2 4; stroke-linecap: round; }
.xr-fz-ground { stroke: #a88a55; stroke-width: 1.6; stroke-linejoin: round; }
.xr-fz-hit { fill: rgba(243, 200, 123, .55); }
.xr-fz-hit-sixty { fill: rgba(255, 120, 105, .75); }
.xr-fz-tower path { fill: none; stroke: #9fb6c0; stroke-width: 1.6; stroke-linecap: round; }
.xr-fz-tower .xr-fz-brace { stroke: #5f7883; stroke-width: 1; }
.xr-fz-tower .xr-fz-dish { stroke: #dffcff; stroke-width: 2.4; }
.xr-fz-antenna { fill: #72e5ef; stroke: #07151d; stroke-width: 1.5; }
.xr-fz-site { fill: #dffcff; font-size: 15px; font-weight: 600; }
.xr-fz-note { fill: #c8b58e; font-size: 13px; }
.xr-fz-ticks line { stroke: #72e5ef; stroke-width: 2; }
.xr-fz-ticks .xr-fz-tick-sixty { stroke: #87e8d3; }
.xr-fz-measure { fill: none; stroke: #f3c87b; stroke-width: 2.2; stroke-linecap: round; }
.xr-fz-measure-label { fill: #f3c87b; font-size: 17px; font-weight: 700; }

.xr-fz-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.xr-fz-bands { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xr-fz-bands .xr-fz-control-label { margin-right: 4px; }
.xr-fz-bands .xr-button { min-height: 36px; padding: 6px 11px; font-size: 13px; }
.xr-fz-slider { display: flex; flex: 1 1 200px; align-items: center; gap: 10px; }
.xr-fz-slider input { flex: 1; min-width: 0; accent-color: #f3c87b; }
.xr-guide .xr-fresnel .xr-context-caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; max-width: none; }
.xr-fz-key { display: inline-flex; align-items: center; gap: 6px; }
.xr-fz-key i { display: inline-block; width: 20px; height: 0; border-top: 2px solid #72e5ef; }
.xr-fz-key .xr-fz-key-zone { height: 8px; border: 1.5px solid #72e5ef; border-radius: 50%; background: rgba(114, 229, 239, .18); }
.xr-fz-key .xr-fz-key-sixty { border-top: 2px dashed #87e8d3; }
.xr-fz-key .xr-fz-key-beam { border-top: 2px dotted #dffcff; }
.xr-fz-formula { flex-basis: 100%; color: #8fa7b2; font: 400 11px/1.4 var(--mono, monospace); }

@media (max-width: 520px) {
  .xr-guide .xr-context-visual.xr-fresnel { padding: 10px; }
  .xr-fz-stats { gap: 6px; }
  .xr-fz-stats p { padding: 6px 7px; }
  .xr-fz-stats span { font-size: 9px; letter-spacing: .04em; }
  .xr-fz-stats strong { font-size: 17px; }
  .xr-fz-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .xr-fz-bands .xr-fz-control-label { grid-column: 1 / -1; }
  .xr-fz-bands .xr-button { padding-inline: 4px; }
  .xr-fz-slider { flex-wrap: wrap; gap: 6px; }
  .xr-fz-slider input { flex-basis: 100%; }
}