/* Iceberg Quantum figure library · v1.4 · styles. Needs Geist and Geist Mono (400–600) on the page.
   Figures are transparent: set --iq-surface to the page colour if it isn't #F1FCEF. */
/* tokens: on the figure and its embed wrapper */
.iq-figure, .iq-embed, .iq-table {
  --iq-ground: #F1FCEF; --iq-surface: var(--iq-ground); --iq-plate: #E4F3E1; --iq-ink: #041A18; --iq-ink-70: #475B54; --iq-ink-60: #3D4F4B;
  --iq-hairline: #C9D9C9; --iq-baseline: #8FA39C; --iq-accent: #FE25FF; --iq-magenta-text: #A600A7;
  --iq-s1: #C724C9; --iq-s2: #0E8C7A; --iq-s3: #B8570A; --iq-s4: #3A5BD9; --iq-plum: #891579; --iq-context: #A1B2A5;
  --iq-ease: cubic-bezier(0.2, 0, 0, 1);
  --iq-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --iq-sans: Geist, 'Helvetica Neue', Arial, sans-serif;
}
.iq-figure {
  display: block; max-width: none; margin: 0; color: var(--iq-ink); font: 400 16px/1.5 var(--iq-sans); text-align: left;
  container-type: inline-size; container-name: iqfig;
  -webkit-font-smoothing: antialiased;
}
.iq-figure *, .iq-figure *::before, .iq-figure *::after { box-sizing: border-box; }
.iq-plate { background: none; padding: 0; display: flex; flex-direction: column; gap: 16px; }
/* diagrams and animations: a 16 px dot grid */
.iq-figure--dots .iq-plate {
  padding: 32px;
  background-image: radial-gradient(circle, rgb(4 26 24 / 0.13) 1px, transparent 1.4px);
  background-size: 16px 16px; background-position: 8px 8.5px;
}
.iq-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap;
  font: 500 11px/14px var(--iq-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.iq-status { color: var(--iq-ink-70); font-weight: 400; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0.02em; }
.iq-key svg, .iq-legend svg { flex: none; }
.iq-bar { text-decoration: overline; text-decoration-thickness: 1px; }
/* maths: sub/sup without extra line height; variables in Geist italic */
.iq-figure :is(sub, sup) { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; bottom: auto; }
.iq-figure sup { top: -0.38em; }
.iq-figure sub { top: 0.2em; }
.iq-figure var { font-family: var(--iq-sans); font-style: italic; }
.iq-key { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; line-height: 18px; color: var(--iq-ink-60); }
.iq-key > span { display: inline-flex; align-items: center; gap: 8px; }
.iq-key b { font-weight: 600; color: var(--iq-ink); }
.iq-body { position: relative; }
.iq-body > svg { display: block; width: 100%; height: auto; overflow: visible; }
.iq-body > svg:focus { outline: none; }
.iq-body > svg:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 4px; }
/* panel row (carousel) */
.iq-figure--row .iq-plate { gap: 12px; }
.iq-panels { display: flex; align-items: flex-start; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.iq-panels::-webkit-scrollbar { display: none; }
.iq-panel { position: relative; flex: 0 0 var(--iq-panel-w, 640px); scroll-snap-align: start; background: none; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.iq-row-nav { display: flex; justify-content: center; gap: 8px; padding-top: 4px; }
.iq-arrow { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; background: var(--iq-ink); color: var(--iq-ground); display: grid; place-items: center; cursor: pointer; transition: background 200ms var(--iq-ease); }
.iq-arrow:hover { background: #1F3A36; }
.iq-arrow:disabled { background: var(--iq-context); cursor: default; }
.iq-arrow:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }
.iq-panel-title { font-size: 15px; line-height: 20px; font-weight: 500; text-wrap: balance; }
.iq-panel-sub { font: 400 11px/14px var(--iq-mono); color: var(--iq-ink-70); letter-spacing: 0.04em; }

/* svg text roles */
.iq-figure .iq-tick { font: 400 12px var(--iq-mono); fill: var(--iq-ink-70); font-variant-numeric: tabular-nums; }
.iq-figure .iq-axis { font: 400 13px var(--iq-sans); fill: var(--iq-ink-60); }
.iq-figure .iq-dlabel { font: 500 11px var(--iq-mono); fill: var(--iq-ink); }
.iq-figure .iq-dsub { font: 400 11px var(--iq-mono); fill: var(--iq-ink-70); }
.iq-figure .iq-note { font: 400 12px var(--iq-sans); fill: #5E716B; }
.iq-figure .iq-rowname { font: 500 13px var(--iq-sans); fill: var(--iq-ink); }
.iq-figure .iq-rowsub { font: 400 11px var(--iq-mono); fill: var(--iq-ink-70); }
.iq-figure .iq-val { font: 400 12px var(--iq-mono); fill: var(--iq-ink); font-variant-numeric: tabular-nums; }
.iq-figure .iq-svglab { font: 400 17px var(--iq-mono); letter-spacing: 1.2px; }
.iq-figure text.iq-halo { fill: none; stroke: var(--iq-surface); stroke-width: 4px; stroke-linejoin: round; }
.iq-figure .iq-hover-dim { transition: opacity 120ms var(--iq-ease); }

/* tooltip */
.iq-tip {
  position: absolute; left: 0; top: 0; z-index: 2; min-width: 200px; max-width: 280px; padding: 10px 12px;
  background: #041A18; color: #F1FCEF; font: 400 12px/18px var(--iq-mono); font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; gap: 4px; pointer-events: none; opacity: 0;
  transition: opacity 120ms var(--iq-ease);
}
.iq-tip.is-on { opacity: 1; }
.iq-tip-head { color: #A9BDB8; }
.iq-tip-row { display: flex; align-items: center; gap: 8px; }
.iq-tip-row.is-strong { font-weight: 500; }
.iq-tip-name { flex: 1; }
.iq-tip-val { text-align: right; white-space: nowrap; }
.iq-tip-sub { color: #A9BDB8; padding-left: 16px; margin-top: -3px; }
.iq-tip-foot { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #2A403C; padding-top: 6px; margin-top: 2px; }
.iq-tip-foot > span:first-child { color: #A9BDB8; }
.iq-tip-sw { width: 8px; height: 8px; flex: none; }
.iq-tip-sw--circle { width: 9px; height: 9px; border-radius: 50%; }
.iq-tip-sw--diamond { width: 7px; height: 7px; transform: rotate(45deg); }
.iq-tip-sw--triangle { width: 10px; height: 9px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* lattice schedules (IQFigures.lattice) */
.iq-lattice { overflow-x: auto; scrollbar-width: thin; }
.iq-lattice > svg { display: block; width: 100%; height: auto; }
.iq-lattice-qubits.is-moving circle { transition: transform var(--iq-move, 300ms) var(--iq-ease); }

/* animation chrome */
.iq-readout { display: flex; justify-content: center; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; font: 400 18px/28px var(--iq-mono); min-height: 28px; text-align: center; }
.iq-readout small { font-size: 11px; letter-spacing: 0.08em; color: var(--iq-ink-70); }
.iq-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; line-height: 18px; color: var(--iq-ink-60); }
.iq-legend > span { display: inline-flex; align-items: center; gap: 7px; }
/* animation controls under a hairline */
.iq-controls { display: flex; justify-content: center; align-items: center; gap: 20px 6px; flex-wrap: wrap; border-top: 1px solid var(--iq-hairline); padding-top: 20px; }
.iq-controls-group { display: flex; gap: 6px; flex-wrap: wrap; }
.iq-controls-end { flex: 1 0 100%; justify-content: center; }
.iq-controls .iq-shifts { flex: 1 0 100%; }
.iq-shifts { display: flex; flex-wrap: nowrap; white-space: nowrap; justify-content: safe center; overflow-x: auto; scrollbar-width: none; align-items: center; gap: 6px 18px; font: 400 12px var(--iq-mono); color: var(--iq-ink-70); }
.iq-shifts > span { display: inline-flex; flex: none; align-items: center; gap: 6px; }
.iq-shifts::-webkit-scrollbar { display: none; }
.iq-shifts i { font-style: normal; color: var(--iq-ink); }
.iq-btn {
  height: 44px; min-width: 72px; padding: 0 14px; border: 1px solid var(--iq-hairline); background: var(--iq-ground); color: var(--iq-ink);
  font: 400 12px var(--iq-mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 200ms var(--iq-ease), color 200ms var(--iq-ease), border-color 200ms var(--iq-ease);
}
.iq-btn:hover { border-color: var(--iq-ink); }
.iq-btn:focus-visible { outline: 2px solid var(--iq-accent); outline-offset: 2px; }
.iq-btn.is-primary, .iq-btn[aria-pressed="true"] { background: var(--iq-ink); color: var(--iq-ground); border-color: var(--iq-ink); }
.iq-btn .iq-n { opacity: 0.6; }


@media (prefers-reduced-motion: reduce) { .iq-figure * { transition: none !important; animation: none !important; } }

@container iqfig (max-width: 820px) {
  .iq-controls .iq-btn { padding: 0 9px; font-size: 11px; letter-spacing: 0.04em; min-width: 44px; }
  .iq-controls-group { gap: 4px; }
}
@container iqfig (max-width: 620px) {
  .iq-plate { gap: 14px; }
  .iq-figure--dots .iq-plate { padding: 20px 16px; }
  .iq-figure .iq-svglab { font-size: 22px; letter-spacing: 1.5px; }
  .iq-readout { font-size: 15px; }
  .iq-btn { min-width: 44px; padding: 0 10px; }
  .iq-btn .iq-pill-name { display: none; }
}

/* export (stills): no buttons */
.iq-export .iq-controls-group, .iq-export .iq-controls > .iq-btn { display: none; }
.iq-export .iq-controls:not(:has(.iq-shifts)) { display: none; }
.iq-figure [hidden] { display: none !important; }

/* panel rows in exports: panels side by side, no arrows */
.iq-export .iq-panels { overflow: visible; margin: 0 !important; padding: 0 !important; }
.iq-export .iq-panel { flex: 1 1 0; }
.iq-export .iq-row-nav { display: none; }


/* ---------- tables: ink rules top and bottom, hairlines between rows; numbers mono and right-aligned ---------- */
.iq-table { margin: 2.5rem 0; color: var(--iq-ink); font: 400 15px/22px var(--iq-sans); -webkit-font-smoothing: antialiased; }
.iq-table .iq-label { margin-bottom: 12px; color: var(--iq-ink); }
.iq-table-scroll { overflow-x: auto; scrollbar-width: thin; contain: inline-size; }
.iq-table table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; background: none; border: 0;
  border-top: 1px solid var(--iq-ink); border-bottom: 1px solid var(--iq-ink); font: inherit; font-variant-numeric: tabular-nums; }
.iq-table th, .iq-table td { padding: 11px 12px; text-align: left; vertical-align: baseline; border: 0; background: none; }
.iq-table th:first-child, .iq-table td:first-child { padding-left: 0; }
.iq-table th:last-child, .iq-table td:last-child { padding-right: 0; }
.iq-table thead th { padding-top: 10px; padding-bottom: 8px; vertical-align: bottom; border-bottom: 1px solid var(--iq-ink);
  font: 500 11px/14px var(--iq-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--iq-ink-70); }
.iq-table tbody tr + tr td { border-top: 1px solid var(--iq-hairline); }
.iq-table tbody tr:hover td { background: rgb(4 26 24 / 0.045); }
.iq-table td:first-child { color: var(--iq-ink); }
/* numbers: Markdown right-aligned columns (---:) or class="num" */
.iq-table th[style*="right"], .iq-table th[align="right"], .iq-table th.num { text-align: right; }
.iq-table td[style*="right"], .iq-table td[align="right"], .iq-table td.num {
  text-align: right; white-space: nowrap; font: 400 14px/22px var(--iq-mono); letter-spacing: 0; }
/* code parameters and row subtitles */
.iq-table sup { font-size: 0.72em; line-height: 0; vertical-align: 0.5em; letter-spacing: 0; }
.iq-table code { font: 400 13px/22px var(--iq-mono); background: none; padding: 0; border: 0; color: inherit; white-space: nowrap; }
.iq-table td small { display: block; font: 400 12px/18px var(--iq-mono); color: var(--iq-ink-70); }
/* a bold row label gets a magenta mark */
.iq-table td:first-child strong { font-weight: 500; }
.iq-table td:first-child strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  background: var(--iq-s1); vertical-align: 1px; }
/* totals row */
.iq-table tr.total td, .iq-table tfoot td { border-top: 1px solid var(--iq-ink); font-weight: 500; }
@media (max-width: 620px) {
  .iq-table th, .iq-table td { padding-left: 8px; padding-right: 8px; }
  .iq-table th:first-child, .iq-table td:first-child { position: sticky; left: 0; z-index: 1; min-width: 9.5em; background: var(--iq-surface); }
}

/* ---------- embedding ---------- */
/* .iq-embed: a live figure and its <noscript> still */
.iq-embed { margin: 2.5rem 0; }
.iq-embed noscript img { display: block; width: 100%; height: auto; margin: 0; }
.iq-loading { min-height: 320px; }
.iq-error { padding: 16px; border: 1px solid #C9D9C9; color: #041A18; font: 400 13px 'Geist Mono', ui-monospace, monospace; }
/* heatmap cells and key */
.iq-figure .iq-cell { font: 400 11px var(--iq-mono); font-variant-numeric: tabular-nums; }
.iq-figure .iq-ramp { display: inline-block; width: 96px; height: 10px; vertical-align: middle; }