/*
 * Site de documentação — moldura das páginas (ADR-0034). Usa os tokens da biblioteca;
 * classes site-*, que não fazem parte da biblioteca. Fora de camada de propósito: assim
 * vence também o reset do ambiente que hospeda o site (o artifact de revisão).
 */
body {
  margin: 0;
  font-family: var(--hibex-font-text);
  font-size: var(--hibex-font-size-300);
  line-height: var(--hibex-line-height-text);
  color: var(--hibex-text-body);
  background: var(--hibex-backdrop) fixed, var(--hibex-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

.site-main {
  min-width: 0;
}

.site-main > section {
  margin-block-start: var(--hibex-space-7);
}

.site-main > section > h2 {
  scroll-margin-block-start: 6rem;
}

.site-main code {
  font-family: var(--hibex-font-code);
  font-size: 0.875em;
  color: var(--hibex-text);
  overflow-wrap: anywhere;
}

/* Cabeçalho da página */
.site-lead {
  max-width: 44rem;
}

.site-when {
  display: grid;
  gap: var(--hibex-space-4);
  margin-block-start: var(--hibex-space-5);
}

@media (width >= 48rem) {
  .site-when { grid-template-columns: 1fr 1fr; }
}

.site-when > div > p:first-child {
  margin: 0 0 var(--hibex-space-2);
  font-size: var(--hibex-font-size-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hibex-text-muted);
}

.site-when ul,
.site-list {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.site-when li + li,
.site-list li + li {
  margin-block-start: var(--hibex-space-1);
}

/* Nesta página */
.site-toc {
  margin-block-start: var(--hibex-space-6);
  padding-block: var(--hibex-space-3);
  border-block: 1px solid var(--hibex-divider);
}

.site-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hibex-space-1) var(--hibex-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--hibex-font-size-200);
}

.site-toc p {
  margin: 0 0 var(--hibex-space-1);
  font-size: var(--hibex-font-size-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hibex-text-muted);
}

/* Exemplo vivo nos dois temas + código */
.site-demo {
  margin: var(--hibex-space-4) 0 0;
}

.site-demo-panes {
  display: grid;
  gap: var(--hibex-space-3);
}

@media (width >= 62rem) {
  .site-demo-panes { grid-template-columns: 1fr 1fr; }
}

.site-demo-pane {
  position: relative;
  min-width: 0;
  padding: 2.25rem var(--hibex-space-5) var(--hibex-space-5);
  overflow-x: auto;
  border-radius: var(--hibex-radius-lg);
  background: var(--hibex-backdrop);
  box-shadow: var(--hibex-shadow-1);
}

.site-demo-theme {
  position: absolute;
  inset: var(--hibex-space-3) auto auto var(--hibex-space-5);
  font-size: var(--hibex-font-size-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hibex-text-muted);
}

.site-demo-pane > :last-child { margin-block-end: 0; }

.site-demo-caption {
  margin-block-start: var(--hibex-space-2);
  font-size: var(--hibex-font-size-200);
  color: var(--hibex-text-muted);
}

.site-code {
  margin-block-start: var(--hibex-space-3);
  overflow: hidden;
  border: 1px solid var(--hibex-divider);
  border-radius: var(--hibex-radius-md);
  background: var(--hibex-surface-solid);
}

.site-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: var(--hibex-space-1) var(--hibex-space-2) var(--hibex-space-1) var(--hibex-space-4);
  border-block-end: 1px solid var(--hibex-divider);
  font-size: var(--hibex-font-size-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hibex-text-muted);
}

.site-code pre {
  max-height: 24rem;
  margin: 0;
  padding: var(--hibex-space-4);
  overflow: auto;
  font-size: var(--hibex-font-size-200);
  line-height: 1.6;
}

.site-code pre code {
  overflow-wrap: normal;
  white-space: pre;
}

/* Iframes de páginas inteiras */
.site-frames {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hibex-space-4);
}

.site-frame {
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--hibex-radius-lg);
  box-shadow: var(--hibex-shadow-2);
}

.site-framed {
  max-width: 100%;
  margin: 0;
}

.site-framed figcaption {
  margin-block-start: var(--hibex-space-2);
  font-size: var(--hibex-font-size-200);
  color: var(--hibex-text-muted);
}

.site-frame iframe {
  display: block;
  border: 0;
  transform-origin: top left;
}

/* Faça / não faça: forma antes da cor — ✓ e ✗ */
.site-dodont {
  display: grid;
  gap: var(--hibex-space-4);
}

@media (width >= 48rem) {
  .site-dodont { grid-template-columns: 1fr 1fr; }
}

.site-do,
.site-dont {
  padding: var(--hibex-space-4) var(--hibex-space-5);
  border-block-start: 3px solid var(--hibex-status-success-fg);
  border-radius: var(--hibex-radius-sm);
  background: var(--hibex-surface);
}

.site-dont { border-block-start-color: var(--hibex-status-danger-fg); }

.site-dodont-title {
  display: flex;
  align-items: center;
  gap: var(--hibex-space-2);
  margin: 0 0 var(--hibex-space-2);
  font-family: var(--hibex-font-title);
  font-weight: 600;
  color: var(--hibex-text);
}

.site-do .site-dodont-title .hx-icon { color: var(--hibex-status-success-fg); }
.site-dont .site-dodont-title .hx-icon { color: var(--hibex-status-danger-fg); }

.site-do ul,
.site-dont ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.site-anatomy {
  margin: 0;
  padding-inline-start: 1.5rem;
}

.site-anatomy li + li { margin-block-start: var(--hibex-space-1); }

.site-anatomy b {
  font-weight: 400;
  color: var(--hibex-text);
}

.site-ref { margin-block-start: var(--hibex-space-3); }
.site-ref td { color: var(--hibex-text-body); }

/* Amostras */
.site-swatches,
.site-radii,
.site-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hibex-space-3);
  align-items: center;
}

.site-swatch {
  display: grid;
  gap: 0.125rem;
  width: 8.5rem;
  font-size: var(--hibex-font-size-100);
}

.site-swatch span {
  display: grid;
  place-items: center;
  height: 3rem;
  border-radius: var(--hibex-radius-sm);
  box-shadow: inset 0 0 0 1px var(--hibex-divider);
  font-size: var(--hibex-font-size-200);
}

.site-swatch b {
  font-weight: 400;
  color: var(--hibex-text);
}

.site-radii > div {
  display: grid;
  align-content: end;
  width: 8rem;
  height: 5.5rem;
  padding: var(--hibex-space-2);
  font-size: var(--hibex-font-size-100);
  color: var(--hibex-text-muted);
  background: var(--hibex-status-neutral-bg);
}

.site-radii b { font-weight: 400; color: var(--hibex-text); }

.site-title-sample {
  margin-block-end: var(--hibex-space-2);
  font-family: var(--hibex-font-title);
  font-weight: 600;
  line-height: 1.2;
  color: var(--hibex-text);
}

.site-pad {
  padding: var(--hibex-space-5);
  border-radius: var(--hibex-radius-xl);
}

.site-icons {
  display: flex;
  align-items: center;
  gap: var(--hibex-space-2);
  color: var(--hibex-text);
}

.site-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--hibex-space-2);
}

.site-icon-grid span {
  display: flex;
  align-items: center;
  gap: var(--hibex-space-2);
  padding: var(--hibex-space-2) var(--hibex-space-3);
  border-radius: var(--hibex-radius-md);
  background: var(--hibex-surface);
  color: var(--hibex-text);
}

.site-icon-grid code { font-size: var(--hibex-font-size-100); color: var(--hibex-text-muted); }

/* Grades de cartões */
.site-cards,
.site-grid-2 {
  display: grid;
  gap: var(--hibex-space-4);
}

@media (width >= 48rem) {
  .site-cards,
  .site-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.site-cards h3 { margin-block-end: var(--hibex-space-2); }

.site-link-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.site-link-card:hover h3 { color: var(--hibex-link); text-decoration: underline; }
.site-link-card p { margin: 0; }

.site-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hibex-space-3);
}

.site-logos > div {
  display: grid;
  place-items: center;
  gap: var(--hibex-space-2);
  min-width: 14rem;
  padding: var(--hibex-space-5);
  border-radius: var(--hibex-radius-lg);
  box-shadow: var(--hibex-shadow-1);
}

.site-logos img { width: auto; height: 3.5rem; }
.site-symbols img { height: auto; }
.site-symbols span { font-size: var(--hibex-font-size-200); color: var(--hibex-text-muted); }

.site-families {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--hibex-space-3);
}

.site-families > div {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: var(--hibex-space-2);
  padding: var(--hibex-space-3);
  border-radius: var(--hibex-radius-lg);
  background: var(--hibex-surface);
}

.site-families b,
.site-families span { grid-column: 1 / -1; }
.site-families b { font-weight: 400; color: var(--hibex-text); }
.site-families span { font-size: var(--hibex-font-size-200); color: var(--hibex-text-muted); }

.site-dialog-stage {
  position: relative;
  min-height: 19rem;
  border-radius: var(--hibex-radius-md);
  background: var(--hibex-scrim);
}

.site-dialog-stage .hx-dialog {
  position: absolute;
  inset: 0;
  height: fit-content;
  margin: auto;
}

/* Rodapé da página: origem, anterior e próxima */
.site-origin {
  margin-block-start: var(--hibex-space-7);
  padding-block-start: var(--hibex-space-4);
  border-block-start: 1px solid var(--hibex-divider);
  font-size: var(--hibex-font-size-200);
  color: var(--hibex-text-muted);
}

.site-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--hibex-space-3);
  margin-block-start: var(--hibex-space-4);
}

.site-pager a {
  display: grid;
  gap: 0.125rem;
  padding: var(--hibex-space-3) var(--hibex-space-4);
  border-radius: var(--hibex-radius-md);
  background: var(--hibex-surface);
  text-decoration: none;
}

.site-pager a span { font-size: var(--hibex-font-size-100); color: var(--hibex-text-muted); }
.site-pager a:last-child { margin-inline-start: auto; text-align: end; }

.site-version {
  font-size: var(--hibex-font-size-200);
  color: var(--hibex-text-muted);
}

/* ── Ideias: o estilo de rabisco (ADR-0037) — fontes e cores da biblioteca ── */
:root {
  /* Os rabiscos usam só tokens da marca: tinta = texto do corpo, seta = cor de link (cobalto no
     claro, céu no escuro), destaque = menta, papel = superfície. Mudam com o tema sozinhos. */
  --sk-paper: var(--hibex-surface-solid);
  --sk-ink: var(--hibex-text-body);
  --sk-soft: var(--hibex-text-muted);
  --sk-blue: var(--hibex-link);
  --sk-mint: color-mix(in srgb, var(--hibex-accent) 40%, transparent);
  --sk-mint-strong: var(--hibex-accent);
  --sk-cross: var(--hibex-status-danger-fg);
  --sk-band: var(--hibex-status-neutral-bg);
  --sk-bar: var(--hibex-status-neutral-bar);
  --sk-font-title: var(--hibex-font-sketch);
  --sk-font-text: var(--hibex-font-text);   /* texto corrido do quadro em Questrial (ADR-0036) */
}

.sk-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sk-page .site-main > h1 {
  font-family: var(--sk-font-title);
  font-size: clamp(3rem, 7vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
}

.sk-board {
  display: grid;
  gap: var(--hibex-space-5);
  align-items: center;
  padding: var(--hibex-space-6) var(--hibex-space-5);
  border-radius: var(--hibex-radius-lg);
  color: var(--sk-ink);
  background: var(--sk-paper);
  box-shadow: var(--hibex-shadow-1);
}

@media (width >= 62rem) {
  .sk-board {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    padding: var(--hibex-space-7) var(--hibex-space-6);
  }
}

.sk-step {
  margin: 0 0 var(--hibex-space-2);
  font-family: var(--sk-font-title);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--sk-blue);
}

.sk-title {
  margin: 0 0 var(--hibex-space-4);
  font-family: var(--sk-font-title);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.02;
  color: var(--sk-ink);
  text-wrap: balance;
}

.sk-title mark {
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 4px;
  color: inherit;
  background: var(--sk-mint);
}

.sk-points {
  margin: 0;
  padding: 0;
  font-family: var(--sk-font-text);
  font-size: var(--hibex-font-size-300);
  line-height: 1.55;
  list-style: none;
}

.sk-points li {
  position: relative;
  padding-inline-start: 1.5rem;
}

.sk-points li + li { margin-block-start: var(--hibex-space-2); }

.sk-points li::before {
  position: absolute;
  inset-inline-start: 0;
  content: "—";
  color: var(--sk-soft);
}

.sk-points b {
  font-weight: 400;
  color: var(--sk-blue);
}

.sk-points code {
  font-size: 0.85em;
  color: var(--sk-ink);
}

.sk-link {
  margin: var(--hibex-space-5) 0 0;
  font-family: var(--sk-font-text);
}

.sk-link a { color: var(--sk-blue); }

.sk-art { min-width: 0; }

.sk-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sk-svg :is(rect, path, circle) {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sk-svg .sk-line { stroke: var(--sk-ink); stroke-width: 3; }
.sk-svg .sk-soft-line { stroke: var(--sk-soft); stroke-width: 3; }
.sk-svg .sk-glow { stroke: none; fill: var(--sk-mint); opacity: 0.55; }
.sk-svg .sk-glow-blue { stroke: none; fill: color-mix(in srgb, var(--hibex-sky) 35%, transparent); opacity: 0.55; }
.sk-svg .sk-bar { stroke: var(--sk-bar); stroke-width: 7; }
.sk-svg .sk-fill { fill: var(--sk-paper); }
.sk-svg .sk-mint-dot { stroke: var(--sk-ink); stroke-width: 3; fill: var(--sk-mint-strong); }
.sk-svg .sk-mint-band { fill: var(--sk-mint); stroke: none; }
.sk-svg .sk-soft-band { fill: var(--sk-band); stroke: none; }
.sk-svg .sk-arrow { stroke: var(--sk-blue); stroke-width: 3; }
.sk-svg .sk-cross { stroke: var(--sk-cross); stroke-width: 4; }

.sk-defs .sk-arrow-head {
  fill: none;
  stroke: var(--sk-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sk-svg text {
  font-family: var(--sk-font-title);
  font-weight: 500;
  fill: var(--sk-ink);
}

.sk-svg text.sk-blue { fill: var(--sk-blue); font-weight: 700; }
.sk-svg text.sk-soft { fill: var(--sk-soft); }

/* ── Página inicial: a abertura e a vitrine dos três cantos ── */
.site-hero {
  display: grid;
  gap: var(--hibex-space-6);
  align-items: center;
  padding-block: var(--hibex-space-5) var(--hibex-space-4);
}

@media (width >= 62rem) {
  .site-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: var(--hibex-space-7); }
}

.site-hero h1 { margin-block-end: var(--hibex-space-4); }
.site-hero .hx-lead { max-width: 36rem; margin-block-end: var(--hibex-space-5); }
.site-hero-art { display: flex; justify-content: center; min-width: 0; }

/* Cartões com ilustração */
.site-principles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.site-principles .hx-card-media { background: var(--hibex-status-neutral-bg); }
.site-principles .hx-card-footer { font-size: var(--hibex-font-size-100); }

.site-media { background: var(--hibex-gradient-aurora); }

/* Galeria de exemplos: miniatura viva de cada página, no layout do desktop */
.site-thumb {
  position: relative;
  overflow: hidden;
  background: var(--hibex-bg);
}

.site-thumb iframe {
  position: absolute;
  inset: 0 auto auto 0;
  width: 400%;
  height: 400%;
  border: 0;
  transform: scale(0.25);
  transform-origin: top left;
  pointer-events: none;
}

.site-spin-card {
  align-items: center;
  gap: var(--hibex-space-3);
  max-width: 18rem;
  margin-block-start: var(--hibex-space-3);
}

/* ── Vitrine: os três cantos (site/vitrine.py) ── */
.vt { position: relative; width: 100%; max-width: 38rem; padding: 26px 0 30px; font-family: var(--hibex-font-text); }
.vt-win { position: relative; overflow: hidden; border: 1px solid var(--hibex-glass-border); border-radius: 22px;
  background: var(--hibex-glass); box-shadow: var(--hibex-shadow-3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.vt-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 6px; }
.vt-corner { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 8px; border: 1px solid var(--hibex-glass-border);
  border-radius: 13px; background: var(--hibex-control-bg); box-shadow: var(--hibex-shadow-2); color: var(--hibex-text); font-size: 13px; white-space: nowrap; }
.vt-sys { padding-left: 4px; font-family: var(--hibex-font-title); font-weight: 600; outline: 2px solid var(--hibex-link); outline-offset: 2px; }
.vt-sys img { width: 30px; height: 30px; display: block; }
.vt-tile-dark { display: none !important; }
.dark .vt-tile-light, [data-theme="dark"] .vt-tile-light { display: none !important; }
.dark .vt-tile-dark, [data-theme="dark"] .vt-tile-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .vt-tile-light { display: none !important; }
  :root:not([data-theme]) .vt-tile-dark { display: block !important; }
}
.vt-group { display: inline-flex; gap: 6px; }
.vt-ic { position: relative; width: 38px; justify-content: center; padding: 0; }
.vt-ic-svg { width: 16px; height: 16px; flex: none; color: var(--hibex-text-muted); }
.vt-av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 10px; color: #FFFFFF;
  background: linear-gradient(135deg, var(--hibex-gray-300), var(--hibex-gray-500)); }
.vt-body { position: relative; display: grid; grid-template-columns: 196px 1fr; gap: 14px; padding: 10px 14px 16px; min-height: 252px; }
.vt-menu { align-self: start; padding: 6px; border: 1px solid var(--hibex-glass-border); border-radius: 16px; background: var(--hibex-control-bg); box-shadow: var(--hibex-shadow-3); }
.vt-item { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border-radius: 9px; font-size: 13px; color: var(--hibex-text); }
.vt-item .vt-ic-svg { width: 15px; height: 15px; }
.vt-item.vt-current { background: var(--hibex-nav-active-bg); color: var(--hibex-link); }
.vt-item.vt-current .vt-ic-svg { color: var(--hibex-link); }
.vt-item .vt-pin { margin-left: auto; width: 13px; height: 13px; color: var(--hibex-link); }
.vt-sep { height: 1px; margin: 5px 6px; background: var(--hibex-divider); }
.vt-group-label { padding: 6px 8px 2px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--hibex-text-muted); }
.vt-page { display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }
.vt-back { width: 70px; height: 6px; border-radius: 3px; background: var(--hibex-link); opacity: .55; }
.vt-title { display: flex; align-items: center; gap: 8px; font-family: var(--hibex-font-title); font-weight: 600; font-size: 21px; color: var(--hibex-text); }
.vt-badge { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 8px 0 6px; border-radius: 999px; font: 10px var(--hibex-font-text);
  color: var(--hibex-status-info-fg); background: var(--hibex-status-info-bg); }
.vt-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.vt-line { height: 7px; border-radius: 4px; background: var(--hibex-divider); }
.vt-card { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 10px; border-radius: 12px; background: var(--hibex-surface); box-shadow: var(--hibex-shadow-1); }
.vt-row { display: flex; align-items: center; gap: 8px; }
.vt-row .vt-line { flex: 1; }
.vt-dot { width: 26px; height: 9px; border-radius: 999px; background: var(--hibex-status-success-bg); }
.vt-dot.vt-info { background: var(--hibex-status-info-bg); }
.vt-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 16px 12px; border-top: 1px solid var(--hibex-divider); font-size: 10px; color: var(--hibex-text-muted); }
.vt-legal span:last-child { margin-left: auto; }
.vt-tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 4px; border-radius: 999px;
  background: var(--hibex-primary); color: #FFFFFF; font: 12px var(--hibex-font-text); box-shadow: var(--hibex-shadow-2); white-space: nowrap; }
.vt-tag b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #FFFFFF; color: var(--hibex-primary); font: 600 11px var(--hibex-font-text); }
.vt-tag-1 { top: 0; left: 18px; }
.vt-tag-2 { top: 0; right: 18px; }
.vt-tag-3 { bottom: 0; left: 50%; transform: translateX(-50%); }
/* telas estreitas: só o menu aberto — a ideia cabe sem apertar */
@media (width < 36rem) {
  .vt-body { grid-template-columns: 1fr; min-height: 0; }
  .vt-page, .vt-name, .vt-legal span:nth-child(3), .vt-legal span:nth-child(4) { display: none; }
  .vt-sys { font-size: 12px; }
}

/* ── Ilustrações dos princípios (site/vitrine.py) ── */
.site-il { display: block; }
.site-il .il-bg { fill: var(--hibex-bg); }
.site-il .il-surface { fill: var(--hibex-surface-solid); stroke: var(--hibex-divider); }
.site-il .il-field { fill: var(--hibex-control-bg); stroke: var(--hibex-control-border); stroke-width: 1.5; }
.site-il .il-field-err { fill: var(--hibex-control-bg); stroke: var(--hibex-status-danger-fg); stroke-width: 2.5; }
.site-il .il-err { fill: var(--hibex-status-danger-fg); }
.site-il .il-line { fill: var(--hibex-text-muted); opacity: .45; }
.site-il .il-btn { fill: var(--hibex-control-bg); stroke: var(--hibex-button-border); stroke-width: 3; }
.site-il .il-btn-fill { fill: var(--hibex-text-muted); }
.site-il .il-btn-primary { fill: var(--hibex-primary); }
.site-il .il-on-fill { fill: #FFFFFF; opacity: .9; }
.site-il .il-msg { fill: var(--hibex-status-neutral-bg); }
.site-il .il-bar { fill: var(--hibex-text-muted); }
.site-il .il-guide { stroke: var(--hibex-link); stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; }
.site-il .il-guide-solid { stroke: var(--hibex-link); stroke-width: 2; fill: none; }
.site-il .il-arrow { stroke: var(--hibex-link); stroke-width: 2; fill: none; }
.site-il .il-arrow-head { fill: var(--hibex-link); }
.site-il text { font-family: var(--hibex-font-text); }
.site-il .il-text { fill: var(--hibex-link); font-size: 22px; }
.site-il .il-text-small { fill: var(--hibex-text-muted); font-size: 14px; }
.site-il .il-code { fill: var(--hibex-link); font-family: var(--hibex-font-code); font-size: 15px; }
.site-il .il-pill-text { font-size: 13px; }
.site-il .il-pill-neutral { fill: var(--hibex-status-neutral-bg); }
.site-il .il-dot-neutral, .site-il .il-text-neutral { fill: var(--hibex-status-neutral-fg); }
.site-il .il-pill-info { fill: var(--hibex-status-info-bg); }
.site-il .il-dot-info, .site-il .il-text-info { fill: var(--hibex-status-info-fg); }
.site-il .il-pill-warning { fill: var(--hibex-status-warning-bg); }
.site-il .il-dot-warning, .site-il .il-text-warning { fill: var(--hibex-status-warning-fg); }
.site-il .il-pill-danger { fill: var(--hibex-status-danger-bg); }
.site-il .il-dot-danger, .site-il .il-text-danger { fill: var(--hibex-status-danger-fg); }
.site-il .il-pill-success { fill: var(--hibex-status-success-bg); }
.site-il .il-dot-success, .site-il .il-text-success { fill: var(--hibex-status-success-fg); }