/* ============================================================================
   IoTClass Design System — PILOT (privacy modules)
   Goal: Khan-Academy-style — flat, modern, elegant, content-forward.
   Strategy: a token-based override layer loaded AFTER iotclass.css.
   It flattens depth (shadows/gradients), refines type/spacing, and uses the
   per-module accent (--pc-main) sparingly. Scoped to pilot books for now;
   promote to global once approved.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --ds-font: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ds-ink: #1f2933; /* primary text */
  --ds-ink-soft: #52606d; /* secondary text */
  --ds-ink-faint: #7b8794; /* captions / meta */
  --ds-line: #e6e8eb; /* hairlines */
  --ds-line-strong: #d2d6dc;
  --ds-surface: #ffffff;
  --ds-surface-alt: #f7f9fb; /* subtle panels */
  --ds-accent: var(--pc-main, #8e24aa);
  --ds-accent-link: color-mix(in srgb, var(--ds-accent) 52%, black);
  --ds-radius: 12px;
  --ds-radius-sm: 8px;
  --ds-measure: 46rem; /* comfortable reading width */
  --ds-block-width: 100%; /* framed blocks fill the chapter block column */
}

/* ---- Base typography ---------------------------------------------------- */
body {
  font-family: var(--ds-font) !important;
  color: var(--ds-ink) !important;
  background: var(--ds-surface) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.005em;
}
#quarto-document-content p,
#quarto-document-content li,
#quarto-document-content > ul,
#quarto-document-content > ol,
#quarto-document-content blockquote {
  max-width: var(--ds-measure);
}
#quarto-document-content p {
  margin: 0 0 1.15rem;
}

h1,
h2,
h3,
h4,
h5,
.quarto-title-block .title {
  font-family: var(--ds-font) !important;
  color: var(--ds-ink) !important;
  letter-spacing: -0.015em;
  line-height: 1.25;
  font-weight: 700 !important;
}
#quarto-document-content h2 {
  font-size: 1.6rem !important;
  margin-top: 2.6rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ds-line) !important;
}
#quarto-document-content h3 {
  font-size: 1.25rem !important;
  margin-top: 1.9rem !important;
}
#quarto-document-content h2::after {
  /* slim accent tick under h2 */
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--ds-accent);
  margin-top: 0.4rem;
  margin-bottom: -0.42rem;
}

a,
a:visited {
  color: var(--ds-accent-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Flatten depth (the "modern/non-3D" ask) ---------------------------- */
.card,
.callout,
.panel,
.sidebar,
#quarto-sidebar,
.sidebar-item,
.quarto-title-block,
figure,
.iotclass-card,
blockquote,
#quarto-document-content table,
.nav-tabs,
.tab-content {
  box-shadow: none !important;
  background-image: none !important; /* kill gradients */
  text-shadow: none !important;
}

/* ---- Page chrome & layout ---------------------------------------------- */
.quarto-title-block .title {
  font-size: 2.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.35rem;
}
#title-block-header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ds-line);
}
main.content {
  padding-top: 1.5rem;
}

/* ---- Width discipline ---------------------------------------------------
   Founder rule: running prose keeps the reading measure; every framed block
   uses one shared block-column width so pages have exactly two visible tiers. */
#quarto-document-content
  :where(
    .callout,
    section[data-iot-panel-category],
    div.sourceCode,
    pre,
    details.iot-code-disclosure,
    figure,
    table,
    .table,
    iot-embed,
    iot-knowledge-check,
    .inline-knowledge-check,
    .iot-child-links,
    .iot-lab-identity-band,
    .cell-output-display,
    .observablehq,
    [id^="ojs-cell"],
    iot-matching-quiz,
    iot-ordering-quiz,
    iot-label-quiz,
    iot-code-quiz
  ) {
  box-sizing: border-box;
  width: var(--ds-block-width) !important;
  max-width: var(--ds-block-width) !important;
}

#quarto-document-content
  p:has(
    > :where(
      iot-embed,
      iot-simulator,
      iot-animation,
      iot-video,
      iot-resource,
      iot-knowledge-check,
      iot-matching-quiz,
      iot-ordering-quiz,
      iot-label-quiz,
      iot-code-quiz,
      .inline-knowledge-check
    )
  ) {
  width: var(--ds-block-width) !important;
  max-width: var(--ds-block-width) !important;
}

#quarto-document-content
  p:has(
    > :where(
      iot-embed,
      iot-simulator,
      iot-animation,
      iot-video,
      iot-resource,
      iot-knowledge-check,
      .inline-knowledge-check
    )
  )
  > :where(
    iot-embed,
    iot-simulator,
    iot-animation,
    iot-video,
    iot-resource,
    iot-knowledge-check,
    iot-matching-quiz,
    iot-ordering-quiz,
    iot-label-quiz,
    iot-code-quiz,
    .inline-knowledge-check
  ) {
  width: var(--ds-block-width) !important;
  max-width: var(--ds-block-width) !important;
}

#quarto-document-content :where(figure, .quarto-figure, figure.quarto-float, figure.figure) {
  width: var(--ds-block-width) !important;
  max-width: var(--ds-block-width) !important;
}

#quarto-document-content :where(figure img, figure svg, .quarto-figure img.figure-img) {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- Sidebar / nav: clean, flat, accent-aware -------------------------- */
#quarto-sidebar,
.sidebar.sidebar-navigation {
  background: var(--ds-surface) !important;
  border-right: 1px solid var(--ds-line) !important;
}
#quarto-sidebar .sidebar-item-text {
  color: var(--ds-ink-soft) !important;
  font-weight: 500;
}
#quarto-sidebar .sidebar-item a.active,
#quarto-sidebar .sidebar-link.active {
  color: var(--ds-accent) !important;
  font-weight: 600 !important;
  background: color-mix(in srgb, var(--ds-accent) 9%, white) !important;
  border-radius: var(--ds-radius-sm);
  box-shadow: inset 3px 0 0 var(--ds-accent) !important;
}
#quarto-sidebar .sidebar-item a:hover {
  color: var(--ds-accent) !important;
}
.sidebar-title,
.sidebar-part-title {
  color: var(--ds-accent) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* ---- Callouts (Summary / Key Takeaway): flat with accent edge ---------- */
.callout {
  border: 1px solid var(--ds-line) !important;
  border-left: 4px solid var(--ds-accent) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface-alt) !important;
}
.callout .callout-title,
.callout-title-container {
  font-weight: 600 !important;
  color: var(--ds-ink) !important;
}

/* Bespoke deep-author note callouts (pc-<module>-note) carry hardcoded
   off-brand hues (e.g. steel-blue). Unify them onto the flat accent edge so
   they match the standard callouts and the module color. Scoped to true note
   boxes (ends/contains "-note"); does NOT touch figures, cards, or grids. */
#quarto-document-content [class*="-note"] {
  border: 1px solid var(--ds-line) !important;
  border-left: 4px solid var(--ds-accent) !important;
  background: var(--ds-surface-alt) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: none !important;
}
#quarto-document-content [class*="-note"] strong,
#quarto-document-content [class*="-note"] b,
#quarto-document-content [class*="-note"] .pc-pbd-note-title {
  color: var(--ds-ink) !important;
}

/* ---- Figures: centered, framed, AUTO-NUMBERED ------------------------- */
#quarto-document-content {
  counter-reset: ds-fig;
}
#quarto-document-content figure,
#quarto-document-content .pc-pbd-figure,
#quarto-document-content [class*="-figure"] {
  counter-increment: ds-fig;
}
#quarto-document-content figure {
  margin: 2rem auto !important;
  text-align: center;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
  padding: 1.1rem 1.1rem 0.5rem !important;
  background: var(--ds-surface) !important;
  max-width: 760px;
}
#quarto-document-content figure img,
#quarto-document-content figure svg {
  max-width: 100%;
  height: auto;
}
#quarto-document-content figcaption,
#quarto-document-content figure figcaption {
  color: var(--ds-ink-soft) !important;
  font-size: 0.92rem !important;
  line-height: 1.55;
  margin-top: 0.75rem !important;
  text-align: center !important;
}
#quarto-document-content figcaption::before {
  content: "Figure " counter(ds-fig) ". ";
  font-weight: 700;
  color: var(--ds-accent);
}

/* ---- Knowledge Check (<iot-knowledge-check>) -------------------------- */
/* Grey panel so the quiz reads as a distinct "do this" block; the answer
   options are WHITE cards that lift off the grey (clear tap targets). */
.inline-knowledge-check,
iot-knowledge-check.inline-knowledge-check {
  background: var(--ds-surface-alt) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: none !important;
}
/* Options are already white from the component — do NOT override their
   background (that would clobber the correct/incorrect feedback colors).
   Just a hairline border so each reads as a distinct white card on the grey,
   and an accent edge on hover. */
.inline-knowledge-check .ikc-option {
  border: 1px solid var(--ds-line) !important;
  box-shadow: none !important;
}
.inline-knowledge-check .ikc-option:hover {
  border-color: var(--ds-accent) !important;
}

/* ---- Tables: flat, clean ---------------------------------------------- */
#quarto-document-content table {
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
}
#quarto-document-content thead th {
  background: var(--ds-surface-alt) !important;
  color: var(--ds-ink) !important;
  border-bottom: 2px solid var(--ds-line-strong) !important;
}
#quarto-document-content td,
#quarto-document-content th {
  border-color: var(--ds-line) !important;
}

/* table-cell-midword-break (P2 visual-review sweep, 2026-07-22): Bootstrap's
   vendored table CSS already sets `overflow-wrap: break-word` on table
   cells, so a narrow column whose longest word doesn't fit its own line
   breaks mid-word with no hyphen mark ("Connectivity" -> "Connecti" /
   "vity"). Adding `hyphens: auto` (the site already sets lang="en" on
   <html>, which is what the browser's hyphenation dictionary keys off)
   turns that into a properly hyphenated break instead of a bare split.
   Purely cosmetic -- does not change *when* a cell wraps, only how the
   break is marked. Fixes every real <table> estate-wide in one rule. */
#quarto-document-content td,
#quarto-document-content th {
  hyphens: auto;
}

/* ---- Code: soft, flat -------------------------------------------------- */
#quarto-document-content pre,
#quarto-document-content code {
  background: var(--ds-surface-alt) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm) !important;
}

/* ---- Depth panels (<iot-depth> web component) ------------------------- */
/* The component (shadow DOM) reads these custom properties from its host.
   Feed it the MODULE color and a white/flat palette so the depth layers are
   white cards with a full solid accent LEFT rail (set in iot-depth.js). */
iot-depth {
  --part-color: var(--pc-main, #8e24aa); /* primary accent source */
  --module-color: var(--pc-main, #8e24aa); /* fallback accent source */
  --flat-surface: #ffffff; /* panel background = white */
  --flat-border: var(--ds-line); /* hairline frame */
  --flat-text: var(--ds-ink); /* readable body text */
  /* Override the layer surfaces: WHITE cards + a full solid module-color LEFT
     rail (subtle). These vars exist only here, so non-pilot modules keep the
     original tinted layers until the design is promoted globally. */
  --iot-depth-layer-bg: #ffffff;
  --iot-depth-layer-border: var(--ds-line);
  --iot-depth-layer-rail: var(--pc-main, #8e24aa);
}

/* ---- Right "On This Page" TOC: smart auto-rule ------------------------
   Depth-authored chapters put their real headings INSIDE the <iot-depth>
   component, so Quarto's right TOC is structurally near-empty (only trailing
   Summary / See Also). Detect those pages via :has(iot-depth) and hide the
   TOC + left-anchor the reading column. FLAT chapters (no <iot-depth>) keep
   their normal right TOC and the standard 3-column layout untouched.
   The depth selector (Overview/Practitioner/Under the Hood) is the real
   on-page nav for depth chapters, so nothing useful is lost. */
body:has(iot-depth) #quarto-margin-sidebar {
  display: none !important;
}
/* Content LEFT-anchored beside the sidebar at a fixed measure; freed right
   space becomes whitespace so the sidebar↔content gap stays CONSTANT at any
   window width (no gap that grows when you widen the browser). */
body:has(iot-depth) main.content,
body:has(iot-depth) .page-columns main.content {
  grid-column: body-content-start / page-end !important;
  justify-self: start !important;
  max-width: 50rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#quarto-margin-sidebar .sidebar-toc-link {
  color: var(--ds-ink-faint) !important;
}
#quarto-margin-sidebar .sidebar-toc-link.active {
  color: var(--ds-accent) !important;
  border-left-color: var(--ds-accent) !important;
}

#quarto-margin-sidebar nav#TOC a.active .header-section-number,
nav#TOC a.active .header-section-number {
  color: var(--ds-ink, #1f2937) !important;
}

/* ---- Right TOC width +60% (200px -> 320px) -----------------------------
   On FLAT chapters the right "On this page" rail was a cramped 200px grid
   track, so multi-word heading titles wrapped. Widen the [body-end] track to
   320px; the [body-content-start] 1fr content column absorbs the difference
   (no horizontal scroll). Depth chapters span content across this track, so
   they are unaffected. Mirrors iotclass.css's >=1100px docked grid exactly. */
@media (min-width: 1100px) {
  body.docked .page-columns {
    grid-template-columns:
      [screen-start] 0px
      [screen-start-inset page-start] 325px
      [page-start-inset] 0px
      [body-start-outset] 0px
      [body-start] 1.5rem
      [body-content-start] 1fr
      [body-content-end] 1.5rem
      [body-end] 320px
      [body-end-outset] 0px
      [page-end-inset] 0px
      [page-end] 0px
      [screen-end-inset] 1rem
      [screen-end] !important;
  }
}

/* ===========================================================================
   CHROME — make the top bar / banners elegant (module color as ACCENT, not bleed)
   =========================================================================== */
/* Top navbar: white, dark text, slim module-accent top stripe (Khan-style) */
.navbar,
#quarto-header > nav.navbar,
.navbar.navbar-expand-lg {
  background: #ffffff !important;
  background-image: none !important;
  border-top: 3px solid var(--ds-accent) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  box-shadow: none !important;
}
.navbar .navbar-title,
.navbar .navbar-brand,
.navbar a,
.navbar .nav-link,
.navbar .menu-text,
.navbar-brand-container,
.navbar .quarto-navbar-tools a {
  color: var(--ds-ink) !important;
}
.navbar a:hover,
.navbar .nav-link:hover,
.navbar .navbar-brand:hover {
  color: var(--ds-accent) !important;
}
.navbar #quarto-search input,
.navbar .aa-Input,
.navbar .aa-DetachedSearchButton {
  background: var(--ds-surface-alt) !important;
  color: var(--ds-ink-soft) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 999px !important;
}
.navbar .navbar-logo {
  filter: none !important;
}

/* The real iotclass top bar (.iotclass-user-status): color-coded to the module,
   but dark enough that white search/status text stays WCAG AA even on frosted
   controls. JS sets an inline accent; this override keeps it flat and legible. */
.iotclass-user-status {
  background: color-mix(in srgb, var(--ds-accent) 50%, black) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-top: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-accent) 42%, black) !important;
  box-shadow: none !important;
}
.iotclass-user-status a,
.iotclass-user-status span,
.iotclass-user-status .menu-text,
.iotclass-user-status button,
.iotclass-user-status .nav-link,
.iotclass-user-status .navbar-title,
.iotclass-user-status .navbar-brand {
  color: #ffffff !important;
}
.iotclass-user-status a:hover,
.iotclass-user-status button:hover {
  color: #ffffff !important;
  opacity: 0.82;
}
/* status chip ("Guest" etc.): frosted white pill on the colored bar */
.iotclass-user-status .user-badge,
.iotclass-user-status [class*="badge"],
.iotclass-user-status [class*="status-chip"] {
  background: #ffffff !important;
  color: #1f2933 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
}

.iotclass-user-status .user-status-badge .status-icon,
.iotclass-user-status .user-status-badge .status-text,
.iotclass-user-status .user-status-badge .status-text strong {
  color: #1f2933 !important;
}
/* search affordance: frosted on the colored bar */
.iotclass-user-status #quarto-search input,
.iotclass-user-status .aa-DetachedSearchButton {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
}
.iotclass-user-status #quarto-search input::placeholder,
.iotclass-user-status .aa-DetachedSearchButton .aa-DetachedSearchButtonPlaceholder {
  color: rgba(255, 255, 255, 0.82) !important;
}
.navbar .aa-DetachedSearchButton {
  background: var(--ds-surface-alt) !important;
  color: var(--ds-ink-soft) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 999px !important;
}

.iotclass-user-status .module-bar-search {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #1f2933 !important;
}

.iotclass-user-status .module-bar-search .module-bar-search-label,
.iotclass-user-status .module-bar-search .bi,
.iotclass-user-status .module-bar-search kbd {
  color: #1f2933 !important;
}

.iotclass-user-status .module-bar-search kbd {
  background: #eef2f7 !important;
  border-color: #cbd5e1 !important;
}

/* Last-updated banner: subtle, not bright yellow */
#last-edited-banner,
.last-edited-banner,
.content-update-banner {
  background: var(--ds-surface-alt) !important;
  background-image: none !important;
  color: var(--ds-ink-soft) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
#last-edited-banner a {
  color: var(--ds-ink-soft) !important;
}

/* Sidebar header: clean title in accent, no filled block */
#quarto-sidebar .sidebar-title,
.sidebar-title,
.sidebar-header,
#quarto-sidebar .sidebar-header,
.sidebar-part-title {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--ds-accent) !important;
  border: none !important;
}
.sidebar-part-title {
  font-weight: 700 !important;
  padding: 0.4rem 0.25rem 0.8rem !important;
  font-size: 0.95rem !important;
}

/* Sidebar items: clean white, module-accent only on hover/active */
#quarto-sidebar .sidebar-item a[data-pc],
#quarto-sidebar .sidebar-item-section[data-pc-section] {
  background: transparent !important;
  background-image: none !important;
  color: var(--ds-ink-soft) !important;
  box-shadow: none !important;
}
#quarto-sidebar .sidebar-item a[data-pc]:hover {
  background: color-mix(in srgb, var(--ds-accent) 7%, white) !important;
  color: var(--ds-accent) !important;
}
#quarto-sidebar .sidebar-item a[data-pc].active {
  background: color-mix(in srgb, var(--ds-accent) 11%, white) !important;
  color: var(--ds-accent) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--ds-accent) !important;
  border-radius: 6px !important;
}
/* Sidebar SECTION headers: iotclass.css fills these with the section --pc-main
   (a solid colour block + white text). On sectioned modules that stacks into a
   "wall of colour" (very heavy on the red families). Flatten to a clean
   Khan-style label: no fill, the section name in the module colour, uppercase.
   Colour-coding stays (top bar + coloured labels); the heaviness is gone. */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > .sidebar-item-text,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > a.sidebar-link,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .menu-text {
  color: color-mix(in srgb, var(--pc-main, var(--ds-accent)) 58%, black) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.74rem !important;
}
/* section toggle / chevron: muted ink, not white-on-fill */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-toggle,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container i.bi,
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .chevron-icon {
  color: var(--ds-ink-faint) !important;
  background: transparent !important;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container:hover {
  background: color-mix(in srgb, var(--pc-main, var(--ds-accent)) 7%, white) !important;
}

#quarto-sidebar .sidebar-part-title,
#quarto-sidebar .sidebar-title,
.sidebar-part-title,
.sidebar-title {
  color: color-mix(in srgb, var(--pc-main, var(--ds-accent)) 58%, black) !important;
}

/* the feedback FAB: keep but flatten */
.feedback-fab,
#feedback-button,
.feedback-button {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* ===========================================================================
   COMPONENT PACK PILOT — section depth, quiet code, panels, KC chrome
   =========================================================================== */

.iot-section-depth-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #f7f8fa;
}

.iot-section-depth-toggle__heading {
  display: grid;
  min-width: 10.5rem;
  flex: 0 0 auto;
  gap: 2px;
}

.iot-section-depth-toggle__kicker {
  color: #3f4f5f;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.iot-section-depth-toggle__prompt {
  color: var(--ds-ink);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.2;
}

.iot-section-depth-toggle__controls {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.iot-section-depth-toggle__button {
  display: inline-flex;
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 12.25rem;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid #b8c2cc;
  border-radius: 8px;
  padding: 7px 10px;
  background: #ffffff;
  color: var(--ds-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.iot-section-depth-toggle__button[aria-pressed="true"] {
  border-color: #435563;
  background: #435563;
  color: #ffffff;
}

.iot-section-depth-toggle__button[aria-disabled="true"] {
  border-color: #ccd4dc;
  background: #f2f4f7;
  color: #71808d;
  cursor: not-allowed;
  opacity: 0.82;
}

.iot-section-depth-toggle__button:not([aria-pressed="true"]):not([aria-disabled="true"]):hover {
  border-color: #8795a1;
  background: #eef2f5;
}

.iot-section-depth-toggle__icon,
.iot-section-depth-current__icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
}

.iot-section-depth-toggle__icon svg,
.iot-section-depth-current__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iot-section-depth-toggle__text,
.iot-section-depth-current__text {
  display: grid;
  gap: 1px;
  min-width: 0;
  white-space: nowrap;
}

.iot-section-depth-toggle__text strong,
.iot-section-depth-current__text strong {
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: normal;
  word-break: keep-all;
}

.iot-section-depth-toggle__text span,
.iot-section-depth-current__text span {
  color: currentColor;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
  opacity: 0.82;
  overflow-wrap: normal;
  word-break: keep-all;
}

.iot-section-depth-toggle__button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 28%, transparent);
  outline-offset: 2px;
}

.iot-section-depth-current {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  margin: 0 0 0.9rem;
  color: #435563;
  font-size: 0.86rem;
  line-height: 1.2;
}

body.iot-toc-hidden #quarto-margin-sidebar {
  display: none !important;
}

body.iot-toc-hidden main.content,
body.iot-toc-hidden .page-columns main.content {
  grid-column: body-content-start / page-end !important;
  justify-self: start !important;
  max-width: 50rem !important;
}

body.nav-sidebar.docked:has(iot-depth):not(.iotclass-homepage):not(.iotclass-modules-landing)
  main.content,
body.nav-sidebar.docked:has(iot-depth):not(.iotclass-homepage):not(.iotclass-modules-landing)
  main.content.column-body {
  grid-column: body-content-start / page-end !important;
  justify-self: start !important;
  width: 100% !important;
  max-width: 50rem !important;
}

#quarto-margin-sidebar [data-iot-toc-entry-hidden="true"] {
  display: none !important;
}

main.content div.sourceCode,
main.content pre,
#quarto-document-content div.sourceCode,
#quarto-document-content pre {
  /* Founder 2026-07-09 (07-09u): code reads best on a crisp WHITE box with a light border. */
  border: 1px solid var(--ds-line-strong) !important;
  border-left: 1px solid var(--ds-line-strong) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

#quarto-document-content div.sourceCode {
  position: relative;
  overflow: auto !important;
}

#quarto-document-content div.sourceCode::before {
  content: attr(data-code-lang);
  position: sticky;
  top: 0.45rem;
  left: 0.6rem;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  margin: 0.45rem 0 0 0.55rem;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  background: #ffffff;
  color: var(--ds-ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#quarto-document-content div.sourceCode pre {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0.45rem 1rem 1rem !important;
}

#quarto-document-content pre > code.sourceCode {
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: pre !important;
}

#quarto-document-content pre,
#quarto-document-content pre code {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#quarto-document-content .code-copy-button {
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--ds-ink-soft) !important;
}

#quarto-document-content .callout div.sourceCode,
#quarto-document-content [data-iot-panel-category] div.sourceCode {
  /* Inside a panel the code box stays a WHITE light-bordered box (single light
     frame — the panel provides the color, the code box provides contrast). */
  border: 1px solid var(--ds-line-strong) !important;
  border-left: 1px solid var(--ds-line-strong) !important;
  border-radius: 6px !important;
  background: var(--ds-surface) !important;
}

#quarto-document-content .callout div.sourceCode pre,
#quarto-document-content [data-iot-panel-category] div.sourceCode pre {
  border: 0 !important;
  background: transparent !important;
}

#quarto-document-content .callout div.sourceCode::before,
#quarto-document-content [data-iot-panel-category] div.sourceCode::before {
  background: #ffffff;
}

details.iot-code-disclosure {
  margin: 1rem 0 1.25rem;
  border: 0 !important;
  background: transparent !important;
}

details.iot-code-disclosure > summary {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2rem;
  border: 0;
  border-radius: 6px;
  padding: 0.15rem 0.25rem;
  color: var(--ds-ink-soft);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.3;
}

details.iot-code-disclosure > summary:hover {
  color: var(--ds-accent);
  background: color-mix(in srgb, var(--ds-accent) 7%, white);
}

details.iot-code-disclosure[open] > summary {
  margin-bottom: 0.55rem;
}

[data-iot-panel-category="game"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="simulation"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="animation"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="foundation"] {
  --iot-panel-accent: #5c6873;
  --iot-panel-tint: #eef1f3;
}

[data-iot-panel-category="lab"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="hardware"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

[data-iot-panel-category="check"] {
  --iot-panel-accent: var(--pc-main, var(--ds-accent));
}

#quarto-document-content .callout[data-iot-panel-category],
#quarto-document-content section[data-iot-panel-category] {
  border: 1px solid color-mix(in srgb, var(--iot-panel-accent) 24%, var(--ds-line)) !important;
  border-left: 4px solid var(--iot-panel-accent) !important;
  background: var(
    --iot-panel-tint,
    color-mix(in srgb, var(--iot-panel-accent) 10%, white)
  ) !important;
}

.iot-panel-icon {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  place-items: center;
  margin-right: 0.45rem;
  color: var(--iot-panel-accent, var(--ds-accent));
  vertical-align: -0.25rem;
}

.iot-panel-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iot-lab-identity-band {
  --iot-lab-accent: #0f766e;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin: 0.25rem 0 1.35rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--iot-lab-accent) 22%, var(--ds-line));
  border-left: 4px solid var(--iot-lab-accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--iot-lab-accent) 9%, white);
  color: var(--ds-ink);
}

.iot-lab-identity-band__label,
.iot-lab-identity-band__chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.iot-lab-identity-band__label {
  color: var(--iot-lab-accent);
  font-size: 0.92rem;
  font-weight: 800;
}

.iot-lab-identity-band__icon,
.iot-lab-nav-icon,
.iot-lab-collection-nav-icon,
.iot-nav-icon,
.iot-toc-nav-icon {
  --iot-nav-icon-color: #475569;
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--iot-nav-icon-color, var(--iot-lab-accent, #0f766e));
}

.iot-lab-identity-band__icon svg,
.iot-lab-nav-icon svg,
.iot-lab-collection-nav-icon svg,
.iot-nav-icon svg,
.iot-toc-nav-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iot-nav-icon--lab {
  --iot-nav-icon-color: var(--iot-lab-accent, #0f766e);
}

.iot-nav-icon--quiz {
  --iot-nav-icon-color: #475569;
}

.iot-nav-icon--map {
  --iot-nav-icon-color: #2563eb;
}

.iot-nav-icon--page {
  --iot-nav-icon-color: #94a3b8;
}

.iot-lab-chip {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  padding: 0.16rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--iot-lab-accent) 24%, var(--ds-line));
  border-radius: 999px;
  background: white;
  color: color-mix(in srgb, var(--iot-lab-accent) 72%, var(--ds-ink));
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
}

.iot-lab-chip--advanced {
  border-color: color-mix(in srgb, var(--iot-lab-accent) 42%, var(--ds-line));
  background: color-mix(in srgb, var(--iot-lab-accent) 14%, white);
  color: #0b5c54;
}

#quarto-sidebar a.iot-lab-nav-link,
.sidebar a.iot-lab-nav-link,
#quarto-sidebar a.iot-lab-collection-nav-link,
.sidebar a.iot-lab-collection-nav-link,
#quarto-sidebar a.iot-nav-link,
.sidebar a.iot-nav-link,
#quarto-margin-sidebar a.iot-toc-nav-link,
#TOC a.iot-toc-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#quarto-margin-sidebar a.iot-toc-nav-link,
#TOC a.iot-toc-nav-link {
  gap: 0.25rem;
}

#quarto-sidebar a.iot-lab-collection-nav-link,
.sidebar a.iot-lab-collection-nav-link {
  --iot-lab-accent: #0f766e;
}

@media (max-width: 640px) {
  .iot-lab-identity-band {
    align-items: flex-start;
  }

  .iot-lab-identity-band__chips {
    width: 100%;
  }
}

#quarto-document-content
  .callout[data-iot-panel-category]
  .callout-icon-container[data-iot-panel-suppressed="true"] {
  display: none !important;
}

#quarto-document-content .iot-panel [style*="border-left"],
#quarto-document-content .callout [style*="border-left"],
#quarto-document-content .iot-panel [data-iot-panel-nested-bar-suppressed="true"],
#quarto-document-content .callout [data-iot-panel-nested-bar-suppressed="true"] {
  border-left: 0 !important;
  border-left-width: 0 !important;
  border-left-color: transparent !important;
}

#quarto-document-content
  .callout:has(
    :where(iot-knowledge-check, iot-matching-quiz, iot-ordering-quiz, iot-label-quiz, iot-code-quiz)
  ),
#quarto-document-content
  section.callout-question:has(
    :where(iot-knowledge-check, iot-matching-quiz, iot-ordering-quiz, iot-label-quiz, iot-code-quiz)
  ) {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.iot-kc-group-label {
  margin: 1.2rem 0 0.45rem !important;
  color: var(--ds-ink);
  font-size: 0.92rem;
  font-weight: 800;
}

iot-knowledge-check,
iot-matching-quiz,
iot-ordering-quiz,
iot-label-quiz,
iot-code-quiz,
iot-knowledge-check.iot-kc-standard,
iot-matching-quiz.iot-assessment-standard,
iot-ordering-quiz.iot-assessment-standard,
iot-label-quiz.iot-assessment-standard,
iot-code-quiz.iot-assessment-standard,
iot-knowledge-check.inline-knowledge-check,
iot-knowledge-check.inline-knowledge-check.iot-kc-standard,
.iot-quiz-matching.iot-assessment-standard,
.iot-quiz-ordering.iot-assessment-standard,
.iot-quiz-label.iot-assessment-standard,
.iot-quiz-code.iot-assessment-standard {
  /* Founder 2026-07-09 (§9.6 v1.3): Knowledge Checks are NEUTRAL GREY site-wide —
     module color is reserved for explore panels. */
  --iot-kc-accent: var(--ds-ink-faint, #7b8794);
  --iot-kc-accent-strong: color-mix(in srgb, var(--iot-kc-accent) 55%, black);
  --iot-kc-accent-tint: color-mix(in srgb, var(--iot-kc-accent) 8%, white);
  --iot-kc-line: color-mix(in srgb, var(--iot-kc-accent) 22%, var(--ds-line));
  display: block;
  margin: 1.05rem 0 1.25rem;
  border: 1px solid var(--iot-kc-line) !important;
  border-left: 4px solid var(--iot-kc-accent) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--iot-kc-accent-tint) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.iot-assessment-standard :where(.ikc-header, .imq-header, .ioq-header, .ilq-header, .icq-header) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  padding: 0.72rem 0.95rem !important;
  background: var(--iot-kc-accent-tint) !important;
  color: var(--ds-ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--iot-kc-line) !important;
  border-radius: 0 !important;
}

.iot-assessment-standard
  :where(.ikc-icon, .imq-icon, .ioq-icon, .ilq-icon, .icq-icon).iot-assessment-family-icon,
.iot-assessment-variant-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--iot-kc-accent-strong) !important;
  color: #ffffff !important;
}

.iot-assessment-standard
  :where(.ikc-icon, .imq-icon, .ioq-icon, .ilq-icon, .icq-icon).iot-assessment-family-icon
  svg,
.iot-assessment-variant-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iot-assessment-standard :where(.ikc-title, .imq-title, .ioq-title, .ilq-title, .icq-title) {
  flex: 0 0 auto !important;
  color: var(--ds-ink) !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.iot-assessment-variant {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 12rem;
  color: var(--ds-ink-soft);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.25;
}

.iot-assessment-variant-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.iot-assessment-standard :where(.ikc-xp, .imq-xp, .ioq-xp, .ilq-xp, .icq-xp) {
  margin-left: auto !important;
  background: #ffffff !important;
  color: var(--iot-kc-accent-strong) !important;
  border: 1px solid var(--iot-kc-line) !important;
  border-radius: 999px !important;
  padding: 0.2rem 0.58rem !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.iot-assessment-standard .icq-lang {
  background: #ffffff !important;
  color: var(--iot-kc-accent-strong) !important;
  border-color: var(--iot-kc-line) !important;
}

.iot-assessment-standard
  :where(.ikc-instruction, .imq-instruction, .ioq-instruction, .ilq-instruction, .icq-instruction) {
  color: var(--ds-ink-soft) !important;
}

.iot-child-links {
  margin: 1.6rem 0 !important;
  border: 1px solid color-mix(in srgb, var(--ds-accent) 22%, var(--ds-line));
  border-left: 4px solid var(--ds-accent);
  border-radius: var(--ds-radius-sm);
  padding: 1rem 1.05rem;
  background: color-mix(in srgb, var(--ds-accent) 8%, white);
}

.iot-child-links > h2,
.iot-child-links > h3,
.iot-child-links > h4 {
  margin-top: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.iot-child-links > h2::after,
.iot-child-links > h3::after,
.iot-child-links > h4::after {
  content: none !important;
}

.iot-child-links ul {
  display: grid;
  gap: 0.6rem;
  max-width: none !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.iot-child-links li {
  position: relative;
  max-width: none !important;
  padding-left: 1.65rem;
}

.iot-child-links li::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0.2rem;
  width: 0.62rem;
  height: 0.62rem;
  border-top: 2px solid var(--ds-accent);
  border-right: 2px solid var(--ds-accent);
  transform: rotate(45deg);
}

#quarto-document-content .observablehq [style*="color:#3498DB"],
#quarto-document-content .observablehq [style*="color: #3498DB"],
#quarto-document-content .observablehq [style*="color:#3498db"],
#quarto-document-content .observablehq [style*="color: #3498db"] {
  color: #1d5f8f !important;
}

#quarto-document-content .observablehq [style*="color:#7F8C8D"],
#quarto-document-content .observablehq [style*="color: #7F8C8D"],
#quarto-document-content .observablehq [style*="color:#7f8c8d"],
#quarto-document-content .observablehq [style*="color: #7f8c8d"] {
  color: #52606d !important;
}

#quarto-document-content .observablehq [style*="color:#E67E22"],
#quarto-document-content .observablehq [style*="color: #E67E22"],
#quarto-document-content .observablehq [style*="color:#e67e22"],
#quarto-document-content .observablehq [style*="color: #e67e22"] {
  color: #9a4d00 !important;
}

#quarto-document-content .observablehq [style*="color:#16A085"],
#quarto-document-content .observablehq [style*="color: #16A085"],
#quarto-document-content .observablehq [style*="color:#16a085"],
#quarto-document-content .observablehq [style*="color: #16a085"] {
  color: #0b6f5f !important;
}

@media (max-width: 1280px) and (min-width: 761px) {
  .iot-section-depth-toggle {
    align-items: stretch;
    flex-direction: column;
  }

  .iot-section-depth-toggle__controls {
    justify-content: stretch;
  }

  .iot-section-depth-toggle__button {
    max-width: none;
  }
}

@media (max-width: 760px) {
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content,
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    .page-columns
    main.content,
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content,
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-columns main.content,
  body.iot-section-depth-ready main.content,
  body.iot-section-depth-ready .page-columns main.content {
    grid-column: screen-start / screen-end !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-right: 0.85rem !important;
    padding-left: 0.85rem !important;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-document-content,
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-document-content,
  body.iot-section-depth-ready #quarto-document-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .iot-section-depth-toggle {
    align-items: stretch;
    flex-direction: column;
  }

  .iot-section-depth-toggle__controls {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .iot-section-depth-toggle__button {
    flex: 1 1 8rem;
    max-width: none;
  }
}

#quarto-sidebar a.iot-nav-link,
.sidebar a.iot-nav-link,
#quarto-margin-sidebar a.iot-toc-nav-link,
#TOC a.iot-toc-nav-link {
  display: inline-flex !important;
  align-items: flex-start;
  gap: 0.35rem;
}

#quarto-margin-sidebar a.iot-toc-nav-link,
#TOC a.iot-toc-nav-link {
  gap: 0.25rem;
}

#quarto-sidebar a.iot-nav-link > .menu-text,
.sidebar a.iot-nav-link > .menu-text,
#quarto-margin-sidebar a.iot-toc-nav-link > .menu-text,
#TOC a.iot-toc-nav-link > .menu-text {
  flex: 1 1 auto;
  min-width: 0;
}

#quarto-sidebar a.iot-nav-link--map,
.sidebar a.iot-nav-link--map {
  width: calc(100% - 0.55rem) !important;
  margin-left: 0.55rem !important;
}

/* ---- Mermaid post-render class mirror (fixes estate-wide label clipping,
   P2 visual-review sweep 2026-07-22, 8/8 Mermaid chapters affected) --------
   Root cause: Quarto's stock runtime (site_libs/quarto-diagram/mermaid-init.js)
   renders each `<pre class="mermaid mermaid-js">` in place, then DELETES that
   wrapper and reattaches the finished `<svg>` as a bare sibling carrying only
   the "mermaid-js" class -- never "mermaid". Every `.mermaid ...` rule in
   iotclass.css therefore only matches during Mermaid's brief internal
   label-measurement pass (while the svg is still momentarily nested inside
   the .mermaid wrapper) and silently stops matching at final paint: labels
   revert to Mermaid's own generic "default" theme (Trebuchet MS 16px,
   #ECECFF/#9370DB lavender) instead of the site's 14px Source Sans 3 / teal
   theme. Because each node's box is sized from the (smaller, 14px) measured
   text but the label then paints at the larger reverted 16px, text overflows
   its box -- mid-word clipping with no ellipsis, identical at every viewport
   width (confirmed via live DOM inspection: post-render `svg.className` is
   "flowchart mermaid-js", no "mermaid" class survives).
   Fix: mirror every iotclass.css `.mermaid ...` rule onto the post-swap
   `.mermaid-js` class so paint-time styling matches measurement-time styling
   again. This is additive (does not touch iotclass.css) and loads after it,
   so it wins the cascade without needing higher specificity. */
.mermaid-js {
  font-size: 16px !important;
  max-width: 100%;
  height: auto;
  min-height: 300px;
  background: var(--iot-foam);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--iot-shadow-md);
  margin: 2rem 0;
  overflow-x: auto;
}

.mermaid-js .nodeLabel,
.mermaid-js .edgeLabel,
.mermaid-js .label,
.mermaid-js text {
  font-size: 14px !important;
  font-family:
    "Source Sans 3",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  fill: var(--iot-text-dark) !important;
}

.mermaid-js .cluster-label text,
.mermaid-js .cluster text {
  font-size: 16px !important;
  font-weight: 600 !important;
  fill: var(--iot-midnight) !important;
}

.mermaid-js .node rect,
.mermaid-js .node circle,
.mermaid-js .node polygon {
  fill: var(--iot-cloud) !important;
  stroke: var(--iot-azure) !important;
  stroke-width: 2px !important;
}

.mermaid-js .cluster rect {
  fill: var(--iot-sand) !important;
  stroke: var(--iot-border) !important;
  stroke-width: 1px !important;
  rx: 8px;
  ry: 8px;
}

.mermaid-js .edgePath .path {
  stroke: var(--iot-navy) !important;
  stroke-width: 2px !important;
}

.mermaid-js .arrowheadPath {
  fill: var(--iot-navy) !important;
}