.aster-labs-flow {
  --aster-local: #e7f2e8;
  --aster-local-line: #91b7a7;
  --aster-ai: #f1deda;
  --aster-ai-line: #ce8b7c;
  --aster-encoded: #eeeffb;
  --aster-encoded-line: #9395c6;

  /* Fit-to-viewport sizing. The figure is as wide as its height budget allows,
     so the diagram fills the screen without ever needing to be scrolled through.
     --aster-chrome: panel padding + eyebrow + scrubber + controls + gaps, i.e.
     everything in the figure that is not the SVG.
     --aster-reserved: the sticky header plus top margin and a little breathing room.
     1.8182 is the desktop viewBox ratio (1200/660); 40px is the panel's side padding.
     Both customs are re-stated at each breakpoint that changes the chrome. */
  --aster-chrome: 209px;
  --aster-reserved: calc(var(--header-h) + 36px);
  display: block;
  width: min(1180px, calc(100% - 40px));
  margin: 18px auto 26px;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
}

.aster-labs-panel {
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(52, 54, 74, 0.07);
}

.aster-labs-heading {
  display: flex;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.aster-labs-heading > span,
.aster-labs-flow figcaption,
.aster-flow-footnote,
.aster-flow-progress-labels button,
.aster-flow-playback button,
.aster-flow-controls,
.aster-flow-progress {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
}

.aster-labs-heading > span {
  flex: 0 0 auto;
  color: var(--blue-dark);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.aster-labs-heading h3 {
  max-width: 720px;
  color: var(--ink);
  font-size: clamp(25px, 2.4vw, 36px);
  line-height: 1.08;
  text-align: right;
}

.aster-labs-panel > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.aster-labs-flow .ef-zone {
  fill: #35687b;
  font: 700 23px "Bricolage Grotesque", ui-sans-serif, sans-serif;
}

.aster-labs-flow .ef-action {
  fill: #3b5e69;
  font: 500 16px "Bricolage Grotesque", ui-sans-serif, sans-serif;
}

.aster-labs-flow .ef-effect-label {
  fill: #4a7b80;
  font: 700 18px "Bricolage Grotesque", ui-sans-serif, sans-serif;
}

.aster-labs-flow .aster-packet rect {
  fill: #f8edce;
  stroke: #ac9561;
  stroke-width: 2.5;
}

.aster-labs-flow .aster-packet text {
  fill: #355a6f;
  font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-weight: 650;
}

.aster-labs-flow .aster-packet .ax-label {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.aster-labs-flow .aster-packet[data-kind="response"] .ax-label {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.aster-labs-flow .aster-packet[data-kind="response"] .ax-detail {
  font-size: 14px;
}

.aster-labs-flow .aster-packet[data-kind="encoded"] .ax-detail {
  font-size: 14px;
  letter-spacing: -0.01em;
}

.aster-labs-flow .aster-packet .ax-value {
  font-size: 16px;
  font-weight: 750;
}

.aster-labs-flow .aster-packet .ax-detail {
  font-size: 14px;
  font-weight: 550;
}

.aster-labs-flow .aster-packet[data-kind="raw"] [data-ax-line="2"],
.aster-labs-flow .aster-packet[data-kind="raw"] [data-ax-line="4"] {
  font-size: 16px;
  font-weight: 750;
}

.aster-labs-flow .aster-packet[data-kind="encoded"] rect,
.aster-labs-flow .aster-packet[data-kind="response"] rect {
  fill: var(--aster-encoded);
  stroke: var(--aster-encoded-line);
}

.aster-labs-flow .aster-packet[data-kind="clear"] rect,
.aster-labs-flow .aster-packet.is-answer rect {
  fill: var(--aster-local);
  stroke: #669888;
  stroke-width: 2.3;
}

.aster-labs-flow .aster-packet.is-answer .ax-label {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.aster-labs-flow .aster-packet.is-answer .ax-value {
  font-weight: 750;
}

.aster-labs-flow .aster-packet.is-answer .ax-detail {
  font-size: 16px;
  font-weight: 500;
}

.aster-labs-flow .ax-question-label {
  fill: #355a6f;
  font: 800 18px "Bricolage Grotesque", ui-sans-serif, sans-serif;
  letter-spacing: 1.5px;
}

.aster-labs-flow .ax-question-title {
  fill: #355a6f;
  font: 500 20px "Bricolage Grotesque", ui-sans-serif, sans-serif;
}

.aster-labs-flow .ax-question-data {
  fill: #4c686b;
  font: 500 16px "Bricolage Grotesque", ui-sans-serif, sans-serif;
}

.aster-labs-flow .ax-question-data-label {
  fill: #3b5e69;
  font: 700 14px "Bricolage Grotesque", ui-sans-serif, sans-serif;
  letter-spacing: 1px;
}

.aster-labs-flow .ax-question-place {
  fill: #355a6f;
  font-size: 18px;
  font-weight: 750;
}

.aster-labs-flow .ax-question-file {
  fill: #37614f;
  font: 650 14px "Bricolage Grotesque", ui-sans-serif, sans-serif;
  letter-spacing: 0.012em;
}

/* Type metrics match the expanded useful-answer packet exactly (.is-answer
   .ax-label / .ax-value / .ax-detail) so the two cards are the same answer in two
   vocabularies. Only the colours differ, which is the point being made. */
.aster-labs-flow .ax-answer-label {
  fill: #4b4e96;
  font: 800 18px "Bricolage Grotesque", ui-sans-serif, sans-serif;
  letter-spacing: 0.08em;
}

.aster-labs-flow .ax-answer-title {
  fill: #353a6f;
  font: 750 28px "Bricolage Grotesque", ui-sans-serif, sans-serif;
}

.aster-labs-flow .ax-answer-detail {
  fill: #4c4f70;
  font: 500 16px "Bricolage Grotesque", ui-sans-serif, sans-serif;
}

.aster-flow-progress {
  width: min(900px, 100%);
  margin: 8px auto 4px;
}

.aster-flow-progress-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 2px;
}

.aster-flow-progress-labels button {
  min-height: 28px;
  padding: 0 0 4px;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease;
}

.aster-flow-progress-labels button:nth-child(2) {
  text-align: center;
}

.aster-flow-progress-labels button:last-child {
  text-align: right;
}

.aster-flow-progress-labels button:hover,
.aster-flow-progress-labels button.is-current {
  color: var(--blue-dark);
}

.aster-flow-progress-labels button.is-current {
  color: var(--ink);
}

.aster-flow-progress input {
  width: 100%;
  height: 22px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.aster-flow-progress input::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, var(--blue) 0 var(--ax-progress, 0%), #c8c8d8 var(--ax-progress, 0%) 100%);
  border-radius: 999px;
}

.aster-flow-progress input::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  appearance: none;
  background: var(--blue);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(79, 95, 224, 0.3);
}

.aster-flow-progress input::-moz-range-track {
  height: 3px;
  background: linear-gradient(to right, var(--blue) 0 var(--ax-progress, 0%), #c8c8d8 var(--ax-progress, 0%) 100%);
  border: 0;
  border-radius: 999px;
}

.aster-flow-progress input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--blue);
  border: 3px solid #fff;
  border-radius: 50%;
}

.aster-flow-controls {
  display: flex;
  width: min(900px, 100%);
  min-height: 40px;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 8px;
  border-top: 1px solid rgba(92, 102, 108, 0.16);
}

.aster-flow-progress-labels button:focus-visible,
.aster-flow-playback button:focus-visible,
.aster-flow-progress input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.aster-flow-controls > p {
  max-width: 520px;
  min-height: 17px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.aster-flow-playback {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  align-items: center;
}

.aster-flow-playback button {
  min-height: 36px;
  padding: 0 16px;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.025em;
  cursor: pointer;
}

.aster-flow-playback [data-ax-replay] {
  width: 34px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  font-size: 18px;
}

.aster-flow-playback button:hover {
  background: #33343e;
}

.aster-flow-footnote {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.aster-labs-flow figcaption {
  max-width: 720px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.075em;
  line-height: 1.55;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .aster-labs-flow {
    width: min(100%, 760px);
  }

  .aster-labs-panel {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .aster-labs-heading {
    display: block;
  }

  .aster-labs-heading h3 {
    margin-top: 8px;
    text-align: left;
  }

  .aster-flow-progress {
    width: 100%;
  }

}

@media (max-width: 520px) {
  .aster-labs-flow {
    width: 100%;
    margin-top: 8px;
  }

  .aster-labs-panel {
    padding: 20px 12px;
    border-radius: 14px;
  }

  .aster-labs-heading {
    padding-inline: 4px;
  }

  .aster-labs-heading h3 {
    font-size: 25px;
  }

  .aster-flow-controls {
    gap: 8px;
  }

  .aster-flow-controls > p {
    font-size: 14px;
  }

  .aster-flow-playback button {
    min-height: 36px;
  }
}

@media (min-width: 800px) {
  .aster-labs-flow {
    /* The floor is load-bearing: below 720px aster-labs-flow.js switches to the
       stacked mobile viewBox (400x1740), which is far taller than any desktop
       viewport. Shrinking past this point would cause scrolling, not prevent it.
       722px rather than 720px so sub-pixel rounding can never trip that flip. */
    width: min(
      1240px,
      calc(100% - 40px),
      max(722px, calc((100svh - var(--aster-reserved) - var(--aster-chrome)) * 1.8182 + 40px))
    );
  }
}

@media (min-width: 720px) and (max-height: 950px) {
  .aster-labs-flow {
    /* Chrome is tighter here, so the height budget hands more of itself to the
       diagram. Keep these two in step with the spacing below. */
    --aster-chrome: 143px;
    --aster-reserved: calc(var(--header-h) + 18px);
    margin-top: 8px;
    margin-bottom: 10px;
  }

  .aster-labs-panel {
    padding: 14px 20px;
  }

  .aster-labs-heading {
    margin-bottom: 6px;
  }

  .aster-labs-heading h3 {
    font-size: clamp(24px, 2vw, 30px);
  }

  .aster-flow-progress {
    margin-top: 2px;
    margin-bottom: 5px;
  }

  .aster-flow-progress input {
    height: 18px;
  }

  .aster-flow-controls {
    min-height: 36px;
    padding-top: 6px;
  }

  .aster-labs-flow figcaption {
    margin-top: 9px;
    font-size: 9px;
  }
}

/* Very short desktop viewports (720p screens, or a tall browser chrome). The figure
   cannot get narrower than the 720px floor without flipping to the stacked mobile
   viewBox, so the only way to keep the whole diagram on screen is to spend less on
   chrome: the eyebrow goes, and the panel tightens. */
@media (min-width: 720px) and (max-height: 720px) {
  .aster-labs-flow {
    --aster-chrome: 114px;
  }

  .aster-labs-heading {
    display: none;
  }

  .aster-labs-panel {
    padding: 11px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aster-labs-flow * {
    scroll-behavior: auto !important;
  }
}

/* The computed figures are the one line that proves the model did real
   arithmetic on protected values, so both cards give that line extra weight:
   the encoded side in tokens, the decoded side in dollars. */
.aster-labs-flow .ax-answer-figure,
.aster-labs-flow .aster-packet.is-answer [data-ax-line="2"] {
  font-weight: 650;
}

/* ---------- Clickable cards and the full-view dialog ---------- */

.aster-labs-hint {
  color: var(--muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.aster-labs-flow .ax-clickable {
  cursor: pointer;
  outline: none;
}

.aster-labs-flow .ax-clickable > rect:first-child,
.aster-labs-flow .ax-clickable.aster-packet rect {
  transition: stroke-width 160ms ease, filter 160ms ease;
}

.aster-labs-flow .ax-clickable:hover > rect:first-child,
.aster-labs-flow .ax-clickable.aster-packet:hover rect,
.aster-labs-flow .ax-clickable:focus-visible > rect:first-child,
.aster-labs-flow .ax-clickable.aster-packet:focus-visible rect {
  stroke-width: 3.5;
  filter: drop-shadow(0 6px 14px rgba(30, 31, 39, 0.12));
}

.aster-labs-flow .ax-clickable:focus-visible > rect:first-child,
.aster-labs-flow .ax-clickable.aster-packet:focus-visible rect {
  stroke: var(--ink);
}

.ax-dialog {
  width: min(880px, calc(100% - 40px));
  max-height: calc(100vh - 80px);
  padding: 0;
  color: var(--ink);
  background: var(--card, #fffdf8);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(30, 31, 39, 0.25);
}

.ax-dialog::backdrop {
  background: rgba(30, 31, 39, 0.45);
}

.ax-dialog-inner {
  padding: 22px 30px 30px;
}

.ax-dialog-top {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.ax-dialog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ax-dialog-tabs button,
.ax-dialog-close {
  min-height: 36px;
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ax-dialog-tabs button:hover {
  color: var(--ink);
}

.ax-dialog-tabs button[aria-current="step"] {
  color: var(--ink);
  border-color: rgba(30, 31, 39, 0.28);
}

.ax-dialog-close {
  width: 40px;
  padding: 0;
  color: var(--ink);
  border-color: rgba(30, 31, 39, 0.28);
  font-size: 20px;
  line-height: 1;
}

.ax-panel h3 {
  margin-bottom: 18px;
  font-size: 26px;
  font-weight: 560;
  letter-spacing: -0.025em;
}

.ax-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.ax-col {
  padding: 20px 22px;
}

.ax-col-ai {
  background: #f5f7ff;
  border-left: 1px dashed rgba(73, 88, 209, 0.5);
}

.ax-col-zone {
  margin-bottom: 10px;
  color: var(--muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ax-col-ai .ax-col-zone,
.ax-answer-card-ai .ax-col-zone {
  color: var(--blue-dark);
}

.ax-col-question {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.ax-col-file {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 10px;
  color: var(--muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
}

.ax-col-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.ax-col-table th,
.ax-col-table td {
  padding: 8px 8px 8px 0;
  border-top: 1px solid var(--line);
}

.ax-col-table thead th {
  color: var(--muted);
  border-top: 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ax-col-table tbody th {
  font-weight: 600;
}

.ax-answer-card {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.65;
}

.ax-answer-card-ai {
  background: #f5f7ff;
  border-color: rgba(73, 88, 209, 0.3);
}

.ax-answer-headline {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 600;
}

.ax-answer-card mark {
  padding: 1px 5px;
  color: var(--encoded, #4958d1);
  background: var(--encoded-wash, #e9efff);
  border-radius: 3px;
  font-weight: 600;
}

.ax-panel-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 900px) {
  .aster-labs-hint {
    display: none;
  }
}

/* "Open in full" badge on each card. */
.aster-labs-flow .ax-open-badge circle {
  fill: #fff;
  stroke: rgba(30, 31, 39, 0.28);
  stroke-width: 1.2;
}

.aster-labs-flow .ax-open-badge path {
  fill: none;
  stroke: #1e1f27;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aster-labs-flow .ax-clickable:hover .ax-open-badge circle,
.aster-labs-flow .ax-clickable:focus-visible .ax-open-badge circle {
  fill: #1e1f27;
  stroke: #1e1f27;
}

.aster-labs-flow .ax-clickable:hover .ax-open-badge path,
.aster-labs-flow .ax-clickable:focus-visible .ax-open-badge path {
  stroke: #fff;
}

.aster-labs-flow .aster-packet:not(.is-answer) .ax-open-badge-packet {
  display: none;
}

/* The hint reads as an instruction, not a caption. */
.aster-labs-hint {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(30, 31, 39, 0.2);
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* The full view on a phone. */
@media (max-width: 760px) {
  .ax-dialog {
    width: calc(100% - 20px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }

  .ax-dialog-inner {
    padding: 16px 16px 22px;
  }

  .ax-dialog-top {
    align-items: flex-start;
    margin-bottom: 16px;
  }

  .ax-dialog-tabs button {
    padding: 0 10px;
  }

  .ax-panel h3 {
    font-size: 22px;
  }

  .ax-columns {
    grid-template-columns: 1fr;
  }

  .ax-col {
    padding: 16px;
  }

  .ax-col-ai {
    border-top: 1px dashed rgba(73, 88, 209, 0.5);
    border-left: 0;
  }

  .ax-answer-card {
    padding: 18px;
    font-size: 16px;
  }
}

.ax-dialog {
  overflow-y: auto;
}