/* Scoped, original terminal illustrations. No global reset or host-page styling. */
.fs-scene {
  --fs-bg: #07080a;
  --fs-surface: #0c0e12;
  --fs-line: rgba(157,167,180,.12);
  --fs-ink: #e4e9ef;
  --fs-muted: #9da7b4;
  color: var(--fs-ink);
  background: linear-gradient(145deg, rgba(17,23,28,.72), transparent 48%), var(--fs-bg);
  border: 1px solid rgba(157,167,180,.18);
  border-radius: 14px;
  margin: 0;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 24px 70px -30px #000, inset 0 1px 0 rgba(255,255,255,.025);
}
.fs-scene *, .fs-scene *::before, .fs-scene *::after { box-sizing: border-box; }
.fs-scene strong, .fs-scene b { font-weight: 550; }
.fs-head { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 19px; border-bottom: 1px solid var(--fs-line); background: rgba(12,14,18,.56); }
.fs-head-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fs-head strong { font-size: 12px; letter-spacing: -.015em; white-space: nowrap; }
.fs-light { flex: 0 0 5px; height: 5px; border-radius: 50%; background: #00d4c8; box-shadow: 0 0 9px #00d4c838; }
.fs-detail { color: var(--fs-muted); font-size: 9px; white-space: nowrap; margin-left: 5px; }
.fs-status { color: #80919c; font-size: 8px; letter-spacing: .075em; white-space: nowrap; }
.fs-eyebrow { color: var(--fs-muted); display: block; font-size: 9px; letter-spacing: .075em; }
.fs-muted { color: var(--fs-muted); }
.fs-teal { color: #00d4c8; }
.fs-violet { color: #a99bef; }
.fs-chart { display: block; height: 100%; width: 100%; overflow: visible; }
.fs-grid { stroke: #9da7b4; stroke-opacity: .065; fill: none; stroke-width: 1; }
.fs-zero { stroke: #9da7b4; stroke-opacity: .24; fill: none; stroke-width: 1; stroke-dasharray: 2 4; }
.fs-foot { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 19px; color: #8b97a5; font-size: 9px; border-top: 1px solid var(--fs-line); }
.fs-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.fs-flow-overview { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 2px; }
.fs-metric { display: block; font-size: 26px; letter-spacing: -.055em; line-height: 1.2; margin-top: 2px; }
.fs-legend { display: flex; align-items: center; gap: 14px; color: var(--fs-muted); font-size: 9px; }
.fs-legend > span { display: flex; align-items: center; gap: 5px; }
.fs-key { width: 5px; height: 5px; display: inline-block; flex: 0 0 auto; border-radius: 1px; }
.fs-key-call { background: #00d4c8; }
.fs-key-put { background: #a99bef; }
.fs-key-pink { background: #d979a8; }
.fs-key-price { background: #d9e1e9; height: 1px; width: 9px; }
.fs-flow-plot { padding: 8px 20px 9px; }
.fs-flow-plot > .fs-chart { height: 146px; }
.fs-time { display: flex; justify-content: space-between; color: #8a95a1; font-size: 9px; margin-top: 3px; }
.fs-tape { margin: 0 20px 11px; border-top: 1px solid var(--fs-line); }
.fs-tape-title { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .065em; padding-top: 10px; }
.fs-tape-title .fs-muted { letter-spacing: 0; }
.fs-tape table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 10px; }
.fs-tape th { text-align: left; color: #84909e; font-size: 9px; font-weight: 400; padding: 4px 0; }
.fs-tape td { border-top: 1px solid rgba(157,167,180,.045); padding: 5px 0; color: #c0cad6; }
.fs-tape th:last-child, .fs-tape td:last-child { text-align: right; }
.fs-tape td:last-child { color: #e2e8ee; }
.fs-contract { font-size: 9px; font-weight: 550; }
.fs-tape-symbol { color: var(--fs-muted); font-size: 9px; }
.fs-bubble-key { display: inline-block; width: 6px; height: 6px; border: 1px solid #00d4c8; border-radius: 50%; }
.fs-scenario { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 20px 14px; }
.fs-scenario-chip { font-size: 10px; color: #c2ccd6; }
.fs-scenario-chip b { display: inline-block; margin-inline: 5px; color: #00d4c8; font-size: 13px; }
.fs-hedge-lane { padding: 10px 20px 14px; }
.fs-hedge-lane + .fs-hedge-lane { border-top: 1px solid var(--fs-line); }
.fs-lane-label { display: flex; align-items: center; gap: 10px; }
.fs-gamma { color: var(--fs-lane); font-size: 17px; min-width: 35px; padding-right: 9px; border-right: 1px solid var(--fs-line); line-height: 1.6; }
.fs-lane-label > div strong { display: block; font-size: 11px; }
.fs-lane-label > div > span { color: var(--fs-muted); font-size: 9px; display: block; margin-top: 1px; }
.fs-lean { margin-left: auto; color: var(--fs-lane); letter-spacing: .045em; font-size: 9px; border: 1px solid color-mix(in srgb, var(--fs-lane) 24%, transparent); background: color-mix(in srgb, var(--fs-lane) 6%, transparent); border-radius: 4px; padding: 4px 7px; white-space: nowrap; }
.fs-sensitivity { height: 93px; margin-top: 5px; }
.fs-lane-axis { display: flex; justify-content: space-between; color: #85919f; font-size: 9px; }
.fs-lane-axis span:nth-child(2) { color: #a1acb9; }
.fs-alignment { padding: 15px 20px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--fs-muted); font-size: 9px; }
.fs-positive-negative { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.fs-positive-negative i:nth-of-type(2) { margin-left: 5px; }
.fs-ladder-head { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 20px 7px 46px; gap: 1px; }
.fs-ladder-head > span { text-align: center; font-weight: 550; font-size: 12px; }
.fs-ladder-head small { display: block; font-size: 8px; color: var(--fs-muted); font-weight: 400; margin-top: 2px; }
.fs-ladder-plot { position: relative; height: 191px; padding: 0 20px; }
.fs-level-label { position: absolute; left: 20px; font-size: 8px; color: #8f9ba8; background: #080a0d; padding-right: 5px; line-height: 1; }
.fs-level-top { top: 28%; color: #00b5ac; }
.fs-level-spot { top: 51%; color: #d0d8e1; }
.fs-level-bottom { top: 74%; color: #c27b9c; }
.fs-expected { margin: 4px 20px 13px; padding-top: 12px; border-top: 1px solid var(--fs-line); }
.fs-range-title { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; letter-spacing: .04em; }
.fs-range-title .fs-muted { letter-spacing: 0; }
.fs-range { position: relative; margin: 16px 8% 10px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #8b8bed22, #8b8bed66 48%, #8b8bed22); }
.fs-range-halo { position: absolute; inset: -6px 0; background: #9292ee09; border-radius: 2px; }
.fs-range-tick { position: absolute; width: 1px; top: -4px; bottom: -4px; background: #9393df; }
.fs-range-tick-low { left: 0; }
.fs-range-tick-spot { left: 50%; background: #dce5eb80; }
.fs-range-tick-high { right: 0; }
.fs-range-dot { width: 7px; height: 7px; border-radius: 50%; position: absolute; top: -1px; left: calc(61% - 3px); background: #e0e5ed; box-shadow: 0 0 0 4px #dce5eb0a; }
.fs-range-labels { display: flex; justify-content: space-between; color: #8e9aa7; font-size: 9px; }
.fs-context-title { padding: 17px 20px 13px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.fs-context-title strong { display: block; margin-top: 5px; font-size: 14px; letter-spacing: -.025em; }
.fs-context-spark { width: 95px; flex: 0 0 95px; }
.fs-context-rows { margin: 0 20px; padding: 0; }
.fs-context-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--fs-line); min-height: 35px; }
.fs-context-rows dt { display: flex; align-items: center; gap: 8px; color: #aab5c0; font-size: 10px; white-space: nowrap; }
.fs-source-num { font-style: normal; font-size: 8px; color: #8294a1; border: 1px solid #9da7b426; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; }
.fs-context-rows dd { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 10px; color: #d2dae3; text-align: right; }
.fs-context-dot { display: inline-block; height: 4px; width: 4px; flex: 0 0 4px; border-radius: 50%; background: #9da7b4; }
.fs-dot-teal { background: #00d4c8; }
.fs-dot-violet { background: #a99bef; }
.fs-chat { background: linear-gradient(125deg, rgba(0,212,200,.025), transparent 50%), #0b0e12; margin: 13px 12px 12px; padding: 14px 16px 12px; border: 1px solid rgba(157,167,180,.14); border-radius: 9px; }
.fs-chat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fs-chat-label { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.fs-chat-label > svg { color: #00d4c8; }
.fs-upcoming { font-size: 8px; color: #aab5c1; letter-spacing: .045em; background: #9da7b40b; border: 1px solid #9da7b424; padding: 3px 6px; border-radius: 4px; white-space: nowrap; }
.fs-question { margin-top: 14px; margin-left: auto; width: fit-content; max-width: 100%; font-size: 11px; padding: 7px 10px; border: 1px solid #9da7b426; border-radius: 8px 8px 2px 8px; background: #11161c; }
.fs-answer { display: flex; gap: 10px; margin-top: 12px; }
.fs-answer-rule { display: block; width: 2px; flex: 0 0 2px; background: linear-gradient(#00d4c888, #00d4c80d); border-radius: 1px; }
.fs-answer p { margin: 0; font-size: 11px; line-height: 1.6; color: #b7c3ce; }
.fs-sources { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0 12px; font-size: 8px; color: #94a1ae; }
.fs-sources span:not(:first-child) { padding: 2px 5px; border: 1px solid #9da7b41a; border-radius: 3px; }
.fs-sources span:first-child { align-self: center; margin-right: 3px; }
.fs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .fs-scene { border-radius: 10px; }
  .fs-head { padding-inline: 13px; min-height: 42px; }
  .fs-head strong { font-size: 11px; }
  .fs-head-name { gap: 7px; }
  .fs-detail { display: none; }
  .fs-status { font-size: 7px; }
  .fs-flow-overview { padding-inline: 14px; padding-top: 14px; }
  .fs-legend { gap: 9px; }
  .fs-metric { font-size: 24px; }
  .fs-flow-plot { padding-inline: 14px; }
  .fs-flow-plot > .fs-chart { height: 123px; }
  .fs-tape { margin-inline: 14px; }
  .fs-tape td { padding-block: 7px; }
  .fs-foot { padding-inline: 13px; font-size: 8px; }
  .fs-scenario { padding: 14px 14px 10px; align-items: flex-start; gap: 5px; flex-direction: column; }
  .fs-hedge-lane { padding-inline: 14px; }
  .fs-sensitivity { height: 86px; }
  .fs-gamma { min-width: 29px; font-size: 15px; padding-right: 7px; }
  .fs-lane-label { gap: 8px; }
  .fs-lane-label > div strong { font-size: 10px; }
  .fs-lane-label > div > span { font-size: 8px; }
  .fs-lean { font-size: 8px; padding: 3px 5px; }
  .fs-alignment { padding-inline: 14px; font-size: 8px; }
  .fs-ladder-head { padding-right: 14px; padding-left: 32px; }
  .fs-ladder-head small { font-size: 7px; }
  .fs-ladder-plot { height: 176px; padding-inline: 14px; }
  .fs-level-label { left: 14px; font-size: 7px; }
  .fs-expected { margin-inline: 14px; padding-top: 13px; }
  .fs-context-title { padding: 15px 14px 12px; gap: 8px; }
  .fs-context-title strong { font-size: 12px; }
  .fs-context-spark { width: 52px; flex-basis: 52px; }
  .fs-context-rows { margin-inline: 14px; }
  .fs-context-rows > div { gap: 8px; min-height: 37px; }
  .fs-context-rows dt { font-size: 9px; gap: 5px; }
  .fs-context-rows dd { font-size: 9px; gap: 5px; max-width: 62%; }
  .fs-source-num { height: 13px; width: 13px; font-size: 7px; }
  .fs-chat { margin-inline: 9px; padding: 13px 11px 12px; }
  .fs-question { font-size: 10px; }
  .fs-answer p { font-size: 10px; line-height: 1.65; }
  .fs-sources { gap: 4px; font-size: 7px; }
}